Hide or grey out out of stock variants in the venture sectioned theme or have out of stock message next to variant on dropdown

Tourist
14 0 1

Hi does any one know how to either grey out or remove a variant thet has no stock on the select variant dropdown menu int he sectioned venture theme or at least put a label that says currently unavailable next to the variant name in the dropdown if there is no stock available for that variant. The customer currently is only told the item is out of stock once a variant selection is made.

The current shopify code to hide or disable does not work on sectioned themes.

Also the brooklyn section theme sort of does this but by disabling radio type buttons.

 

0 Likes
Tourist
14 0 1

I have made it work!!

 

0 Likes
New Member
3 0 0

Hi Rick,

If you greyed out the items that are not available, could you share with us how you did that please? :)

0 Likes
Tourist
14 0 1

Hi BTIQUE,

Are you using the venture theme?

If you take a look at www.vibrams.co.uk you can see it work.

I will post the code when im back at my computer

 

0 Likes
Tourist
14 0 1

Hi Btique

This is the code I used in the product-template.liquid to make it work. I do not have multiple variants on a single product so I dont know if it will work or tested it for that. But as you can see from www.vibrams.co.uk it does work. Took me three weeks to get this to work lol. Hope it helps.
        <hr>
    
        <form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form" id="AddToCartForm">

          {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
            {% for option in product.options_with_values %}
              <div class="selector-wrapper js product-form__item">
                <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
    
                
                {% assign option_index = forloop.index %}     
                     <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                      name="{{ option.name }}"
                      id="ProductSelect-option-{{ forloop.index0 }}" data-index="option{{ option_index }}">
                      {% for value in option.values %}
                        {% assign variant_label_state = true %}
                        {% if product.options.size == 1 %}
                          {% unless product.variants[forloop.index0].available  %}
                            {% assign variant_label_state = false %}
                          {% endunless %}
                        {% endif %}        
                          <option  
                          
                  
                      {% if option.selected_value == value %} selected="selected"{% endif %}
               
                               
                          {% unless variant_label_state %} disabled="disabled"{% endunless %}
                          value="{{ value | escape }}"
                          
                          name="{{ option.name }}"
                                id="ProductSelect-option-{{ option.name }}-{{ value | escape }}">{% if variant_label_state %}{{ value | escape }}{% else %}{{ value | escape }} - Currently out of Stock {% endif %}</option>
                      {% endfor %}             
                    </select>

0 Likes
Tourist
14 0 1

By the way to hide an out of stock variant in the dropdown instead of grey it out. change disabled="disabled" to hidden-"hidden" . And the Currently out of stock message can be removed or edited

Hope this helps

Rick www.vibrams.co.uk

0 Likes
New Member
2 0 0

Rick,

On the block of code you posted where exactly are you placing that or what are you replacing with that? I keep getting a syntax error when attempting to replace the similar code in the product-template.liquid.

Thanks

0 Likes
New Member
3 0 0

You mean this flow? The "add to cart" button'll be replaced with "out of stock" notice button.


Here's the live demo: https://ss-pet-paradise.myshopify.com/products/arden-grange-chicken-rice-adult-dog-food?variant=4063.... Pick up the option "5LB-Bag" to see the result.

Jeanne from SellerSmith Team | jeanne@sellersmith.com
0 Likes
Tourist
6 0 1

Hi Brad,

I'm receiving the same syntax error, did you manage to find a resolution?

0 Likes
New Member
6 0 0

Hey Brad, did you get it to work?

Where should we place the code Rick?

Thanks

0 Likes