WooCommerce: Display Stock Availability @ Shop Page

In this tutorial, my goal is to show the “stock availability” under each product in the shop, category and archive pages.

This follows exactly the same settings as the stock display of the single product page. Go to /wp-admin/admin.php?page=wc-settings&tab=products&section=inventory to manage “Stock display format”. Enjoy!

WooCommerce: Add Stock Status & Quantity on Shop Page

PHP Snippet: Display Stock Quantity / Status @ WooCommerce Shop Page

/**
 * @snippet       Stock Availability @ WooCommerce Shop Page
 * @how-to        businessbloomer.com/woocommerce-customization
 * @author        Rodolfo Melogli, Business Bloomer
 * @compatible    WooCommerce 7
 * @community     https://businessbloomer.com/club/
 */

add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_show_stock_shop', 10 );
 
function bbloomer_show_stock_shop() {
	global $product;
	echo wc_get_stock_html( $product );
}

Mini-Plugin: Business Bloomer WooCommerce Display Stock Availability On The Shop Page

You donโ€™t feelย confident with coding?ย You needย customers to see the stock availability on the Shop, Category and Archive pages as well? You donโ€™t want to purchase yet another bloated, expensive plugin? Great!

Business Bloomer WooCommerce Display Stock Availability On The Shop Pageย is aย mini WooCommerce plugin, without the usual hassles. One feature. Lifetime license. No annoying subscriptions. 1 plugin file. A few lines of code. No banners. No up-sells. No WP notifications. Use it on as many websites as you like. Lifetime support. 1-page documentation. A simple settings dashboard.

Screenshot of the settings:

Quick demo:

As you can see the plugin is pretty straight forward.ย Install it. Optionally change the position of the stock availability message display. See the magic happen. Simple!

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

