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

by

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.

37 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

  5. 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

  7. 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

  8. 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. 🙂

  12. 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

  16. 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

  18. Hi Shane, this code has worked perfectly…until now. I do need to re-add it to the functions.php file every time the theme updates, not a big deal. This time, it won’t work. This pops up: Something went wrong. Your change may not have been saved. Please try again. There is also a chance that you may need to manually fix and upload the file over FTP.
    Any ideas before I try to update it through the server files? Thanks

    Reply

  19. Hello, I have tested the code and it works perfectly. The only problem I have is that it doesn’t display on mobile. How can I solve that?

    Reply

  20. Hi, I want the sold out to show on my sales page. But it is only showing when I go into a product. I want it to display in the list where all my products are displayed

    Reply

Leave a Reply