---
title: "How to Add a Free Shipping Progress Bar in WordPress?"
url: https://nexterwp.com/docs/add-a-woocommerce-free-shipping-progress-bar-in-wordpress/
date: 2026-07-14
modified: 2026-07-14
author: "Aditya Sharma"
description: "The Free Shipping Progress Bar block in Nexter Blocks shows shoppers how much more to add to qualify for free shipping. Lift cart value in the WordPress block editor."
word_count: 575
---

# How to Add a Free Shipping Progress Bar in WordPress?

Do you want to nudge shoppers toward a larger order by showing them how close they are to free shipping? The Free Shipping Progress Bar block in Nexter Blocks displays a live message and progress bar that tells customers exactly how much more they need to add to their cart to qualify for free shipping. As the cart total changes, the message and bar update, and once the threshold is reached the block shows your free-shipping-unlocked message.

This block reads the free-shipping threshold directly from your WooCommerce shipping settings, so there is no separate amount to maintain. The Free Shipping Progress Bar is a Pro block and works anywhere in the WordPress block editor, including headers and the mini cart drawer.

**Best Used For:**

- WooCommerce stores that offer free shipping above a minimum order amount and want to increase average order value

- Cart and mini cart layouts where a progress nudge encourages shoppers to add one more item

- Site headers or announcement areas that keep the free-shipping incentive visible while customers browse

## Required Setup

- Make sure the default WordPress block editor is active.

- You need Nexter Blocks installed and activated.

- You need Nexter Blocks (Pro). See the Nexter Blocks pricing page for plan details.

- You need WooCommerce installed and activated.

- You need a **Free Shipping** method with a **minimum order amount** configured under **WooCommerce > Settings > Shipping**. The block uses this amount as the target to calculate how much more the customer needs to add.

> Note: If no Free Shipping method with a minimum order amount is configured, the block has no threshold to calculate against and will not show a meaningful progress value.

## How to Activate the Free Shipping Progress Bar Block?

- Go to **Nexter > Blocks**.

- Search for **Free Shipping Progress Bar** and toggle it on.

![Nexter Blocks admin with the WooCommerce blocks enabled](https://nexterwp.com/wp-content/uploads/2026/07/nexter-woo-blocks-activate.png)

## How to Use the Free Shipping Progress Bar Block?

To add the block, open a page, the cart, or a header template in the WordPress block editor, click the **+** block inserter, search for **Free Shipping Progress Bar**, and place it where you want the incentive to appear.

The block message is built from three text fields, with the remaining amount inserted automatically between the first two.

- In the **Before Amount Text** field, enter the text shown before the remaining amount. The default is "Add".

- In the **After Amount Text** field, enter the text shown after the remaining amount. The default is "to cart and get Free shipping!". Together these produce a message such as "Add $20.00 to cart and get Free shipping!".

- In the **Free Shipping Text** field, enter the message shown once the customer reaches the threshold. The default is "You have free shipping!".

### Layout

- Enable the **Show Progress Bar** toggle to display the visual progress bar along with the message. This is on by default. Turn it off if you want a text-only nudge.

- Enable the **Progress Bar on Top** toggle to place the progress bar above the message text. This is off by default, which shows the bar below the message.

![How to Use the Free Shipping Progress Bar Block - settings](https://nexterwp.com/wp-content/uploads/2026/07/nexter-woo-ed-free-shipping-layout-1.png)

## Good To Know

The block updates in real time as items are added to or removed from the cart, so the remaining amount and the bar always reflect the current cart total. Because it inherits your theme and Nexter global styles, the bar blends into your cart, mini cart, or header without extra configuration.

This is how you can add a WooCommerce free shipping progress bar in WordPress with Nexter Blocks.