How to Hide Unavailable Variations In WooCommerce

WooCommerce product variations allow you to display multiple options for a particular item so that customers can select whichever one they want. It helps to improve the user experience on your store, as users will have a personalized shopping experience. This post explains what WooCommerce variations are and how you can hide unavailable variations.

Table of Contents

WooCommerce Hide Unavailable Variations

There are times that a product you list in your online store, comes in one type. However, many items will come with various options. For example, clothing comes in different colors or sizes. Fortunately, WooCommerce provides a built-in way to add any options to your product pages.

Moreover, it is worth mentioning that this system is made up of two key features. These features are ‘attributes’ and ‘variations’, which are often confused. It is important to clarify the difference between them.

WooCommerce Attributes

Attributes describe a product. They let customers know key facts about a product’s size, color, material, and so on.

The image below shows how attributes are listed in WooCommerce:

This descriptive information is listed on the product page, but cannot be interacted with or changed by the customer.

WooCommerce Variations

Unlike attributes, customers can select the variations. For example, if a customer can choose between a large and medium product variation.

If you want to let people select different options, you will also need to add variations.

However, it is important to note that for you to use WooCommerce variations, you need to set up attributes first. This is how variations are displayed on the front end:

WooCommerce Hide Unavailable Variations

In this section, I will share a quick solution to disable out of stock variations in variation, in the select fields. WooCommerce does not hide any variations that are out of stock. The customer will select the variation first so that he can know if it is out of stock.

Steps to Hide Unavailable Variations

There are many ways you can achieve this functionality. Some of them involve JavaScript. However, adding a PHP code snippet is the best way. In the illustration below, I will use a function that uses the standard woocommerce_variation_is_active filter. It checks whether the variation is in stock, and returns false if it’s not.

Here are the steps that you need to follow:

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 to hide unavailable variations.
Add the following code to the functions.php file:

/**

 * Disable out of stock variations

 * @return Boolean

 */

function njengah_variation_is_active( $active, $variation ) {

 if( ! $variation->is_in_stock() ) {

 return false;

 }

 return $active;

}

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

Do not forget to ensure that you are managing your variations’ stock, as shown below:
This will be the outcome on the front end:

Editorial Staff

Conclusion

In this tutorial, you have seen how WooCommerce has supreme flexibility. This post highlights the difference between WooCommerce variations and attributes. Moreover, it is important to note that WooCommerce does not hide any variations that are out of stock. However, I have shared a step-by-step guide on how you can hide unavailable variations in your WooCommerce store to avoid customer frustration.

How to Hide Unavailable Variations In WooCommerce

WooCommerce Hide Unavailable Variations

WooCommerce Attributes

WooCommerce Variations

WooCommerce Hide Unavailable Variations

Steps to Hide Unavailable Variations

Conclusion

Similar Articles

Related