Only show certain variant images when product has two drop down choices

New Member
77 0 0

I have used this code to only display product images that match the variant color that is selected by the customer (the only variant option is "Color").    But I can't get it to work when I have variant options for both "Font" and for "Color".  Any ideas?

 

<script>
var thumbnails = jQuery('img[src*="/products/"]') /* All product images */
  .not('#related-products img')                   /* Except related products, thumbnails not clickable */
  .not('a[href^="/collections/"] img')            /* Except related products */
  .not('a[href^="/products/"] img')               /* Except mini-cart products */
  .not('header img')                              /* Except mini-cart products, thumbnails not clickable */
  .not('#drawer img')                             /* Except mini-cart products, thumbnails not clickable, in Simple theme. */
  .not(':first');                                 /* Except first one, i.e the main image */
  
var optionSelect; 
{% assign option_index = 0 %}  
{% for option in product.options %}
  {% if option == option_name %}
    {% assign option_index = forloop.index0 %}  
  {% endif %}
{% endfor %}
  
{% if product.options.size == 1 %}
  optionSelect = '.single-option-selector';
{% else %}
  optionSelect = 'label:contains({{ option_name }}) + .single-option-selector';   
{% endif %}
  
jQuery('form[action="/cart/add"]').on('change', optionSelect, function() {
  var optionValue = $(this).val();
  thumbnails.each(function() {
    var wrapper = $(this);
    while ( wrapper.parent().children().length === 1 ) {
      wrapper = wrapper.parent();
    }
    if ( jQuery(this).attr('alt') === optionValue ) {
      wrapper.show();
    }
    else {
      wrapper.hide();
    }
  });
});    
</script>
0 Likes