Is there a way to display a Sold Out badge on products in the product archive page?
Hi Serge,
There is no built-in setting for this at this time.
You could create a custom function that uses the WooCommerce is_in_stock() function, call it using the Dynamic Data option in the Products element and add custom CSS for your badge.
Thank you. Is there anywhere I can find instructions on how to do this?
Ok, so I’ve been trying to follow this guide: Add a "Sold Out" badge to out of stock products - Shane Gowland
by putting this in my php functions:
//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>' ;
}
});
and putting this in the css of the element:
.sold-out-overlay {
background : #654ea3 ;
color : #fff ;
font-size : 14px ;
font-weight : 600 ;
padding : 5px 10px ;
position : absolute ;
right : 50px ;
top : 10px ;
}
I feel like I’m on the right track but what is the proper syntax for calling the function?
Tested and working:
Define a custom function like this by adding this code in child theme’s functions.php:
// Function that returns the HTML for Out of Stock overlay when the product is out of stock.
// Can be used in Products element as a dynamic data field: {echo:bl_sold_out_overlay}
function custom_sold_out_overlay() {
// ensure the global $product variable is in scope
global $product;
if ( ! $product->is_in_stock() ) {
return '<span class="sold-out-overlay">Sold Out</span>';
}
}
Then add a Field in the Products element:
{echo:custom_sold_out_overlay}
2 Likes
Thank you so much! Works perfectly 
Ok so actually this was working for single products without an variants - however I now have issues when products have variants with different quantities.
If I track inventory quantity on variants only and not on the main product I still get an overlay showing - despite variants having several units in quantity. Is there any way to adjust that php code above to loop through product variants also?
Hi, that one is tricky as every variation has its own quantity, so you’d need to check every single one in foreach loop and show the badge accordingly (also I assume you have one variation).
If you want to go that way, you can have a look here and adapt to your needs. Not sure if this is the best UX though because the user would still need to select the product to see the badge.
I’d suggest you have a look at this alternative approach, which will grey out the out-of-stock product from the variable dropdown select element:
fast and easy approach: disable-out-of-stock-variations
or this one that adds a sold-out text next to the greyed-out variable product.
Hope this helps
Thank you @xamax but unfortunately the badge that I’m looking to display is on the product archive page with multiple products - not on the individual product page.
You can show the badge with conditional logic. You can use the dynamic tag option or I made a custom logic for non-tech users. See the video - Add Out of Stock badge - YouTube
It will work for the product list and/or archive pages also(if you are using the query loop builder).
Hi @Serge
I don’t use the product archive page. However, out of curiosity, I’ve set up a site on wpsandbox.org to test it with dummy products.
When I add this code snippet
add_action( 'woocommerce_before_shop_loop_item_title', function() {
global $product;
if ( !$product->is_in_stock() ) {
echo '<span class="now_sold">Now Sold</span>';
}
});
It will add the out-of-stock message on the variable product (when all variations are sold-out)
look at the Cool product.
The Trousers brown (a normal product) is also sold-out.
Is it this that you’re trying to achieve?