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