---
title: Stock Progress Bar
description: "The [Stock Progress Bar module](https://divimerc.com/modules/stock-progress-bar/) displays a product’s available stock as a visual progress bar. **Important Note** - Enable the **Initial Stock Manager** extension from **DiviMerc > Extensions**. - Enable the **Product Stock Progress Bar** module from **DiviMerc > Modules.**…"
url: "https://divimerc.com/docs/stock-progress-bar/"
updated: "2026-09-26"
category: Modules
---

# Stock Progress Bar

The [Stock Progress Bar module](https://divimerc.com/modules/stock-progress-bar/) displays a product’s available stock as a visual progress bar.

**Important Note**

- Enable the **Initial Stock Manager** extension from **DiviMerc > Extensions**.
- Enable the **Product Stock Progress Bar** module from **DiviMerc > Modules.**
- Enable stock management for the product.
- Make sure the product is in stock with a quantity above 0.
- Set the **Initial Number in Stock** higher than or equal the current stock quantity.
- Set initial stock from the **variation**, **product**, or **Global Default** in Initial Stock Manager.

**Note:** The module does not display on **Grouped** or **External/Affiliate** products.

Let’s see the settings in brief and how to make better use of it.

## Content Tab

The Content tab contains the essential settings for selecting the product, configuring its stock information, and controlling how it is displayed.

### Content

![](https://divimerc.com/wp-content/uploads/2026/08/stock-progress-bar-1.webp)

The **Product** setting determines which item’s inventory data shows in the stock progress bar. You can set this dynamically or target a specific item depending on your needs:

- **This Product:** it will dynamically show stock of the current product.
- **Latest Product:** Automatically tracks and displays real-time stock levels for the most recently added item in your catalog. This ensures new arrivals immediately showcase live inventory status without requiring manual updates.
- **Specific Product:** Locks the progress bar to a single selected product. Once assigned, this product’s exact stock metrics will render consistently across every page where this module is placed.

**Note**: Enable the stock management from your inventory and update the quantity amount to show the Product Stock Progress Bar.

### Text

![](https://divimerc.com/wp-content/uploads/2026/08/stock-progress-bar-2.webp)

- **Prefix Text**: Enter text to display before the stock value, such as Only.
- **Infix:** Choose the value displayed in the middle of the text label.
  - **Stock Quantity:** Displays the available stock quantity.
  - **Stock Quantity Percentage:** Displays the available stock as a percentage.
- **Suffix Text:** Enter text to display after the stock value, such as Left.

### Settings

![](https://divimerc.com/wp-content/uploads/2026/08/stock-progress-bar-3.webp)

- **Show Label:** Enable this option to display the stock text label. The progress bar remains visible whether this option is enabled or disabled.
- **Show Value:** Enable this option to display the stock count or percentage near the progress bar.

- **Value Type:** Whether the displayed value uses **Stock Count** or **Percentage**.
- **Hide Total Quantity:** Enable this option to display only the stock value instead of the combined current and total quantity format.
- **Value Position:** Where the value appears: **Above Bar**, **Below Bar**, **Before Bar**, **After Bar**, **Inside Bar**, **Follow Fill**, or **Show on Tooltip**.

### Image & Icon

![](https://divimerc.com/wp-content/uploads/2026/08/stock-progress-bar-4.webp)

- **Use Icon:** Enable this option to use an icon instead of an image.
- **Image:** Upload an image to display with the stock progress bar when the icon option is disabled.

**Background**: Customize the module background using color, gradient, image, video, pattern, etc

**Element Label**: Add an internal label to organize and identify this module within the Divi Builder.

## Design Tab

Use the Design tab to customize the appearance of the Product Stock Progress Bar module.

![](https://divimerc.com/wp-content/uploads/2026/08/stock-progress-bar-5.webp)

**Label:** Customize the typography and styling of the stock label.

**Infix Text:** Customize the appearance of the stock value text within the label.

**Value:** Style the displayed stock quantity or percentage.

### Progress Bar

- **Height**: Adjust the height of the stock progress bar.
- **Border Radius**: Adjust the corner radius of the progress bar to control how rounded its edges appear.

![](https://divimerc.com/wp-content/uploads/2026/08/stock-progress-bar-6.webp)

There you will also find **Track Color** and **Fill Color** options to customize further. 

**Tooltip:** Customize the appearance of the tooltip with text, background, and more customization options. (Only available when Show on Tooltip is selected as the Value Position.)

### Image & Icon

![](https://divimerc.com/wp-content/uploads/2026/08/stock-progress-bar-7.webp)

- **Icon Font Size:** Adjust the size of the selected icon. *(Only available when you select* ***Use Icon****.)*
- **Icon Color:** Customize the icon color. *(Only available when you select* ***Use Icon****.)*
- **Image Width:** Adjust the width of the image. *(Only available when* ***Use Icon*** *is disabled and an image is selected.)*
- **Placement:** Choose whether the image or icon appears on the **Left** or **Right** side.
- Background

You will also get the **Background** option to style the image or icon element.

**Sizing:** Control the module’s width, height, and alignment.

**Spacing:** Adjust the margin and padding around the module.

**Border:** Customize the border width, style, color, and radius.

**Box Shadow:** Add and customize a shadow around the module.

**Filters:** Apply visual effects such as blur, brightness, contrast, and saturation.

**Transform:** Reposition, scale, rotate, or skew the module.

**Animation:** Add and customize animation effects for the module.

## Advanced Tab

For advanced users seeking deeper control over the module, this tab offers extra configurations including custom code, conditions, and additional settings.

## Need Help?

If you have any questions or need assistance, contact our support team at support@wprio.com