How to hide sold-out variants in Shopify – (2021)

8
893
Hide soldout variants
Hide soldout variants

Sold-out products will be a negative sign for any online store because it can make the customers frustrated. Users do not want to see their expected products out of stock. Therefore, it is necessary for the store owners to hide sold-out variants.

In this tutorial, you will learn how to hide sold-out variants from your online shop. I have tested this code with the default Shopify theme Debut, It will work with both drop-down options and swatches.

The steps in this tutorial may differ depending on the theme you are using.

Limitations

  • Your products have more than one product option.
  • You have the product page set to show products in an overlay

How to disable sold-out variants in Shopify

Step 1: Go to Themes and Edit code

In the Shopify admin area, go to Online Store > Themes then click Themes. After that Find the theme you want to edit, and then click to Actions and then Edit code.

Step 2: Go to Snippets

Under Snippets section on left side, click the link Add a new snippet and Name your new snippet linked-options and click on create snippet button.

Step 3: Paste a code

Copy the codes bellow then paste them at the bottom of the file and click save.

<script>
window.addEventListener('DOMContentLoaded', function(event) {
  var Shopify = Shopify || {};
    
  // Required functionality from depricated options_selection.js
  Shopify.arrayIncludes = function(e, t) {
    for (var n = 0; n < e.length; n++)
        if (e[n] == t) return !0;
    return !1
  }, Shopify.uniq = function(e) {
      for (var t = [], n = 0; n < e.length; n++) Shopify.arrayIncludes(t, e[n]) || t.push(e[n]);
      return t
  }

  Shopify.optionsMap = {};

  Shopify.updateOptionsInSelector = function(selectorIndex) {
      
    switch (selectorIndex) {
      case 0:
        var key = 'root';
        var selector = jQuery('.single-option-selector:eq(0)');
        break;
      case 1:
        var key = jQuery('.single-option-selector:eq(0)').val();
        var selector = jQuery('.single-option-selector:eq(1)');
        break;
      case 2:
        var key = jQuery('.single-option-selector:eq(0)').val();  
        key += ' / ' + jQuery('.single-option-selector:eq(1)').val();
        var selector = jQuery('.single-option-selector:eq(2)');
    }
    
    var initialValue = selector.val();
    selector.empty();    
    var availableOptions = Shopify.optionsMap[key];
    for (var i=0; i<availableOptions.length; i++) {
      var option = availableOptions[i];
      var newOption = jQuery('<option></option>').val(option).html(option);
      selector.append(newOption);
    }
    jQuery('.swatch[data-option-index="' + selectorIndex + '"] .swatch-element').each(function() {
      if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) {
        $(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked');
      }
      else {
        $(this).addClass('soldout').hide().find(':radio').removeAttr('checked').attr('disabled','disabled');
      }
    });
    if (jQuery.inArray(initialValue, availableOptions) !== -1) {
      selector.val(initialValue);
    }
    selector.trigger('change');
    
  };

  Shopify.linkOptionSelectors = function(product) {
    // Building our mapping object.
    for (var i=0; i<product.variants.length; i++) {
      var variant = product.variants[i];
      if (variant.available) {
        // Gathering values for the 1st drop-down.
        Shopify.optionsMap['root'] = Shopify.optionsMap['root'] || [];
        Shopify.optionsMap['root'].push(variant.option1);
        Shopify.optionsMap['root'] = Shopify.uniq(Shopify.optionsMap['root']);
        // Gathering values for the 2nd drop-down.
        if (product.options.length > 1) {
          var key = variant.option1;
          Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
          Shopify.optionsMap[key].push(variant.option2);
          Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
        }
        // Gathering values for the 3rd drop-down.
        if (product.options.length === 3) {
          var key = variant.option1 + ' / ' + variant.option2;
          Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
          Shopify.optionsMap[key].push(variant.option3);
          Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
        }
      }
    }
    // Update options right away.
    Shopify.updateOptionsInSelector(0);
    if (product.options.length > 1) Shopify.updateOptionsInSelector(1);
    if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
    // When there is an update in the first dropdown.
    jQuery(".single-option-selector:eq(0)").change(function() {
      Shopify.updateOptionsInSelector(1);
      if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
      return true;
    });
    // When there is an update in the second dropdown.
    jQuery(".single-option-selector:eq(1)").change(function() {
      if (product.options.length === 3) Shopify.updateOptionsInSelector(2);
      return true;
    });  
  };
   
  {% if product.available and product.options.size > 1 %}
    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() {      
        Shopify.linkOptionSelectors({{ product | json }});
        observer.disconnect();
      });  
      observer.observe($addToCartForm[0], config);
    }
  {% endif %}
    
  var selector = jQuery('.single-option-selector:eq(0)');
  selector.trigger('change'); 

  {% if product.options.size == 1 %}
    {% for variant in product.variants %}
      {% unless variant.available %}
        jQuery('.single-option-selector option').filter(function() { return jQuery(this).text().trim() === {{ variant.title | json }}; }).remove();
      {% endunless %}
    {% endfor %}
    jQuery('.single-option-selector').trigger('change');
  {% endif %}
});
</script>

Step 4: Locate the file theme.liquid

Under Layout, locate the file theme.liquid, and open it in the code editor. Paste the following code near the end of the file before closing </body> tag and save file.

{% render 'linked-options' %}

Step 5: Refresh Product Page

Now, Refresh your product page and you will notice you have successfully hide sold-out variants from your product page.

Conclusion

In this guide, you learned how to hide the sold-out variants from your product page for your visitors. Feel free to reach out to us if you face any issues. You can also follow us on social media for more guides.

Happy Coding!

Traffic Analysts Tool

8 COMMENTS

  1. Way cool! Some extremely valid points! I appreciate you writing
    this post and the rest of the website is extremely good.

LEAVE A REPLY

Please enter your comment!
Please enter your name here