How to Hide Out of Stock Variations in WooCommerce

This is a brief tutorial on how you can disable out of stock variations in variation select fields. If you are familiar with WooCommerce, then you know that it allows you to sell variable products in your store. These variations can be used if you are selling digital products that can be downloaded or sold as a hardcopy. This can be a great revenue strategy as you will be able to sell a product in different forms.

Table of Contents

The digital revolution is here to stay, as many products have vanished from the shelves to be in our hard drives, for example, books, music, and photos. The digital revolution has become so rampant that even calculators, watches, spreadsheets, and notebooks became apps that are used on a day-to-day basis. Additionally, even some services have become digital as well. This can be seen in stores that offer virtual gift cards or online courses.

Moreover, having digital products will create a convenient place where users can access your products. A good example is the iTunes Store created by Apple Company, which provides the convenience of finding music. Users are also willing to pay for this convenience as these products can be downloaded.

Now that you know the basics of how you can use variable products, you need to know what to do when a product is out of stock. You need to avoid user frustration, by never letting them pick a product or a product variation that is out of stock, only to realize later that they cannot purchase it. WooCommerce by default does not grey out any variations that are out of stock. It only informs the user that the product is out of stock after selecting the variation first. The default look of the product page looks like this:

As shown in the image, a variable product comes with a “select dropdown” on the single product page, from which customers can pick their favorite variation. However, only after selecting this they will find out about price, stock status, and may be able to add to the cart. This can be shown in the image below:

With all that said, let me show you how you can completely disable or grey out hose select dropdown options that are out of stock so that users don’t waste time and only pick one of those that are in stock. First lets us look at how you can sell Complex WooCommerce Downloadable Products

a) How to Sell Complex WooCommerce Downloadable Products

Selling digital products is one thing, and occasionally you may need to sell different variations of the same product. For example, if you are selling music you may want to sell digital and physical versions of your product.

This is very easy to implement as it can be done using the WooCommerce variable product. This will help you to have multiple products inside the digital product meaning that you can have digital and virtual variations of regular products. Setting complex WooCommerce digital products is very easy and you need to follow these steps:

Steps to add complex WooCommerce Downloadable Products

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Products > Add new. Then, you need to add the product details such as price, download limits (if any), expiration date, and make sure to check the virtual and downloadable options.
Then, under the attributes tab add the different versions you have for your product as shown in the image below. Here you can use Licensing, media type, packages, and many other variations. Make sure to select the ‘used for variations’ checkbox as shown below.
Under the variations, the tab adds the different variations you want. When creating one, you can select the attributes of a simple product for it. This implies that one variation can be virtual and downloadable, while others are not. In the image below, you can see that the download variable can be downloaded, as it is a virtual product. Remember to update the changes that you make.

b) Steps to Hide Out of Stock Variations in WooCommerce

Now that you know how to sell complex downloadable products, here are the simple steps that you need to follow to hide the out of stock variations in WooCommerce:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will Hide Out of Stock Variations in WooCommerce.
Add the following code to the php file:

/**

 * @snippet       Disable out of stock variations @ WooCommerce Single

*/

add_filter( 'woocommerce_variation_is_active', 'njengah_grey_out_variations_out_of_stock', 10, 2 );

function njengah_grey_out_variations_out_of_stock( $is_active, $variation ) {

    if ( ! $variation->is_in_stock() ) return false;

    return $is_active;

}

To see the outcome, simply refresh the product page and you will see that the product variation has been disabled when out of stock:

Conclusion

In this post, you have seen that having product variations can help you to gain more revenue. I have also shared how you can add and sell complex products in your WooCommerce store and adding the variations. Additionally, I have shared how you can hide or grey out a product variation when it is out of stock.

This will help to reduce user frustrations, as they will not select the product to know if it is out of stock. Moreover, it is very easy to implement this solution in your WooCommerce store, as you only have to follow the detailed steps in this post.

Editorial Staff

How to Hide Out of Stock Variations in WooCommerce

a) How to Sell Complex WooCommerce Downloadable Products

Steps to add complex WooCommerce Downloadable Products

b) Steps to Hide Out of Stock Variations in WooCommerce

Conclusion

Similar Articles

Related