Elegant Free Shipping Progress Bar for WooCommerce

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.

Yes. Requires PHP 7.4 minimum and runs on PHP 8.x.

WordPress 5.8.

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.

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.

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.

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.

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.

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.

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.

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.

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%.

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.

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.

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.

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.

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.

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.

768 px and 480 px.

Smaller milestone dots and hidden labels.

Yes. All Elementor and Gutenberg controls support desktop, tablet, and mobile values.

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.

Yes. LTR, RTL, and auto-detect from site language are supported.

Yes. Milestones reposition correctly in RTL layouts.

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.

Yes. All strings use WordPress translation functions.

elegant-free-shipping-progress-bar.

Yes, via wp_localize_script (i18n_progress_label, i18n_celebration_announce).

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.