How to Gray-out Out of Stock Variations

In this tutorial we will try to make specific variations (out of stock ones) in the variations dropdown list not selectable:

how to grey out WooCommerce variations in the dropdown which are out of stock

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

example of out os stock variation in WooCommerce

The definition of out-of-stock variation:

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

Don’t forget that there is an option in WooCommerce > Settings > Products > Inventory which allows to hide out of stock variations from the dropdown list:

how to hide out of stock variations from the dropdown selection
Just hit “Hide out of stock items from the catalog” checkbox and out of stock variations will disappear from the dropdown list.
add_filter( 'woocommerce_variation_is_active', 'rudr_variation_grey_out', 25, 2 );
function rudr_variation_grey_out( $active, $variation ) {
	// here we go
	if( ! $variation->is_in_stock() ) {
		$active = false;
	return $active;

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

If you’re using this code to display variations as radio buttons, there is also some additional JavaScript you need to add to make it work:

$( document ).on( 'woocommerce_update_variation_values', function() {
	$( '.rudr-variation-radios input' ).each( function( index, element ) {
		const radio = $(element)
		const radioName = radio.attr( 'name' )
		const radioValue = radio.attr( 'value' )
		radio.removeAttr( 'disabled' )
		if( $( 'select[name="' + radioName + '"] option[value="' + radioValue + '"]' ).is( ':disabled' ) ) {
			radio.prop( 'disabled', true )

Now it is perfect:

gray out out-of-stock variations as radio buttons
If you want to display the variations as radio buttons, check this tutorial.
Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 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