How to Grey-Out Out of Stock Variations

In this tutorial, I will show you an easy way how you can grey-out out of stock variations in WooCommerce. It is actually much easier than you might think.

However, let me show an example of what we are going to achieve here:

By the way, if you’re using my Simple Variation Swatches for WooCommerce plugin, then you don’t need to code anything, and this feature is already included by default for variations that are out of stock. For example, the same greyed-out radio button-type variations will look like:

Color swatches will look like this:

Now, after you know about the plugin approach, let’s move on to the WooCommerce functionality that comes out of the box.

By default, WooCommerce allows us to select a variation even if it is out of stock, and as a result, we might have a frustrated customer who sees this sad smiley instead of an active “Add to cart” button:

However, you can change that experience and completely hide all out-of-stock variations using a checkbox in “WooCommerce > Settings > Products > Inventory”.

Using woocommerce_variation_is_active to Grey-Out Variations

The cool news is that even though WooCommerce doesn’t have a specific option in its settings, it allows us to use a straightforward hook woocommerce_variation_is_active to grey out any specific variation.

add_filter( 'woocommerce_variation_is_active', 'rudr_variation_grey_out', 25, 2 );
function rudr_variation_grey_out( $active, $variation ) {
	
	// here we can do whatever we want

	return $active;

}

Let’s take a look at the available arguments in the callback function:

$activebool

Set it to true if you want to gray-out this specific variation.

$variationWC_Product_Variation

The variation object.

As you can see, using the WC_Product_Variation object, we can make any variation unselectable, not only if it is out of stock. For example, we can check an ID with this simple method: $variation->get_id() or attributes with this one: $variation->get_attributes().

How to Check if a Variation is Out of Stock and to Grey it Out

Let’s start with some basics, to be more specific – with the definition of an out-of-stock variation:

• “Stock status” is set to “Out of stock”,
• “Stock quantity” is equal to 0 when the stock is managed on the variation level,
• “Stock quantity” is equal to 0 when the stock is managed on the product level.

In all these cases, the is_in_stock() method will return false. That’s exactly what we need and what we are going to use in the code snippet below.

/**
 * @snippet WooCommerce: Grey-Out Out of Stock Variations
 * @author Misha Rudrastyh
 * @url https://rudrastyh.com/woocommerce/gray-out-out-of-stock-variations.html
 */
add_filter( 'woocommerce_variation_is_active', 'rudr_grey_out_out_of_stock_variation', 25, 2 );
function rudr_grey_out_out_of_stock_variation( $active, $variation ) {
	
	if( ! $variation->is_in_stock() ) {
		$active = false;
	}

	return $active;

}

If you don’t know where to use this code, please check this guide.

And here is the result:

If you have any other questions, please let me know in the comments section below.

# WooCommerce, Product inventory, Variable Products

Misha Rudrastyh

Hey guys and welcome to my website. For more than 15 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X