How To Hide Unavailable Variants In Shopify?

Welcome to WebSensePro! Are you looking to improve the user experience on your Shopify store by hiding unavailable variants? You’re in the right place! In this step-by-step guide, we’ll walk you through the process of hiding those pesky unavailable options on your product pages, making your store more streamlined and user-friendly.

Step 1: Understand Unavailable Variants

Before we dive into the solution, let’s clarify what we mean by “unavailable variants.” These are product options like sizes or colors that are not currently in stock for specific product variations. Hiding them can declutter your product pages and prevent customers from selecting options that aren’t available.

Step 2: Access Your Shopify Backend

Log in to your Shopify admin panel and navigate to your online store settings. From there, access the theme editor to make changes to your store’s theme.

Step 3: Install a Fresh Theme (Optional)

If you’re using a custom theme or have made previous modifications to your theme’s code, consider installing a fresh theme to ensure compatibility with the solution we’ll be implementing.

Step 4: Customize Your Product Page Template

In the theme editor, locate the product page template. This is where we’ll be adding a custom section to inject the JavaScript code that will hide the unavailable variants.

Step 5: Add the JavaScript Code

Copy the provided JavaScript code snippet, which you can find in the video description or accompanying blog post. Paste this code into the designated section of your product page template within the theme editor.

const variantSelects = (document.querySelector('variant-selects')) ? document.querySelector('variant-selects') : document.querySelector('variant-radios');
const pickerType = (variantSelects.querySelectorAll('fieldset').length > 0) ? 'radios' : '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();

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

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);
    });
    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'){
            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;
        }
        });
    }
    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(change) variantSelects.dispatchEvent(new Event('change', { bubbles: true }));
    }
}

Step 6: Save and Preview

Once you’ve added the JavaScript code, save your changes in the theme editor. Then, preview your product pages to ensure that the unavailable variants are now hidden from view.

Step 7: Customize Appearance (Optional)

If you’d like to further customize the appearance of the unavailable variants, such as adjusting opacity or adding visual cues, you can do so by tweaking the JavaScript code accordingly.

Conclusion:
Congratulations! You’ve successfully hidden unavailable variants on your Shopify store’s product pages, improving the browsing experience for your customers. By following this step-by-step guide, you’ve taken a proactive step towards optimizing your store and enhancing customer satisfaction.