The progress bar shows customers how much more they need to spend for free shipping, and fills up as they add products. This tab decides where it shows, what it says and how it looks.
Where: WooCommerce → Free Shipping Label → Progress Bar.
Live preview
The preview at the top shows your bar with the current settings, before you save.
- Progress: drag the slider (0 to 100%) to see the bar at any point, including the message when the goal is reached.
- Goals in the preview: with the Gift Bar or Discount bars on, buttons let you preview the bar with or without them.
Enable Progress Bar
Turns the progress bar on. Off by default.
Show with local pickup
By default the bar hides when the customer chooses Local pickup, since shipping doesn’t matter then. Turn this on to keep showing it.
Treat a 0 shipping cost as free shipping
Some shipping plugins give free shipping as a normal rate that costs 0, instead of WooCommerce’s Free shipping method. Turn this on so the bar counts a 0 shipping cost as free shipping and shows the “goal reached” message.
Tip: Turn it on only if a customer has free shipping at checkout but the bar still asks them to spend more.
Positions
Where the bar shows on the classic cart, checkout and mini-cart. Choose — Do not display — to hide it in a place.
Cart position
Default: Before “Proceed to checkout”. More positions are available around the cart totals, cart and cart table, and inside the cart table.
Checkout position
Default: Before “Place order”. More positions are available around the checkout form, before the order summary, and after “Place order” before payment.
Mini-cart position
Default: Before buttons (in the mini-cart widget). More positions are available around the mini-cart and its contents. With FunnelKit Cart, WPC Fly Cart or Xootix Side Cart active, their positions are listed too.
Product page position
Shows the bar on product pages, for example Inside product summary or After add to cart button. Off by default.
Note: Some themes leave out some of these spots. If the bar doesn’t show, try another position.
Block Cart, Checkout and Mini-Cart
When your Cart, Checkout or Mini-Cart uses WooCommerce blocks, the position lists start with block positions, for example Before “Proceed to checkout” in the Cart block or After the shipping options in the Checkout block. The bar is placed there automatically, without editing the page.
The setting shows a warning when the chosen block isn’t on your page (the bar can’t show) or when you’ve also added the Progress Bar block to the page yourself (it would show twice).
Shortcode
[fsl-progress-bar] shows the bar anywhere: a page, a widget or a template. There’s also a Progress Bar block for the block editor.
Text
Leave a text empty to use the default text, translated for each language of your store. Each text has a switch to hide it.
Placeholders you can use in the texts:
{free_shipping_amount}: the free shipping threshold, for example 50 €.{remaining}: what the customer still needs to spend.
Label
Short name of this goal in the layouts that list goals (Checklist, Goal tiles…). Default: “Free Shipping”.
Title
Default: “Free delivery on orders over {free_shipping_amount}”. Switch: Show title.
Description
Default: “Add at least {remaining} more to get free shipping!”. Switch: Show description.
Message when close to free shipping
A nudge for customers who are almost there. Default: “Almost there! Add {remaining} more to get free shipping.”
Where to show the message: Off (default), Instead of the title or Instead of the description. It shows from 75% of the way to free shipping.
Example: free shipping from 50 €, cart at 40 € (80%). The description changes to “Almost there! Add 10 € more to get free shipping.”
Note: It replaces text the layout shows. In layouts without a title (or without a description), choose the other option.
After free shipping is reached
Message when the goal is reached
Default: “You have free shipping! 🎉”. Switch: Show message. With the message on, the title and description are hidden once the goal is reached.
Show full progress bar
Keeps a full bar under the message once free shipping is reached. Without it, only the message shows.
Design
Bar type
Linear (default) or Circular.
Design preset
Ready-made looks, each shown as a preview of your own bar: Minimal, Soft Pill, Aurora, Glass, Neon Night, Steps, Bold, Soft UI, Shimmer, Candy, Delivery Road, Underline, Theme Match, and Gauge (circular bar only). Some have a hint, for example “Best with one goal”. Choosing one fills in the design options below; you can still change them afterwards. Custom keeps your own design.
Accent color
The second color of the gradient presets (Aurora, Neon Night).
Layout
How the bar shows your goals (free shipping, the gift, discounts). Each card shows a preview with your goals.
- Layouts include Vertical list (default), Checklist, Timeline, Milestones, Stepper, Tier segments, Next goal, Split header, Headline, Goal tiles, Stacked bars, Spotlight, Rewards count, classic Description Only and Beneath Threshold Bubbles, plus circular-bar layouts (Goal markers, Activity rings, Goal arcs, Next goal, Ring + checklist, Mini rings, Gauge and Stepper ring).
Note: A layout from before 4.0.0 that has a newer version (Vertical list (alt), Horizontal Labels, Description Only Above…) stays selected after the update, marked “Replaced by …”. Once you pick another layout, it’s no longer in the list.
Show design options
Opens the detailed design settings below.
| Option | What it does |
|---|---|
| Goal icons | An icon at each goal on the bar. With Icon size, Icon shape (round, rounded, square), Icon background color. |
| Circle size, Ring thickness | Size of the circular bar and the thickness of its ring (in % of the size). |
| Inside circle | What the circle shows: nothing, the title, the description, the icon, the amount left or the percent. |
| Icon, Icon color | The goal’s icon and its color. |
| Circle background color | The circle’s inner color. |
| Bar fill color, Bar background color, Bar border color | The bar’s colors: the filled part, the empty part and the outline. |
| Text color, Text size | Text color, and Small, Medium or Large (default: the theme’s). |
| Box background color, Box maximum width | The box around the bar. Width 0 = full width. |
| Box alignment | Center (default), Left or Right. |
| Bar height, Bar corners | Bar thickness in pixels; corners 0 = square. |
| Center text | Centers the texts. |
| Disable animation | Turns off the moving stripes, the shine, or both (Animations to turn off). |
| Remove bar stripes | A plain fill without stripes. |
| Hide border and shadow | A flat box. |