[Resolved] WooCommerce questions (image zoom on hover and resizing)

[Shaun]

Hi Tom, Leo and David,

I’m testing out my WooCommerce product pages right now. The styling looks good thanks to David’s help from several hours ago. Now that I’ve finally uploaded images, there are a few more questions I have:

1. Can I enable the zoom effect on all images? The zoom is only enabled on the featured image.
2. The image window resizes when you select the different thumbnails. Can this be disabled? I would like for the image window’s size to be fixed, if possible.
3. When you click on one of the thumbnails, the whole thing gets highlighted in blue. Is there a way to prevent it from being highlighted, and have it bordered up when selected?

Thanks in advance for your assistance!

-Shaun

[David]

Hi Shaun

Point’s 1 and 2 are both related to images sizes and aspect ratios.
I would suggest uploading images with a 1:1 ratio (add white space around oblong images) at minimum 1200px. This will ensure the 600px product images will always be square and their’s extra pixels for the zoom to show (it works on all thumbnails if theres pixels to allow for it).

Point 3, don’t see that? Is that on the frontend?

[Shaun]

Hey David,

For (1), I don’t think the ability to zoom in is related to image size. It seems the zoom function is only for the Product Image; images that are uploaded as part of the Product Gallery can’t be zoomed in on. Any way we can enable zoom for images in the Product Gallery too? Just doesn’t feel right that you can only zoom in on the main Product Image, but not the rest of them.

For (2), resizing to 600px x 600px does fix the movement of the image window. However, I have about 200 images, and really can’t afford the time to resize all of them. Is there a way to set the viewing pane to a fixed size, with its background being completely white?

For (3), just realised this only happens with Firefox. On Chrome, the image doesn’t get highlighted. Never mind, we can revisit this problem later. I’m more concerned about #1 and #2 🙁

[David]

Hi Shaun,

unless you have another plugin that is affecting the woo gallery, the default behaviour is zoom on all images where a larger image is available. So you need to upload images at a larger size e.g 1200px for them to zoom in (this would be x2 zoom for the default 600px product image). You can see it in action here with Tom’s Seller Site:

https://gpsites.co/seller/product/happy-ninja-hoodie/

Personally, i would batch process all my images in PS or Affinity photo or whatever tools you have available, as the workarounds can be hit and miss. Alternatively if they are all the same height then this will also remove the issue, but what you may then experience is inconsistent thumbnails on the shop page.
If not you can try targeting the .flex-viewport and increasing the height property to cover the largest image, but this will lead to white space being added.

For the FF issue, check the console in the browser inspector for JS errors. It could be an issue with autoptimize cache, try clearing and if not remove the optimize JS option.

[Shaun]

Ah I see what you mean now with regard to sizing and zoom. I’m such a doofenshmirtz, I didn’t realise that one picture had max width of close to 1000px while the other was only at 600px. Anyway I’ll look to see if I can batch process the images in Photoshop. Never done it before, so I’m keeping my fingers crossed. Thanks once again David! 🙂

[David]

Ha ha, yes Woo is actually quite simple in its ways just not very well explained. It’s worth taking the time with getting the images right. Personally i keep them to 1200px – that way its even 50% reduction down from product and thumbnails. Can help reduce distortion of images.

[Shaun]

Got it. I didn’t realise there’d be so much to do, setting up my Woocommerce store. Glad you guys have my back 🙂

[David]

You’re welcome!

[Author]

Posts