samrgomes

Hey, Ben!
My apologies for the late reply.

Re using larger images: I don’t have larger images at the moment, but I understand it’d be a lot better this way.

The code above worked nicely!

Thank you for the excellent support and amazing theme!

Hey, Ben.

Actually, the zoom was working because I tweaked the Woo JS file to always display the zoom. I did this for tests purpose, and I believe it was cached, so you probably saw the zoom working there because of it. I reuploaded the original file and purged caches. You should check now that it’s not zooming.

Apparently, this is not related to a3 Lazy Load plugin, like the iPad issue was.

Hey, Ben. Thank you for the update.
I tested in iPad and it looks great! a3 Lazy Load is really the one causing it. I deactivated some plugins to test, in my local env, but I believe I skipped this one.

Tank you again.

Hey Ben.

Actually, the main image displayed in gallery (the big one) has 460 exactly, but WooCommerce won’t zoom it (the original image is 800 x 600, and this is the one that should appear in zoom) because the script does not use the actual gallery image size (the one with 460), but the “woocommerce-product-gallery” div size, and this div is 654.

Woo script then compares “600 > 654?”: No. So it won’t zoom it.
The correct comparison should be “600 > 460”.

Could you understand it? I can provide more details about it, or explain it another way, if it helps.

Any updates on the iPad issue?

Thanks!

Found the cause. The issue is that WooCommerce uses the “woocommerce-product-gallery” div’s width and compares it with the largest thumb for that image. It should only zoom if the largest image is larger than its container (by container, I mean the “woocommerce-product-gallery” div). The problem is that, since the thumbnails are displayed on the side of the featured image, it counts the thumbnails and featured image together as the container width.

Check the latest WooCommerce release. Find “woocommerce/assets/js/frontend/single-product.js”, row 192.

In my case (when checking the code above):
image.data( 'large_image_width' ) = 600
galleryWidth = 654 (that’s the “woocommerce-product-gallery” div)

But, if you check my image, it’s 460 in width. That should be counted as the container size, and image should be zoomed.

I hope I helped finding the solution for this issue, and, hopefully, Ascend can be updated to fix this.

Apparently, this is not related to the iPad issue.

If you need any more help, I’l be happy to assist you, Hannah.

Best regards.

• This reply was modified 6 years, 6 months ago by samrgomes.

I tested disabling some plugins.
It doesn’t make much sense some of the products showing the zoom, and some don’t. I checked that some products have the image tag with class “zoomImg”, and some don’t. What are the conditions to create this img tag?

I gotta try that, but it doesn’t make much sense that some products works ok, and other don’t.

A few functions in functions.php, some custom JS and CSS, and templates (no WC product templates, tho).

Email sent. Thank you.

Email sent. Thank you!

Hey Hannah.
I believe this is a Woo default feature. Under ‘Theme Options > Product Settings > Single Product Content Settings’ there’s an option “Enable woocommerce hover zoom for product gallery? (must be woocommerce 3.0+)”, and it’s enabled.

Hey Hannah.
They are being displayed in desktop and mobile browsers with no problems (even in “iPad mode” in Chrome’s desktop F12). Seems like a problem with iPads, more specifically. Any ideas on this one?

Is it possible to follow this via email with Kadence themes? I’ll need to share account credentials, since the Woo store is closed to subscribers only.

Is it possible to follow this via email with Kadence themes? I’ll need to share account credentials, since the Woo store is closed to subscribers only.

Resolved with solution above.