Free Shipping Bar
Raise order values by showing how close shoppers are to free shipping.
WooCommerce free-shipping progress that updates live as the cart changes, with reward milestones, four designs and a sticky or fixed strip.
Gutenberg block
Requirements
- The block editor (Gutenberg)
- WooCommerce 7.0 or newer
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Open the page or post in the block editor.
- Click + (Block Inserter) and search for Free Shipping Bar — it is in the Moduly category.
- Insert it, then fill in its content on the canvas. Ready-made presets appear when you insert it, and later under Transform to in the block toolbar.
- Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.
Settings
Free-shipping amount
| Setting | What you can set |
|---|
| Take the amount from | manual, auto or method |
| Method | Number |
Messages
| Setting | What you can set |
|---|
| While below | Text |
| Once reached | Text |
| Empty cart | Text |
| Before the next reward | Text |
Design
| Setting | What you can set |
|---|
| Design | card, strip, inside or steps |
| Stages | 2–8 |
| Label at the end | Text |
| Progress label | none, percent or amount |
| Fill | plain, gradient or striped |
| Icon | truck, box or none |
| Maximum width (px, 0 = full) | 0–1600 |
| Animation (ms) | 0–3000 |
| Bar height (px, 0 = default) | 0–48 |
| Fill | Text |
Placement and visibility
| Setting | What you can set |
|---|
| Position | inline, sticky, top or bottom |
| Offset (px) | 0–200 |
| Hide while the cart is empty | On / off |
| Hide once free shipping is reached | On / off |
| Close button | On / off |
| Stay closed | session, day or page |
Link
| Setting | What you can set |
|---|
| Link text | Text |
| Link address | Text |
| Text once reached | Text |
| Look | text or button |
| Link | Colour |
Editor preview
| Setting | What you can set |
|---|
| Free Shipping Rewards | List |
| Background | Text |
| Background once reached | Text |
| Text | Colour |
| Amounts | Colour |
| Gradient end | Text |
| Fill once reached | Text |
| Track | Text |
| Link button | Colour |
| Show the bar with | half, empty, reached or live |
Styles tab: typography and spacing, from WordPress's own design tools.
Tips
- Start with the Design choice — it changes the overall look the most; fine-tune the rest afterwards.
- It reads your WooCommerce data (products, prices, stock), so changes made in WooCommerce show up here automatically.
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
- Not sure where to start? Insert one of its presets and edit from there.
Troubleshooting
- The bar measures the cart the way WooCommerce does (displayed subtotal minus discounts), so it agrees with the checkout; a free-shipping method set to “a valid coupon” only (no minimum) cannot be shown as progress.
- WooCommerce's BDT currency symbol carries its own non-breaking space, so amounts read “30.01৳ ” with a space after the symbol before the next word; this is the store's price format.
- Pre-existing elementorFrontendConfig is not defined front-end error for logged-in users (Elementor).
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
- Works well with: Countdown, Promo Box.
