A client with a WooCommerce webshop asked me if a sold out badge could be added to every sold out product in the category and shop page. In this example, the client’s theme doesn’t have this functionality.
The WooCommerce sold out badge snippet
I proposed the following solution. If you want the sold out button to be placed before every single product that is sold out, add the following snippet to your functions.php.
This is the result:
If you like to show the badge on the single product page as well, add this snippet too. The badge will be visible in front of the product summary.
This is the result:
The WooCommerce sold out badge styling
In both snippets you can change the html of the echo statement to your liking. The styling of the badge depends on your taste as well as on the theme and the look-and-feel of your sale badges. Add the following css to the style sheet of your theme for some basic styling.
Good luck editing and styling!
Thank you, this is exactly what I need it. it works perfect. I changed the “sold out” text for “coming soon”, easy to adapt.
Hi
Thank you for this post, very helpful.
I wonder if you could suggest a fix? I did everything as you said, but on my product page the badge floats in the header to the right, and also the badge displays over the title. My store is http://shop.kandagadgets.com if you could possibly advise?
Many thanks for your time and help
It’s hard to say how to fix this without an example. Maybe you can try a different hook or you have to add position relative to the product div.
hi… the coding tat u gave above we have to paste it as it is ? since i tried and it did not work
Yes, you have to add the code snippet to your functions.php.
Somehow this doesnt work right in case of variable products. Its shows the badge even if some variables (like size or color) are on stock and some are not
Nevermind, i had the option “Enable stock management at product level” enabled… 😀 my fault. Works ok now.
Thank you. This is excellent. Clean, simple… and very much appreciated.
thx – works perfect !!!
Hello
The code is great
How to translate it whit polylang or Loco translate?
Thanks
Greetings
Thanks for the quick snippet. One buggy issue (def on my end):
//* Add sold out badge on archive pages
add_action( 'woocommerce_before_shop_loop_item_title', function() {
global $product;
if ( !$product->is_in_stock() ) {
echo 'Sold out';
}
});
The above snippet doesn’t display on every product that is sold out on the shop page, only the 2nd snippet that shows on every product page is working properly.
THANK YOU, this is what i need, thanks