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

【问题标题】：FlexSlider/WooCommerce Single Product Image Gallery: Trying to trigger featured image change from the color pickerFlexSlider/WooCommerce 单一产品图片库：尝试从颜色选择器触发特色图片更改
【发布时间】：2019-10-28 01:41:31
【问题描述】：

我正在建立一个即将推出的 WooCommerce 网站。我正在使用https://wordpress.org/plugins/woo-variation-swatches/ 来管理产品的变体属性：所有产品都有颜色属性，有些还有尺寸属性和/或内衬/非内衬属性。

当用户单击颜色属性时，我希望主产品图像切换为以该颜色显示产品图像。（我不想为每个图像输入单独的变体 - 每个产品可能有几十个变体，维护起来将是一场噩梦。）我写了一些 jquery 来做到这一点，并且 jquery 运行良好——直到选择所有其他属性。因此，如果产品具有颜色和尺寸，则 jquery 会在您单击颜色时起作用 - 只要未选择尺寸。一旦你选择了一个大小，我的 jquery 什么都不做。例如，请参阅：https://liziheadwear.com/snoods/solid-chenille/。如果产品只有颜色属性，则 jquery 根本不起作用。比如看：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 正在完整地接收这些值。我只是不明白为什么添加到购物车表单完成后滑块不会旋转。

当然，我的客户在昨天之前想要这个......

【问题讨论】：

标签： jquery woocommerce flexslider

【解决方案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);

【讨论】：