Envy

Header Right

Show Stock Status on WooCommerce Shop & Archive Pages

by 22 Comments

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.

 

Share on FacebookTweet about this on TwitterShare on LinkedInGoogle+Email to someone

Reader Interactions

Comments

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

    • 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

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

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

    • 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. Hi!
    Thanks alot for this one!
    What if I only want to show the stock. And not ”out of stock”? 😀

    Reply

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

    • 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

      • 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

Leave a Reply

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