Elegant Free Shipping Progress Bar for WooCommerce
Description
The Elegant Free Shipping Progress Bar for WooCommerce plugin is the most advanced and beautiful looking progress bar that will help you generate more sales via your WooCommerce shop.
This is the first and only progress bar that is fully compatible with both Elementor page builder and Gutenberg block editor.
The Plugin Offers 2 Types of Visuals for Free Shipping Progress:
1. Free Shipping Progress Bar
The most popular way of displaying customers the free shipping progress as they add products to cart.
This is great for displaying the bar in product pages, cart, checkout pages etc.
2. Circular Shipping Progress
A new, eye-catching circular indicator which is great for sidebars and product pages. People naturally dislike incomplete circles, which encourages them to add more products to the cart and complete the circle!
Look how annoying this is... You just have to complete the circle right? :-)
How the Plugin will Increase Your Shop's Sales & Revenues:
-
Increase Average Order Value (AOV)
Encourages customers to add more products to unlock free shipping. -
Boost Revenue Without Discounts
Uses smart visual motivation instead of lowering prices. -
Can Be Inserted Anywhere in Your Store
Works on product pages, cart, checkout, shop, archive pages or anywhere you choose. -
Full Freedom of Placement
Place the progress bar anywhere on the page using Elementor or Gutenberg, without layout limitations. -
Motivates Action Through Visual Progress
Customers clearly see how close they are to free shipping, reducing hesitation. -
Leverages Completion Psychology
Progress indicators (including circular designs) naturally push shoppers to complete the goal. -
Increases Engagement and Reduces Cart Abandonment
Dynamic messages, real-time updates, and celebration effects keep shoppers focused on finishing checkout. -
Creates a Fun, Rewarding Shopping Experience
Turning free shipping into a visible achievement makes shopping feel more satisfying.
How to Use the Elegant Free Shipping Progress Bar?
You can add the free shipping progress bar to your store in two ways:
1. Gutenberg Block (Block Editor)
- Edit any page or post with the block editor
- Click the + button to add a new block
- Search for "Elegant Free Shipping Progress Bar"
- Customize the appearance using the block settings panel
2. Elementor Widget
- Edit any page with Elementor
- Search for "Free Shipping Progress Bar" in the widget panel
- Drag and drop the widget to your desired location
- Customize using the widget controls
Key Features of the Plugin
- Real-time Updates - Progress bar updates automatically when cart changes
- Customizable Threshold - Set your own free shipping minimum amount
- Multiple Styles - Choose from glossy, neon, glass, 3D, gradient, and more
- Animations - Add pulse, shimmer, wave, or glow effects
- Celebration Effects - Confetti, fireworks, and more when goal is reached
- Color Progression - Bar color changes as customers get closer to the goal
- Milestone Markers - Show progress milestones at 25%, 50%, 75%, 100%
- Encouraging Messages - Display motivational messages based on progress
- RTL Support - Full support for right-to-left languages
- And so much more!
Recommended Locations:
For best results, place the progress bar in highly visible locations:
- Cart page (above or below cart items)
- Checkout page header
- Site header or announcement bar
- Shop Page
- Category Pages
- Product pages
Progress Bar Screenshots:
Here are some screenshots of the progress bar. You can, of course customize its look and feel:
Screenshots
Elegant Free Shipping Progress Bar for WooCommerce - Gutenberg Block
Elegant Free Shipping Progress Bar for WooCommerce - Animation Effects
Elegant Free Shipping Progress Bar for WooCommerce - Progress Bar Style
Elegant Free Shipping Progress Bar for WooCommerce - Progress Bar Colors 2
Elegant Free Shipping Progress Bar for WooCommerce - Content Settings
Elegant Free Shipping Progress Bar for WooCommerce - Gutenberg Block
Elegant Free Shipping Progress Bar for WooCommerce - Progress Bar Colors
Elegant Free Shipping Progress Bar for WooCommerce - Progress Bar Stripes
Elegant Free Shipping Progress Bar for WooCommerce - Indicator
Elegant Free Shipping Progress Bar for WooCommerce - Engagement Mode 2- Elegant Free Shipping Progress Bar for WooCommerce Elementor Widget - Almost There Shipping Bar
Elegant Free Shipping Progress Bar for WooCommerce - Engagement Mode 1- Elegant Free Shipping Progress Bar for WooCommerce Elementor Widget - You're on your way Shipping Bar
Elegant Free Shipping Progress Bar for WooCommerce Elementor Widget - Reached Free Shipping Text Settings
Elegant Free Shipping Progress Bar for WooCommerce Elementor Widget - Progress Bar Engaging Messages
Elegant Free Shipping Progress Bar for WooCommerce Elementor Widget - Progress Bar
Elegant Free Shipping Progress Bar for WooCommerce - Encouraging Messages
Elegant Free Shipping Progress Bar for WooCommerce Elementor Widget - Conteiner Settings
Elegant Free Shipping Progress Bar for WooCommerce Elementor Widget - Not Reached Free Shipping Text Settings
Elegant Free Shipping Progress Bar for WooCommerce Elementor Widget - Encouraging Messages Settings
Elegant Free Shipping Progress Bar for WooCommerce Elementor Widget - Content Settings
Elegant Free Shipping Progress Bar for WooCommerce Elementor Widget - Progress Bar Settings 2
- Elegant Free Shipping Progress Bar for WooCommerce Elementor Widget - Reached Free Shipping Bar
Elegant Free Shipping Progress Bar for WooCommerce Elementor Widget - Reached Free Shipping Bar with Confetti- Elegant Free Shipping Progress Bar for WooCommerce Elementor Widget - Halfway There Shipping Bar
Videos
The Free Shipping Progress Bar for WooCommerce OverView
The Free Shipping Progress Bar for WooCommerce & Elementor:
The Free Shipping Progress Bar for WooCommerce & Gutenberg:
Requirements
| Requirement | Minimum |
|---|---|
| Requirements | WordPress 6.8.3 and higher, WooCommerce 10.4.3 and higher |
| For Elementor | Version 3.34.1 and higher |
Faqs
Installation
Upload the zip via Plugins → Add New → Upload, then activate.
Go to the plugin settings and paste your license key into the License field.
WordPress 5.8+, PHP 7.4+, and WooCommerce 5.0+.
Yes. WooCommerce must be installed and activated.
No. Elementor is optional — the Gutenberg block works without it.
PHP & WordPress Compatibility
Yes. Requires PHP 7.4 minimum and runs on PHP 8.x.
WordPress 5.8.
WooCommerce Compatibility
Requires WooCommerce 5.0 or higher; tested up to 9.5.
Yes. The plugin declares compatibility with High-Performance Order Storage.
Yes. The bar listens to the WooCommerce Blocks store for real-time updates.
Yes. Uses fsw_calculate_adjusted_subtotal() when available, falling back to the standard cart subtotal.
Elementor Integration
Tested up to Elementor 3.25 and Elementor Pro 3.25.
free_shipping_progress_bar and circular_shipping_progress_bar.
Under the WooCommerce Elements category.
Yes. Group typography controls with separate styling for 'not reached' and 'reached' states.
Gutenberg Integration
fspb/free-shipping-progress-bar and fspb/circular-progress-bar.
Under the WooCommerce category in the block inserter.
Yes.
Yes. A live server-side render preview runs in demo mode at 30% of the threshold.
Linear Progress Bar
A horizontal bar that fills based on cart total versus the free shipping threshold.
Yes. LTR, RTL, or auto-detect from site language.
Yes. Both are fully configurable.
Flat, 3D, Glossy, Neon, Glass, Gradient, Cyber, and Minimal.
Circular Progress Bar
An SVG-based circular indicator showing free shipping progress.
80–300 px circle size with 2–30 px stroke width.
Yes. Round, flat, or square.
Yes. Top, right, bottom, or left.
Percentage, icon, remaining amount, current total, or icon + percentage.
Above or below the circle.
Threshold & Messages
Yes. The minimum cart amount is fully configurable.
Yes, with support for the {remaining_amount} placeholder.
Yes. A dedicated success message can be set.
{remaining_amount}, {current_amount}, and {threshold}.
Yes. A dedicated toggle hides the widget on an empty cart.
Real-Time Updates
Yes. It updates via AJAX on WooCommerce cart events.
added_to_cart, removed_from_cart, updated_cart_totals, wc_fragment_refresh, and WooCommerce Blocks store changes.
Yes. Debug mode logs cart events and AJAX updates to the browser console.
Colors
Background (track), fill, gradient start/end, gradient angle, neon glow color and intensity, cyber pair, shadow, border, and stripes overlay.
Circle background, fill, gradient endpoints, glow color and intensity, center icon, and center text.
Yes. Text color and optional background are separate for 'not reached' and 'reached' states.
Indicator / Cursor
13: Arrow, Triangle, Chevron, Double Chevron, Circle, Circle Outline, Star, Heart, Diamond, Truck, Percentage, Remaining Amount, and Current Total.
Yes. Vertical (above/top/center/bottom/below) and horizontal (follows progress, start/center/end), each with offsets.
Yes. A mirror/flip toggle is available.
Yes. Optional background color, padding, and border radius.
Yes. It auto-hides when progress reaches 100%.
Milestone Markers
Dots, Lines, and Icons.
Fixed at 25%, 50%, 75%, and 90%.
Yes. Defaults are 🎯 ⭐ 🔥 🚚 and each can be replaced.
Yes. Separate colors are configurable.
Yes. A pop animation plays when a milestone is reached.
Tooltips show on hover on desktop and are hidden on screens under 480 px.
Animations
None, Pulse, Shimmer, Wave, and Glow.
Yes. A configurable speed multiplier is available.
Diagonal, Diagonal Reverse, Horizontal, and Vertical — animated or static.
None, Pulse, Rotate, and Glow.
A pulsing brightness/glow effect that activates between 80–99% progress on a 0.8 s cycle.
Celebration Effects
9 styles, triggered when the cart reaches the free shipping threshold.
Confetti, Fireworks, Sparkle, Bounce, Party, Stars, Rainbow, Hearts, and Trophy.
Yes. They remove themselves after 6 seconds.
No. They use pointer-events: none and do not interfere with the page.
Yes.
Engagement Mode
A master toggle that enables color progression, intensity scaling, milestone markers, encouraging messages, celebration effects, and urgency pulse.
Three-color interpolation (start → middle → end) that overrides the base fill color in real time.
A factor that scales 0 → 1 based on progress percentage.
Tiered messages shown at 25/50/75/90%, each customizable, with a slide-up fade-in animation.
Layout & Container
Yes. Both are configurable.
Background color, border radius, padding, and margin — all responsive.
Yes. Toggle, color, and blur (0–100 px).
Yes. Toggle, color, and width.
Typography
Yes. A group typography control covers font family, size, weight, style, line height, and letter spacing.
Yes. 'Not reached' and 'reached' messages have independent styling.
Yes. Left, center, and right alignment per device.
Responsive Design
768 px and 480 px.
Smaller milestone dots and hidden labels.
Yes. All Elementor and Gutenberg controls support desktop, tablet, and mobile values.
Accessibility
Yes. Full ARIA roles, live regions, screen reader text, and WCAG 2.1 AA contrast validation.
role=progressbar with aria-valuenow/min/max, role=region on the container, role=img on milestones, and role=status on celebration announcements.
Yes. All 7 message containers use aria-live=polite with aria-atomic=true.
Yes. Animations and transitions are disabled when prefers-reduced-motion is enabled.
Yes. Gutenberg uses ContrastChecker for fill/track (3:1), indicator (4.5:1), and text (4.5:1). Elementor shows accessibility tips under color controls.
Yes. A .fspb-sr-only element outputs progress such as 'X% complete, $Y remaining' and is synced during AJAX updates.
Direction & RTL
Yes. LTR, RTL, and auto-detect from site language are supported.
Yes. Milestones reposition correctly in RTL layouts.
Currency
Yes. Respects WooCommerce currency symbol, position, and decimal/thousand separators.
Left, right, left with space, and right with space.
Yes. Entities are decoded to support any character set.
Internationalization
Yes. All strings use WordPress translation functions.
elegant-free-shipping-progress-bar.
Yes, via wp_localize_script (i18n_progress_label, i18n_celebration_announce).
Troubleshooting
Ensure WooCommerce is active and enable Debug mode to log cart events to the browser console.
Enable Debug mode in the plugin settings to output console logs for cart events and AJAX updates.
Check that the show/hide toggle is enabled, the cart is not empty (if that option is on), and that the widget/block is placed on the page.
Install and activate WooCommerce. Elementor is only needed if you want to use the Elementor widgets.