Displaying a sold out badge on products

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 :+1: