Do you want to know how to show out the out of stock variations in WooCommerce?

By default, WooCommerce has no option for greying out out-of-stock variations. This means that if consumers try to buy an out-of-stock item, they can select it before seeing an out-of-stock message.

Out-of-stock items can be greyed out in WooCommerce to prevent buyers from adding them to their cart in the first place.

So, In today’s article, I’ll explain how to show WooCommerce out of stock variations with the help of WooCommerce Variations Swatches plugin. 

Preview

Here’s a quick sneak peek of the final results.

How to Grey Out Out of Stock VAriations in WooCommerce?

Follow the following steps to show or grey out the out of stock items or variations in WooCommerce. 

1. Install and Activate the WooCommerce Variation Swatch Plugin

Note: You can skip this step if you have installed and activated the WooCommerce Variation Swatches plugin. 

To install the WooCommerce Variation Swatches plugin, you will need to install the Woosuite Core plugin and activate it with the help of a license key. We have created a Quick Start Guide for you to figure out how to install and activate the WooCommerce Variation Swatches plugin. 

2. Navigate to Variation Swatches Settings

From the WordPress Admin Dashboard, navigate to Woosuite » Variation Swatches.

3. Enable Variation Swatches

Now, enable the variation swatches by toggling the button. 

4. Set Out Of Stock Behaviour

Now scroll down, until you see Out of Stock Behaviour and select Blur With Cross from the dropdown. 

5. Save Changes

Finally, click on the Save Changes button on the top right corner to save the settings. 

Final Results

Now visit the product page which is out of stock and you’ll see that the out of stock item is greyed out and crossed. 

Users will see a cross and blur on the out of stock variation and they won’t be able to add it to cart.

Conclusion

WooCommerce Variation Swatches plugin makes it simple to grey out out-of-stock variations. You can style and modify your out-of-stock variants in a variety of ways. This helps in giving your customers a far better user experience.

Now you know how to show or grey out the variations in WooCommerce easily; hopefully, you’re ready to move forward on your own.
Ready to start? Get the WooCommerce Variations Swatches plugin today!