• Skip to content
  • Skip to secondary navigation
  • My Account

Envy

  • Envy Demo
  • Envy Pro Demo
  • Tutorials
  • Forums
  • Contact

Show Stock Status on WooCommerce Shop & Archive Pages

November 29, 2014 by Jon Barratt

By default, a product’s stock status doesn’t show in WooCommerce shop and catalog/archive pages. However, it’s easy to enable with a few simple additions to your theme’s functions.php and style.css files.

To enable WooCommerce stock status in catalog/archive pages:

1)  Add the following code to your theme’s functions.php file (or custom-functions.php if using WP Clips to protect your customizations):

//* Add stock status to archive pages
function envy_stock_catalog() {
    global $product;
    if ( $product->is_in_stock() ) {
        echo '<div class="stock" >' . $product->get_stock_quantity() . __( ' in stock', 'envy' ) . '</div>';
    } else {
        echo '<div class="out-of-stock" >' . __( 'out of stock', 'envy' ) . '</div>';
    }
}
add_action( 'woocommerce_after_shop_loop_item_title', 'envy_stock_catalog' );

2)  Add the following code to your theme’s woocommerce/woocommerce.css file (or custom-style.css if using WP Clips to protect your customizations):

.woocommerce ul.products li.product .stock,
.woocommerce-page ul.products li.product .stock,
.woocommerce ul.products li.product .out-of-stock,
.woocommerce-page ul.products li.product .out-of-stock {
    color: #666;
    font-size: 15px;
    padding: 0 12px 6px;
}

/* Add this if you want Out of Stock to appear in red */
.woocommerce ul.products li.product .out-of-stock,
.woocommerce-page ul.products li.product .out-of-stock {
    color: #f45f16;
}

And that’s it!

Note that the stock status (with stock qty) shows in single product pages ONLY if stock management is enabled at the product level. Go to your Product > Product Data > Inventory and select the ‘Manage Stock?’ checkbox if you want this functionality enabled.

 

Filed Under: News, Newsletter, Tutorial

Reader Interactions

