WooCommerce already has a setting to completely remove products/variations products when out of stock. This means they’re no longer visible on shop pages or on product pages for the variations. If your store offers products that come back in the future it is a good idea to not completely remove them. Showing variation as disabled can be an improvement to the customer experience to show there are different options available, but not available right now.

Remove Out of Stock Products

If you want to remove the products and variations that are out of stock, use the existing settings in WooCommerce Core. Head over the WooCommerce > Settings > Products > Inventory settings section. There you’ll find the ‘Out of stock visibility’ checkbox; check the box if you’d want to hide these product from the catalog, and variations from the dropdown completely.

Disable Out of Stock Variations

With just a small code snippet it is possible to check the product stock and make variations inactive. WooCommerce Core will then by default show the options in the dropdown as disabled. The snippet gives the effect shown in the screenshot.

Add Text to Out of Stock Variations

With the above addition it is not possible to select and view these variations. Add the text ‘(out of stock)’ to provide additional context as to why variations are not available/disabled.

Adding the snippet below adds this text to all disabled options. This is done through some Javascript in order to make sure it is updated accordingly. You can change the text of course in the snippet itself.

Which gives this as a result;

Jeroen Sormani

I'm a professional WordPress plugin developer on a mission to create the best plugins for my clients. I'm specialised in developing general WordPress, WooCommerce and Easy Digital Downloads plugins.

Interested in talking about a WordPress project? Get in touch!

Follow me on Twitter

34 thoughts on “Disable Out of Stock Variations in WooCommerce”

Michael February 13, 2024 at 2:59 pm

Hi Jeroen – thanks for the snippet. Tried it with Woo v8.5.2 and added the snippet to my child theme functions.php and it does not grey out my “out of stock” variation for a variable product.
The variable just has one attribute with four possible values.
Any idea what I am doing wrong?
Thanks, Michael

Reply
Jeroen Sormani February 14, 2024 at 9:56 am

Hi Michael,

Just tested on 8.7 and it works for me.
Since its not the AJAX refresh due to the 30 variation threshold I don’t have a from-the-top-of-my-head solution..

It is showing the option? (doesn’t remove it – there’s a Woo Core setting for this)

Cheers,
Jeroen

Reply
Thomas April 10, 2024 at 2:20 pm

Hi Jeroen, i want to do the same but instead of a drop down i have variation swatches. When i add the code to my site. It doesn’t work. What do i need to change to make it work?

– Thomas

Reply
Jeroen Sormani April 11, 2024 at 10:05 am

Hi Thomas,

Creating this code for disabling the existing was already quite difficult as its not really meant to be done in Woo. This does also mean that it won’t just automagically work on other plugins / swatches like that. It’ll likely have to be created specifically for that in order to work.

Cheers,
Jeroen

Reply
Hansolo June 5, 2024 at 8:03 pm

Hi Jeroen,

Great solution! Helped me with a problem I was trying to solve. I’m wondering if there is an easy way to display the remaining stock quantity for each variation for those not disabled. Is that possible?

So in your example, it would show: Red (Only 5 left).

thanks.

Reply
Jeroen Sormani June 6, 2024 at 12:04 am

Hi,

That would be best done in a different / new snippet, not included with this. This is a work-around fix to accomplish the disabling of the variations, which isn’t really possible out of the box.
Not *entirely* sure if adding the stock qty would be doable in a better way, but I’d expect it to.

Cheers,
Jeroen

Reply

Leave a Reply