How to hide unavailable product options on the storefront?

Technical Q&A
1

Hi,
I have 2 options having 2 values each, but recently deleted one variant combination formed, and now its causing issues on the storefront. I want to hide that unavailable option whenever the related option is clicked or the page is loaded.

2

To hide the unavailable option when the related option is clicked or when the page is loaded, you can use JavaScript to dynamically modify the visibility of the option elements based on the selected values. Here’s an example of how you can achieve this:

// Replace 'option1' and 'option2' with the IDs or classes of your option elements
var option1 = document.getElementById('option1');
var option2 = document.getElementById('option2');

// Replace 'unavailableOptionValue' with the value of the unavailable option you want to hide
var unavailableOptionValue = 'Unavailable Option';

// Function to handle the change event of option1
function handleOption1Change() {
  // Get the selected value of option1
  var selectedOption1 = option1.value;

  // If the selected value of option1 is equal to the unavailableOptionValue
  if (selectedOption1 === unavailableOptionValue) {
    // Hide the option2 element
    option2.style.display = 'none';
  } else {
    // Show the option2 element
    option2.style.display = '';
  }
}

// Attach the change event listener to option1
option1.addEventListener('change', handleOption1Change);

// Call the handleOption1Change function on page load
handleOption1Change();
3

Hi it seems like this one helps me hide a specific variant, but i did a workaround that hides the variants that is unavailable. check this out

4

Third-party apps make it easy to separate variants I own the Stamp ‑ Variants on Collection and we help merchants display variants separately on the collection page and home page. You can customize the settings per collection to show or hide specific variants, filter variants, or separate them by specific options. For example, you can create a “Gold” collection and display only gold-related variants.