Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp
Last active May 5, 2022 06:14
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • 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 %}
@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