WooCommerce: Show ‘Out of Stock’ Label on Shop Page

What is the usual shopping trend on your site? I’ve noticed 80% of shoppers using product filters on my site to shortlist products. I mean, I get it. I have over 200 products spread across 20 pages, in my WooCommerce store. I added the filters for that very reason; to make it simple for visitors to find the products they needed. But now I have a problem. The filter works fine. But WooCommerce does not!

To deviate off topic for a bit, the thing about WooCommerce is that most of the times, say 97.6% of the times, I like that it knows exactly what I want, without me having to tell it. For example, I do not need to change most of its default settings. But 2.4% of the time it thinks it knows something when it doesn’t. Okay I’m ranting so let me explain.

[space]

WooCommerce Out of Stock Settings

In WooCommerce, out of stock products are by default shown in the shop or product search page. I haven’t changed the settings, so it should work as expected. As a store owner, it is important to me, that such out-of-stock products are shown, with an ‘Out of Stock’ or ‘Sold Out’ label. This is because, a customer, should know that this product is available in your store, but is currently sold out. Secondly, listing an out-of-stock product indicates its popularity (out-of-stock = sold out = popular)

But! There is no indication that the product is ‘Out of Stock’. The customer has to click on the single product, and only then will realise that the product is unavailable. What I want, is to save the customer the trouble of having to go to the individual product page, for sold out products. This seems like a trivial requirement, and WooCommerce should not have skipped this feature.

[space]

Show Label for Unavailable Product on Shop or Product Search Page

So the question then is… how to show these products as unavailable on a WooCommerce product search page?! For this, I know anyway that WooCommerce inherently checks if a product is available or not, because it disables the ‘Add to Cart’ button. So, in this case, I only needed to add a filter, for product archive pages, using which an additional label is added for products which are sold out.

WooCommerce Variations

The problem is more evident when there are variations. Say a customer was searching for a particular variation, and that variation happened to be out-of-stock. WooCommerce still shows the variation on the search page, without any ‘out of stock’ indication. But since variations work differently, a customer has to not only go to the individual product page, but also select the variation, to realize that the product is out of stock. For variations, it is not as simple to show an out-of-stock label, and I had to customize the plugin further using the below code:

// display an 'Out of Stock' label on archive pages
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_stock', 10 );
function woocommerce_template_loop_stock() {
    global $product;
    if ( ! $product->managing_stock() && ! $product->is_in_stock() )
        echo '<p class="stock out-of-stock">Out of Stock</p>';
}

[space]

Provide Customer Options

So, now that I’ve added a clear indication for out of stock products. I would not like it if my customers who were interested in such products to leave without even me knowing about it. So, I’ve provided them with a simple option. I’ve added an inquiry button right on the shop page, by customizing the Product Enquiry Pro for WooCommerce plugin. This helps customers make a quick inquiry about products they were interested in.

These features might seem trivial, but they are important to improve user experience on your site. Wouldn’t you agree? Do let me know your comments and suggestions in the comment section below!

 You may also like to Read: Add Advanced Product Filters to Your WooCommerce Store