How to display the product quantity on the shop page

by | Dec 28, 2022 | Code Snippets | 0 comments

If you’re running a WooCommerce store, you may have noticed that the default shop page doesn’t display the product quantity available for purchase. While this information might not be important for every store, it can be useful in certain situations.

For example, if you’re selling a limited edition product or have a high demand for a particular item, displaying the quantity on the shop page can give customers a better idea of how quickly the product is likely to sell out.

There are 2 ways to display the quantity of each product on the shop page (or any archive page.)

Method #1: display the product quantity using custom code

You can use the following code snippet:

 * Display the stock quantity on archive pages
 * @author DiviKingdom.Com
 * @version 1.0
add_action( 'woocommerce_after_shop_loop_item_title', 'dkwc_display_product_quantity', 15 );
function dkwc_display_product_quantity() {
    global $product;
    echo wc_get_stock_html($product);

This code snippet hooks into the woocommerce_after_shop_loop_item_title action, which is called after the product title on the shop page. With 15 as a priority, the quantity will be displayed under the product price.

The snippet then uses the wc_get_stock_html() function to retrieve the quantity of the current product and displays it using the echo function.

To use this code snippet, simply add it to your child theme’s functions.php file or use the free Code Snippets plugin. Once you’ve done that, the quantity of each product will be displayed on the shop page below the product price.

Keep in mind that this code snippet is just one example of how you can customize the shop page in WooCommerce. With a little bit of coding knowledge and creativity, you can modify this snippet or create your own to suit the specific needs of your store.

Method #2: display the product quantity using the WooCommerce Builder for Divi plugin

display the product quantity on the shop page using the WooCommerce Builder plugin

If you are using Divi theme for your online store, then, our WooCommerce builder for Divi plugin is a must-have.

With the plugin, you can display the product quantity on the shop, archive, and regular WordPress pages with a click of a button.

You can also customize the look of the text as you please; from the font style to the colors of in-stock and out-of-stock products.

Here are the steps:

  1. Add the Archive Products module to any page you like.
  2. Under the Content tab > Components > Enable the option that says “Show Stock.”
  3. To customize the look (fonts, colors…) of the stock quantity, go to the Design tab; you will have 2 sections for that: one for the in-stock and another for the out-of-stock products.

The WooCommerce builder for Divi plugin is an add-on for the Divi theme that allows you to easily build and customize the appearance of your WooCommerce store within the Divi theme. With this plugin, you can use the Divi Builder to design the layout and appearance of your online store, including product pages, shop, archive, cart, checkout, and my account pages.

The WooCommerce builder for Divi plugin also includes a variety of pre-designed templates and modules, making it easy for users to create a professional-looking store without the need for coding knowledge.

If you don’t have the plugin yet, you can grab your copy right now with a 14-day, no question asked refund policy, and the best customer support in the market.

You can also get a better deal if you get our all-access bundle for a very small price. The bundle includes; the WooCommerce builder (which has 35 modules), the shop tabs, the WooCommerce categories module, and an advanced product carousel module, as well as all future products.

That’s it for today’s post. If you like this post and want to see more like it, make sure you share your thoughts in the comments down below.

By Abdou

My name is Abdelfatah Aboelghit, a PHP developer from Egypt and my friends call me Abdou!
Here I write and develop products about Divi Theme.

More Article


Submit a Comment

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

All Access Bundle

Get ALL current & future products for $69/year instead of $327/year

Save Now →

Download The Most Powerful WordPress Theme

Pin It on Pinterest

Share This