Product Images – Zoom effect Issue

Resolved sophie2e
(@sophie2e)

2 years, 6 months ago

Hello team Woocommerce,

I notice an issue on my website with the product images on product pages. I check it out on a staging website with a default template and no plugin activated except woocommerce; I am also facing an issue with the zoom effect that does not work on half of the images as you can see in this video: https://posimyth.vmaker.com/record/9vn22jwQPech2i33

Could you please check it out on your side and if you have the same issue, report it to your devs team, and if not, help me solve this issue on my site?

Thanks a lot for your help,
Kind regards,
Sophie

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

Narmeen Mohammed
(@narmeen1it)

2 years, 6 months ago
you need to put this css code
```
/* Zoom effect on hover */
.product-image:hover {
  transform: scale(1.2); /* Adjust the scale value as per your preference */
  transition: transform 0.3s ease; /* Adjust the transition duration as per your preference */
}

/* Reset the scale on non-hover state */
.product-image {
  transition: transform 0.3s ease; /* Adjust the transition duration as per your preference */
}
```
and disable zoom image effect from the sittings on the theme that u use ,

To implement this code in your WordPress theme, you can follow these steps:
1. In your WordPress admin panel, go to Appearance -> Customize.
2. Select the “Additional CSS” option from the sidebar.
3. Paste the above CSS code into the provided text box.
4. Save the changes.
Remember to adjust the transform and transition values in the code to achieve the desired zoom effect and transition speed.
Thread Starter sophie2e
(@sophie2e)

2 years, 6 months ago
Hello there,

Thanks for your reply. I tried to add your CSS code but it changed nothing so I deleted it. Please review this other video that shows the issue on my website and on another website with no plugin activated and a default template: https://share.vidyard.com/watch/6NFdfTYXN4XqApxuZST81N?

I am using The Plus Addons Elementor to display the product image, and thought the issue was coming from their plugin, but even if we don’t use The Plus Addons and instead use the default woocommerce product image widget, there is a difference between the feature image zoom and other images which do not have the zoom effect: https://posimyth.vmaker.com/record/9vn22jwQPech2i33

And that is why The Plus Addons Elementor plugin told me to contact you as there is a deeper issue in WooCommerce according to them. I also tried with the Elementor product image widget, and was facing the exact same issue as when I am using the Plus Addons.

Waiting for your news,
Kind regards,
Sophie
- This reply was modified 2 years, 6 months ago by sophie2e.
Narmeen Mohammed
(@narmeen1it)

2 years, 6 months ago

change the theme I advice you to use Kadence theme

https://wordpress.org/themes/kadence/

Thread Starter sophie2e
(@sophie2e)

2 years, 6 months ago

Hello,

Still same issue with this theme: https://share.vidyard.com/watch/PZgf9kummz2fQrs2MmgyGC?

It is the same problem with all themes I tried so changing the theme is not a solution.

Waiting for your news,
Regards,
Sophie

Plugin Support wpnomad a11n
(@wpnomad)

2 years, 6 months ago

Hi @sophie2e ,

I checked the issue you’re experiencing on your store, we were not able to replicate it on our test sites.

On your site, I see a lot of 400 errors when accessing admin-ajax.php:

Full Size: https://d.pr/i/FKFJAz

It seems to be a conflict or due to an error on the server itself. Can you please perform a conflict test per the steps here? If issue persists, then I recommend reaching out to your web host to check if there are any enforced limitations on admin-ajax.php

Thread Starter sophie2e
(@sophie2e)

2 years, 5 months ago

Hello there,

The issue was not coming from the template as I showed you in various exemples previously.

But I discovered that Elementor was adding a lightbox for images with a resolution that was too small. So, by following the recommended image size of 800×800 as mentioned here: https://woocommerce.com/document/adding-product-images-and-galleries/#what-is-the-ideal-image-size-to-use-with-woocommerce, I was able to resolve the problem I was facing. I hope this information can be helpful to others as well.

Kind regards,
Sophie

Beauty of Code (woo-hc)
(@beautyofcode)

2 years, 5 months ago

Hi Sophie,

Glad to hear that you managed to get this sorted!

Also, thanks for sharing what resolved the issue for you. This may indeed be helpful for others that may be experiencing this same issue 🙂

Since this has been resolved, feel free to create a new topic if you need any further help.

Also, if you have a minute, we’d love it if you could leave us a review:

https://wordpress.org/support/plugin/woocommerce/reviews/

Cheers!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Product Images – Zoom effect Issue’ is closed to new replies.