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).