How to grey out-of-stock variations in WooCommerce

Discover the easy way to grey out out-of-stock product variations in WooCommerce. This is a great way to prevent customers from trying to add unavailable variations to their carts. While there are no default WooCommerce grey out out-of-stock variations settings, there's a neat alternative - keep reading for a full step-by-step tutorial.

Are you trying to find a way to grey out out-of-stock variations in WooCommerce? 

One of the most common problems new and experienced Woo store owners face is that by default, WooCommerce doesn't grey out out-of-stock product variations or show them as unavailable. This means that customers can select variations that aren't in stock from the variation dropdowns, not realizing that they aren't available until after they choose them. 

Obviously, this is not ideal. When a product variation is unavailable, it's crucial to display this information clearly to avoid confusing and frustrating potential customers.

Even though there is no default grey-out setting for out-of-stock product variations, as with most WordPress and WooCommerce things, there are ways to fix this in your store. That's what I'll show you today. 

Essentially, there are three ways that you can handle this:

Method 1: Hide all out-of-stock products in your store. This is a default setting within WooCommerce that lets you hide all products that are out of stock — including product variations. But then customers don't know to look for them when they come back in stock!

Method 2: Use the WooCommerce Bulk Variations plugin to extend the default WooCommerce product variations settings. This easy-to-use plugin lets you grey out product variations that are out-of-stock to clearly show customers that they are unavailable.

Here's a screenshot of the final results:

As you can see, the out of stock variations are visible but greyed out. You can optionally display the 'Out of stock' status to make it clearer, too.

As you can see, WooCommerce Bulk Variations is an all-in-one plugin that helps you manage and display product variations. In addition to greying out unavailable variations, it lets you add and edit variations in bulk and display them in a user-friendly table format.

Method 3: Hire a WooCommerce developer to add filters to your theme's functions.php file and update its CSS. Alternatively, you can tweak the code if you have developer-level coding skills.

If you can't code and don't want to hire a web developer to add a code snippet, the first two methods are for you. They don't require you to touch any code and can be completed within a few minutes. 

In this detailed post, I'll walk you through the steps in the first two methods to hide and grey out out-of-stock variations in WooCommerce. And just as importantly, I'll also cover when to use each method in your store.

Here's a quick overview of this guide:

1. The limitations of using the default WooCommerce settings to hide out-of-stock product variations.
2. How to hide out-of-stock product variations in WooCommerce.
3. How to grey out out-of-stock product variations in WooCommerce.
4. Extra benefits of using the WooCommerce Bulk Variations plugin.
5. Conclusion

Ready to dive in? Let's get started!

What's wrong with how WooCommerce displays out of stock variations by default?

As I mentioned earlier, by default, WooCommerce shows all product variations as available, whether they are in stock or out of stock.

This is simply because there is no option for greying out out-of-stock variations in WooCommerce. This means that when customers try to buy a product variation that is not available, they can select the specific variation before seeing an out-of-stock notification.

But why is this a problem for your WooCommerce store?

The default method of managing a WooCommerce variable product that's out of stock can affect your store negatively by leading to the following:

The bottom line is that the default WooCommerce method of managing and displaying out-of-stock product variations is flawed. Thankfully, it's easy to fix this in your store, and that's what I'll cover in the upcoming sections of this post.

Method 1: How to hide out-of-stock variations in WooCommerce

Let's look at the first method of managing variations that aren't in stock in WooCommerce: hiding or removing them.

WooCommerce offers a built-in option to automatically remove out-of-stock variations from your store. This means that when a product variation becomes unavailable due to insufficient product stock, it won't be visible to customers.

The main benefit of following this method is that it creates a slightly better user experience than the default setting. This is because it provides a cleaner and more focused shopping experience for your customers. Shoppers will only see products available for purchase. This avoids the frustration of them trying to buy a variant that isn't in stock.

But there are also major downsides to using this method to manage out-of-stock product variations in your store. 

For one, it can lead to lost sales. Hiding product variations that are sold out means that the variations won't appear in search results or on the WooCommerce 'Shop' and 'Category' pages. This reduces visibility for products that are temporarily out of stock but are still relevant to customers. This means that you could miss the opportunity to capture eager buyers when the variants are back in stock. After all, if the products aren't visible, shoppers won't know that you usually stock those particular variants and might take their business elsewhere. 

