How can I hide sold out variants in Dawn theme 11.0?

[Guifonte]

Hi Everyone,

Does anybody know how to build a code to hide the sold out variants on dawn theme?

I need something like this image:

Thanks in advance,

Gui.

[Dan-From-Ryviu]

Could you drop your product page link to check? 

[Guifonte]

there you go
https://decorforfun.myshopify.com/products/adidas-entrada-18-jersey-black

[EasifyApps]

Hi @Guifonte,

To hide unavailable variants, you'll have to modify your theme code. Navigate to your Product template, and insert the necessary custom code into the Custom liquid section:

<script language="javascript" type="text/javascript">
const pickerType = (document.querySelector('variant-radios')) ? 'radios' : 'selects';
const variantSelects = (pickerType == 'radios') ? document.querySelector('variant-radios') : document.querySelector('variant-selects');
const fieldsets = (pickerType == 'radios') ? Array.from(variantSelects.querySelectorAll('fieldset')) : Array.from(variantSelects.querySelectorAll('.product-form__input--dropdown'));
const productJson = JSON.parse(variantSelects.querySelector('[type="application/json"]').textContent);
let selectedOptions = [];

variantSelects.addEventListener('change', rebuildOptions);
this.rebuildOptions();

// gather a list of valid combinations of options, check to see if the input passed to it matches in a chain of valid options.
function validCombo(inputValue, optionLevel) {
  for(let i = 0; i < productJson.length; i++) {
    if(optionLevel == 1){
      if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == inputValue) { return true; }
    } else {
      if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == selectedOptions[1] && productJson[i].option3 == inputValue) { return true; }
    }
  }
  return false;
}

function rebuildOptions() {
  selectedOptions = fieldsets.map((fieldset) => {
    return (pickerType == 'radios') ? Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value : Array.from(fieldset.querySelectorAll('select'), (select) => select.value);
  });
  //loop through the option sets starting from the 2nd set and disable any invalid options
  for(let optionLevel = 1, n = fieldsets.length; optionLevel < n; optionLevel++) {
    const inputs = (pickerType == 'radios') ? fieldsets[optionLevel].querySelectorAll('input') : fieldsets[optionLevel].querySelectorAll('option');

    inputs.forEach(input => {
      input.disabled = (validCombo(input.value,optionLevel)) ? false : true;
      if(pickerType == 'radios'){
        //get the label for the current input (this is what the user clicks, the "pill")
        const label = fieldsets[optionLevel].querySelector(`label[for="${input.id}"]`);

        label.style.display = (input.disabled) ? "none" : ""; //Hide the option, or comment this line out and use the following lines to style it..
        //label.style.opacity = (input.disabled) ? 0.5 : 1;
        //label.style.borderStyle = (input.disabled) ? "dashed" : "solid";
        //label.style.textDecoration = (input.disabled) ? "none" : "";
      } else {
        input.hidden = (validCombo(input.value,optionLevel)) ? false : true;
      }
    });
  }

  //if the default selected option is disabled with the function above, select the first available option instead
  for (let optionLevel = 1, fieldsetsLength = fieldsets.length, change = false; optionLevel < fieldsetsLength && !change; optionLevel++) {
    if(pickerType == 'radios'){
      if(fieldsets[optionLevel].querySelector('input:checked').disabled === true) {
        change = (fieldsets[optionLevel].querySelector('input:not(:disabled)').checked = true);
      }
    } else {
      if(fieldsets[optionLevel].querySelector('option:checked').disabled === true) {
        change = (fieldsets[optionLevel].querySelector('option:not(:disabled)').selected = "selected");
      }
    }
    //if a new option has been selected, restart the whole process
    if(change) variantSelects.dispatchEvent(new Event('change', { bubbles: true }));
  }
}
</script>

[Guifonte]

Hi, I've just tried it but that did not work 😞

[EasifyApps]

Could you please provide a screenshot? I'm currently relying on that code, and it seems to be functioning correctly. It's worth noting that after adding the code to the custom liquid, you have to click "Save" and refresh your theme editing page to see the results.

Just to clarify, this is a demo.

[Agreeableagony]

I am trying to accomplish the same thing, but in the Craft 13 theme (latest version of shopify Craft theme)

I tried this code as suggested here, but without any luck. 

[Agreeableagony]

I see that in my theme the Variant Picker type is different:

"variant_picker": {
"type": "variant_picker",
"settings": {
"picker_type": "button",
"swatch_shape": "circle"

---
Store url is www.agreeableagony.com 

[Earp]

This doesnt work in Dawn 13.0 unfortunately as im struggling with this issue now. Customers are able to filter for M and are presented with items that have a M variant but are out of stock and is causing major headache

[Naren1]

Hi @Earp 
We've launched an app to hide sold out variants to solve this common problem

HiVar : Hide Sold Out Variants

https://apps.shopify.com/hivar-hide-sold-out-variants

currently it supports all Online Store 2.0 themes 
App is free for single-option free themes and paid if you have 2-3 options
Check it out and feel free to reach out to customer support if you have any queries 

[Naren1]

Hi @Guifonte 

We've launched an app to hide sold out variants to solve this common problem

HiVar : Hide Sold Out Variants

https://apps.shopify.com/hivar-hide-sold-out-variants

currently it supports all Online Store 2.0 themes 
App is free for single-option free themes and paid if you have 2-3 options
Check it out and feel free to reach out to customer support if you have any queries 

[jbags]

I don't know if you found a solution to this, but I use the Dawn theme, and I followed this article and it actually worked!  I could've cried I was so happy.  

https://community.shopify.com/c/shopify-design/hide-variants-that-has-0-stock/td-p/2499383

[Earp]

Yes this code works, i think i did cry. Now its just to find a solution for the fact of the sold out/hidden item showing as an option when filtering