Woocommerce 3.x 图片交换 "On Hover" 大拇指

Question

有点挣扎我想请我的堆栈研究员的帮助。

单个产品页面：有谁知道在 Thumbnails 上将 "on click" 事件更改为 "on hover + on click (for a responsive purpose)" 的技巧吗？

我知道这是一个反复出现的问题，但它似乎自 WooCommerce 的 de 3.0 以来已被弃用。

看来我必须更改FlexSlider js中的功能，但是我找不到这个位置。

如果有帮助，我正在使用 "Atelier theme"。

也可以在那里找到我的网站：https://unisashoes.com.au/product/wikera-ks/

干杯

Answer 1

我终于弄清楚了，只需在悬停时触发 li 上的 click 事件即可。

我还添加了一个 jQuery(document).ready(function($) { 因为使用 jQuery.noConflict(); 如果不是，则 $ 未定义。

jQuery(document).ready(function($) {
    $(window).load(function() {
      $('.flexslider').flexslider({
        animation: "slide",
        controlNav: "thumbnails",
        start: function (){
        }
      });

      $(".flex-control-thumbs li img").hover(function(){
        $(this).click();
      });
    });
});

Woocommerce 3.x 图片交换 "On Hover" 大拇指

Woocommerce 3.x image swap "On Hover" thumbs

javascript

flexslider

woocommerce