WooCommerce: Display Variations’ Name & 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.

Display variation details @ WooCommerce shop/loop

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


/**
 * @snippet       Display Variations' Name & Stock @ WooCommerce Shop Page
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=22080
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.5.2
 * @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 ) {
            $attr_string = array();
            foreach ( $key['attributes'] as $attr_name => $attr_value ) {
                $attr_string[] = $attr_value;
            }
            if ( $key['max_qty'] > 0 ) { 
        		echo '<br/>' . implode( ', ', $attr_string ) . ': ' . $key['max_qty'] . ' in stock'; 
            } else { 
        		echo '<br/>' . implode(', ', $attr_string ) . ': out of stock'; 
            }
    }
    }
}

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!

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

43 thoughts on “WooCommerce: Display Variations’ Name & Stock @ Shop Page

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

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

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

  4. 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 ๐Ÿ™‚

  5. 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”?

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

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

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

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

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

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

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

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

  14. 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 ๐Ÿ™‚

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

  16. 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 ๐Ÿ™‚

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

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

  19. 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 ๐Ÿ™‚

  20. 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: [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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.