WooCommerce Product Photos - Zoom Effect Issue

coltrucker

Hello, on my website I want the single product page images to zoom so you can look around the product image better. However, it seems to be two glitches on the page.

• The main product image goes transparent when you try to hover.
• And the thumbnail image zooms in, but it duplicates itself.

I believe I have all the Betheme settings inputted correctly for the zoom effect. I have it turned on in BeTheme Options, as well as the in the product template editor.

Here's a link to the product page: https://kaemarkdraft.com/product/metro-american-made-barber-station-bebuilder/

I was also able to replicate the thumbnail issue on one of the Betheme demo websites, please see: https://themes.muffingroup.com/betheme-store2/product/beheadphones1/

Thank you for your assistance.

Phil

Hi,

1) Your image is too small, so it cannot be zoomed and the issue with transparency occurs. Please, upload the image in higher resolution.

2) I will report it to the dev team. For now, please, use the following CSS code:

.woocommerce-page div.product div.images:hover img{
 opacity: 0;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next