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 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 section.
- The settings live at WPFactory > Left for Free Shipping (also reachable at WooCommerce > Settings > Amount Left for Free Shipping).
Step by step #
- Open the Progress Bar section and tick Enable progress bar.
- Under Custom style, pick the Background color (the empty track), the Foreground color (the filled part) and the Height in pixels. Save changes.
- 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. - Add a product to your cart below the threshold and open the cart page to check the bar.
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.
- Nothing shows on a block-based cart: the Cart section positions are classic cart hooks. See Plugin not working in the Cart block.
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.
Related: Display free shipping info on the cart page and the message placeholders reference.
Get more control #
The progress bar and its colors are free. Amount Left for Free Shipping 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.
Need a hand? Our team answers every ticket on the Amount Left for Free Shipping support forum.
