How To Display Out Of Stock Variants As Sold Out In WooCommerce

We don’t want our customers clicking on products that are out of stock do we?

This simple bit of code disables out of stock vairants from being selected in the dropdown box.

It also adds a helpful “Sold Out” to the dropbown list informing your customers.

WooCommerce Clickable Out Of Stock Variants

By default, WooCommerce allows customers to select an out-of-stock product, adding the words “Out of stock” just under the price.

WooCommerce out of stock clickable product

We don’t want customers to waste their time clicking on a product that has no stock.

WooCommerce Out Of Stock Variant Greyed Out

After the code block below has been added, you can see the results in the drop-down variations box.

woocommerce sold out variant greyed out - displaying text "Sold out" in drop-down variation list

That’s better!

Now the Colour variant drop-down box has the “Red” variant greyed out so customers can’t click on it.

We’ve also added the text “sold out” to the variant drop-down list as a clear indication of no stock to our customers.

As well as adding the code block below, you will of course have to tell WooCommerce to manage the stock for variants in the back-end, by editing the product variants.

Where To Put The Code Snippet?

This code snippet should go in your active theme’s functions.php file.

Add it to the bottom of the file, before any closing ?> characters.

It’s always a good idea to take a backup of your functions.php file in case anything goes wrong – you can just copy the old code back in again.

Keep In Touch

Wil

Wil is a dad, consultant, developer, conference organiser, speaker and business mentor. He co-organizes the WordPress Sydney meetup group and has been on the organising committee for WordCamp Sydney since 2014. He speaks at many special events and contributes to the WordPress open source project. His likes are chillies, craft beer and electrogravitics.

4 thoughts on “How To Display Out Of Stock Variants As Sold Out In WooCommerce”

  1. Hello,

    thank you so much for this snippet and the very detailed guide!

    Is there also a way to grey the variants out based on:

    “stock status = Out of stock”?

    Without using the “Manage stock?”

    I never use the manage stock option and I simply set a product to “Out of Stock” (0 value via csv import) when it should not be available.
    Therefore it would be awesome if it’s possible to modify the snippet to work without the manage stock option?

    I tried to search on google since hours but I just couldn’t find a working solution 🙁
    I would be so glad if you could help me.

    Thank you in advance!

    1. Hey there buddy.
      Thanks for your question.
      It’s not possible because the stock status won’t show on the front-end of the store unless you check the manage stock option for a product.

      Wil.

  2. Hi Wil,
    Thanks for this bit of code!
    I’ve placed it in the functions.php file. The variation that has zero stock is now greyed out and can’t be selected. The only thing not showing is the ‘sold out’ text.
    Any thoughts on what could be the problem?
    Thanks in advance!

    1. That’s odd. It works fine on my vanilla WooCommerce store running TwentyTwentyone.

      Are you able to quickly switch your theme to a default one and check the single product page dropdown.

      Your theme may be using the same filter.

      Wil.

Leave a Comment

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