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