Rankd Free Shipping Progress Bar

ማብራሪያ

This plugin shows a free shipping progress message on your WooCommerce store. When a customer’s cart is below your threshold, they see how much more they need to spend. When they hit it, the message updates to confirm they’ve qualified. The message refreshes as items are added or removed without a page reload.

You can drop it on any page using the shortcode [rankd_free_shipping], or turn on auto-inject to have it appear automatically at the top of your cart and checkout pages. Settings are under WooCommerce Settings Free Shipping Progress.

What it does

  • Auto-injects on the cart page, checkout page, or both — no shortcode needed
  • Shortcode [rankd_free_shipping] works on any page, widget area, or theme template
  • Updates the message and progress bar as the cart changes, including on block-based themes
  • Full appearance control — colors, font, font size, and border radius via an in-page Appearance tab with live preview and WCAG AA contrast checking
  • Progress bar is included by default and can be hidden with a single CSS rule
  • Threshold amount is configurable
  • Supports an optional coupon code — useful if your free shipping requires one
  • Message text is customizable, with {amount} and {coupon} merge tags
  • Role exclusions let you hide the message from specific user roles
  • Developer filters for threshold, messages, and subtotal calculation
  • CSS class reference built into the Appearance tab

Where to find the settings

After activating, go to WooCommerce Settings Free Shipping Progress. The page has two in-page tabs: Settings for the threshold, messages, coupon, and role exclusions, and Appearance for colors, fonts, and styling.

Developer Filters

For developers who need to customize behavior beyond the settings page, the following filters are available:

rankd_fs_threshold — filters the threshold amount before comparison. Receives the saved threshold as a float.

rankd_fs_subtotal — filters the cart subtotal used for the comparison. Receives `WC()->cart->get_cart_contents_total()` by default. Useful if your store needs a different calculation (e.g. including tax, or excluding certain product categories).

rankd_fs_msg_notice / `rankd_fs_msg_success` / `rankd_fs_msg_coupon_line` — filter the raw message strings before merge tags are processed. Each receives the saved message text.

Example:

add_filter( 'rankd_fs_threshold', function( $threshold ) {
    return is_user_logged_in() ? 75 : 50;
});

Styling

Class
Element

.rankd-fs-wrapper
Outer div (both states)

.rankd-fs-notice
Outer div — threshold not met

.rankd-fs-success
Outer div — threshold met

.rankd-fs-message
Message text span

.rankd-fs-amount
Currency amount span

.rankd-fs-coupon-code
Coupon code span

.rankd-fs-coupon-line
Coupon line beneath success message

.rankd-fs-bar-track
Progress bar background track

.rankd-fs-bar-fill
Progress bar filled portion

Screenshots

መጫን

  1. Upload the rankd-free-shipping-progress-bar folder to /wp-content/plugins/, or install via Plugins Add New Upload Plugin
  2. Activate the plugin
  3. Go to WooCommerce Settings Free Shipping Progress
  4. Set your threshold amount and customize your messages
  5. Enable auto-inject or place [rankd_free_shipping] on your site

Nothing will appear on your site until you complete step 5.

የተለመዱ ጥያቄዎች

I activated the plugin but nothing is showing. Why?

Go to WooCommerce Settings Free Shipping Progress and either enable one of the Auto-inject options, or place the shortcode [rankd_free_shipping] somewhere on your site.

Does the progress bar update live?

Yes, on all pages. Classic cart/checkout responds immediately to WooCommerce cart update events. Block-based themes and other contexts update via a polling loop every 2.5 seconds.

How do I customize the colors and fonts?

Go to WooCommerce Settings Free Shipping Progress and click the Appearance tab. You’ll find color pickers for all states, font family, font size, and border radius controls, with a live preview that updates as you make changes.

My store has multiple shipping zones with different minimums. Will this work?

Not fully. This plugin shows one threshold to all visitors. If your zones have the same threshold there’s no problem. If they differ significantly, a geo-aware plugin will serve you better for this feature.

How do I hide the progress bar and show text only?

Add .rankd-fs-bar-track { display: none; } to Appearance Customize Additional CSS.

Does this work with Elementor, Divi, or Beaver Builder?

Yes. The plugin outputs standard HTML and CSS with body-scoped selectors to handle specificity from page builders. The font selector on the Appearance tab detects fonts already registered by your page builder.

Does this work with caching plugins?

Yes. The progress message itself is excluded from static page caching by design — it’s refreshed via AJAX after page load, so even on a fully cached page the displayed amount will update to reflect the current cart. If your host or caching plugin caches AJAX/admin-ajax.php responses (uncommon, but some aggressive configurations do), you may need to exclude admin-ajax.php requests from caching for live updates to work correctly.

Does the threshold account for tax?

The threshold compares against your cart’s subtotal before tax (get_cart_contents_total()), which matches how WooCommerce’s own free shipping zone settings calculate eligibility in most configurations. If your store has an unusual tax setup where this doesn’t match, the rankd_fs_subtotal filter (see Developer Filters below) lets you override the calculation.

Is this compatible with High-Performance Order Storage (HPOS)?

Yes. The plugin declares HPOS compatibility and doesn’t interact with order data directly — it only reads the current cart session, so HPOS has no effect on its behavior.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Rankd Free Shipping Progress Bar” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.1.0

  • New: Appearance tab. A full visual customization panel — color pickers for every state (background, border, text, and progress bar fill for both the “Almost There” and “Qualified” messages), font family selector that automatically detects fonts already registered by your theme and page builder (Elementor Pro kit fonts, Google Fonts, WP Fonts API), font size with px/em/rem units, and separate border radius controls for the message box and the progress bar itself.
  • New: Live preview. Both message states render side by side directly on the Appearance tab and update instantly as you adjust any setting — no need to save and check the front end.
  • New: WCAG AA contrast checking. Each preview state shows a pass/fail badge with the calculated contrast ratio, so it’s easy to catch low-contrast color combinations before they reach customers.
  • New: Reset to Defaults button restores all Appearance settings in one click.
  • New: Developer filtersrankd_fs_threshold, rankd_fs_subtotal, rankd_fs_msg_notice, rankd_fs_msg_success, and rankd_fs_msg_coupon_line for advanced customization. See the Developer Filters section above.
  • Fixed: settings page now extends WC_Settings_Page for fully reliable saving — previous versions could lose settings under certain WooCommerce configurations.
  • Fixed: setup reminder notice is now dismissible.
  • Improved: Google Fonts detection now correctly preserves multi-word font names (e.g. “Open Sans”, “Roboto Slab”).

1.0.0

  • Initial release.