Tagged: , , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 9, 2022 at 6:55 pm #1375716
    audreyweddingsalon

    Hi, since several days I’m working on these issues and it’s very confusing: After Woocommerce and Enfold updates I found that images in Product Gallery and in Product images don’t look sharp. It turned out that the images are smaller than before. In addition, new added media is shown as square images in Product Gallery, but portrait format 2:3 was expected.
    After some research I found that the product gallery behavior changed when I update Woocommerce from 6.4.0 to the current 7.1.1.

    I’m using the Enfold Gallery, not the Woocommerce Gallery.

    With Woocommerce 6.4.0, I see sharp gallery pictures of size 1200×1800, although 600×900 (Default) was set in Enfold Product Gallery settings. There seem to be several places (Media Settings, Woocommerce Customizer, Enfold product gallery settings) where the Product gallery picture size can be set.

    After the update to Woocommerce 7.1.0 the gallery pictures are shown in size 600×900. . Another issue is that I get square gallery previews if new pictures are added to the media. The “square” issue was reported by other users in the Enfold forum, too. I fixed that issue by changing the Enfold Product Gallery image size to 900×1350, which seems to be the new Woocommerce default size. After that change the Gallery is fine and new pictures are added in portrait mode, too.

    But the Product images are still too small. After some research I found that class=”lightbox-added” is displaying the product image. With WC 6.4.0 the unscaled picture was referred in the href. With WC 7.1.1 now a picture size of 687×1030 shows up in the href. How can I change the picture size for the product image in Woocommerce lightbox? This product page should use relatively high resolution pictures as there is no other place where the customer can see higher resolutions of the product images.

    Many thanks,
    Sascha

    December 11, 2022 at 7:50 pm #1375872
    Mike

    Hey audreyweddingsalon,
    Thanks for the explanation and the link to your page, to change the product image link to the full size image try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function replace_product_image_with_full_size_image() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
    var lastOne = $('.single-product .woocommerce-product-gallery a').attr('data-srcset').split(',').pop().trim().split(' ')[0];
    $(".single-product .woocommerce-product-gallery a").attr('href', lastOne);
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'replace_product_image_with_full_size_image');

    It gets the last image in the data-srcset which is the original full size image.

    Best regards,
    Mike

    March 5, 2023 at 5:15 pm #1400172
    audreyweddingsalon

    Hi Mike,
    Many thanks. Unfortunately there is an issue.
    My single product has several images. After I added your code, each of the product images links to the same larger image. Please see link in private message.
    I think you code doesn’t acknowledge that there are several images for a single product.

    Could you check that, please?

    Best regards,
    Sascha

    March 5, 2023 at 5:30 pm #1400173
    audreyweddingsalon
    This reply has been marked as private.
    March 5, 2023 at 6:58 pm #1400177
    Mike

    Hi,
    Thanks for the feedback, if you are going to use the short pixel plugin, then please don’t use the script, it looks like the plugin is trying to change the images.
    I would recommend disabling this plugin and any other “optimizer” plugins until the core issue is solved.
    Then try going to WordPress ▸ Customizing ▸ WooCommerce ▸ Product Images and choosing Uncropped
    Enfold_Support_546.jpeg
    and then go to WooCommerce > Status > Tools > Regenerate shop thumbnails, and click the Regenerate button next to it.
    If this doesn’t help try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );
function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

    Then clear any cache plugins and any server cache and your browser cache.

    Best regards,
    Mike

    March 5, 2023 at 9:31 pm #1400200
    audreyweddingsalon

    Hallo Mike,

    ich habe alles so gemacht, wie Du geschrieben hast. Shortpixel Plugin habe ich abgeschaltet. Die Fehlermeldungen von Shortpixel werde ich mit der Shortpixel Firma direkt klären.

    Allerdings ändert das nichts daran, dass das Skript aus dem Chat leider nur das erste Produktfoto abgreift. Siehe Link. Obwohl es mehrere Fotos für das Woocommerce Single Product gibt, sieht man nur ein image, wenn man auf die Thumbnales klickt.

    March 5, 2023 at 10:01 pm #1400202
    Mike

    Hi,
    Please also disable the script, we will not use it, and then try going to WordPress ▸ Customizing ▸ WooCommerce ▸ Product Images and choosing Uncropped
    and then go to WooCommerce > Status > Tools > Regenerate shop thumbnails, and click the Regenerate button next to it.
    If this doesn’t help try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );
function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

    If you use the Woocommerce Gallery instead of the Enfold Gallery do you have the same issue?

    Best regards,
    Mike

    March 6, 2023 at 12:38 pm #1400235
    audreyweddingsalon

    I had a first good experiment using the Woocommerce 3.0 Gallery. Using this, the quality of the gallery thumbnails is higher and the single product images are of higher quality, too. It even has a magnification effect, which the Enfold gallery doesn’t have. I wonder why I picked the Enfold gallery in the past. Somehow I remember that the Enfold gallery had some advantages, but I can’t remember.

    I now deactivated the additional code, reactivated the cropping, switched to Woocommerce 3.0 gallery and regenerate Woocommerce thumbnails.

    If this works I could re-activate the Shortpixel Plugin again. Maybe it works more smooth combined with the Woocommerce 3.0 gallery.

    March 16, 2023 at 8:32 pm #1401448
    audreyweddingsalon

    Looks like it is working now.
    I upgraded PHP, WordPress, Woocommerce etc., then I switched to Woocommerce 3.0 gallery which now gives me high resolution single product images.
    I had to open ever gallery once in the Enfold editor and save it once, then the gallery thumbnails are automatically bigger in size.
    Regenerate thumbnails was not necessary.
    Thanks, you can close the ticket if you want.

    March 16, 2023 at 10:33 pm #1401454
    Mike

    Hi,
    Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Issues with Product Gallery image size and Product images size’ is closed to new replies.