Code to Hide variants with 0 stock level

[Fjen]

Hi,

I want to hide variants with 0 stock levels with code and without using an app. The theme we are using is Warehouse. I would be grateful for any guidance!

Thanks in advance!

[Moeed]

Hey @Fjen

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Fjen]

Hi Moeed,

Thank you for your quick reply - my url is

Thank you!

[Moeed]

Hey @Fjen

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

RESULT:

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

Best Regards,
Moeed

[TheUntechnickle]

Hey @Fjen ,

I’ve created a JavaScript solution for your Shopify store that will automatically hide out-of-stock variants:

The code will:

• Hide all size options with the “block-swatch–disabled” class
• Hide color swatches completely when all sizes for that color are sold out

To implement this on your store:

1. Go to your Shopify admin panel

2. Navigate to Online Store > Themes

3. Click “Actions” on your current theme and select “Edit code”

4. Look for the “Assets” folder and find your theme’s main JavaScript file (often named theme.js or custom.js)

5. Add the code at the end of this file and save

6. Alternatively, create a new JS file in the Assets folder, add the code there, and then include it in theme.liquid using: {{ ‘your-new-file-name.js’ | asset_url | script_tag }

   Here’s the code:

// Hide out of stock variants and color swatches when all sizes are sold out
document.addEventListener('DOMContentLoaded', function() {
  // First, hide all disabled size blocks
  const disabledSizeBlocks = document.querySelectorAll('.block-swatch--disabled');
  disabledSizeBlocks.forEach(block => {
    block.style.display = 'none';
  });
  
  // Now check if we need to hide color swatches (when all sizes for a color are sold out)
  const colorSwatches = document.querySelectorAll('.color-swatch');
  
  colorSwatches.forEach(colorSwatch => {
    // Get the color value from this swatch
    const colorInput = colorSwatch.querySelector('.color-swatch__radio');
    if (!colorInput) return;
    
    const colorValue = colorInput.value;
    
    // Check if this color has any available sizes
    let hasAvailableSizes = false;
    
    // Get all variant options from the select dropdown
    const variantOptions = document.querySelectorAll('#product-select-14909670162757 option');
    
    variantOptions.forEach(option => {
      const optionText = option.textContent;
      // Check if this option contains the current color and is in stock
      if (optionText.includes(colorValue) && !option.disabled) {
        hasAvailableSizes = true;
      }
    });
    
    // If no available sizes for this color, hide the color swatch
    if (!hasAvailableSizes) {
      colorSwatch.style.display = 'none';
    }
  });
  
  // Check if any color swatches are visible (optional)
  const visibleColorSwatches = Array.from(document.querySelectorAll('.color-swatch')).filter(
    swatch => swatch.style.display !== 'none'
  );
});

// Alternative approach using theme JSON data if available
// This is more reliable but requires theme liquid modifications
function hideOutOfStockVariantsUsingJSON() {
  // Check if window.theme and product JSON data exists
  if (window.theme && window.theme.product && window.theme.product.variants) {
    const variants = window.theme.product.variants;
    const colorOptionIndex = window.theme.product.options_with_values.findIndex(
      option => option.name.toLowerCase() === 'colour' || option.name.toLowerCase() === 'color'
    );
    
    // Exit if we can't find the color option
    if (colorOptionIndex === -1) return;
    
    // Track which colors have available sizes
    const colorsWithAvailableSizes = {};
    
    // Check each variant
    variants.forEach(variant => {
      const colorValue = variant.options[colorOptionIndex];
      
      // If this variant is available, mark its color as having at least one available size
      if (variant.available) {
        colorsWithAvailableSizes[colorValue] = true;
      }
    });
    
    // Hide color swatches that don't have any available sizes
    const colorSwatches = document.querySelectorAll('.color-swatch');
    colorSwatches.forEach(colorSwatch => {
      const colorInput = colorSwatch.querySelector('.color-swatch__radio');
      if (!colorInput) return;
      
      const colorValue = colorInput.value;
      
      if (!colorsWithAvailableSizes[colorValue]) {
        colorSwatch.style.display = 'none';
      }
    });
  }
}

// Call the alternative function as well if you want to use both approaches
// hideOutOfStockVariantsUsingJSON();​

Feel free to reach out if you’ve any more questions for us

Cheers!
Shubham | Untechnickle

[TheUntechnickle]

Please note it’s important to hide the color block if all the size blocks are out of stock for that particular color. This is the best practice when it comes to user experience.

[Fjen]

That worked, thank you very much! I really appreciate your help!

[Moeed]

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[Fjen]

Thank you @TheUntechnickle , I tried this code but it was hiding sizes and colours that are in stock. I really appreciate your time and help, thank you!

[TheUntechnickle]

I’ve written a simpler script, this should work

/**
 * Hide out-of-stock variants in Shopify
 * - Hides size swatches with block-swatch--disabled class
 * - Hides color options when all their sizes are sold out
 */
document.addEventListener('DOMContentLoaded', function() {
  // 1. Hide all disabled size blocks (out of stock)
  document.querySelectorAll('.block-swatch--disabled').forEach(block => {
    block.style.display = 'none';
  });
  
  // 2. Check all color options (handles both variant-swatch and color-swatch)
  const colorSwatches = document.querySelectorAll('.variant-swatch, .color-swatch');
  const variantSelect = document.querySelector('select[name="id"]');
  
  if (!variantSelect) return;
  
  // For each color, check if there's at least one size available
  colorSwatches.forEach(colorSwatch => {
    const colorInput = colorSwatch.querySelector('input[type="radio"]');
    if (!colorInput) return;
    
    const colorValue = colorInput.value;
    let hasAvailableSizes = false;
    
    // Check the variant dropdown for in-stock options of this color
    variantSelect.querySelectorAll('option').forEach(option => {
      const optionText = option.textContent || '';
      if (optionText.includes(colorValue) && !option.disabled) {
        hasAvailableSizes = true;
      }
    });
    
    // Alternative check: see if any size blocks for this color are not disabled
    // This handles cases where the variant selector might not match exactly
    if (!hasAvailableSizes) {
      // Get the currently selected color
      const selectedColor = document.querySelector('.product-form__selected-value');
      if (selectedColor && selectedColor.textContent === colorValue) {
        // If this is the selected color, check if ANY non-disabled size exists
        const anyVisibleSizes = Array.from(document.querySelectorAll('.block-swatch')).some(
          swatch => !swatch.classList.contains('block-swatch--disabled') && 
                   window.getComputedStyle(swatch).display !== 'none'
        );
        
        hasAvailableSizes = hasAvailableSizes || anyVisibleSizes;
      }
    }
    
    // If no available sizes for this color, hide the color swatch
    if (!hasAvailableSizes) {
      colorSwatch.style.display = 'none';
    }
  });
  
  // 3. After hiding colors, check if we need to select a different color
  const visibleColorRadios = Array.from(document.querySelectorAll('.variant-swatch:not([style*="display: none"]) input[type="radio"], .color-swatch:not([style*="display: none"]) input[type="radio"]'));
  
  // If the currently selected color is hidden, select the first visible one
  const selectedColorRadio = document.querySelector('.variant-swatch input[type="radio"]:checked, .color-swatch input[type="radio"]:checked');
  if (selectedColorRadio && window.getComputedStyle(selectedColorRadio.closest('.variant-swatch, .color-swatch')).display === 'none') {
    if (visibleColorRadios.length > 0) {
      visibleColorRadios[0].click(); // Select the first available color
    }
  }
});

[manan123]

Hii,Please help me. I am using dawn theme , but facing some issues in product collection page my choose variants box appearing below the product image as show in screenshot & also having some problem to click the image. Please help me in solving this

Link : https://mansaroverfurnishings.com/collections/bed-cover

[Fjen]

Thank you again @TheUntechnickle , but it is still hiding some sizes that are in stock. Thank you very much!

[TheUntechnickle]

Also, we’ll need to hide the size label that says Size: 8 or whatever; when all sizes are out of stock. Hence, I’m attaching the updated JS:

/**
 * Hide out-of-stock variants in Shopify
 */
document.addEventListener('DOMContentLoaded', function() {
  // 1. Hide all disabled size blocks (out of stock)
  document.querySelectorAll('.block-swatch--disabled').forEach(block => {
    block.style.display = 'none';
  });
  
  // 2. Check if we need to hide color options when all sizes are sold out
  const colorSwatches = document.querySelectorAll('.variant-swatch, .color-swatch');
  const variantSelect = document.querySelector('select[name="id"]');
  
  if (!variantSelect) return;
  
  // Track which colors have available sizes
  const colorsWithAvailableSizes = {};
  
  // Check each color
  colorSwatches.forEach(colorSwatch => {
    const colorInput = colorSwatch.querySelector('input[type="radio"]');
    if (!colorInput) return;
    
    const colorValue = colorInput.value;
    let hasAvailableSizes = false;
    
    // Check if any variant with this color is available
    variantSelect.querySelectorAll('option').forEach(option => {
      if (option.textContent.includes(colorValue) && !option.disabled) {
        hasAvailableSizes = true;
        colorsWithAvailableSizes[colorValue] = true;
      }
    });
    
    // Hide color if no sizes available
    if (!hasAvailableSizes) {
      colorSwatch.style.display = 'none';
    }
  });
  
  // 3. Hide size label if all sizes for selected color are sold out
  const sizeLabels = document.querySelectorAll('.product-form__option[data-selector-type="block"]');
  const selectedColor = document.querySelector('.product-form__selected-value').textContent;
  
  if (!colorsWithAvailableSizes[selectedColor]) {
    sizeLabels.forEach(label => {
      label.style.display = 'none';
    });
  }
  
  // 4. Select first available color if current one is hidden
  const visibleColorInputs = document.querySelectorAll('.variant-swatch:not([style*="display: none"]) input, .color-swatch:not([style*="display: none"]) input');
  if (visibleColorInputs.length > 0) {
    const currentColorInput = document.querySelector('.variant-swatch input:checked, .color-swatch input:checked');
    if (!currentColorInput || currentColorInput.closest('.variant-swatch, .color-swatch').style.display === 'none') {
      visibleColorInputs[0].click();
    }
  }
});

[manan123]

Hii,Please help me. I am using dawn theme , but facing some issues in product collection page my choose variants box appearing below the product image as show in screenshot & also having some problem to click the image. Please help me in solving this

https://mansaroverfurnishings.com/