Free Shipping Progress

Free Shipping Progress shows customers how close their cart is to qualifying for free shipping. The first render is server-side so the bar is accurate immediately on page load — then the frontend script refreshes it live whenever a product is added or removed from the cart.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Free Shipping Progress. The editor shows a static preview at 55% fill. The live cart value is only visible on the frontend.

Threshold

Detection mode controls where the qualifying amount comes from:

Custom threshold — visible only in Custom mode. Enter the cart subtotal (excluding tax) a customer must reach to qualify. Example: 75 for $75.00.

Messages

Two fields control what the block says in each state.

Before qualifying — shown while the cart is below the threshold. Default: Add {amount_left} more for free shipping!

Use {amount_left} anywhere in the message as a placeholder — it's replaced with the formatted currency amount the customer still needs to add (e.g. $12.50).

After qualifying — shown once the cart reaches the threshold. Default: You've unlocked free shipping!

Visibility

• Hide when cart is empty — hides the block entirely when there are no items in the cart, keeping the widget out of sight until shopping starts.
• Hide once free shipping is unlocked — hides the block once the customer qualifies. Use this if you'd rather show a separate banner or rely on the cart totals to communicate the achievement.

The sidebar at a glance

The block sidebar is split into two tabs. Settings is what the block does; Styles is how it looks, organised by the parts you can see.

Styling

• Background on the Bar is the progress fill itself — a solid color or a gradient, so the bar can run from one brand color to another as it fills.
• Track is the unfilled remainder. Default #e5e7eb.
• Qualified fill is the color the bar switches to once the cart qualifies. Default #10b981. The wrapper also picks up is-qualified at that point.
• Height runs 2–32 px and is per-device — a 12 px bar that reads well on desktop can drop to 6 px on mobile.
• Radius goes up to 999 px, which is what gives the bar its pill ends. Set it to 0 for a flat rectangular bar.

The block supports Wide and Full alignment from the toolbar and an HTML anchor.

Live updates

The frontend script subscribes to WooCommerce's jQuery cart events. Any time the cart changes — item added, removed, quantity updated, mini-cart refreshed — each Free Shipping Progress block on the page independently calls the REST endpoint axiom-blocks/v1/free-shipping-progress with its own settings and applies the fresh snapshot without a full page reload.

HTML output

<div
  class="axiom-blocks-fsp is-align-center"
  style="
    --ab-fsp-bar-color: #7C3AED;
    --ab-fsp-bar-bg: #e5e7eb;
    --ab-fsp-qualified-color: #10b981;
    --ab-fsp-bar-height: 4px;
    --ab-fsp-radius: 999px;
    --ab-fsp-msg-color: #111111;
  "
  data-ab-fsp="1"
  data-threshold-mode="auto"
  data-custom-threshold="0"
  data-message-before="Add {amount_left} more for free shipping!"
  data-message-qualified="You&#039;ve unlocked free shipping!"
  data-hide-empty="0"
  data-hide-qualified="0"
>
  <p class="axiom-blocks-fsp__msg" data-ab-fsp-msg>
    Add <span class="woocommerce-Price-amount">$25.00</span> more for free shipping!
  </p>
  <div class="axiom-blocks-fsp__track">
    <div class="axiom-blocks-fsp__fill" data-ab-fsp-fill style="width: 50.00%;"></div>
  </div>
</div>

Once the cart qualifies, is-qualified is added to the wrapper and the fill switches to --ab-fsp-qualified-color:

<div class="axiom-blocks-fsp is-align-center is-qualified" ...>
  <p class="axiom-blocks-fsp__msg" data-ab-fsp-msg>You've unlocked free shipping!</p>
  <div class="axiom-blocks-fsp__track">
    <div class="axiom-blocks-fsp__fill" data-ab-fsp-fill style="width: 100%;"></div>
  </div>
</div>

The is-align-left|center|right class on the wrapper carries the block's stored text alignment; blocks default to center.

CSS custom properties