woocommerce zoom image size

Hi @trmkr

Hmm… I’m not quite sure what you’re trying to achieve here exactly. The “zoomed” image (if you’re speaking about the hover effect) is the same file that’s shown inside the gallery. This cannot be changed, unfortunately.

Though, I will wait for your reply to see if I’m missing something ??

Thanks.

Hi Eduard,

Thank you for your reply. Yes, I mean hover effect for zoom. Since the original product image has bigger file size (1200px), I want to use a smaller one for zoom (1024px). I added below filter in my previous theme to set thumbnail size for zoom effect. Can I use it for Blocksy too?

add_filter( 'woocommerce_gallery_full_size', function( $size ) { return 'woocommerce_single'; } );

Best regards

• This reply was modified 2 years, 8 months ago by trmkr.

Hello @trmkr

No, unfortunately the zoom image cannot be changed right now. Like I said, this is the same file that’s loaded for the main gallery image, so this isn’t loading anything in addition to what the gallery outputs.

If you wish to control the size of the image that the gallery outputs, you can check out the Customiser -> Single Product -> Gallery Options -> Image Size section — https://ibb.co/YyChMHt

Hope this clears things up a bit.

Thanks.

Hello Eduard,

I already updated Customiser -> Single Product -> Gallery Options -> Image Size section as 1024px. However, zoom effect requires the original image size that I uploaded to media library.

Best regards

Hello @trmkr

So, you say that you’ve de-registered some thumbnail sizes? The core WordPress and WooCommerce software still require the original file to be on the server, so I’m not sure why you’ve done this exactly.

Hello Eduard,

Thank you for your reply. I reanalyzed my problem and discovered that it is not related to the zoom effect. Since my original images are ~1.6mb, I want to disable unnecessary downloading of full images as my original images are ~1.6MB each. I want to manage this with theme settings and without using image compression plugins.

https://ibb.co/zn2p33t

Best regards

• This reply was modified 2 years, 8 months ago by trmkr.

Hi @trmkr

I have just tested the flow on my end and the image is only loaded when the user hovers over the image. It does not affect the loading time of the page. Check this short video out — https://d.pr/v/sIw5f5. This is actually a smart behaviour, because Woo doesn’t load unnecessary assets until they’re needed.

As mentioned earlier, if you wish to optimise things a bit, the image size setting from Blocksy is recommended because this lets you control which assets are loaded when the page is loaded. In this way, no extra loading time is added to the page.

Hope this clears things up a bit.

Hello Eduard,

Thank you very much for your detailed explanation. The flow is much clearer now.

I think, the best way to reduce asset size is to use webp.

Best regards

Hello @trmkr

Yep, definitely. WebP is a more optimised format than JPEG. You can also try an app that compresses images, as 1.6MB JPEG files are pretty large. ??

Though I’m glad we’re on the same page now! ??

Have a great week!