78 thoughts on “WooCommerce: Display Stock Availability @ Shop Page

  1. Hi Rodolfo,
    Is it possible to alter to code slightly to only display a specific stock status on shop / archive pages?

    I have a custom stock status ‘supplier’ (Available from supplier), and would like to only display the stock status for products with this set as its stock status if possible.

    Thank you for your help!

    1. Hello Jon-Paul, 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!

  2. How your screen shot shoes the stock quantity at the very bottom. I am Trying to find a code where the stock quantity can be placed on the product image with stock number with a background behind the number that I can change the color of… Like how you can set there to be a “New” sticker on the product images if the product was listed under x amount of days ago

    1. Hello Tiff, 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!

  3. This code is great! Is there a way it can be modified to be able to be added as a shortcode? For example, if I want to show the stock status within the html content of my website?

    1. Of course, see it this works: [show_stock_shop]

      add_shortcode( 'show_stock_shop', 'bbloomer_show_stock_shop', 10 );
        
      function bbloomer_show_stock_shop() {
         global $product;
         return wc_get_stock_html( $product );
      }
      
  4. Hi Rodolfo,

    Thanks so much for the code it works great. I was wondering if it is possible to change the text color. Now the in-stock text color is red.

    1. Hi Jessie, of course, you just need a little CSS there

  5. Hi Rodolfo,

    thanks for this great plugin. Unfortunately it shows the low stock status on products in backorder. Any idea how to have it show a backorder message?

  6. Hi! is it possible to add square meters to the stock of the product page? I tried this one ๐Ÿ™‚

    function cw_change_stock_display( $stock ) {
        $stock .= ' m2';
        return $stock;
      }
      add_filter( 'wc_get_stock_html', 'cw_change_stock_display' );
  7. hey i added this to the parent directory.. yea it worked but…. now i want to remove it. i did remove it but unfortunately it still shows on the page. how is it possible

    1. Maybe clearing cache helps?

  8. Hey Rodolfo,

    Thanks so much for the code it works great. I was wondering if it is possible to only display if there is 60 units or less in stock?

    1. Hi David, 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!

  9. Thanks for the snippet. It adds the stock text perfect to the shop page, but AFTER add to cart.

    How do I get the stock status to show BEFORE the add to cart button rather than after?

    1. Hi Kenny, try using “1” and not “10” inside the add_action

  10. Hi, It shows the stock status on the shop page; great!, but…
    The stock status element is at the same level as the product. Resulting in going through each other instead of going under neath each other. How come it’s not part of the product section? Would it be possible to add it to the product div somehow so I can position it properly?

      1. perfect! thanks!

  11. Been looking for this for days and it works on astra theme, woo version 5 and wordpress version 5.6.2.

    Thank you.

  12. Thanks !

    1. Welcome!

  13. Works perfectly on latest version ๐Ÿ™‚ WP 5.4.1 WC 4.0.1

    1. Nice!

  14. Hi Rodolfo,

    I have used the code and the items that are stock managed are showing! It looks great, however, I have a few products that I have listed as ‘In stock’ because they are always available unless there is a supply issue then I manually change it to ‘out of stock’. I would like these items to show as ‘In stock’ along side the other products that are managed.
    A present the stock message is blank for these items.

    1. Hi Marie, 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!

  15. How replace for updated function stock with whis code?

    $product->get_stock_quantity();
    1. Thank you, you’re right! Revising the snippet asap

  16. Hello! Rodolfo,
    I live in Japan , and this code in what I’m looking forward to!!
    After putting this snipet in child theme of Tijaji, functions.php ,
    I can show quantity exactly in shop page!!
    Thank you for your help, Rodolfo!
    Regards!

    1. Fantastic!

      1. plugin not working for WP 5.2.3

        1. Hi Daveo, thanks for your comment! I just tested this again with Storefront theme and it works perfectly. Maybe your theme (or another plugin) is messing/conflicting with my snippet?

          To troubleshoot, disable all plugins but WooCommerce and also switch temporarily to “Twentyseventeen” theme (load the snippet there in functions.php) – does it work? If yes, you have a problem with your current theme or one of the plugins.

          Hope this helps!

          R

  17. Great!!, Thank you.

    1. You’re welcome!

  18. Hi Rodolfo ,

    Works great just what I needed!

    Only modified the font color so it shows low stock in red and others in blue.

    Thanks!

    1. Great!

  19. Hi,

    Great snippet!
    I would like this code only to work for a specific role. Would that be possible?

    Kind regards,
    Olga

    1. Hello Olga, 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!

  20. Hi,

    I have used your snippet coding in functions.php child theme and it shows the โ€œstock quantity left in stockโ€ under each product relevant in the shop page which is what I required.

    I modified the coding slightly so it doesn’t show the total stock on the ‘else’ option.

    add_action('woocommerce_after_shop_loop_item','bbloomer_show_stock_shop', 10);
     
    function bbloomer_show_stock_shop() {
    global $product;
    if ( $product->stock ) { // if manage stock is enabled 
    if ( number_format( $product->stock,0,'','' ) < 4 ) { // if stock is low
    echo '<div class="remaining">Only ' . number_format($product->stock,0,'','') . ' left in stock!</div>';
    }
    }
    }
    

    Currently it is sitting on the bottom underneath pricing.

    I would prefer to have it displayed just underneath the image with a background the same width of the image OR sitting and displaying on top of the image itself near the bottom. So I need to change the positioning of this item. I tried to find the css coding snippet to change but it is only showing ul.products li.product in Inspector Element which is not the exact line that I need to move.

    Is this achievable at all ?

    Thanks
    Kristin

    1. Hello Kristin, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  21. anyway to get this to work for a variable product that has stock per variable not centrally?

    1. Hello Stuart, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  22. A slightly different query – is it possible to display a different stock value to customers than the Stock levels available in the WooCommerce admin area? For example, I may have 100 units in stock, but want to create Fear of Missing Out on the front-end by displaying “10 units in stock”.

    I realise this is custom work, I’m merely curious if it’s possible.

    1. Hey Jason, yes, totally possible ๐Ÿ™‚

  23. Hi

    This works perfect. thanks for sharing this. Just wondering is there anyway I can use the code to modify it to show the remaining stock also on the cart page along with the product?

    Thanks,
    Ravi

    1. Hey Ravi, 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

  24. Is there any way to have this work for variable products where it just combines the quantity for all of the variations?

    1. Hello Ben, 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

      1. I have the same question. I would like to pay for the solution too.

        So I have a variabel product: weekend retreat, 3 in stock
        – And one option/variable is : own room, 1 in stock
        – And the other option/variable is: shared room, 2 in stock

        I want that the total stock (in this case of 3) is showed on the product archive. At this moment I have to adjust the total stock manually, see link.

        1. Thanks for contacting me!

  25. your snippet is out of dated
    update it pro! โ™ฅ

    1. Done ๐Ÿ™‚

  26. What is the reasons for using “$product” as global variable?
    One idea came to me that when a product is purchased, stock needs to be decreased, please let me know if there are any more reasons?

    1. Hey Zaber, thanks for your comment! Try removing the global declaration – the snippet will give you error as you can’t access something “inside” the $product unless $product is available to the function ๐Ÿ™‚

  27. Hello Rodolpho,
    Thanks a lot for this hyperuseful code!
    I have tried to adapt it and to include one more condition (if the stock is null). I did as per following.

    function show_stock() {
    global $product;
    if ( $product->stock ) { // if manage stock is enabled 
    if ( number_format($product->stock,0,'','') == 0 ) { // if stock is null
    echo '<div class="complet">Complet</div>';
    } 
    elseif ( number_format($product->stock,0,'','') < 3 ) { // if stock is low
    echo '<div class="remainingpc">Plus que ' . number_format($product->stock,0,'','') . ' place(s) disponible(s)</div>';
    } 
    else {
    echo '<div class="remaining">' . number_format($product->stock,0,'','') . ' places disponibles</div>'; 
    }
    }
    }
     
    add_action('woocommerce_after_shop_loop_item','show_stock', 10);

    The code is accepted without any error (I tried several times before getting there;) but nothing appears when the stock is null… and I believe it comes from a woocommerce switch (because “add to cart” is replaced by “read more”…

    Do you have any idea on how to solve this in a clean and automated way?

    Many thanks in advance if you can help,
    Sincerely,

    Thierry

    1. Hello Thierry, 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

  28. Is it possible to implement this inside a label on the image? Something like 4 left in stock, or 22 units sold

    1. Robert, thanks for your comment! Yes, you can definitely achieve that via CSS and position:absolute. Unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  29. Hi…this is just what I am looking for. But when I placed in my child theme’s functions.php file I am getting the following error for each product. So I have removed it for now…until I can get a way to use this code without getting the error below:

    Notice: stock was called incorrectly. Product properties should not be accessed directly.

    1. Hey there, thanks for your comment! Could you try using this instead:

      $product->get_stock_quantity();
      
  30. How can i show it anywhere in the page/theme?

    1. Hey Dzul, thanks for your comment! Iโ€™d recommend you watch my customization tutorial here: https://businessbloomer.com/woocommerce-customization-single-product-page and then take a look at the single product page hooks here: https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/ – this is for the single product page. I have the same for the Shop page in case you wanted that ๐Ÿ™‚

  31. Added this to the functions file but its not showing up on the front end

    1. nevermind sorry, I didnt have a price on my product yet and it disabled that whole area – Thanks for the great tip

      1. Ah, awesome, thank you Nikki for the follow-up!

  32. fantastic, just exactly what I needed. Thank you very much, I’ve been dying to get woocommerce to display remaining quantities on my online store

    1. Awesome, thanks so much Thang Thai!

  33. Hi Rodolfo,
    Thanks for your helpfull informations.
    Could you give me some idea, when can I show the stock quantity of variable each child product?
    Thank you.
    Regards,
    Laszlo

    1. Hey Laszlo, thanks for your comment! That’s a great idea, however this requires custom work and unfortunately I can’t help here on the blog for free. Thanks for your understanding! ~R

  34. Hey Rodolfo! Thanks for your lessons!
    If I want to show only “Out of stock” text instead “left in stock”? How I can do that

    1. Hey Ann, thanks for your comment! You’ll need to play with this line:

      if ( number_format($product->stock,0,'','') < 3 ) { // if stock is low
      

      and edit it slightly to make sure you’re only targeting when stock = 0. Good luck ๐Ÿ™‚

  35. Hey Rodolfo, this is exactly what I needed. I’m not sure where to place it, though. Does this snippet go into my theme’s functions.php? Thanks!

    1. Hello Sam, thanks for your comment! Correct, you can place this in your child theme’s functions.php file – if you need more guidance, please take a look at this video tutorial: https://businessbloomer.com/woocommerce-customization-hangout/. Let me know ๐Ÿ™‚

  36. Hi
    I have Some problem about Custom URL Link . In shop page, i choose External/Affiliate Product , so when User Clicks , it goes to portfolio(Custom link) not the product page.

    However, the image and text in each product in shop page, is going to each product page URL, i don’t want to go to product page URL.
    I want to go to Portfolio Page. how to do that one?

    Thanks

    1. Hey Kalyani, thanks for your comment. Please take a look at this other article: https://businessbloomer.com/woocommerce-disable-link-to-product-loop/. With that fix you can disable the default link and then you can add your own by doing the exact same via add_action. Hope this helps!

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

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