FlexSlider/WooCommerce 单一产品图片库：尝试从颜色选择器触发特色图片更改

Question

我正在建立一个 soon-to-be-launched WooCommerce 网站。我正在使用 https://wordpress.org/plugins/woo-variation-swatches/ 来管理产品的变体属性：所有产品都有颜色属性，有些还有尺寸属性 and/or lined/unlined 属性。

当用户单击颜色属性时，我希望主产品图像切换为显示该颜色的产品图像。（我不想为每张图片输入单独的变体 - 每个产品可能有几十个变体，维护起来会是一场噩梦。）我写了一些 jquery 来做到这一点，jquery 效果很好——直到所有其他属性都被 selected。因此，如果产品有颜色和尺码，则 jquery 在您单击颜色时起作用 - 只要尺码未被 select 编辑。一旦你 select 一个尺码，我的 jquery 什么都不做。例如，参见：https://liziheadwear.com/snoods/solid-chenille/. If a product only has color attribute, then the jquery does not work at all. For example, see: https://liziheadwear.com/snoods/multicolor-pearl/我花了好长时间排查问题，还是没能破解这个bug。我真的希望有人能帮助我！

代码如下：

jQuery(window).load(function(){
  if( jQuery('body').hasClass('single-product') ){
    jQuery('ul.image-variable-wrapper li').click(function(e) {
      var ttl = jQuery(this).attr("title");
      var i =jQuery(".woocommerce-product-gallery__image[data-thumb-alt='"+ttl+"']").index();
      jQuery('.woocommerce-product-gallery').flexslider(i);
      //alert("ttl:  "+ttl+"  i  "+i);  
    });
  }
});

现在，为了让它发挥作用，颜色属性的标题必须与主产品图片的 alt 相匹配。例如：对于颜色属性 "raspberry"，协调图像的替代文本为 "raspberry"。

我验证了在所有情况下都正确捕获了 ttl 和 i 值。并且 flexslider 正在完整地接收这些值。我只是不明白为什么添加到购物车表单完成后滑块不会旋转。

我的客户当然希望在昨天之前...

Answer 1

仅供参考，我找到了解决方案——我将这段代码添加到主题的 functions.php 文件中，问题就解决了：

function my_product_carousel_options($options) {
  $options['controlNav'] = false;
  return $options;
}
add_filter("woocommerce_single_product_carousel_options", "my_product_carousel_options", 10);

FlexSlider/WooCommerce 单一产品图片库：尝试从颜色选择器触发特色图片更改

FlexSlider/WooCommerce Single Product Image Gallery: Trying to trigger featured image change from the color picker

jquery

flexslider

woocommerce