Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp
Last active March 6, 2019 14:40
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save carolineschnapp/4e70f7774ec4a3fb2622 to your computer and use it in GitHub Desktop.
Save carolineschnapp/4e70f7774ec4a3fb2622 to your computer and use it in GitHub Desktop.
Remove sold-out variants
{% comment %}
Remove 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').filter(function() { return jQuery(this).text() === {{ variant.title | json }}; }).remove();
{% endunless %}
{% endfor %}
jQuery('.single-option-selector').trigger('change');
observer.disconnect();
});
observer.observe($addToCartForm[0], config);
}
</script>
{% endif %}
@koristina
Copy link

Thank you for this! How do I also add append the text "Sold Out" to grayed out options?

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