Disable (Grey Out) Out-of-stock Swatches

If you’re looking to grey out or disable out-of-stock swatches/attributes, you can do so with WooCommerce Attribute Swatches.

In this guide, we’ll show you two methods for doing this. The first will grey out/disable the swatch options, but it will also hide any out-of-stock products throughout your store.

The second requires coding knowledge or a developer but will allow you to only grey out or disable out-of-stock swatches rather than hide out-of-stock products.

Hide out of stock products

The first option is to change a setting in WooCommerce itself. To do this, take the following steps:

  1. From your WordPress dashboard, go to WooCommerce > Settings > Products > Inventory
  2. Once here, check the Hide out of stock items from the catalog checkbox next to Out of stock visibility.

Note: This works If you have fewer variations than the AJAX variation threshold. Read our guide if you want help adjusting this.

Filter variation visibility

The second option is to add a filter to your theme’s functions.php file that only affects variations.

 * Disable out of stock variations
 * @param bool $active
 * @param WC_Product_Variation $variation
 * @return Boolean
function iconic_variation_is_active( $active, $variation ) {
	if( ! $variation->is_in_stock() ) {
		return false;

	return $active;

add_filter( 'woocommerce_variation_is_active', 'iconic_variation_is_active', 10, 2 );

This will disable swatches when a variation is out of stock but will keep out-of-stock products throughout the store visible (if the checkbox is the previous step is left unchecked).

WooCommerce Attribute Swatches

Turn your WooCommerce product options into color, image, or text swatches. Instantly enhance your customers’ online experience.

Was this helpful?

Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.