---
title: WooCommerce Free Shipping Progress Bar Settings
description: "Show a free shipping progress bar in WooCommerce: enable it, add the %progress_bar% placeholder to your cart or checkout message, and set its colors."
url: "https://wpfactory.com/docs/progress-bar-options/"
updated: "2026-09-26"
category: How to
tags:
  - Free Shipping Bar
---

# WooCommerce Free Shipping Progress Bar Settings

To add a free shipping progress bar in WooCommerce, turn on **Enable progress bar** in [Free Shipping Bar: Amount Left for Free Shipping for WooCommerce](https://wpfactory.com/item/amount-left-free-shipping-woocommerce/) at **WPFactory > Left for Free Shipping > Progress Bar**, then add the `%progress_bar%` placeholder to a message, such as the Cart message. The bar fills as the cart total nears your minimum.

## Before you start

- WooCommerce, active, with a free shipping minimum the plugin can read: either the WooCommerce **Free shipping** method set to require a minimum order amount, or a value in the plugin's [Manual min amount](https://wpfactory.com/docs/manual-min-amount/) section.
- The settings live at **WPFactory > Left for Free Shipping** (also reachable at **WooCommerce > Settings > Amount Left for Free Shipping**).

## Step by step

1. Open the **Progress Bar** section and tick **Enable progress bar**.
2. Under **Custom style**, pick the **Background color** (the empty track), the **Foreground color** (the filled part) and the **Height** in pixels. Save changes.
3. Open the **Cart** section, tick **Enable section**, and add the placeholder to **Content**, for example: `%amount_left_for_free_shipping% left for free shipping %progress_bar%`. Save changes.
4. Add a product to your cart below the threshold and open the cart page to check the bar.

![Progress bar settings for Amount Left for Free Shipping](https://wpfactory.com/wp-content/uploads/Step8.-free-shipping-1024x495.png)

## Progress bar options

| Label | Option ID | Default | Free/Pro |
| --- | --- | --- | --- |
| Enable progress bar | `alg_wc_left_to_free_shipping_progressbar_enabled` | No | Free |
| Animation | `alg_wc_left_to_free_shipping_progressbar_animation_enabled` | No | Pro |
| Background color | `alg_wc_left_to_free_shipping_progressbar_background_color` | #f0f0f0 | Free |
| Foreground color | `alg_wc_left_to_free_shipping_progressbar_foreground_color` | #007bff | Free |
| Height (pixels) | `alg_wc_left_to_free_shipping_progressbar_height` | 20 | Free |

## Where you can show the bar

The bar does not appear on its own. It renders wherever you place `%progress_bar%`:

| Location | Where to add the placeholder | Free/Pro |
| --- | --- | --- |
| Cart page | Cart > Content | Free |
| Any page, post or block | Shortcode, for example `[alg_wc_left_to_free_shipping content="%amount_left_for_free_shipping% left %progress_bar%"]` | Free |
| Mini cart | Mini-cart > Content | Pro |
| Checkout | Checkout > Content | Pro |
| Site-wide banner | Store notice > Content | Pro |

## What the customer sees

The filled width is the current cart total as a percentage of the free shipping minimum, so a 30 cart against a 100 minimum shows a bar 30% full. The cart total follows **General > Calculation > Cart total method** (default: displayed subtotal, with discounts excluded). Once the minimum is reached, the bar disappears and the **Free shipping reached** message shows instead (default: "You have free delivery!"). With **Animation** (Pro), the filled part gets a moving stripe and shine effect.

For extra styling, target the CSS classes `.alg-wc-alfs-progress` (track) and `.alg-wc-alfs-progress-bar` (fill).

## If it does not work

- **The placeholder prints nothing:** **Enable progress bar** is off, or the plugin found no free shipping minimum. The bar only renders when the minimum is above 0 and there is still an amount left.
- **The whole message is missing:** check **General > Hide the amount left text** (By cart amount, By shipping method, and the Pro By category and By user role rules). A hidden message hides the bar too.
- **The bar does not move until the page reloads:** outside the cart totals area, live updates need **Advanced > Enable AJAX** (Pro). See [Advanced and AJAX options](https://wpfactory.com/docs/fine-tuning-free-shipping/).
- **Nothing shows on a block-based cart:** the Cart section positions are classic cart hooks. See [Plugin not working in the Cart block](https://wpfactory.com/docs/plugin-cart-block-issue/).

## FAQ

### Is the free shipping progress bar free?

Yes. The bar, its colors and height, the Cart section and the shortcode are free. The animation and the Mini-cart, Checkout and Store notice placements are Pro.

### Can I show the progress bar on the product page?

Yes. Put the `[alg_wc_left_to_free_shipping]` shortcode with `%progress_bar%` in its `content` attribute into the product description or a block. Without Pro AJAX it refreshes on page load only.

### Can I show only the bar, with no text?

Yes. Set the Content field to just `%progress_bar%`. The Free shipping reached message still replaces it when the goal is met; clear that message to show nothing instead.

### Why does the bar fill differently from my cart total?

The calculation follows the Calculation options in General. Coupon discounts are subtracted by default, and you can exclude shipping or switch the cart total method. See [General and Cart options](https://wpfactory.com/docs/cart-settings/).

Related: [Display free shipping info on the cart page](https://wpfactory.com/docs/control-free-shipping-info/) and the [message placeholders reference](https://wpfactory.com/docs/free-shipping-message-placeholders/).

### Get more control

The progress bar and its colors are free. [Amount Left for Free Shipping](https://wpfactory.com/item/amount-left-free-shipping-woocommerce/) Pro adds the animated effect, plus mini cart, checkout and store notice sections to place the bar in, and AJAX so it updates live. [See what Pro unlocks](https://wpfactory.com/item/amount-left-free-shipping-woocommerce/).

Need a hand? Our team answers every ticket on the [Amount Left for Free Shipping support forum](https://wpfactory.com/support/item/amount-left-free-shipping-woocommerce/).

Related articles

- [Troubleshooting the Free Shipping Amount Label & Progress Bar](https://wpfactory.com/docs/fix-free-shipping-display/)
- [Getting Started with the Free Shipping Bar for WooCommerce](https://wpfactory.com/docs/use-free-shipping-bar/)
- [General Free Shipping Bar Settings in WooCommerce](https://wpfactory.com/docs/general-options/)
- [Third-Party Plugin Compatibility for the Free Shipping Bar](https://wpfactory.com/docs/free-shipping-third-party-compatibility/)
- [Free Shipping Bar: Developer Hooks and Filters Reference](https://wpfactory.com/docs/free-shipping-developer-hooks-filters/)

 

[![Free Shipping Bar: Amount Left for Free Shipping for WooCommerce](https://wpfactory.com/wp-content/uploads/Free-Shipping-Over-Amount-Bar-for-WooCommerce.webp)](https://wpfactory.com/item/amount-left-free-shipping-woocommerce/)