WooCommerce Single product image hover Zoom blinking

user_6690797 0
Viewed 1200

I install the WooCommerce additional variation Image on my website and I lose hove zooming however I found one solution for that and added below code in function.php

add_action( 'after_setup_theme', 'yourtheme_setup' );

function yourtheme_setup() {
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
}

And hover zoom is working good only for one selected image once I changed to different then I am getting unexpected zooming like bliking.

If anyone has any solution please do help me. here is product link: https://www.fitspare.com/product/dymatize-elite-100-whey-protein-5-lbs/

woocommerce wordpress plugins php javascript
1 Answers

I know this is an old question but I faced the same issue today and did not find any help anywhere, so I thought this could help someone.

I tried disabling all plugins and the issue persisted. Then I changed the theme and the zoom/magnification was working correctly. Since I am using a child theme I first disabled the child theme to see if the issue is within the child or parent theme and found out that the parent theme was conflicting with woocommerce zoom functionality.

I have tried dequeuing all the javascript and css files one by one until I found the style that was causing the issue. Eventually I noticed that the parent theme had the below styling:

img{opacity:1;-webkit-transition:opacity .5s ease;-o-transition:opacity .5s ease;transition:opacity .5s ease}

In my child theme I overwrote that styling by including the below in my child theme stylesheet:

Option 1 (I added the 'body' in front of 'img' to be more specific and avoid the '!important') but this will disable transition on all images: body img {transition: none;}

Option 2 - this will only disable transition on images with class zoomImg: img.zoomImg {transition: none;}

user_24753580
Related