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

问题

I'm setting up a soon-to-be-launched WooCommerce site. I am using https://wordpress.org/plugins/woo-variation-swatches/ to manage the variation attributes for the products: all products have color attributes, some also have size attribute and/or lined/unlined attribute.

When a user clicks on a color attribute, I want the main product image to switch to display the image for the product in that color. (I don't want to have to enter in separate variations for every single image - can be dozens of variations per product and will be a nightmare to maintain.) I wrote some jquery to do this, and the jquery works well -- UNTIL all other attributes are selected. So if a product has color and size, the jquery works when you click a color - as long as size is not selected. Once you select a size, my jquery does nothing. For example, see: 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/ I spent a good while trouble shooting and can't crack this bug. I'm really hoping that someone else can help me out!

Here is the code:

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

Now, in order for it to work, the title of the color attribute has to match with the alt of the main product image. ex: For the color attribute "raspberry", the coordinating image has an alt text of "raspberry".

I verified that the ttl and i values are being captured correctly in all scenarios. And that the flexslider is receiving those values intact. I just can't figure out why the slider won't rotate when the add to cart form is complete.

And of course my client wants this by yesterday...

回答1:

FYI, I figured out the solution -- I added this code to my theme's functions.php file, and the problem was solved:

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

来源：https://stackoverflow.com/questions/56580879/flexslider-woocommerce-single-product-image-gallery-trying-to-trigger-featured

标签

jquery

woocommerce

flexslider