WBD Progress Bar vs Free Shipping Label and Progress Bar for WooCommerce

Turn your free shipping threshold into a powerful conversion tool. This WooCommerce plugin adds a dynamic free shipping progress bar that shows customers exactly how much more they need to spend to unlock free shipping. Instead of guessing, shoppers see clear, real-time feedback directly in the cart, checkout, or mini-cart. By making the goal visible, you naturally encourage customers to add one more item — increasing average order value and reducing cart abandonment. The plugin goes beyond a simple progress bar. You can display fully customizable messages, highlight eligible products, or trigger notifications when customers are close to the threshold. Everything is designed to guide users toward completing their purchase. With the built-in Gift Bar module, you can offer a free gift once a certain cart value is reached. This adds an extra incentive layer and turns a simple discount strategy into a more engaging shopping experience. Everything is built to be lightweight, flexible, and easy to integrate into any WooCommerce store. Instead of hiding your free shipping rule in settings, make it visible — and turn it into a conversion driver. DOCUMENTATION | FREE SHIPPING LABEL PRO 🎉 Make the Most of the Gift Bar Module! Boost sales and delight your customers by offering free gifts as they shop. The Gift Bar module seamlessly integrates into your progress bar, encouraging shoppers to add more to their cart to unlock a reward. It’s the perfect way to enhance engagement and increase average order value. Learn more about how it works. 🎉 Looking to Add More Goals to Your Progress Bar? The Discount Bar Add-On lets you introduce up to three additional steps, encouraging customers to unlock exciting discounts as they shop. It’s a powerful way to boost cart values, engage shoppers, and drive more sales. Learn more about it here. Features (Free Version) Animated Gift Bar Animated progress bar Progress bar customization Display on Cart & Checkout pages Hide shipping rates when free shipping is available Message after free shipping threshold is reached Show to all users or only logged-in users Product Label for simple & variable products Customizable Product Label Translation ready Easy to use – no coding required Shipping plugin compatibility (Free): – Table Rate Shipping Method for WooCommerce (Flexible Shipping) – WooCommerce Advanced Free Shipping – GLS Shipping for WooCommerce 🚀 Get More with Free Shipping Label Pro With Free Shipping Label Pro, you unlock advanced visual controls, flexible placement options, and extended compatibility with popular WooCommerce plugins. Advanced Features Threshold icon indicator Multiple display modes Animated circular progress bar Fully customizable circular progress bar Image-based product labels Flexible label positioning Exclude labels by product or category Animated notice bar Advanced customization of notice bar Advanced progress bar styling Cart & checkout position controls Display the progress bar on the product page Shortcode support Gutenberg block Widget support 🔌 Third-Party Plugin Compatibility (Pro) Free Shipping Label Pro is built to work seamlessly with real-world WooCommerce setups. Currency & Multilingual Plugins FOX (formerly WOOCS) CURCY – Multi Currency for WooCommerce WooCommerce Multilingual (WPML) Cart, Checkout & UX Plugins WooCommerce Cart & Checkout Blocks Elementor FunnelKit WPC Fly Cart Side Cart Shipping Plugins Table Rate Shipping Method for WooCommerce (Flexible Shipping) WooCommerce Advanced Free Shipping GLS Shipping for WooCommerce EuroParcel Integration for WooCommerce The progress bar dynamically adapts to supported shipping methods and currencies, ensuring accurate thresholds and consistent messaging across the entire shopping flow. Add Additional Steps/Levels with FSL Discount Add-On Take your Free Shipping Label plugin to the next level with the FSL Discount Add-On. Unlock new possibilities for boosting sales by introducing a dynamic discount bar, encouraging customers to spend more and enhancing their shopping experience. Key Features: Add up to Three Discount Steps: Motivate customers with single, double, or triple-step goals to unlock exclusive discounts. Flexible Discount Options: Apply percentage discounts automatically or use customizable coupon codes. Customizable Messages: Tailor progress bar text to match your store’s tone and promotions. Customizable Threshold Icon: Make your progress bar visually engaging with unique threshold icons. Inspire your customers to spend more, increase cart values, and create a rewarding shopping experience. Learn More. Support We’re here to help. Feel free to open a new thread on the Support Forum. Documentation You can check Free Shipping Label documentation here. Reviews It’s funny how much joy all those 5-star reviews bring to our team. It really keeps us going and motivates us to bring more cool features. If you like this plugin, feel free to leave a review. Other Plugins by Devnet Here are some other plugins we have developed that you might find useful: Free Shipping Label – Increase order revenue by showing your customers just how close they are to your free shipping threshold. FSL Discount Add-On – By setting customizable thresholds for single, double, or triple-step discounts, you’ll motivate shoppers to add more to their carts. Product Price History – Track product price history with customizable charts and graphs on your WooCommerce store. Show lowest price and increase customer trust. Easy Subscribe – Effortlessly integrate customizable subscription forms on your WordPress site with a simple shortcode. Easy Subscribe – WooCommerce Add-On lets you place a subscription form directly on product pages to capture leads at the moment of interest and grow targeted subscriber lists based on customer preferences. Easy Booking Calendar – Turn any product into a reservation-ready item. This plugin adds a customizable calendar to product pages, allowing customers to select date ranges for bookings. BizNotes – Exclusive admin notes for seamless order management among multiple admins. Effortless collaboration, powered up. Snap Blocks – A lightweight plugin that lets you create reusable content blocks in WordPress. PingVid – A lightweight WordPress plugin that adds a floating video widget to your site.

