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.

Note: this will only work on products with a single variant.

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.

How To Change The Colour Of the Text “Sold Out”

I was asked how to go about changing the colour of the text “Sold Out”.

I’ve altered the main function zpd_add_sold_out_label_to_wc_product_dropdown(), line 36 to output the “sold out” text with a span and a class name of “wc-sold-out-text”.

Use CSS, to change the colour, font and weight of this text.

  color: red;
  font-weight: bold;

You can add additional CSS using the customiser Apperance > Customise > Additional CSS

Was this article helpful?

Keep In Touch


Wil is a dad, WordPress consultant, WordPress developer, business coach and 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.

12 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.


  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.


    1. Hi Stefano

      There must be another conflict somewhere.

      I ran the code on a vanilla WP installation with WC latest version.

      Works fine with variants that have a period “.” in them for me.

      See image:
      WC prod variation test


        1. I find the problem.
          If the attribute slug is different from attribute title, this snippet doesn’t go.

          ES. if attribute title is 7.5 and slug is 7-5 doesn’t go.


          1. Hi Stefano and Wil,

            I have the same problem as Stefano in that the code works brilliantly (thanks Wil!) except for on half shoe sizes listed as 4.5, 5.5, 6.5 etc. As Stefano says it’s the slugs which read 4-5, 5-5, 6-5 etc. I’ve tried to alter the slugs to replace the hyphen with a dot but it’s not possible – they revert to hyphens. I can understand this as they’re a url format but is there another way around the problem? Thanks for your time.

  3. Ah, what a shame – the snippet works fantastically on single attribute products ie a shoe with just a size choice. But on another product, a boot with size AND width attributes to choose from it doesn’t appear to work and is showing selectable sizes we have in stock with ‘sold out’ beside them. Woocommerce itself doesn’t seem adept at dealing with products with multiple options but most products these days have colour, size, width and any number of other variations to choose from. Not expecting a solution as it’s probably more a Woocommerce issue but am asking the question anyway! Many thanks, Si

    1. Correct. This code only works on single variations. I’ll add this to the main post.

      It’s not a limitation of WooCommerce, rather, the code I have written doesn’t spin through every combination of multiple variations – that would add quite a delay for products with large numbers of variations and slow down the site.

Comments are closed.