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§ion=inventory to manage “Stock display format”. Enjoy!
You can place PHP snippets at the bottom of your child theme functions.php file (delete "?>" if you have it there). 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.3.
Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!
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.
72 thoughts on “WooCommerce: Display Stock Availability @ Shop Page”
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.
Hi Jessie, of course, you just need a little CSS there
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?
Hi! is it possible to add square meters to the stock of the product page? I tried this one 🙂
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
Maybe clearing cache helps?
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?
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!
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?
Hi Kenny, try using “1” and not “10” inside the add_action
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?
Hi Emile, try changing hook: https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/
Been looking for this for days and it works on astra theme, woo version 5 and wordpress version 5.6.2.
Works perfectly on latest version 🙂 WP 5.4.1 WC 4.0.1
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.
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!
How replace for updated function stock with whis code?
Thank you, you’re right! Revising the snippet asap
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!
plugin not working for WP 5.2.3
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!
Great!!, Thank you.
Hi Rodolfo ,
Works great just what I needed!
Only modified the font color so it shows low stock in red and others in blue.
I would like this code only to work for a specific role. Would that be possible?
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!
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.
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 ?
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
anyway to get this to work for a variable product that has stock per variable not centrally?
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
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.
Hey Jason, yes, totally possible 🙂
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?
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
Is there any way to have this work for variable products where it just combines the quantity for all of the variations?
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
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.
Thanks for contacting me!
your snippet is out of dated
update it pro! ♥
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?
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 🙂
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.
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,
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
Is it possible to implement this inside a label on the image? Something like 4 left in stock, or 22 units sold
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
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.
Hey there, thanks for your comment! Could you try using this instead:
How can i show it anywhere in the page/theme?
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 🙂
Added this to the functions file but its not showing up on the front end
nevermind sorry, I didnt have a price on my product yet and it disabled that whole area – Thanks for the great tip
Ah, awesome, thank you Nikki for the follow-up!
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
Awesome, thanks so much Thang Thai!
Thanks for your helpfull informations.
Could you give me some idea, when can I show the stock quantity of variable each child product?
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
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
Hey Ann, thanks for your comment! You’ll need to play with this line:
and edit it slightly to make sure you’re only targeting when stock = 0. Good luck 🙂
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!
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 🙂
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?
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!