The Progress Bar block is a simple yet powerful tool for displaying progress, statistics, skills, or any percentage-based data on your WordPress site. Built with modern web standards, this block offers smooth animations and a clean, professional appearance. Whether you need a simple skill bar, an animated number counter, a circular radial ring, or a full skills section — WBD Progress Bar has you covered. Features Display Modes * Single Bar – Classic horizontal progress bar with full customization * Number Counter – Animated count-up effect with prefix, suffix, and optional bar below * Circular / Radial Progress Bar – Beautiful SVG ring-style progress with 10 themes, custom size, stroke width, center text, and optional label * Group / Skills Section – Display multiple progress bars together as a skills list with individual labels, colors, and percentages; flexible label & percentage positioning 10 One-Click Template Styles Ocean Blue, Sunset Fire, Forest Green, Purple Galaxy, Golden Hour, Midnight Dark, Rose Pink, Arctic Ice, Corporate Gray, Lemon Lime Customization * Progress percentage control (0–100) * Custom fill & track colors * Gradient fill (two-color gradient) * Bar corner radius control (square to pill) * Bar height control (6px–40px) * Optional percentage text display * Percentage position — Inside bar / Outside right / Above bar * Label position — Above / Below / Inline row * Inline gap control (when label is inline) * Milestone marker with custom label * Hover tooltip on progress bar * Scroll-triggered animation (IntersectionObserver) * Animation type — Ease, Ease In, Ease Out, Ease In Out, Linear, Bounce, Elastic * Animation duration control * Typography control — Font family & font size for label and percentage text * Fully responsive design * Accessible design with semantic HTML Perfect For: Skill & competency display Project completion indicators Goal tracking & fundraising Statistics & data visualization Survey results & polls Resume / portfolio pages The block provides an intuitive editing experience with sidebar controls for adjusting the percentage (0–100), customizing colors, toggling percentage text visibility, and selecting from predefined style variations. Why Use WBD Progress Bar? Most progress bar plugins are either too bloated with unnecessary features or too simple to be actually useful. WBD Progress Bar is built differently: 🚀 Performance First The block outputs pure static HTML and CSS — no jQuery, no heavy JavaScript libraries. The frontend script only loads when your block is actually on the page, keeping your site fast. 🎨 Visual Flexibility Four display modes, five style variations, ten one-click templates, gradient fill, custom radius, custom height, and full color control — all without touching a single line of code. 🧩 Built for Gutenberg This is a native WordPress block, not a shortcode or widget. It works seamlessly inside the block editor, Full Site Editor (FSE), reusable blocks, and block patterns. 📱 Responsive by Default Every mode — single bar, counter, circular, group — adapts automatically to mobile, tablet, and desktop screens without extra configuration. ⚡ Scroll Animation Without a Plugin Built-in IntersectionObserver-based scroll trigger animates your bars when they come into view. No extra animation plugin needed. Source Code & Build Instructions Source Code Repository: https://github.com/wpbranddigital/wbd-progress-bar This plugin is built using @wordpress/scripts (webpack). The compiled/minified files in the build/ directory are generated from the human-readable source files located in the src/ directory of the plugin. Source files included in this plugin: src/index.js — Block registration entry point src/edit.js — Editor component (block inspector controls and editor preview) src/save.js — Save component (frontend HTML output) src/view.js — Frontend JavaScript (scroll animations, counter animations) src/block.json — Block metadata and attribute definitions src/editor.scss — Editor-only styles src/style.scss — Frontend styles To build from source: Make sure you have Node.js (v18+) and npm installed. Navigate to the plugin directory. Run npm install to install dependencies. Run npm run build to generate the production build/ directory. Run npm start to start the development watcher with live rebuild. The only build dependency is @wordpress/scripts (see package.json). How To Use Step 1 — Add the Block Open any post, page, or template in the WordPress editor. Click the + block inserter button, search for “Progress Bar”, and click to insert the WBD Progress Bar block. Step 2 — Choose a Display Mode In the right sidebar, find the Block Mode panel at the top. Select one of four modes: Single Bar — A classic horizontal progress bar. Best for individual skills, project completion, or goal tracking. Number Counter — An animated number that counts up on scroll. Great for statistics pages (“500+ clients”, “$1M+ revenue”). Circular / Radial — A circular SVG ring progress indicator. Perfect for dashboards or visual KPI displays. Group / Skills Section — Multiple bars stacked together. Ideal for resume skills sections or comparison lists. Step 3 — Apply a Template (Optional) Open the Template Styles panel and click any of the 10 preset templates to instantly apply a complete color scheme and style. You can fine-tune colors individually after applying a template. Step 4 — Customize Settings Depending on your selected mode, configure the following panels: Progress Settings — Set percentage, height, radius, label text, label position, and percentage position. Animation — Choose animation type (ease, bounce, elastic), set duration, and enable scroll-triggered animation. Milestone & Tooltip — Add a milestone marker at any percentage point with a custom label. Enable hover tooltip for additional info. Typography — Set font family and font size for the label and percentage text independently. Color Settings — Set fill color, track color, label color, and percentage text color. Enable gradient fill to use two colors. Step 5 — Using the Number Counter Switch to Number Counter mode. Set: Target Number — The final value to count up to (e.g. 1500). Prefix — Text before the number (e.g. $). Suffix — Text after the number (e.g. + or %). Label — A description shown below the number (e.g. “Happy Clients”). Show Progress Bar Below — Toggle to add a bar underneath the counter. The counter animates automatically on page load, or enable Animate on Scroll so it only starts when the user scrolls to it. Step 6 — Using Group / Skills Section Switch to Group / Skills Section mode. In the sidebar: Each bar item has its own Label, Percentage, and Bar Color. Click + Add Bar to add more items (no limit). Click ✕ to remove any item. Set Label Position — Above bar (with optional percentage on the same line) or Inline row. Set Percentage Position — Inside bar / Outside right / Same line as label. Adjust Gap Between Bars and Inline Gap sliders to control spacing. Step 7 — Using Circular / Radial Mode Switch to Circular / Radial mode. In the sidebar: Choose one of the 10 circular themes by clicking the theme thumbnail. Adjust Size (80–300px) and Stroke Width (3–20px). Set the Progress Percentage. Toggle Show Label Below to display a text label under the ring. Fine-tune Stroke Color, Track Color, and Center Text Color individually. Step 8 — Publish Click Publish or Update. The block renders as clean, static HTML on the frontend with no extra requests or render-blocking scripts. Where can I get support? Visit our contact page for support.