Add a “Sold Out” badge to out of stock products

Customers will become frustrated or disappointed if they click on a product in your catalog, only to find it’s unavailable. A small “sold out” badge provides a quick visual indicator to your customers to let them know that the product is out of stock, before they waste time clicking on it.

In this post, we show you how to add a simple overlay that’s automatically applied to your WooCommerce product images whenever they’re out of stock. This post assumes you’re familiar with editing WordPress theme files, have a basic grasp of CSS, and your store has Stock Management enabled.

First, add the following code to your theme’s Functions.php file:

//Add an out of stock overlay to product images when all variations are unavailable
add_action( 'woocommerce_before_shop_loop_item_title', function() {
global $product;
if ( !$product->is_in_stock() ) {
echo '<span class="sold-out-overlay">Sold Out</span>';
}
});

Next, add the following CSS to your theme’s style.css file:

.sold-out-overlay {
background: #654ea3;
color: #fff;
font-size: 14px;
font-weight: 600;
padding: 5px 10px;
position: absolute;
right: 50px;
top: 10px;
}

You can tweak the colour, size, and position of the overlay by changing the values in the above code. Don’t remove the position: absolute; line, or else you might break your shop’s layout.

That’s it! As you browse through your product catalog, you’ll find that the overlay is now applied to all out of stock products. If the product is variable, and at least one variation remains in stock, the overlay will not show.

Shane Gowland

Hi! Iā€™m a web designer, software developer, and digital marketer based in South Australia. I've been building websites on WordPress for over 12 years. You can learn more about the projects and businesses I'm involved with on my website.

29 thoughts on “Add a “Sold Out” badge to out of stock products”

    • Check out this page. Replace woocommerce_before_shop_loop_item_title in the above code with whichever hook best matches where you’d like the badge to appear on the single product page.

      Reply
  1. Thank you for your code.
    How can add a reservation products label as sold-out?
    I’m trying to duplicate but I dont’t know the corret tag to replace this codeline:
    if ( !$product->is_in_stock() ) {

    Reply
  2. Hi,

    This is awesome.

    For some of my products, it still shows even though some variations are available. What to change in the code so that it shows only for products whose all variations are out of stock.

    Thanks

    Reply
  3. Hi there!

    Thank you for your code, it’s awesome!

    I just have one question, is it possible to translate the code in translated page using WPML?

    Thank you for your help!

    Reply
      • Shane, do you have any idea why it is displaying “sold out” even though I have some variants that are not sold out? I only want it to display when ALL variants are sold out.

        Reply
          • Hi Shane! Strange but it’s working on some of my simple products and not others. The badge appears on some, but on other simple products just the SOLD OUT words appear above the product name. Also…on the ones that I have variable products that are all marked as sold out…same thing…no badge on those either…just sold out. I appreciate the code and would love to figure out how to get it working on everything. šŸ™‚

  4. Hi Shane, thanks for the code. It works beautifully on my shop page and I have not been successful for the single product page. I have replaced the hook ‘woocommerce_before_single_product’ and replaced it on this line add_action( ‘woocommerce_before_shop_loop_item_title’, function() Unfortunately I haven’t been able to have any luck Would you know the reason. Thanks again for the code.

    Reply
    • Yes, it’s possible. Something like this:

      if ( has_term( ‘category_name’, ‘product_cat’ ) ) {
      //Output your customized badge
      }

      Reply
  5. Your code snippet worked fine for me. THANK YOU SHANE! I’m using the Storefront theme. I see there’s a plugin to do the same here: https://wordpress.org/plugins/sold-out-badge-for-woocommerce/, but I thought I’d try your snippet first, since I’m pretty good with CSS. I put your snippet as is in my child theme’s functions.php file. I put the CSS in my child theme’s style.css file. I tweaked the background color, font size, padding and horizontal position (“right” attribute).

    For those who have trouble seeing the effect, remember to try the usual tricks to flush browser and server cache, view page in incognito window etc.

    Reply

Leave a Reply