How to hide out of stock variables in drop down?

Highlighted
Tourist
14 0 1

I'm new to this and have got stuck on something, been searching for a few days but can't find an answer that works so thought I'd ask.

I want to hide varibles that stock is 0 on the dropdown. I think I need to add/change something in the segment below, can anyone help? I'm working from the React template.

Thanks in advance.

<form id="add-item-form" action="/cart/add" method="post" class="variants clearfix">
        {% assign hide_default_title = false %}
        {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
        {% assign hide_default_title = true %}
        {% endif %}  
        <div class="select clearfix"{% if hide_default_title %} style="display:none"{% endif %}>
          <select id="product-select" name='id'>
            {% for variant in product.variants %}
            <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
            {% endfor %}
          </select>

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 1 326

Hi Sam,

That select element you see there is hidden on the page and replaced by select elements built with JavaScript. So you're banging the wrong tree.

If your products have more than one option, like Size and Color, you will need to apply the Linked Options solution.

For products that only have one option, here is what you need to do to remove sold out variants from the one option drop-down.

Locate Shopify's call to the Shopify.OptionSelectors constructor. It is usually located in product.liquid near the bottom of the template. But in some themes (like your theme), it is found in theme.liquid. The code looks like this — it may not be exactly like it:

new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });

On the next line, right after the above line of code, add this code:

{% if product.options.size == 1 %} 
  {% for variant in product.variants %}
    {% unless variant.available %}
      jQuery('.single-option-selector option:eq({{ forloop.index0 }})').remove(); 
    {% endunless %} 
  {% endfor %}
  jQuery('.single-option-selector').trigger('change'); 
{% endif %}

That's it. Save.

If you want to keep the variant in the drop-down but have it grayed out and un-selectable ( disabled ), add the following code instead:

{% if product.options.size == 1 %}
  {% for variant in product.variants %} 
    {% unless variant.available %} 
    jQuery('.single-option-selector option:eq({{ forloop.index0 }})').attr('disabled', 'disabled');
    {% endunless %}
  {% endfor %} 
  jQuery('.single-option-selector').trigger('change'); 
{% endif %}
0 Likes
Highlighted
Tourist
14 0 1

Thanks so much Caroline, worked a charm :)

I used the bottom one which greys out the options that aren't available. When I pasted the one in above it that hides them totally it still showed the Large size option even though it was set to out of stock, hid all other out of stock sizes (S,M,XL) fine but for some reason kept showing large!

The grey out option is fine though and I'm really happy to have it sorted.

Thanks again.

P.S I also have a 2px inset around vimeo embeds on my blog pages that I can't get rid of, if you have a quick fix for that too I would be really grateful!

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 1 326

Oh yeah I see why the first snippet would not work, I am looking for the option by its location index in the select while that index means nothing because options have been possibly removed.

For your video, copy the user stylesheet selector you see in the inspector to your theme stylesheet, and to that selector apply the style border: none or border-style: solid.

0 Likes
Highlighted
Tourist
14 0 1

What would the amended code be for the first snippit if I wanted to hide sizes that were out of stock? I'm really new to coding and although I've managed to find how to do most things I've wanted to on here these last two have been a nightmare!

I've tried adding to my css file to get rid of the indent around the vimeo iframe embeds but I think I'm doing this wrong too! What I've entered into my shop.css is below. I need instructions for a dummy!

Thank you so much, you've already saved me hours!

user agent stylesheet
iframe: not([seamless]) { border: 0px inset; border-image: none; }

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 1 326

Try this to remove the sold out options:

{% if product.options.size == 1 %} 
  {% for variant in product.variants %}
    {% unless variant.available %}
      jQuery('.single-option-selector option:contains(' + {{ variant.title | json }} +')').remove(); 
    {% endunless %} 
  {% endfor %}
  jQuery('.single-option-selector').trigger('change'); 
{% endif %}

As for the video, try that CSS:

iframe { border: none !important; }

 

0 Likes
Highlighted
Tourist
14 0 1

Both worked perfect, thank you so much for all your help :)

0 Likes
Highlighted
Shopify Staff
Shopify Staff
5704 1 326

Awesome! Thank you so much for following up, Sam!

0 Likes
Highlighted
New Member
3 0 0

Just stumbled across this thread after searching for an answer for a few days and it worked like a charm on my page as well.

 

Thanks for sharing Caroline!

LIVE FOR THE NIGHT
0 Likes
Highlighted
New Member
3 0 0

I just switched to Shopify few weeks ago, I've set up my theme and everything but I can't see the stock in the option menu for the variant ... Did they change anything about that in the new theme ?

0 Likes