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.
Perfect! Thanks.
I had to remove “position: absolute;” from my CSS and I had to put the CSS code in my Customizing… Additional CSS instead of syles.css to get this to work
Thank you so much for sharing this! It is working perfectly.
Perfect! and a question: how can I show the badge on the product page too?
thank you!
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.
worked for me! Thanks
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() ) {
This is great! How do I align it in the top left corner instead?
Replace ‘right: 50px;’ with ‘left: 50px;’
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
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!
You are awesome, thanks! I wish you the best.
Hi, does anyone know if there is a way to change this so this appears on in-stock items instead of out of stock? Thank you!
Hi Stuart, just remove the exclamation mark (!) on line #4.
Thank you Shane, will try!
Hi,
when adding the code, the ‘Sold out’ appears as text above the image and not as a badge.
Any idea why?
Regards
Gert
Did you also include the CSS code?
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.
The stock status for the parent product might be overriding the stock levels for the individual variations.
I had to add the css to Appearance>customize>Additional CSS for it to work for me.
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.
Thank you so much! Works perfectly. Greetings from Brazil
Hi Erick, where did you copy the css, i mean in whitch row in style.css ?
Hello there, can someone help me ? i copied the first code to functions.php (last row), and CSS to style.css (last row). Nothing happened. Help please