WooCommerce: Display Variations’ Stock @ Shop Page

Thanks to the various requests I get from Business Bloomer fans, this week I’m going to show you a simple PHP snippet to echo the variations’ name and stock quantity on the shop, categories and loop pages.

Of course, if “Manage stock” is not enabled at variation level, the quantity will be null, and therefore the returned string will just say “In stock” or “Out of stock”.

Enjoy!

Show the stock status of each variation for variable products on the WooCommerce Shop page

PHP Snippet: Display Variations’ Name & Stock @ WooCommerce Loop Pages

/**
 * @snippet       Display Variations' Stock @ WooCommerce Shop
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_echo_stock_variations_loop' );
   
function bbloomer_echo_stock_variations_loop(){
    global $product;
    if ( $product->get_type() == 'variable' ) {
        foreach ( $product->get_available_variations() as $key ) {
            $variation = wc_get_product( $key['variation_id'] );
            $stock = $variation->get_availability();
            $stock_string = $stock['availability'] ? $stock['availability'] : __( 'In stock', 'woocommerce' );
            $attr_string = array();
            foreach ( $key['attributes'] as $attr_name => $attr_value ) {
                $attr_string[] = $attr_value;
            }
            echo '<br/>' . implode( ', ', $attr_string ) . ': ' . $stock_string;
        }
    }
}

Where to add this snippet?

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.

If you think this code saved you time & money, feel free to join 14,000+ WooCommerce Weekly subscribers for blog post updates or 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

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!

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.

68 thoughts on “WooCommerce: Display Variations’ Stock @ Shop Page

  1. Hi
    I am using Woocommerce, Elementor, YITH Woocommerce Badge and Astra Theme
    but the badge will not show on the grid side, only on the single product page
    How to fix it

    Best Regards
    From App Web
    Denmark

    1. Hi there, this definitely works with default WooCommerce, so you’ll need to identify the custom hook that is used by either one of those plugins/themes and change the code accordingly

  2. Hy,
    oh very nice Work πŸ˜‰

    could you assign a css class to a variation that is not in stock?
    assign a css class?

    Thanks Henk

    1. Hey Henk, that’s possible for sure

  3. Great snippet! But there is a small bug.
    If you have selected the setting
    “Sold individually – Enable this to only allow one of this item to be bought in a single order”
    it will always return a stock value of 1

    1. Yep, you’re right. I fully revised the snippet, check it out

  4. Exactly what I was needing, thank you!

  5. Works exactly as expected!! Thanks!! I added some code to centre align the text:

     echo '<br/>' .'<div style=\'text-align: center\'>'. implode( ', ', $attr_string ) . ': ' . $key['max_qty'] . ' in stock'.'</div>'; 
  6. Hi. I tried this. Storefront theme. Woo 5.1. I just copy pasted the snippet.

    It just says I have 5 of everything. Most variations aren’t in stock and there are no more than 2 of anything. Mostly just one. Any ideas?

    1. Hi Charles that’s weird. If you wish send me your credentials and I’ll take a quick look

  7. I need this effect in the original “news” and “sale” woocommerce blocks. How can I get it?

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

  8. Just a note that this will return ‘out of stock’ for any items that don’t use stock.

    1. Noted! Thanks

  9. Hi Rodolfo,

    I have added the PHP Snippet: Display Variations’ Name & Stock @ WooCommerce Loop Pages to my functions.php in my child theme. All the variations show up on the shop page but not on the product page even though the php shows up there.

    Also, if I allow backorders, the variation shows up as “not is stock.” This is after caches are purged.

    Here is a snippet from the product page:

    [{“attributes”:{“attribute_resistance”:”1.8\u03a9 Pack”},”availability_html”:”46 in stock/n

    Here is the CSS for the attribute on the product page:

    .p {
    margin-top: -2em;
    float: left;
    margin-left: 0px;
    margin-bottom: 6em;
    display: block;
    }

    What am I doing wrong?

    Thank you in advance.

    Greg

    1. Hi Gregory, this only works on the shop/cat pages and not on the single product. Also, it might need adjustments if you have backorders enabled

  10. Hi Rodolfo,
    Thank you very much for your contribution, how can I do to show the variations with price?

    Thank you

    Felipe

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

  11. Hello Dear,

    Can you please help me, i like this option to show only for admin user only

    Thanks

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

  12. This snippet works great! April 2020 on Woocommerce 4.0.1 – WordPress 5.4 – PHP7.3.13 – Thanks so much!

    1. Great!

  13. Hey Rodolfo,
    this snippet and all of your posts are awesome.

    I have a question regarding the shown information. It shows the titel-slug instead of the titel-name of the attributes. Can you tell me how to change this?

    Cheers,
    Janos

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

  14. Hi Rodolfo,
    In the current version of Woocommerce 3.6.5, this feature comes by default, but I want it not to be displayed.
    How to do it?
    Thanks You.

    1. Hi Mario

      In the current version of Woocommerce 3.6.5, this feature comes by default, but I want it not to be displayed.

      Honestly, I don’t think that’s possible. Can you disable all plugins and switch to another theme and see if it goes away? If it does, then it’s a custom plugin or your theme

  15. Great post, thank you!

    How can i add this to the single product page along with the “add to card” button?
    I want to show all the variations as a table and in each row i want a “add to card” button :/

    how can i do that?

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

  16. Your solution works fine. I have three colors (red, green, blue) and three sizes (short, mid, long). when I chose the color and size stock appears. However, if I don’t chose any or both the filters no stock is visible. How can I show sum of all the products when no filter is chosen. How can I show the green color products when green is chosen but size is left alone?

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

  17. Hey BB, thx a lot for your snippets, they are realy impressive and helpful.
    IΒ΄m just a copy and paste junky with a litle bit understanding for code.
    For my shop i use your code to bring another view for stock status with some color and font awesome icons.
    Also it is combined for variable and simple products, for me it works great with the enfold theme.
    Perhaps u want to bring it in nice view for others, cause.. i cant πŸ˜€
    https://pastebin.com/N6wfU6m6
    (sorry for post again, i used my wrong mail)

    1. Awesome πŸ™‚

  18. Hi, I plugged in the snippet and it does display all the stock variables but the all the stock quantity are set to “1 in stock”. They don’t reflect my actual stock quantities. Any Ideas?

    1. Thanks for your comment Mike πŸ™‚ It works for me, so are you using the latest WooCommerce, are all your variations set to “Manage Stock” and not to “Sold Individually”?

  19. Is there a way to make the stocks for each variation only appear when that variation is selected? Like here, when they pick Size 4 it will show only the stock of size 4, then when they click size 3 only size 3 stock will show and size 4 stock will disappear. Thanks πŸ™‚

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

  20. Hey ###, nice snippet! Thanks alot.
    I tried to get it work, like you mentioned it to David, on a single product page. I changed the hook, but it does not work for me.

    I changed the hook line to:
    add_action( ‘woocommerce_before_add_to_cart_button’, ‘bbloomer_echo_stock_variations_loop’, 5 );
    What am i doing wrong? Sorry for noobing around!

    Cheers,
    Janos

    1. Janos, thanks for your comment πŸ™‚ It should work, so maybe try to use a different hook – take a look at https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

  21. Hi, thanks for the snippet.
    It breaks in PHP 7.2
    You can check?
    Thanks!

    1. You were absolutely right Toni, thank you πŸ™‚ Snippet has now been updated!

  22. I tried the code and nothing happens. I’m trying to change the Loop/Shop/Category pages, but for what ever reason(s), it’s not changing the output. I’d like to show both product variations and their prices (instead of 1 which is WooCommerce Default) underneath the in the “woocommerce_shop_loop_item_title”. I’m not using PHP 7, but using PHP version 5.6.34. Just to test that it works I first tried to only show the product variation, but nothing happens. Not sure what to do WP and WooCommerce at times are difficult to fully understand.

    1. Hey Tom, thanks so much for your comment! Try testing on a different theme, it could be your current one is heavily overriding default WooCommerce functions. Hope this helps

  23. At first it was working for me but what changes i did i am not sure it is breaking my shop

    1. Hey Ghost, thanks so much for your comment! I just retested this on the latest version of WooCommerce and it still works. Unfortunately this looks like custom troubleshooting work and I cannot help here via the blog comments. Thanks a lot for your understanding! ~R

  24. Is it possible to show / view variation name and price on front / shop page?

    1. Hey Peter, thanks so much for your comment! I suggest you take a look at “conditional logic”: https://businessbloomer.com/conditional-logic-woocommerce-tutorial/ and https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/. Let me know πŸ™‚

    2. Thanks for the tips and I will try.

  25. Hi, how do I change the snippet in order to have the stock/variations in the SINGLE PRODUCT PAGE instead of the loop page?

    1. Hey Davide, thanks for your comment! You just need to change “hook”, check out these visual hook guides to find out more: https://businessbloomer.com/woocommerce-tips/visual-hook-series/

  26. Hi

    Your Availability plugin is exactly what I need, but exactly what I don’t need either!

    I have too many variations (up to 100 sometimes – especially for trousers, which comes in colours, waist sizes and leg lengths) per product to display under my Add to Cart button. I would rather include the table in its own tab, next to the description. And possibly have a filter to choose the variation attribute (eg colour) then choose which colour (plus an option for ‘all colours’) and only show the sizes and leg lengths for that colour trouser in the table.

    Alternatively, muslti-select filters could be set for all attributes (colour, waist and leg) so users can choose various options and then click a button called show table, which would then update via ajax.

    I’d pay for this pro version of your plugin, and I know many people would appreciate it. Especially these guys (who you could market it to)

    1. Thanks for your comment Bali πŸ™‚ This custom work would be quite expensive, so I’m not sure this would be affordable to do based on your budget. If you’re interested please go to the contact page and submit your job proposal. Thank you in advance!

  27. Hey! Great snippet, thank you πŸ™‚

    I only have 1 problem – I’m using this for showing available clothes sizes, and for some reason, it shows the second smallest size first, then the smallest, and then the 3rd smallest and so on – as you see in this screenshot: https://imgur.com/ELP7g7A

    I’ve tried to sort the string like this:
    $attr_string[] = $attr_value;
    sort($attr_string);

    Both with sort, nsort and asort, but nothing works. The only thing I can fix it is to manually edit variation order for each product in WooCommerce, but as we have 455 products, that’s really not an option.

    I hope you can help me!
    Thomas

    1. Hey Thomas, thanks for your comment! I can’t help you directly via the blog comments, but I can tell you you’re in the right direction. Sorry & thanks for your understanding πŸ™‚

  28. Hello, thank you for the snippet. It was helpful. However, when I try this snippet with backorders switched on, I am not able to retrieve the max_qty, even when there is available stock. Is this a known issue with Woocommerce?

    1. Royce, thanks so much for your comment! Unfortunately this is custom troubleshooting work and I cannot help here via the blog comments. Thanks a lot for your understanding! ~R

  29. Hi Rodolfo,
    Nice snippet!
    I try customizing your snippet, when a variation is out of stock it displays only ‘OUT OF STOCK’.
    Is this possible with your snippet, or is this a lot of customizing?
    The reason is that the WooCommece filter has an issue with variable products:
    (https://wordpress.org/support/topic/hide-out-of-stock-variations-when-filtering/)

    1. Hey Christophe, thanks for your comment! Yes, if from the settings you decide to display out of stock products, then my snippet will work πŸ™‚

  30. Rodolfo,

    I have been searching everywhere but cant find a solution to the following issue. I have a client that want to show multiple products on a single page “category” page (that is the easy bit). But they want the variations of those products to be dropdown so selection and add to cart can be done on the same page. They do not wish for their customers to go to the individual single pages to add to cart and then have to return back to the “category” page. They also need the minimum qty to be set to “8”. Do you know of a script that can do this? OR could you suggest a way it can be done and at what cost?

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

  31. Rodolfo, thanks. It works, but it display the slug that could not have ‘,’ or ‘.’ for character as I want. How can I display the name of the variation instead of the slug?

    1. Hey Panagiotis, thanks for your comment! You will need to see what’s inside $key[‘attributes’] to get what you need. I suggest using something similar to this https://businessbloomer.com/woocommerce-see-whats-inside-order-array-print_r/

  32. One more, if a variation is out of stock, the shop still displat “in stock” albeit without any count value. Are you able to amend the code to basically hide any out of stock variations?

    Thanks

    1. Good idea Huzaifah! I now changed the snippet and added an if > else to make sure when stock is 0 the “out of stock” message gets echoed instead. Cheers πŸ™‚

  33. Hi, it works for me.

    However, is there any ways to make it simpler: just to show available variations without its individual stock counts (eg: “Available in S,L,XL”)

    1. Hey Huzaifah, yes, this is possible but I can’t provide a fix here in the blog comments as it is custom work. Thanks for your understanding!

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. 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 BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)

Your email address will not be published.