WooCommerce: Display Stock Status/Quantity @ Shop Page

In this tutorial, my goal is to show the “stock quantity or status” 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 Quantity on Shop Page

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

/**
 * @snippet       Stock Quantity @ WooCommerce Shop / Cat / Archive Pages
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

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 );
}

Where to add this snippet?

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 files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

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 Customization?

Check out these free video tutorials. You can start learning how to customize WooCommerce without unnecessary plugins. Watch me code and learn by example!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a 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.

47 thoughts on “WooCommerce: Display Stock Status/Quantity @ Shop Page

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

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

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

  3. Great!!, Thank you.

    1. You’re welcome!

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

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

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

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

  8. 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 πŸ™‚

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

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

  11. your snippet is out of dated
    update it pro! β™₯

    1. Done πŸ™‚

  12. 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 πŸ™‚

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

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

  15. 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();
      
  16. 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 πŸ™‚

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

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

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

  20. 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 πŸ™‚

  21. 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 πŸ™‚

  22. 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? 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 *