WooCommerce单一产品图像悬停缩放闪烁

Question

我在我的网站上安装了WooCommerce附加变体图像，我失去了缩放功能，但我找到了一个解决方案，并在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' );
}

悬停缩放只适用于一个选定的图像。一旦我换成不同的图像，我就会得到意想不到的缩放，比如闪烁。

如果有人有任何解决方案，请帮助我。这里是产品链接：https://www.fitspare.com/product/dymatize-elite-100-whey-protein-5-lbs/

Answer 1

我知道这是一个老问题，但我今天遇到了同样的问题，在任何地方都找不到任何帮助，所以我认为这可以帮助别人。

我尝试禁用所有插件，但问题仍然存在。然后我更改了主题，缩放/放大功能正常。由于我使用的是子主题，我首先禁用了子主题，以查看问题是否在子主题或父主题中，并发现父主题与wooccommerce缩放功能冲突。

我尝试过一个接一个地将所有javascript和css文件排成队列，直到找到导致问题的样式。最终，我注意到父主题具有以下样式：

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

在我的子主题中，我通过在子主题样式表中包含以下内容来覆盖该样式：

选项1(我在"img"前面添加了"body"，以更具体地避免使用"！important")，但这将禁用所有图像的转换：body img {transition: none;}

选项2-这将只禁用类zoomImg的图像转换：img.zoomImg {transition: none;}