WooCommerce: Show “Sold Out” on Archive/Product Page

Another simple snippet that can easily help user experience and make sure the sold out badge shows on every product in the category & shop page. Not all themes allow this so you can use the snippet below to make it happen!

Example: display “Sold Out” on archive pages – WooCommerce

Show WooCommerce Sold Out Badge
Show WooCommerce Sold Out Badge

Snippet: Show “Sold Out” on Shop and Archive pages – WooCommerce


/**
 * @snippet       Display "Sold Out" on Loop Pages - WooCommerce
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=17420
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.4.3
 */

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', 'woocommerce' ) . '</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;
}

“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 ๐Ÿ™‚

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

65 thoughts on “WooCommerce: Show “Sold Out” on Archive/Product Page

  1. there is any way to remove the ” read more ” button for out of stock product ? or a snippet css to hide it

    1. 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

  2. 2018/4/4 working nice!!!

  3. 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.

    1. 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

  4. 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

    1. Alon, thanks so much for your comment! Try clearing your browser cache, this should work on any browser ๐Ÿ™‚

  5. 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.

  6. 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!

    1. Great, thanks Leanne ๐Ÿ™‚

  7. 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

  8. 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;
    }

  9. 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 ?

  10. 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.

    1. 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 ๐Ÿ™‚

  11. 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.

    1. Hey Jillian, thanks for your comment! If you remove the custom CSS, does the “sold out” string appear?

  12. 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!

    1. 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 ๐Ÿ™‚

  13. Nevermind, i had the option “Enable stock management at product level” enabled… ๐Ÿ˜€ my fault. Works ok now.

  14. 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

  15. 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 !

    1. 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 ๐Ÿ™‚

  16. Just implemented your code thanks! One question how can I change ‘SOLD OUT’ to simply read ‘SOLD’?

    1. Hey Phil, thanks for your comment! All you need is changing ‘SOLD OUT’ into ‘SOLD’ inside the snippet ๐Ÿ™‚ Let me know!

    2. Thanks, I had tried that and hadn’t worked but after clearing the browser cache it did. Thanks for the quick response!

    3. Ah, great to hear that!

  17. 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

    1. 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 ๐Ÿ™‚

  18. 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

    1. 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

  19. Where do I rate the post?
    This saved my day! Pretty cool.

    1. Your comment is totally sufficient Sasho ๐Ÿ™‚ Thanks a million for the feedback!

  20. 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?

    1. Hey Katie, thanks for your feedback! I’m not sure I understand what you mean – maybe give me the link to a screenshot? Thanks!

    2. 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?

    3. 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.

    4. 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>';
          }
      } 
      
      
  21. hi rodolfo, nice snippet.

    anyway, where do i need to input the css code?

    thanks

    1. Hey Thomas, thanks for your comment! CSS goes in your theme’s style.css file. Hope this helps!

  22. 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!

    1. 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!

  23. Worked perfect! Thanks

    1. Thank you Anneleen ๐Ÿ™‚

  24. this piece of code works perfect !!!!

    thanks for the code @Rodolfo Melogli

    1. Thanks so much for your feedback Suresh! ๐Ÿ™‚

  25. 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!’;
    }
    });

    1. Awesome, thanks a lot for your invaluable help!

    2. hello,

      i found this snippet result isn’t responsive for mobile view. what do i need to change to make it responsive.

      thanks.

    3. 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!

    4. 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

    5. 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

  26. Where should I place this code?

    1. In your active theme’s function.php file, or use Code Snippets free plugin. Hope this helps!

  27. Hi Rodolfo,

    This snippet works great. But the SOLD OUT doesn’t show up for products with variations. How we achieve that?

    Thank you ๐Ÿ™‚

    1. 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.

    2. 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?

    3. Unfortunately not yet ๐Ÿ™

    4. Read my recent comment if you hadn’t got it yet.

Questions? Feedback? Support? Leave your Comment Now!
_____
If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)
¯¯¯¯¯

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.