Stock Progress Bar element from Max Addons allows you to showcase product availability in your WooCommerce store. This helps create urgency and transparency by displaying stock levels directly on product pages.
This guide will walk you through all the available options and features of the Stock Progress Bar element in Bricks Builder.
Getting Started#
Before using the Stock Progress Bar element, ensure you have the following installed and activated:
Steps to Add the Stock Progress Bar#
- Open the WooCommerce Single Product Page Template: Navigate to Bricks Builder and open your WooCommerce Single Product Page template.
- Search for the Stock Progress Bar Element: In the Bricks Builder element search bar, type "stock progress".
- Add the Element to Your Page: Add the Stock Progress Bar to your product page. Ensure you're using the Max Addons version by checking for the "Max" tag in the top-right corner of the element.
- Customize the Element: Once added, the customization options will appear in the left sidebar.
Customization Options#
Stock Progress Bar element provides various customization settings to match your store's design and functionality.
Content Tab Options#
- Enable "Show Sold Count" toggle: Displays the number of sold units.
- Use the {woo_max_product_sales_count} dynamic tag to show product sales count dynamically.
- Enable the "Show Available Count" toggle: Displays the remaining stock count.
- Use the {woo_max_product_stock_quantity} dynamic tag to show available product stock dynamically.
Settings Sub Tab#
- Show only if low stock: Enables the progress bar only when stock is low.
- Hide if out of stock: Automatically hides the bar when the product is out of stock.
Style Tab Options#
Customize the appearance of the Stock Progress Bar using the Style tab:
- Height: Adjust the thickness of the progress bar.
- Bar Color: Change the fill color of the stock progress bar.
- Bar Background Color: Set the background color behind the progress bar.
- Bar Border: Customize the border style and width.
- Label Typography: Modify the font style for the stock labels.
- Available Typography: Adjust the font style for the available stock count.
This was the complete overview of the Stock Progress Bar element. Hope this helps!