How to display out of stock variations as unavailable in WooCommerce

A simple method to grey out unavailable options in variation select fields

Update

I’ve created a free plugin that will allow you to disable any out of stock variations and even include custom ‘sold out’ text. You can download WooCommerce Better Variations here.

This is a quick solution to how to disable out of stock variations in variation select fields. By default, WooCommerce doesn’t grey out any variations that are out of stock – it allows the user to select the variation first, then lets them know it’s out of stock.

However, you may prefer to see something like the image below, with out of stock options disabled and displaying ‘sold out’ text.

Grey out WooCommerce variable product out of stock

There are a lot of suggested solutions out there for how to disable out of stock options, many involving complicated JavaScript. It’s not necessary. Just add the following snippet to your functions.php file or wherever you add snippets:

/**
* Disable out of stock variations
* https://github.com/woocommerce/woocommerce/blob/826af31e1e3b6e8e5fc3c1004cc517c5c5ec25b1/includes/class-wc-product-variation.php
* @return Boolean
*/
function wcbv_variation_is_active( $active, $variation ) {
if( ! $variation->is_in_stock() ) {
return false;
}
return $active;
}
add_filter( 'woocommerce_variation_is_active', 'wcbv_variation_is_active', 10, 2 );

That’s all you need to do. The function uses a standard WooCommerce filter – woocommerce_variation_is_active, checks whether the variation is in stock, and returns false if it’s not. WooCommerce does the rest.

Oh, and don’t forget to ensure that you are managing your variations’ stock.

WooCommerce manage variation stock

Where to find the ‘sold out’ text

Prompted by a couple of comments below, I started digging around to find where the ‘sold out’ text came from. It seems that the solution above will grey out your out of stock variations but won’t necessarily display the ‘sold out’ text after.

This text is added by WooCommerce in templates/single-product/add-to-cart/variable.php. If you’re not seeing this text, my first guess is that your theme is using a custom template for the variable add to cart. I’d check your theme files first.

19 thoughts on “How to display out of stock variations as unavailable in WooCommerce

I cannot believe there are no coments here yet! thanks for the snippet, I’ve seen a lot of hacky solutions out there and was hoping there was a simple filter available. cheers!

Reply

Always good to be the first.

Reply

actually after testing it did not work well for me. no matter how I set up the variations and stock levels I ALWAYS got a return of true for $variation->is_in_stock(). so I found $variation->get_stock_quantity(); which actually works to return an accurate current stock value, which can then be used to set a variant as in or out. hopefully if someone is having the same issue I was this can help em out.

add_filter( ‘woocommerce_variation_is_active’, ‘my_jazzy_function’, 10, 2 );

function my_jazzy_function( $active, $variation ) {

$var_stock_count = $variation->get_stock_quantity();

// if there are 5 or less, disable the variant, could always just set to 0.
if( $var_stock_count <= 6 ) {
return false;
}
else {
return true;
}
}

Reply

Thanks man! I dont understand why this isnt build in woocommerce! How can I add the “sold out” like in your image above?

Reply

Thanks for the code, it works perfectly! And as Kai mentioned above, can you also tell us how to add the “sold out” text? Thanks again

Reply

Hi – I’ve updated the article with a possible solution.

Reply

Is there anyway to adapt this for when a particular option simply isn’t available in the first place? For example RED, BLUE, GREEN T-shirts available in Small, Medium Large….except the green one which is only available in Small and Medium. Hope that makes sense 🙂

Reply

This looks great but two questions.

Is it possible to show the price for the variation with in the drop down

and is it possible to show if its “available on back order” instead of just those which are out of stock

Reply

Hi There, Thanks for the script. Works great to stop the product which is out of stock variation being selected, but as previous comments I don’t have the out of stock text.

I have found a php file called simple.php in wp-content/themes/legenda/woocommerce/single-product/add-to-cart which looks like it is my theme’s version of templates/single-product/add-to-cart/variable.php, but I’m not sure if I can manually add the text out of stock?? is this possible and if so, do you know where I would add it within the script?

Thanks

Reply

If you don’t have variable.php, you could copy it from the WooCommerce plugin’s template folder and paste it into your child theme’s WooCommerce folder, next to simple.php.

Reply

Doesn’t seem to do anything. I copied the variable.php from the link you sent into the same folder as simple and no change.

Sorry to hassle you, but it looks a bit strange as the theme is grey text, so the text on the dropdown doesn’t look any different, you just can’t select the product that is out of stock, so the user will be confused. https://fusionboard.co.uk/shop/boards/fusion-board-classic/ black is out of stock.

If you have any other suggestions that would be great, but if not I’ll contact the theme developer to see if they can change it. Thanks again for your help so far.

Reply

Hello, great piece of code 😉 Thanks !

About the “Sold out” issue, i think you are wrong and it’s your template that is different, or you have an existing extension that hacks “wc_dropdown_variation_attribute_options” function. Because “Sold Out” is not an expression used by Woocommerce, you can look out through code and mysql, and it never exists ! WooCommerce says “Out of Stock”, not “sold out !

Reply

Thanks for this. as above, no out of stock text though.
Where do i start by looking at ‘themefiles’?

Reply

I have a strange issue with this code. It only shows the first out of stock variant as grey, even though there are 2 out of stock variants. Any ideas?

Reply

If you do not manage stock quantities:

function filter_woocommerce_variation_is_visible( $true, $instance ) {
$variation = get_product( $instance->variation_id );
if ( $variation->get_stock_status() == “outofstock” ) {
return false;
}
return true;
};
add_filter( ‘woocommerce_variation_is_active’, ‘filter_woocommerce_variation_is_visible’, 100, 4 );

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *