Here’s another simple snippet that can easily help user experience and make sure a “sold out” badge shows on each out of stock product in the category & shop pages.
Not all themes allow this so you can use the snippet below to make it happen!
PHP Snippet 1: Show “Sold Out” on Shop and Archive Pages If You Have no Existing “Out Of Stock” Badge – WooCommerce
/**
* @snippet Display "Sold Out" on Loop Pages - WooCommerce
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 4.6
* @community https://businessbloomer.com/club/
*/
add_action( 'woocommerce_before_shop_loop_item_title', 'bbloomer_display_sold_out_loop_woocommerce' );
function bbloomer_display_sold_out_loop_woocommerce() {
global $product;
if ( ! $product->is_in_stock() ) {
echo '<span class="soldout">Sold Out</span>';
}
}
And a bit of CSS:
/* CSS */
.soldout {
padding: 3px 8px;
text-align: center;
background: #222;
color: white;
font-weight: bold;
position: absolute;
top: 6px;
right: 6px;
font-size: 12px;
}
PHP Snippet 2: Change “Out Of Stock” to “Sold Out” on Shop and Archive Pages If You Have an Existing “Out Of Stock” Badge – WooCommerce
There’s a chance your theme or a custom plugin are already adding an “Out of Stock” badge on every out of stock products in the loop / category / shop pages.
In this case, your only choice is to “translate” the string:
/**
* @snippet "Out of Stock" to "Sold Out" on Loop Pages - WooCommerce
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 4.6
* @community https://businessbloomer.com/club/
*/
add_filter( 'gettext', 'bbloomer_translate_out_stock_string', 9999, 3 );
function bbloomer_translate_out_stock_string( $translated, $untranslated, $domain ) {
if ( ! is_admin() ) {
switch ( $translated ) {
case 'Out of Stock':
$translated = 'Sold Out';
break;
}
}
return $translated;
}
I don’t code – is there a reliable plugin for that?
As many readers would love to code but don’t feel 100% confident with it, I decided to look for a reliable plugin that achieves the same (or even better) result.
In this case, I recommend the YITH WooCommerce Badge Management plugin. On top of displaying custom text badges (free version), you can also create CSS, image and advanced badges, assign product badges to specific products and/or categories, pick the badge position and much more.
But in case you wish to code, keep reading 🙂
Hi Rodolfo,
thx for you blog. This helps us sooo much. We want to create a new shop, but on some steps we need help.
Thank you so much.
Have a nice day
Awesome
This works perfectly on simple product but not on external/affiliate product. Tried woodmart and storefront theme.
Can you suggest a tweak??
External products have no stock management, so this snippet won’t work. You need custom code applied to external products only
I was able to get the code working to trigger the text change but my theme already has a badge system and I am having problems getting the badge class to display on any “sold” product in teh archive. I can manually do it to one but Im trying to get it to auto apply to anything out of stock/sold. Any help would be fantastic as to where I am screwing up
Hi there, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Super post and snippet!
It worked prefectly in one of my client’s site with Storefront theme:
https://snipboard.io/EYh65F.jpg
It would be super cool if the badge also showed at the product page, but for the moment, it is great.
Thank you so much,
Cool!
Hey,
Love your tutorial but it unfortunately doesn’t work with Flatsome theme. Tried every possible thing on internet. 🙁
Thanks.
Hey Bilal, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Awesome, this worked like a charm on my site running Storefont on the page that lists all products. Thanks to those who left comments mentioning z-index and needing to put the code in the custom CSS field (when put in theme CSS it doesn’t work as intended and instead showed the text underneath the thumbnail).
Question: How can I have the same functionality on the front page? I use the Static Home Page functionality using blocks to display certain products. The ‘sold out’ badge does not show on here.
Cool! Not sure this works with blocks.
Thank you Very Much!!
Welcome!
Feedback! Thank you so much for this!! It is perfect! I loved it so much, I upgraded to premium!! THANK YOU!
Awesome!
Is there a way to simply move it to the left side instead of right by adjusting the code?
Yes – just use “left” instead of “right”
Hi Rodolfo! Thanks for the snippet! I’m a noob in WordPress. Where have I to introduce the Code?
Please see https://www.businessbloomer.com/ video tutorial
Works like a charm.
Changed the styling a little bit for better fitment for my theme.
I have a multilingual site, is this a possibility with this snippet?
An easy way maybe? I need the English and Danish version.
Best regards, and thanks a lot!
Hi Martin, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Thank you for this! My only recommendation would be adding a z-index: 999; to your CSS, as I needed to add this with Storefront theme, otherwise it shows behind the products.
Cool!
This is a very useful piece of code. Apologies if asked before but can this also manage items for SALE or NEW?
Hi Andrew, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi,
works perfect on shop page!
But how to show the badge if I use a normal site and add the shop via shortcode?
The badge isn’t shown at the moment here? :/
Hi Philipp, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
HI,
First thank you for your tips, they are great 🙂
So I copy paste the first part of the code on ” snippet” part on woocommerce. I hear your advice in your video ‘where to place customization”. I know it not the best method. But for me, it ‘s enought for now.
And I add the second part the ” bit of CSS” on additional CSS. I specify one of my item ” out of stock” to check if it works but he didn’t …
Could you please tell me what did I do wrong ?
Should I put the whole code on “Additional CSS” or somewhere else ?
Thank you in advance for your help
BR
Agathe
Hi Dialo, where did you copy/paste the PHP?
You rock! Thank you.
Cheers!
I have a problem with this. The budget appears to the left of the product, not over the product.
Hi Dani, it depends on your theme’s CSS. I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Works like a treat on WP 5.2.4 with Woocomerce 3.7.1 and Divi 3.27.3. You’re a lifesaver!
Thank you!
I’d like to hire you to create a similar code that shows the out of stock on the category page when “show categories” is chosen.
As an example, my store displays the categories, not the products, on the category page.
I’d like the category image to show the out of stock message if the products within that category are out of stock.
Thanks Joseph. Feel free to contact me here. Thanks a lot
Dear Rodolfo,
The snippet is working but not in the last version of WooCommerce.
The original Out of Stock badge of WooCommerce sits over the new created badge.
How can I suppress the WoocCommerce Out of stock badge?
Thanks!
Hi Eric, this is theme-dependent. I use Storefront and I don’t get the problem. You will need custom CSS, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
there is any way to remove the ” read more ” button for out of stock product ? or a snippet css to hide it
Hello Eslam, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
2018/4/4 working nice!!!
🙂
Plz help me to change the text ‘Out of Stock’ to ‘Sold’…I have tried multiple plugins as well as added the code into function.php but the issue not resolved.
Gaurav, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
Thanks for the code, works perfectly with storefront theme, just not working on safari desktop, seems something missing, sold out label shows under thumbnail, any solution, thanks
Alon, thanks so much for your comment! Try clearing your browser cache, this should work on any browser 🙂
Hello,
This worked perfect thank you, however with the current Woocommerce and StoreFront theme I had to place the CSS into “Apperance-Themes-Customise-Additional CSS” for it to work correctly on desktop. It did not work on desktop when placing the CSS into the plugin “theme customizations”,
I have tested this and it works on desktop with Firefox, Opera, and on Moblie.
Thank you again.
Brilliant 🙂
I was having issues getting this to display above my image as there is an overlay, and the theme I was using was causing a problem! But I just changed woocommerce_before_shop_loop_item_title to woocommerce_shop_loop_item_title and now it works fine 🙂 Great bit of code, seems like a really simple thing that should be included from Woo!
Great, thanks Leanne 🙂
Hi Rodolfo,
How do I make this snippet work for one particular category only? We have stock bows that need to be marked “sold” as they are unique items, but we have accessories that need to say “out of stock”. Is this possible?
Thanks,
Louise
Hey Louise, I suggest you take a look at “conditional logic”: https://businessbloomer.com/conditional-logic-woocommerce-tutorial/ and https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/. Let me know 🙂
I added the color red and z-index 10 and then it worked perfectly:
Here is the added CSS:
/* CSS */
.soldout {
padding: 3px 8px;
text-align: center;
background-color:red;
z-index:10;
color: white;
font-weight: bold;
position: absolute;
top: 6px;
right: 6px;
font-size: 16px;
}
🙂
I have succesfully changed the displayed text: “SOLD OUT” to “SOLGT” (Norwegian). But it is displayed in blue over the product listing picture. If I try to add the CSS in Style.php, everything disappears. Is there a way to improve the CSS by adding info about z-index ?
hey! thanks so much for this snippet! worked like a charm!
unfortunately any css I try to use for it isn’t working. it says sold out like it should, but I can’t change the color, or make it stick out or anything like I want to.
Hey Kat, thanks for your comment! Hard to know, maybe you have an error in the CSS or you’re not placing it in the right place. Not sure 🙂
Hi,
I followed the steps but the Sold Out doesn’t seem to be displaying on sold out items in my shop page.
Any suggestions would be much appreciated.
Hey Jillian, thanks for your comment! If you remove the custom CSS, does the “sold out” string appear?
Hi! I’m super happy with this snippet, but was wondering if it is possible to have it translated on the front end?
I now have this, and would like to have “sold’ as well as “verkocht’ (Dutch)
add_action( 'woocommerce_before_shop_loop_item_title', 'bbloomer_display_sold_out_loop_woocommerce' ); function bbloomer_display_sold_out_loop_woocommerce() { global $product; if ( !$product->is_in_stock() ) { echo '<span class="soldout">' . __( 'SOLD', 'woocommerce' ) . '</span>'; } }Thanks in advance!
Hey there, thanks for your comment! That will depend on the translation plugin you use – this will add a “Sold” string into the plugin settings and you can translate that into what you like 🙂
Nevermind, i had the option “Enable stock management at product level” enabled… 😀 my fault. Works ok now.
🙂
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
Thanks a lot for your work (and your website, very clear)
Could you let me know how to make it appears :
1) just after the price – on the same line – instead that on top of image
2) to make it work on product page as well, how to merge the function with this:
add_action( ‘woocommerce_before_single_product_summary’, function() { global $product; if ( !$product->is_in_stock() ) { echo ‘Sold Out!’; } });proposed on comment above?
Thanks a lot !
Hey Ben, thanks for your comment! For positioning, check my hook visual guide: https://businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/.
For the single product page, your function should work exactly as it is 🙂
Just implemented your code thanks! One question how can I change ‘SOLD OUT’ to simply read ‘SOLD’?
Hey Phil, thanks for your comment! All you need is changing ‘SOLD OUT’ into ‘SOLD’ inside the snippet 🙂 Let me know!
Thanks, I had tried that and hadn’t worked but after clearing the browser cache it did. Thanks for the quick response!
Ah, great to hear that!
Hello Rodolfo
Thanks for the great code!!!
How can I use this for difference language?
Now show “sold out” for my english page it is ok, but for another language?
Thanks in advance
Davide
Hey Davide, thanks for your comment! I just revised the snippet and now the string is translatable – let me know if the new version works 🙂
Hi Thanks for great tutorial first,
I want to show products attribute on hover on product in shop page and category page to show my customer that these sizes are available. how can i achive this
Hey Vinay, thanks so much for your comment – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R
Where do I rate the post?
This saved my day! Pretty cool.
Your comment is totally sufficient Sasho 🙂 Thanks a million for the feedback!
When I input your php code to my functions.php file the beginning and ending lines are turning red, indicating an error. Can you please let me know what I’m doing wrong?
Hey Katie, thanks for your feedback! I’m not sure I understand what you mean – maybe give me the link to a screenshot? Thanks!
https://thymeinthekitchenevv.com/function.png
Cheers Katie! There doesn’t seem to be any error there unless your WordPress PHP version is out of date – is the function working and doing what is supposed to do?
It is, which is great! I was just concerned about the red that is popping up, in the past that has indicated the code is incomplete.
Gotcha 🙂 See, this snippet has that “function” inside the add_action call – this is defined as “anonymous function”. This would only work on PHP 5.3.0 and above, so probably that is the cause of the warning 🙂
Would the following show you no warning (see, I have here removed the anonymous function)?
add_action( 'woocommerce_before_shop_loop_item_title', 'bbloomer_show_sold_out_archive'); function bbloomer_show_sold_out_archive() { global $product; if ( !$product->is_in_stock() ) { echo '<span class="soldout">SOLD OUT</span>'; } }hi rodolfo, nice snippet.
anyway, where do i need to input the css code?
thanks
Hey Thomas, thanks for your comment! CSS goes in your theme’s style.css file. Hope this helps!
Hi Rodolfo, how can we show the quantity sold on product archive/shop page? eg: just as this snippet shows “out of stock”, we want to show qty sold “68 sold”. Thank you!
Hey Rodrigo, thanks for your comment! Take a look at https://businessbloomer.com/woocommerce-show-number-products-sold-product-page/; you can simply use the same function I developed there and hooking it into the archive page. Let me know!
Worked perfect! Thanks
Thank you Anneleen 🙂
this piece of code works perfect !!!!
thanks for the code @Rodolfo Melogli
Thanks so much for your feedback Suresh! 🙂
A bit late, but you can use this to show it on the single-product page aswell.
add_action( ‘woocommerce_before_single_product_summary’, function() {
global $product;
if ( !$product->is_in_stock() ) {
echo ‘Sold Out!’;
}
});
Awesome, thanks a lot for your invaluable help!
hello,
i found this snippet result isn’t responsive for mobile view. what do i need to change to make it responsive.
thanks.
Hey Thomas, thanks for your comment! Well, it’s just a matter of playing with CSS and make the class .soldout behave differently with @media queries. It really depends on your current theme and styles, so I can’t provide a fix that would work for everyone here. Let me know if you manage to make it responsive!
Hi rudolfo, thanks.
Do you have any guidance to playing with css class. I’m newbie in woocommerce 🙂
I’m using storefront by woothemes.
Thanks again. Regards
Hey Thomas, I’m going to run a WooCommerce CSS class in 2 months or so, as many of you asked for it. In the meanwhile, check this free CSS tutorial from W3Schools, it’s the best way to get started. Cheers
Where should I place this code?
In your active theme’s function.php file, or use Code Snippets free plugin. Hope this helps!
Hi Rodolfo,
This snippet works great. But the SOLD OUT doesn’t show up for products with variations. How we achieve that?
Thank you 🙂
Oh and just noticed the SOLD OUT doesn’t show when we open the individual product pages. But shows perfectly in the shop/achieve pages.
Rodrigo, thanks for this. This snippet is exclusively working on the Archive page, it uses the action “woocommerce_before_shop_loop_item_title” which will not work on the single product page I’m afraid. Have you fixed this by the way?
Unfortunately not yet 🙁
Read my recent comment if you hadn’t got it yet.
Hi Rodolfo,
I am sorry if I’ve missed it but is there a fix for the item showing as Out of Stock even though the variations are in stock?
Thanks,
Emma
Hi Emma, just tested on my dev site and this is not happening. Can you tell me your settings and also can you disable all plugins expect Woo?