Галерея изображений одного продукта FlexSlider / WooCommerce: попытка вызвать изменение выбранного изображения из палитры цветов

Question

Я создаю сайт WooCommerce, который скоро будет запущен. Я использую https://wordpress.org/plugins/woo-variation-swatches/ для управления атрибутами вариантов для продуктов: у всех продуктов есть атрибуты цвета, у некоторых также есть атрибут размера и / или атрибут lined / unlined.

Когда пользователь нажимает на атрибут цвета, я хочу, чтобы основное изображение продукта переключалось, чтобы отображать изображение для продукта в этом цвете. (Я не хочу вводить отдельные варианты для каждого отдельного изображения - могут быть десятки вариантов для каждого продукта, и это будет кошмаром для обслуживания.) Я написал несколько jquery для этого, и jquery работает хорошо - ДО все остальные атрибуты выбраны. Так что, если у продукта есть цвет и размер, jquery работает, когда вы нажимаете цвет - до тех пор, пока размер не выбран. Как только вы выберите размер, мой jquery ничего не делает. Например, см .: https://liziheadwear.com/snoods/solid-chenille/. Если продукт имеет только цветовой атрибут, то jquery вообще не работает. Например, см .: https://liziheadwear.com/snoods/multicolor-pearl/ Я потратил много времени на устранение неполадок и не могу устранить эту ошибку. Я действительно надеюсь, что кто-то еще может мне помочь!

Вот код:

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);  
    });
  }
});

Теперь, чтобы он работал, заголовок атрибута color должен совпадать с альтернативой основного изображения товара. пример: для цветового атрибута "малина" координирующее изображение имеет альтернативный текст "малина".

Я проверил, что значения 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);