Removing sold out or unavailable variants can also affect your site's rankings. This is because search engine bots can't index product variations and their keywords if they are no longer displayed on your site. So you'll lose the potential SEO benefits of listing the variations.

So, when should you hide out-of-stock product variations in WooCommerce?

I recommend that you only remove or hide out-of-stock product variations in WooCommerce if you don't plan to restock the variants in the future. And if that applies to you, then you'd be better off discontinuing them with the WooCommerce Discontinued Products plugin. 

If you plan to restock the variants later on, then don't use this method — I recommend that you grey out out-of-stock product variations instead.

However, if hiding out of stock variations is best for your use case, then I'll show you how to do this next. After that, I'll show you how to grey out of stock WooCommerce variations too.

Steps to hide out-of-stock product variations in WooCommerce

Now, it's time to answer the "How do I turn off out-of-stock variations?" and "How do I hide out-of-stock product variations in WooCommerce?" questions.

Let's walk through the steps to hide out-of-stock product variations using the default settings in WooCommerce. I've added screenshots to make it easier to follow along:

• Log into the backend of your WordPress site and navigate to WooCommerce → Settings → Products → Inventory. This page includes the main stock options for your WooCommerce store.

  

• Tick the "Enable stock management" checkbox to manage stock status.
• Scroll down until you find the "Out of stock visibility" option and tick the checkbox next to "Hide out of stock items from the catalog".

  

• Select the "Save changes" button from the bottom of the screen.

That's it! You've successfully prevented all out-of-stock product variants from being displayed on your eCommerce store.

Method 2: How to grey out out-of-stock product variations

In this section of the tutorial, I'll cover the following:

• How do I grey out out-of-stock variations in WooCommerce?
• How do I show out-of-stock variations in WooCommerce?
• How to display out-of-stock variants as sold out in WooCommerce?
• How do I set up my WooCommerce store to show out-of-stock items as unavailable?

Greying out out-of-stock product variations lets shoppers know that you usually sell those variants in your online store; they're just not in stock right now. This may prompt them to wait for the item to be available again and check back later, meaning that you won't lose out on those sales.

So, when should you grey out out-of-stock product variations?

Showing out-of-stock variations as unavailable or greying them out doesn't negatively impact your site's SEO and rankings. So you can use this method whether you plan to restock the variants in the future or not.

To do this, we'll need the handy WooCommerce Bulk Variations plugin:

WooCommerce Bulk Variations lets you grey out out-of-stock product variants on your online store. It does this by displaying your variations in a table or grid layout, so that each variation is visible without having to select them from a dropdown. Customers can see which variations are available or out of stock at a glance. 

The sold out or unavailable variations will still be visible on your site, but customers will clearly see that they aren't available and can't be selected.

Steps to grey out out-of-stock variations in WooCommerce

It's pretty straightforward to use WooCommerce Bulk Variations to grey out out-of-stock product variations. Here are the simple steps you need to follow:

Step 1. Install and activate the plugin

The installation steps are similar to any other WordPress or WooCommerce plugin:

• Buy the WooCommerce Bulk Variations plugin and download it to your computer.
• Go into your WordPress admin dashboard. Navigate to Plugins → Add New → Upload Plugin.
• Click 'Choose File', then select the plugin file you downloaded earlier.
• Click on Install Now → Activate.
• Enter your license key in the plugin setup wizard to complete the activation process.

Step 2. Configure your global variation display settings

After you've activated the plugin, our next step is to configure the general settings for the plugin. You can either do this in the setup wizard, or on the settings page as I've described below: 

1. Navigate to WooCommerce → Settings → Products → Bulk variations within your dashboard. This page is where you'll find the global options for the WooCommerce Bulk Variations plugin.

   

