Disable sold-out variants

disable-sold-out.liquid

{% comment %}
  Disable sold-out variants.
  Only works for products that have one option.
  It won't work with products that have two or three options, like Size and Color.
  See: https://docs.myshopify.io/themes/customization/products/hide-variants-that-are-sold-out
{% endcomment %}

{% if product.options.size == 1 %}
  <script>
  var $addToCartForm = $('form[action="/cart/add"]');
  if (window.MutationObserver && $addToCartForm.length) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() { 
      {% for variant in product.variants %}
        {% unless variant.available %}
          jQuery('.single-option-selector option:eq({{ forloop.index0 }})').prop('disabled', true);
        {% endunless %}
      {% endfor %}
      jQuery('.single-option-selector').trigger('change');
      observer.disconnect();
    });  
    observer.observe($addToCartForm[0], config);
  }
  </script>
{% endif %}

Super works, perfect a big improvemnt of the workaround from about a year ago. I am just missing 1 thing though.

While it does remove the sold out variants, it does not remove or hide the pictures related with these variants. In so we are getting complaint from people asking that they dont see the option from the product they want to buy. Inso we are still losing sales.

Any way I can link the pictures that belong to the variant, so that they also hide?

In my example you can see the problem. I have a product with 7 pictures, but only 3 buying options.
People always want what they cant have, but in this case only because they can see it existed.

Thanks,
MIke

I just did something similar in product.liquid. HTH:

      <!-- Begin thumbnails -->
      <div class="thumbs clearfix" style="margin-left:-15px;">
        {% comment %}
          If there are variants, instead of looping over all the product images, loop over the 
          (available) variants and show their images instead. Note that if your variants don't 
          have images this is going to skip them entirely.
        {% endcomment %}
        {% if product.variants.size > 1 and product.images.size > 1 %}
        {% for variant in product.variants %}
        {% if variant.available %}
        <div class="image span2{% cycle 'last-in-row': '', '', ' last-in-row' %}">
          <a href="{{ variant.image.src | img_url: '1024x1024' }}">
            <img src="{{ variant.image.src | img_url: 'large' }}" alt="{{ variant.image.alt | escape }}" />
          </a>
        </div>
        {% endif %}
        {% endfor %}
        {% else %}
        {% comment %}
          This block is pretty much how the theme was already written: loop over all product images.
        {% endcomment %}
        {% for image in product.images %}
        <div class="image span2{% cycle 'last-in-row': '', '', ' last-in-row' %}">
          <a href="{{ image | img_url: '1024x1024' }}">
            <img src="{{ image | img_url: 'large' }}" alt="{{ image.alt | escape }}" />
          </a>
        </div>
        {% endfor %}
        {% endif %}
      </div>
      <!-- End thumbnails -->

I am unable to get it these 2 snippets to work together. The one closest to the is the only one that will work.
{% include 'pick-an-option'%}
{% include 'remove-sold-out'%}
The snippets are
{% comment %}
See https://docs.shopify.com/themes/customization/products/how-to-add-a-pick-an-option-to-drop-downs
{% endcomment %}

{% unless product.selected_variant %}
{% if product.variants.size > 1 %}
<script>
var $addToCartForm = $('form[action="/cart/add"]');
if (window.MutationObserver && $addToCartForm.length) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
{% for option in product.options %}
$('.single-option-selector:eq({{ forloop.index0 }})')
.filter(function() {
return $(this).find('option').size() > 1
})
.prepend('Pick a ' + {{ product.options[forloop.index0] | json }} + '')
.val('')
.trigger('change');
{% endfor %}
observer.disconnect();
});
observer.observe($addToCartForm[0], config);
}
</script>
{% endif %}
{% endunless %}

and

{% comment %}
See https://docs.shopify.com/themes/customization/products/how-to-add-a-pick-an-option-to-drop-downs
{% endcomment %}

{% unless product.selected_variant %}
{% if product.variants.size > 1 %}
<script>
var $addToCartForm = $('form[action="/cart/add"]');
if (window.MutationObserver && $addToCartForm.length) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
{% for option in product.options %}
$('.single-option-selector:eq({{ forloop.index0 }})')
.filter(function() {
return $(this).find('option').size() > 1
})
.prepend('Pick a ' + {{ product.options[forloop.index0] | json }} + '')
.val('')
.trigger('change');
{% endfor %}
observer.disconnect();
});
observer.observe($addToCartForm[0], config);
}
</script>
{% endif %}
{% endunless %}

Is there any way to do this same thing - to grey out and disable unavailable or sold out variants - on products that have two or 3 options? I don't want to remove or hide the variants, just grey them out and make them not a clickable option.

@Retrogresison were you able to figure out how to "grey out and disable unavailable or sold out variants - on products that have two or 3 options?" Anyone?

@Retrogresison were you able to figure out how to "grey out and disable unavailable or sold out variants - on products that have two or 3 options?" Anyone?

i m facing same problem if u have solution of this now so please help me......

I had fixed this issue for one store.
I had made changed in linked-option or remove-sold-out snippet.

@aman-developer what change you made can you please share that changes

@aman-developer what change you made can you please share that changes

Tell me theme name, so I will tell you what change you need to make or let's connect amanbatra.developer

@aman-developer what change you made can you please share that changes

Tell me theme name, so I will tell you what change you need to make or let's connect amanbatra.developer

i use debut free theme

https://prnt.sc/114r43n

You just need to change code in linked-option file. I guess you are getting problem in change variant ?

@aman-developer Thanks for your help
can you please publish your solved solution.

Hi all I am working on this website (https://kokorikko.com) I did everything specified and still have no result :/ do you have any idea ?
PS: I am using Motion Theme

Hi @aman-developer What about for Prestige theme? Thanks!

@rubenkss I can do. Lot of changes required in theme files along with linked-options snippet.

@aman-developer Thought would be easier... Many people asking for it on Internet and poor options... Thanks!

@rubenkss Just have need changes few elements like classes .. etc.

@aman-developer Count on you? ;)

hi. has a solution been found to the problem?