Shipping Bar
Free-shipping progress for WooCommerce: the goal comes from WooCommerce’s own free-shipping method (or your amount), the message fills in live amounts, and every bar on the page updates the moment the cart changes. Four designs, striped or milestone progress, an icon that turns into a gift, sticky or fixed placement, and a close button that remembers.
Try it: add something
Add a product and watch every bar below move.
1. Card
Message over a slim bar, truck icon, a “Shop now” link that becomes “Checkout” once free shipping is reached.
2. Strip announcement
A one-line announcement bar — the classic top-of-site strip.
3. Message inside a thick bar
The bar itself carries the message and the percentage; gradient fill.
4. Milestones
The goal split into four stages, with “amount / goal” on the right.
5. Moving stripes, your own icons
Animated striped fill; a rocket that turns into a trophy.
6. Already reached, closable
With a low goal the bar shows its “reached” state: gift icon, green fill, checkout link. The × hides it for the session.
7. Sticky while scrolling
Sticks to the top of the screen as you scroll past it (offset 0).
8. Finished: after-dark header strip
A dark announcement strip above a dark header, with a gold amount and a button.
9. Finished: cart sidebar card
A boutique card for a cart sidebar: milestones in gold, a soft paper background.
10. Fixed to the bottom of the screen
This one is pinned to the bottom edge of the window on every scroll position (kept in place while editing).