Comments

  1. Vadim says

    June 9, 2015 at 8:15 am

    Thank you, you very help me!

    Reply
  2. cuongvv says

    July 8, 2015 at 2:02 pm

    Thank you..

    Reply
  3. saurabh Shhaival says

    August 26, 2015 at 11:17 am

    Thank you, it helped.

    However it shows the stock quantity even when I want to show the stock quantity only if it falls below the threshold of 6 (as set up in the woocommerce settings). I am not a programmer and have no clue how it can be achieved. Will you kindly help.

    Thanks

    Reply
    • Jon Barratt says

      August 28, 2015 at 3:04 am

      Try replacing the PHP snippet with the following:

      //* Add stock status to archive pages
      function envy_stock_catalog() {
          global $product;
          if ( $product->managing_stock() ) {
              if ( $product->get_total_stock() < = get_option( 'woocommerce_notify_low_stock_amount' ) ) {
                  echo '<div class="stock" >' . $product->get_stock_quantity() . __( ' in stock', 'envy' ) . '</div>';
              } else {
                  echo '<div class="out-of-stock" >' . __( 'out of stock', 'envy' ) . '</div>';
              }
          }
      }
      add_action( 'woocommerce_after_shop_loop_item_title', 'envy_stock_catalog' );
      Reply
  4. rossdrumilous.science says

    October 25, 2015 at 11:12 pm

    I want to use the stockmanagement but don’t want to show any stock information to the visitior. Not even the “in stock” status. Where can I edit this in the code?

    Reply
    • Jon Barratt says

      December 30, 2015 at 10:08 pm

      Hi!

      Sorry for the late reply. Simply add this CSS code to your theme’s style.css (or custom-style.css if using WP Clips) –

      .stock {
          display: none;
      }

      Best always
      Jon

      Reply
  5. Pablo says

    January 6, 2016 at 4:40 pm

    You’re a genius , I served very helpful , I have a little problem, shows me the number of products , as could remove it?

    thanks.

    Reply
    • Pablo says

      January 6, 2016 at 5:17 pm

      I´m sorry, i´m solved it deleting “. $product->get_stock_quantity()”

      work great!! thank you very much!

      Reply
  6. Anthony says

    April 7, 2016 at 11:58 am

    This is great, and it works well for stores without backorders enabled, however, we are having an issue with this code snippet because if backorders are enabled, they show as in stock on the shop category pages. This has lead to many customers believing that an item is in stock when in fact it is only available on backorder. Do you know of a fix for this? Ive been trying a few things and nothing works. Quadquestions.com

    Could you add $available to the variable list and then use an else if statement to show out of stock items?

    Please help!

    Reply
    • Jon Barratt says

      April 8, 2016 at 12:39 am

      Hi Anthony

      Simply change this line –

      if ( $product->is_in_stock() ) {

      to

      if ( $product->is_in_stock() && ! $product->is_on_backorder(1) ) {

      You could even include $product->is_on_backorder(1) as an initial condition and set a different text if you wished. The 1 parameter is included to denote stock quantity, such that the condition will be met when the stock falls below 1.

      Best always
      Jon

      Reply
  7. viktor says

    May 19, 2016 at 7:32 pm

    Hi!
    Thanks alot for this one!
    What if I only want to show the stock. And not ”out of stock”? 😀

    Reply
    • Jon Barratt says

      May 20, 2016 at 1:02 am

      Simply, remove the else{} portion of the code.

      Reply
      • viktor says

        May 20, 2016 at 9:30 am

        Awesome, thanks!

        Reply
  8. Daniel says

    June 3, 2016 at 2:40 am

    Perfect.
    It helped me a lot!

    Thankyou

    Reply
  9. Jon Barratt says

    June 3, 2016 at 5:56 am

    Hi Everyone! Note that there is now a Precoded Clip available for this (should work with most WordPress/WooCommerce enabled themes), which adds the stock status to shop and archives for simple and variable products – http://clipbank.wpclips.net/clips/woocommerce-stock-status-archive-pages/

    Reply
  10. John Divramis says

    November 26, 2016 at 5:00 pm

    Hello Jon, do you know any plugins to do the same job with the code?

    Reply
    • Jon Barratt says

      November 26, 2016 at 9:34 pm

      Hi John

      As mentioned above, the following is the simplest solution (I’m aware of) that covers variations as well –

      WP Clips in conjunction with http://clipbank.wpclips.net/clips/woocommerce-stock-status-archive-pages/

      Best always
      Jon

      Reply
  11. Lina says

    January 15, 2017 at 2:22 pm

    Thank you very much for the snippet. However, this works only on product level, not on variation level, right? I am searching for a solution that shows the stock level for every variation. Any idea would be really appreciated. Many thanks in advance!

    Reply
    • Lina says

      January 15, 2017 at 2:26 pm

      Just saw that you mentioned the clip that covers variable products as well. But I am looking for a solution that gives me the stock level for every single variation, not a conclusion like “In stock (some items)” – I really need to know which variation is available and which is out of stock.

      Reply
      • Jon Barratt says

        January 15, 2017 at 9:50 pm

        Hi Lina

        This is really not practical at an archive or shop level because if you have many variations, you will create a very large and cluttered product item. In addition, element heights would be inconsistent. It’s not something I would recommend, nor am I aware of any solution for this.

        The Clip (as far as I know) is the only solution that deals with variations in a simple and effective manner. However, keep searching … someone may have found an alternative that addresses your requirements.

        Sorry I can’t be of more help.
        Jon

        Reply
  12. Vittorio says

    March 20, 2017 at 7:26 pm

    Hi Jon,

    To show only available, without the number of products?

    Reply
    • Jon Barratt says

      March 21, 2017 at 2:52 am

      Simply remove the –

      . $product->get_stock_quantity()
      Reply
  13. manish says

    May 30, 2017 at 5:30 am

    It helped me a lot!

    Thankyou

    Reply
  14. Kroon says

    June 25, 2017 at 2:27 pm

    Works, thank you!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Krolyn Studios Jon Barratt WordPress Genesis WooCommerce PayPal

© Copyright 2014 Krolyn Studios · All Rights Reserved · Privacy Policy