WooCommerce Product Photos - Zoom Effect Issue

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.

Comments

  • 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

Sign In or Register to comment.