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!
Andrea says
Thank you, this is exactly what I need it. it works perfect. I changed the “sold out” text for “coming soon”, easy to adapt.
Andy says
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
Frank Schrijvers says
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.
umama shakeel says
hi… the coding tat u gave above we have to paste it as it is ? since i tried and it did not work
Frank Schrijvers says
Yes, you have to add the code snippet to your functions.php.
[email protected] says
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
[email protected] says
Nevermind, i had the option “Enable stock management at product level” enabled… 😀 my fault. Works ok now.
Lee says
Thank you. This is excellent. Clean, simple… and very much appreciated.
Elvyra says
thx – works perfect !!!
Davide says
Hello
The code is great
How to translate it whit polylang or Loco translate?
Thanks
Greetings
Saïd says
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.
Nasser says
THANK YOU, this is what i need, thanks