Hide unavailable variants with craft theme

Store Design
,
1

Is it possible to hide unavailable variants with the Craft theme?

I had my shop built for me, but I’m struggling with this one issue mostly.

A lot of my items have two drop down options. One being type of item and the other a size guide. Different types of items need different sizes. You can see what I mean in this photo:

website varients.jpg
website varients.jpg1897×945 211 KB

Is there a way to hide the ‘unavailable’ options?

I’ve tried using the HiVar app but it doesn’t seem to work

I just want to keep it clean

Thanks!

2

Hi @Cosydayscrochet , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

3

Hey @Cosydayscrochet

Share your store URL and Password if enabled.

Best Regards,

Moeed

4

https://cosydayscrochet.com/

password is: cosydays24

5

Hey @Cosydayscrochet

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

6

Steps to Locate global.js or Equivalent File1. Go to Shopify Admin > Online Store > Themes.

  1. Click on “Actions” > “Edit Code”.
  2. Navigate to the Assets folder in the left-hand sidebar.
  3. Look for a file named:
    • global.js and paste the code
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 }));
    }
}
7

Sorry to say this didn’t work

8

Sorry to say this didn’t work

9

still trying to solve this. I’m wondering if I’ve just set up my variants incorrectly as I’ve tried all the options I can find on here and youtube and still no success

Cosydayscrochet_0-1734428912649.png
Cosydayscrochet_0-1734428912649.png1920×1080 255 KB

I’ve grouped them by style then added the size variants that apply to each style. Is this incorrect? I’m really stumped and just want a smooth running and cohesive store.

Thanks

10

did you ever solve this? I have the same issue with the same theme