Disable (grey out) out-of-stock swatches

If you have less variations than the AJAX variation threshold, you can grey out or disable out-of-stock attribute options. There are 2 ways to do this:

Hide out of stock products

The first option is to toggle a simple setting in WooCommerce.

  1. Navigate to WooCommerce > Settings > Products > Inventory
  2. Ensure "Hide out of stock items from the catalog" is checked.

Note: This will grey out/disable the swatch options, but it will also hide any out of stock products throughout your store.

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 keep out of stock products throughout the store visible (if the checkbox is the previous step is left unchecked).

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.