Using new Simple theme and not understanding how to include "Out of Stock" in select menu

New Member
1 0 0

Hello, My output of my select menu is sizes for example....





Anyway to have....

9.5 (out of stock)



I see this line of code in my product template file (fresh install in customization mode only) but it doesn't seem to respect it. Is it because my old simple theme is too old? I really don't know but seems odd. When I do select a size, the button turns disabled and says "Out of Stock". I just don't want the user to have to select each size to see that they can't order something.


 <select name="id" id="ProductSelect-{{ }}" class="product-single__variants">
              {% for variant in product.variants %}
                {% if variant.available %}
                  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ }}">{{ variant.title }} - {{ variant.price | money_with_currency }} - {{ variant.inventory_quantity }}</option>
                {% else %}
                  <option disabled="disabled">
                    {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                {% endif %}
              {% endfor %}
44 9 12

Most themes uses javascript to split the main select to separate ones when you have more than one option. 


So for example if you have colors, sizes and materials as variant options you will have 3 separate selects for each option with their corresponding values.


It's not clear if this is the case with your theme, but if it is there will be a need to tweak the javascript code in order to achieve what you want.


Please have in mind that when you have more than one option a value can be sold out if all combination of that value are sold out.