Disable the Soldout variants in Shopify

Hello,

The following Solution will work for any number of options

Create "linked-options" snippet. add the following code in it

------------------------------- Code ------------------------

<script>

  // (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact: mllegeorgesand@gmail.com

  // See https://docs.shopify.com/themes/customization/navigation/link-product-options-in-menus

  var Shopify = Shopify || {};

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

      console.log(option);

      var newOption = jQuery('<option></option>').val(option).html(option);

      //     selector.append(newOption);

      $(selector).find('option[value="'+option+'"]').addClass('available-variant');

      setTimeout(function(){ 

        $(selector).find('option').not( ".available-variant" ).attr('disabled','disabled').addClass('soldout-variant');

        setTimeout(function(){ 

          $('.soldout-variant').each(function(){

            var variantVal = $(this).text();

            if(variantVal.indexOf("Sold") <= 0){

              $(this).text(variantVal+" - Sold Out");

            }

          })

        },300);

      }, 200);

    }

    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'] = jQuery.unique(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] = jQuery.unique(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] = jQuery.unique(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 %}

</script>

------------------------------------------------------

Add the following style in your CSS or Scss file

 .soldout-variant{

  background: #ebe9e9;

  }

------------------------------------------------------

Output:

Thanks