Shopify - Hiding sold out variants on dropdown (regular solution not working)

Question

On my Shopify store I need to be able to hide sizes in the dropdown that are no longer available. I have tried multiple times adding the code that Shopify suggests here but I am using the Retina Out of the Sandbox theme and add that code to the product-form.liquid file and what happens is only 1 size becomes available no matter what. My store is in dire need of this feature because we sell tons of closeout shoes no longer available so when a customer searches for a size products that have a sold out size 9 still show because it is not hidden on the dropdown, it just says Sold Out, here is my code. Apologies if the formatting is not so nice looking, this is what came with my theme.

product-form.liquid

    {% if product.available %}
  <form action="/cart/add" method="post" class="clearfix product_form" data-money-format="{{ shop.money_format }}" data-shop-currency="{{ shop.currency }}" id="product-form-{{ product.id }}">

    {% if settings.display_inventory_left %}
      <div class="items_left">
        {% if product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity > 0 %}
          <p><em>{{ product.variants.first.inventory_quantity }} {{ settings.inventory_left_text | escape }}</em></p>
        {% endif %}
      </div>
    {% endif %}

    {% if product.options.size > 1 %}
      <div class="select">
        <select id="product-select-{{ product.id }}" name='id'>
          {% for variant in product.variants %}
            <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% elsif product.options.size == 1 and (product.variants.size > 1 or product.options[0] != "Title") %}
      <div class="select">
        <label>{{ product.options[0] }}:</label>
        <select id="product-select-{{ product.id }}" name='id'>
          {% for variant in product.variants %}
            <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% else %}
      <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    {% endif %}

    {% if settings.display_product_quantity %}
      <div class="left">
        <label for="quantity">Quantity:</label>
        <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" />
      </div>
    {% endif %}
    <div class="purchase clearfix {% if settings.display_product_quantity %}inline_purchase{% endif %}">
      {% if settings.cart_return == 'back' %}
        <input type="hidden" name="return_to" value="back" />
      {% endif %}
      <input type="submit" name="add" value="{{ settings.add_to_cart_text | escape }}" class="action_button add_to_cart" />
    </div>  
  </form>

  {% if product.variants.size > 1 or product.options.size > 1 %}
    <script type="text/javascript">
      // <![CDATA[  
        $(function() {    
          $product = $('#product-' + {{ product.id }});
          new Shopify.OptionSelectors
            ("product-select-{{ product.id }}",{ 
              product: {{ product | json }}, 
              onVariantSelected: selectCallback{% if product-form == 'product' %}, 
              enableHistoryState: true{% endif %} 
            });

              {% if product.options.size == 0 %}
                {% for variant in product.variants %}
                  {% unless variant.available %}
                    jQuery('.single-option-selector option').filter(function() { return jQuery(this).html() === {{ variant.title | json }}; }).remove();
                  {% endunless %}
                {% endfor %}
                jQuery('.single-option-selector').trigger('change');
              {% endif %}     

      // ]]>
    </script>
  {% endif %}
{% endif %}

Why not email the theme developers? support.outofthesandbox.com/customer/portal/emails/new — Funk Doc

Steph Sharp Steph Sharp · Accepted Answer · 2015-01-31T05:23:48

A couple of small things I noticed:

{% if product.options.size == 0 %} should be {% if product.options.size == 1 %} (see here).
You're missing the closing brackets for $(function() {.... You need }); before the closing </script> tag.

This seems to work for me now:

{% if product.variants.size > 1 or product.options.size > 1 %}
  <script type="text/javascript">
    // <![CDATA[  
      $(function() {    
        $product = $('#product-' + {{ product.id }});
        new Shopify.OptionSelectors
          ("product-select-{{ product.id }}",{ 
            product: {{ product | json }}, 
            onVariantSelected: selectCallback{% if product-form == 'product' %}, 
            enableHistoryState: true{% endif %} 
          });

        {% if product.options.size == 1 %} // *** should be 1, not 0 ***
          {% for variant in product.variants %}
            {% unless variant.available %}
              jQuery('.single-option-selector option').filter(function() { return jQuery(this).html() === {{ variant.title | json }}; }).remove();
            {% endunless %}
          {% endfor %}
          jQuery('.single-option-selector').trigger('change');
        {% endif %}     
      }); // *** missing closing brackets here ***
    // ]]>
  </script>
{% endif %}

Shopify - Hiding sold out variants on dropdown (regular solution not working)

1 Answers