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

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.