Free shipping bar for WooCommerce: show shoppers how much is left and lift the cart

A shopper who knows exactly how much more to add for free shipping behaves differently from one who does not. The first has a target; the second has a vague memory of a rule in the terms. A free shipping progress bar turns that rule into a live, visible goal on the cart and at checkout. This guide explains what such a bar does, what to look for, and how Nudge handles it.

What a Free Shipping Bar Is and Why It Matters

A free shipping bar is a small progress indicator that tells shoppers how much more they need to spend to unlock free shipping. As items go in and out of the cart, the bar fills and the remaining amount counts down. When the threshold is reached, it switches to a success message.

It matters because free shipping is one of the strongest reasons people add another item, but only when the goal is clear. A threshold hidden in the fine print does nothing. A bar that says how much is left, right where the shopper is deciding, gives a concrete reason to reach the next item.

What to Look For

Not every free shipping bar helps. A few properties separate a useful one from a liability:

• An accurate threshold. The amount on the bar should match the real free shipping rule. The safest way is to read it from the WooCommerce shipping method itself, so the two never drift apart.
• Live updates. The bar should re-render as the cart changes, not show a stale number from page load.
• No layout shift. A bar that pops in after load pushes content down and hurts Core Web Vitals. The track should reserve its space in advance.
• Light front end. A progress bar does not need a heavy library. Plain JavaScript keeps the store fast.
• Accessibility. A real progress bar role with ARIA values, not just a coloured strip, so screen readers convey the same goal.
• Sensible empty state. When there is no goal configured, the bar should hide itself rather than show something broken.

How Nudge Does It

Nudge for WooCommerce is a free, open source plugin focused on exactly this. The free edition is a complete free shipping bar:

• Automatic threshold. Nudge reads the minimum order amount from your active WooCommerce free shipping method, using the smallest amount across your shipping zones, with a manual fallback if you prefer a fixed number.
• Live updates. The bar re-renders with the cart and animates smoothly, using a tiny script with no jQuery of its own.
• Cart and checkout. It shows on the classic templates and on the WooCommerce Cart and Checkout blocks, and you enable each placement in the settings.
• Accessible by default. A real role=progressbar with aria-valuenow, aria-valuemin and aria-valuemax, plus a readable text alternative.
• Zero layout shift. The track reserves its height up front, so the bar causes no CLS.
• Themeable. Colours are CSS custom properties and the bar is dark-mode aware.
• Customisable messages. Use the {amount} token in the progress message and set a separate success message for when the goal is reached.
• Translation ready. A POT file is included, uninstall is clean, and the plugin is HPOS and Blocks compatible.

When no free shipping goal is configured, Nudge hides the bar instead of showing a broken or always-complete one.

For stores that want more, Nudge PRO is a separate paid edition that extends the free bar. PRO adds a floating mini-cart progress bar on every storefront page, per-zone shipping goals so different zones can have different thresholds, tiered rewards chaining up to three cart-value milestones with their own messages and markers, and conversion analytics that count bar views and threshold reaches per placement. Those are PRO-only; the free edition covers a single free shipping threshold on the cart and at checkout.

Nudge Versus Default WooCommerce

WooCommerce can offer free shipping over a threshold, but it does not tell the shopper how close they are. Here is the difference for the progress bar specifically:

Capability	Default WooCommerce	Nudge (free)
Free shipping over a threshold	Yes, as a shipping method	Uses that same method
Shows how much is left	No	Yes, live remaining amount
Threshold kept in sync	n/a	Read automatically from the method
Updates as the cart changes	No	Yes, live
Cart and checkout placement	n/a	Both, classic and Blocks
Layout shift (CLS)	n/a	Zero, track reserves height
jQuery required	n/a	No, tiny plain-JS script
Accessible progress bar	n/a	Yes, role=progressbar with ARIA
Empty state when no goal	n/a	Bar hides itself
Cost	Free (core has no bar)	Free; PRO adds floating bar, per-zone goals, tiered rewards, analytics

The Short Version

A free shipping bar works when it shows the real remaining amount, updates live, stays accessible and adds no layout shift. The cleanest setup reads the threshold straight from your WooCommerce shipping method so the number never drifts. Nudge does this for free on the cart and at checkout, and PRO adds a floating bar, per-zone goals, tiered rewards and analytics when you need them.