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

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

我尝试禁用所有插件，问题仍然存在。然后，我更改了主题，并且缩放/放大倍数正常工作。由于我使用的是子主题，因此我首先禁用了子主题，以查看问题是否在子主题或父主题之内，并发现父主题与woocommerce缩放功能冲突。

我尝试将所有的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;}

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

1 个答案: