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!
WooCommerce: Add Stock Status & Quantity on Shop Page
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!
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
WooCommerce: Disable Variable Product Price Range $$$-$$$ You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
WooCommerce: Hide Price & Add to Cart for Logged Out Users You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
WooCommerce Visual Hook Guide: Archive / Shop / Cat Pages I’ve created a visual HTML hook guide for the WooCommerce Archive Page (which is the same page for the Shop, Category, Tag pages). This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can […]
WooCommerce: Hide Prices on the Shop & Category Pages Interesting WooCommerce customization here. A client of mine asked me to hide/remove prices from the shop page and category pages as she wanted to drive more customers to the single product pages (i.e. increasing the click-through rate). As usual, a simple PHP snippet does the trick. I never recommend to use CSS to “hide” prices, […]
WooCommerce: How to Remove the “Default Sorting” Dropdown If the WooCommerce product sorting functionality (“Default Sorting” dropdown) is a waste of space or you don’t need that select box at all, you may want to remove it. No matter if you prefer custom code or a simple plugin – hiding the product sorting dropdown is a piece of cake. Enjoy!
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”
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.
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!
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
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!
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?
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
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!
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?
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!
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!
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.
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.
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.
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
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.
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
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.
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 🙂
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,
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
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.
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
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
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 🙂
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?
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!
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!
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!
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
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!
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?
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 ); }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.
Hi Jessie, of course, you just need a little CSS there
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?
Screenshot please?
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' );Yep! https://www.businessbloomer.com/woocommerce-stock-quantity-suffix-e-g-sq-in-kg-boxes-etc/
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?
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?
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/
perfect! thanks!
Been looking for this for days and it works on astra theme, woo version 5 and wordpress version 5.6.2.
Thank you.
Excellent
Thanks !
Welcome!
Works perfectly on latest version 🙂 WP 5.4.1 WC 4.0.1
Nice!
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.
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
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!
Fantastic!
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!
R
Great!!, Thank you.
You’re welcome!
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!
Great!
Hi,
Great snippet!
I would like this code only to work for a specific role. Would that be possible?
Kind regards,
Olga
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!
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
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 🙂
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
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! ♥
Done 🙂
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 🙂
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
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!
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
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:
if ( number_format($product->stock,0,'','') < 3 ) { // if stock is lowand 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 🙂
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
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!