Disable Sold Out Variants but Still Show Product

[MattPrice88]

Hi all I'm using DEBUT theme and I have products (clothing) with multiple variants (sizes).

What I want to be able to do is disable the sold out variants but still show the product if ALL variants are sold out.

I've added this code into theme.js and it is "greying" out the sold out variants (which is good) UNTIL all variants are sold out and then it is removing the product entirely.

Because my products will be restocked, I don't want to remove the product entirely, even better is it possible just to list the product as SOLD OUT when all variants are not available?

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');
  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);


      if (product.options.length === 1) {
        const unavailableVariants = [];


        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];


          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }


        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');


            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];


                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];


                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }


              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }


          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');


          mutationCallback();


          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };


            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }


            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

Thank you