2. Select the "Use the variations grid for all products....." options if you want to enable the variations grid for all eligible variable products. That saves you having to enable it for individual products on the 'Edit Product' screen. 
3. Optionally select the checkbox to "Display stock information in the variations grid". This will display an 'Out of stock' message for unavailable variations, in addition to greying them out.
4. Select the "Display description in the variations grid" checkbox if you want to display the variation description in the grid.
5. If all the product variants you sell are the same price, select the "Hide prices if all variations have the same price" checkbox. This makes the product page look cleaner.
6. The "Variation images" option lets you choose whether or not to show images. If you want to show product images, select whether they should be displayed vertically or horizontally. Also, you can choose to display images using a lightbox.
7. Next, choose the default product attributes to be displayed as the grid's main horizontal and vertical headers. If you have just one attribute, select whether to display it horizontally or vertically on the grid.
8. Finally, scroll down and hit "Save changes".

Step 3. Create variation grids

Finally, you need to actually have some variable products set up in your store! If you've already done this, then skip this step. For more information, you can also read our complete guide to WooCommerce product variations. 

1. Within your WordPress admin dashboard, navigate to the Products → All Products. Hover over the specific product you want to add a variation grid and click "Edit".
2. Scroll down to the "Product data" module and click on "Variable product" from the "Product type dropdown.

   

3. Click on the "Attributes" tab within the "Product data" module. 
   • If you've previously added attributes, select each of the existing attributes and tick the "Used for variations" checkbox. This adds the attribute to the variations grid on the single product page.
   • If you haven't added any attributes, enter the name and values for custom attributes to the product. Tick the "Used for variations" checkbox and select "Save attributes" to create the attribute.
4. Then go into the "Variations" tab and update the details for each variant, such as adding a price. The WooCommerce Bulk Variations plugin has added some handy filters to each section to make it faster to add the same infomration to multiple variations. For example, you can select all 'Blue' variants and set the same image for them all. 
5. Finally, scroll to the top of the "Edit Product" page and hit the "Publish" or "Update" button to save your changes.

And that's it! Head over to the front end of your site to see how it looks. You'll notice that the variations are displayed in a neat grid on the product page. All out-of-stock product variations will be greyed out. Customers can still see them, but they won't be able to click and add them to their carts.

Extra benefits of using WooCommerce Bulk Variations

WooCommerce Bulk Variations is a complete variation management plugin. This means it makes it easier for you to add and manage variations within WooCommerce and for your customers to quickly place orders for large quantities of product variants.

As well as greying out out-of-stock products, WooCommerce Bulk Variations also lets you:

• Showcase product variations in a table on the product page: Replacing the standard, clunky dropdowns that display product variations with a simple table gives customers a detailed overview of what is available at a glance. This visually shows customers' attributes, options, variation descriptions, prices, and stock information and streamlines the user experience.
• Create an ordering form to improve the ordering process: The plugin adds an order form layout that lets customers add multiple product variations to their carts and quickly update the quantity of the variants they've selected. Also, notice the "Add to cart" button right underneath the form. This helps you sell more products and their variations faster.

  

• Add and edit multiple variants at once: You can select multiple product variations and bulk apply the same changes to them. For instance, you can add or remove variants, attach images, update shipping details, change prices by a percentage or fixed amount, and much more at once. This significantly reduces the time spent editing and managing variations on the backend.

  

• Use a shortcode to add the product variations grid anywhere on your site. By default, the plugin adds the variations grid in place of the default WooCommerce variation dropdowns on the single product page. In addition to this, you can also use shortcodes to add the grid to multiple locations on your website, such as below the add-to-cart button or on the shop page and 'category' page.

  

Ready to grey out out-of-stock variations in WooCommerce?

The default way of displaying variable products that are sold out or unavailable in WooCommerce just isn't ideal for most Woo stores that sell product variations. It can result in a disappointing customer shopping experience, higher cart abandonment rates, and lost sales.

I've shown you two ways to manage out of stock variants: by hiding or by greying them out. If you don't plan to restock product variants, then hide out-of-stock products or discontinue them properly. If you do, greying out out-of-stock variants is the best way to manage product variations. 

The best WooCommerce plugin to grey out out-of-stock variants is WooCommerce Bulk Variations. This powerful, easy-to-use plugin lets you manage and display product variants in your store. There are plenty of benefits to using it. You can:

1. Grey out out-of-stock product variations.
2. Display multiple variations, their prices, and other details in a table layout on your WooCommerce site.
3. Create a shoppable order form to enable quick selection and checkout of products.
4. Add or update product variations in bulk to save you lots of time.

Get the WooCommerce Bulk Variations plugin today!