Custom coding to hide out of stock variants

Shopify Discussion

Topic summary

Goal: Hide out-of-stock Shopify product variants to reduce clutter for products with up to 76 variants, with only 1–2 typically in stock.

  • Initial approach: Applied CSS display:none to unavailable radio buttons. Issue: their parent

  • elements still rendered ~8px gaps, causing awkward spacing.

  • Update/solution attempt: Added JavaScript to hide the parent

  • of options marked with class not-available:

    • Finds each option with not-available.
    • Locates closest
    • and sets style.display = ‘none’.
    • This removes the spacing on first render.

  • New problem: With two-tier options (“Level 1” and “Level 2” variants—i.e., option tiers), switching a Level 1 selection causes all Level 2 options to disappear, even when some should remain available.

  • Status: Unresolved. Code snippet is central to understanding the behavior. Requesting guidance on why Level 2 options vanish after changing Level 1 and how to maintain correct availability display after selection changes.

Summarized with AI on January 4. AI used: gpt-5.
1

Hello!

I’m working with products which have a large amount of potential variants (76 in total), which creates a visually cluttered mess when I likely will only have 1 or 2 in stock at any one time. I’d like to be able to hide all of the unavailable options to make the user experience better, and not overwhelming. My issue is finding a way to completely hide those buttons.

I’ve located the code controlling the modified display of unavailable products and changed it to display:none; however, the list item that contains those radio buttons still generates a small 8px space for each item, even when those buttons are hidden. This creates awkward spacing that looks very odd and unappealing. I’m not very familiar with the CSS and Java controlling this generation and can’t figure out how to remove those list items or otherwise hide them.

Any thoughts on what to look for or how to adjust this? I’m sure more info is needed but I don’t know what to provide.

Thanks!

2

For anyone else who comes across this, I was able to accomplish the first step of what I need using this code:

const productOptionsArray = Array.from(productOptions);

for (let i = 0; i < productOptionsArray.length; i++) {
const option = productOptionsArray[i];
if (option.classList.contains('not-available')) {
const parentLiElement = option.closest('li');
if (parentLiElement) {
parentLiElement.style.display = 'none';
}
}
}

I am now having a different issue though. I have 4 “Level 1” variants and each has 19 “Level 2” variants. The above code correctly hides the unavailable variants on the first render, but when clicking to a different “Level 1” variant, all the “Level 2” variants disappear, even when there should be at least 1 available.

Anyone have thoughts on that?