Search

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

Listen to this article
woocommerce-out-of-stock-label
Add an ‘Out of Stock’ Label on WooCommerce 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-label-sold-out
Gift Boxes are Out-of-Stock

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

20 Responses

  1. Thank you! So simple, your code snippet worked a treat on my site…took about 5 seconds to implement! Very helpful.

  2. Hello,
    Is there any way to do just the opposite of this? I am using woocommece 2.6.4 and I want there to be no “Out of Stock” label on the images. I have products that are out of print but, I still want the images and information o the site for reference. Thanks for any help

  3. thanks!! this worked for me. I was a little concerned since the post was Sep 2014, but want you to know that it worked in Dec 2016.

  4. I know this is an old post, but there is an error in the code.
    This line:
    if ( ! $product->managing_stock() && ! $product->is_in_stock() )

    should not have a ! (not) in front of $product->managing_stock().
    You want to test if it IS managing stock && is not in stock
    Fixed code:

    if ( $product->managing_stock() && ! $product->is_in_stock() )

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

How to Make Responsive Tables using CSS without Tag
WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads