Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp
Last active May 5, 2022 06:14
Show Gist options
  • Save carolineschnapp/18c5a74eeb953c7e3d92 to your computer and use it in GitHub Desktop.
Save carolineschnapp/18c5a74eeb953c7e3d92 to your computer and use it in GitHub Desktop.
Disable sold-out variants
{% 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 %}
@Jemappellemike
Copy link

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.
schermafbeelding 2016-06-10 om 19 54 23

Thanks,
MIke

@dsandler
Copy link

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 -->

@philipga
Copy link

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 %}

@Retrogresison
Copy link

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.

@weschyrchel
Copy link

@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?

@pankajjhaa
Copy link

@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......

@aman-developer
Copy link

aman-developer commented Nov 5, 2020

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

@sanjay-makwana-avidbrio
Copy link

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

@aman-developer
Copy link

@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

@sanjay-makwana-avidbrio
Copy link

sanjay-makwana-avidbrio commented Apr 5, 2021

@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

@aman-developer
Copy link

https://prnt.sc/114r43n

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

@sanjay-makwana-avidbrio
Copy link

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

@andrey-243
Copy link

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

@rubenkss
Copy link

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

@aman-developer
Copy link

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

@rubenkss
Copy link

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

@aman-developer
Copy link

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

@rubenkss
Copy link

@aman-developer Count on you? ;)

@bazluca
Copy link

bazluca commented May 5, 2022

hi. has a solution been found to the problem?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment