How to Display Stock Count Progress Bar in WooCommerce Easily

Did you notice your customers frequently visit your product but leave without actually buying it? This happens all the time because there’s no urgency for them to buy the product at that moment.

As a result, the customers may not realize the stock is actually low, and they are going to miss out. On the other hand, your conversion rate is going down, and the store’s growth is getting obstructed.

There’s an easy and widely used solution for this. You have to display the stock count progress bar for your products. You can show them in two ways: with custom code and a plugin.

But the question is, how can you add the stock count progress bar in WooCommerce? Follow these simple steps:

• Step 1: Install the plugin
• Step 2: Turn on the Stock Progress Bar feature
• Step 3: Set the stock count of the product 
• Step 4: Customize the settings of the stock progress bar
• Step 5: Save and Publish

That’s not all. You can create additional FOMO to nudge your buyer. I will guide you every step of the way in this blog.

Moreover, you can discover the benefits of a stock count progress bar, the custom code snippet, comparison among popular plugins, and a bonus section.

So without any further ado 👏

🧮 What is the Stock Count Progress Bar?

A Stock Count Progress Bar in WooCommerce—often called a stock counter bar—is a visual indicator of the available stock of a particular product. It is a unique but effective approach to encourage potential buyers to purchase the product before the stock is out.

For example, if a product has 50 units and 35 have been sold, the bar might say, “35 of 50 sold – Going fast!”

But it’s not just for show. This simple bar quietly works on buyer psychology:

✅ Create urgency (“I should buy it before it’s gone!”)

✅ Add social proof (“Wow, others are buying this too!”)

✅ Make inventory levels more transparent for shoppers

Why Add a Stock Count Progress Bar in WooCommerce?

If you are wondering why you should use the stock count progress, the answer lies in its benefits. 

The stock count bar, or status bar, or whatever you say, is not only for presenting products in a better way. It can also bring a noticeable impact on the revenue of your online store. Here’s how:

Conversion Rate
All online store owners and digital market owners bring lots of organic or paid traffic to their sites. But the difficult part is converting those visitors to customers.

For that, the landing pages, or I would say product pages, should be well-organized and optimized to convert visitors into customers. Stock progress bar encourages visitors to make the purchase by highlighting the remaining stock.

Average Order Value
Average order value refers to the average spending amount of the customers in a store. All store owners want to increase it as it has a massive impact on revenue.

The WooCommerce store owners display such progress bars to increase average order value. The stock progress bar indicates the remaining quantity. So they would likely purchase the product before it runs out.

⚙️ Add Stock Count Progress Bar without any Plugin

Now that you know the benefits of the stock count progress bar, you need to learn how to add it to your WooCommerce store. With a simple tweak in the code, you can display a stock count progress bar in WooCommerce.

Before changing the code, you should back up your sites. You should also use child themes to prevent it from being lost after updating.

Step 1: Go to Theme File Editor

First, you need to access the file editor to add any kind of custom code. Go to Appearance >> Theme File Editor from your WordPress Dashboard.

Here you can change any kind of code working for your site.

💡 Pro Tips
To get the best result, use Strorefront theme.

Step 2: Add the Custom Code to the function.php

Now, click the function.php on the right sidebar. Go the the end of the existing coding, and paste the custom code snippet.

Hit the Update file button to save the change.

Here’s the custom code snippet I used:

add_action('woocommerce_single_product_summary', 'custom_stock_progress_bar', 20);

function custom_stock_progress_bar() {
    global $product;

    if (!$product->managing_stock() || !$product->is_in_stock()) return;

    $stock_quantity = $product->get_stock_quantity();
    $sold = $product->get_total_sales();
    $total = $stock_quantity + $sold;

    if ($total <= 0) return;

    $percentage = round(($sold / $total) * 100);
    ?>

    <div class="stock-progress-wrapper" style="margin-top: 20px;">
        <div class="stock-progress-label"><?php echo "$sold of $total sold"; ?></div>
        <div class="stock-progress-bar" style="background: #eee; height: 10px; border-radius: 5px; overflow: hidden;">
            <div style="width: <?php echo $percentage; ?>%; height: 100%; background: #27ae60;"></div>
        </div>
    </div>

    <?php
}

Step 3: Personalize the Progress Bar Style (optional)

You may customize the appearance of your stock count progress bar if you want. To do that, you need to add this CSS in the theme customization section.

You can further modify this bar in the same way I have shown. Here’s the custom CSS code I used:

.stock-progress-wrapper {
    font-size: 15px;
    margin-bottom: 20px;
}

.stock-progress-label {
    margin-bottom: 5px;
    font-weight: 700;
    color: #800000;
}

⚒️ How to Display Stock Count Progress Bar in WooCommerce

If you don’t want to go through the hassle of coding, plugins are your answer. You can easily show your product’s stock count progress bar with a few clicks.

For that, you need to install and activate the plugin called WowStore. It’s the first-ever WooCommerce builder for Gutenberg. This plugin comes with numerous features to expand the default WooCommerce functionality.

Follow the official documentation for a seamless installation process.

Here’s a video tutorial for your convenience. You can follow either one of the methods; I will demonstrate the step-by-step guide in the following part.

Step 1: Turn on the Stock Progress Bar Addon

After installing and activating WowStore, you have to turn on the stock progress bar. For that, go to the Addons page of WowStore from the WordPress Dashboard.

Then turn on the Stock Progress Bar addon.

Step 2: Set the Product Stock Count

Now, go to the product list and click edit on your desired product. Click the Inventory tab of the Product data section.

Set the value of stock in the quantity field and check the box to track stock quantity just above it.

After that, click the update button to save the changes.

Now there will be a progress bar on the product page for your customers.

Step 3: Customize the Stock Progress Bar (optional)

You can also customize the text, typography, and color from the addon settings. WowStore lets you create a unified appearance to present an aesthetic and personalized brand identity.

That’s all you need to do. From now on, all visitors of your WooCommerce store will see the visitor in the stock count progress bar while visiting the product.

🙋 Can You Show the Stock Count Progress Bar for Variable Product

Yes, you can add this progress bar for variable products, too. It’s a bit complicated process. Let’s go through it 💪

First, go to the editor page of any variable product. Scroll down to the product data section and click the Inventory tab.

There’s no option for adding stock value like we saw for the simple products. To set stock for each variation of the product, you need to go to the Variation tab.

Here, you will find all the variation that exists for this product. Expand the variation for detailed configuration.

Check the Manage stock box, you will get an additional box to set the stock count. Enter the value of the quantity of this variation.

Follow this process for every other variation and click update after finishing the changes. It will show the progress bar for each variation your visitor selects on the product page.

💡 Pro Tips
You should use WowStore’s custom template to preserve the unified atmosphere of the single product page. The stock count progress bar can be imperfect with the template.

🎁 Bonus: Can You Show Stock Scarcity to Create FOMO?

You can create FOMO (fear of missing out), also showing a custom stock scarcity bar. By presenting an engaging stock status bar, you can nudge your customer to complete the buying process immediately.

To do that, you can use WowRevenue — a proven solution specially crafted to boost the WooCommerce store’s revenue. This plugin has several campaigns to increase AOV.

One of the latest campaigns — Stock Scarcity — allows you to display such a bar. You can even show a custom stock during a flash sale or seasonal sale.

You can craft a special message targeted at your potential buyer with the bar. You can even show it on multiple pages together.

Moreover, you can show low stock and urgent stock differently. To know more details, you have to learn how to display low stock alerts.

⚖️ Comparison among Popular Plugins that Display Stock Count Progress Bar

So far, you have seen WowStore and WowRevenue displaying the stock progress bar feature in WooCommerce. But isn’t there any other plugin?

Yes, there are several other alternative plugins in the WordPress repository. But then, why did I choose these two?

To answer your question, I will show you a comparison table that helped me to decide.

Verdict

Each plugin has its own use case and user base. You can choose whichever based on your need and application.

However, for this demonstration, I find WowStore and WowRevenue most suitable. They both gave me extensive control over my function.

If you want just a custom stock notification system with other revenue-boosting features,  WowRevenue is the answer. But if you want an alert/notification only for your stock, you can go for the other two.

On the other hand, to build a WooCommerce store more professionally and bring efficient management, WowStore is your champion. 

Final Thoughts

A stock count progress bar isn’t just a pretty visual element — it’s a digital salesman that nudges your customers to take action. 

Whether you want to code it yourself or prefer the ease of a plugin like WowStore or WowRevenue, adding this feature can help increase urgency, drive conversions, and enhance the shopping experience.

The choice is yours:

🧑‍💻 Go the coding route if you like tinkering with files

🔌 Use plugins for faster results with more customization

Either way, don’t miss out on this simple yet powerful feature for your WooCommerce store. Try it out today and let your products speak for themselves.

FAQs

Can I use this with out-of-stock products?

Not really. The bar is designed to create urgency when stock is low but still available. For out-of-stock items, try showing a waitlist or back-in-stock notification instead.

Will the progress bar affect my site speed?

Not if done right. The code-based version is super lightweight, and plugins like WowStore are optimized for performance.

Can I show the stock progress bar on the shop or archive pages?

Yes, you can show a stock progress bar on the shop page using WowRevenue. Its Stock Scarcity campaign can be displayed over four pages, including the shop page.

Written byShahbaj Arefin

Arefin is a passionate writer with over three years of experience exploring the world of WordPress and WooCommerce. He loves diving into themes, plugins, and tools, sharing insights that help users build and optimize their websites with ease. When he's not writing, you’ll find him testing the latest tech to uncover game-changing features for online businesses.