How to Add a Free Shipping Bar to Your WooCommerce Store

In this guide, you’ll learn how to add a free shipping bar on your WooCommerce store. 

A free shipping bar is a small banner or notification that shows shoppers how much more they need to spend to get free delivery. By adding more products to their cart, shoppers can be eligible for free shipping.

When done right, it can nudge customers to add more items to meet the free shipping threshold, boosting average order value (AOV) and conversion rates.

This blog post explains what a free shipping bar is, why it is important, and how to add it to your WooCommerce store.

A Free Shipping Bar is a dynamic banner, usually displayed at the top or bottom of a webpage, that informs shoppers how much more they need to spend to qualify for free shipping.

As customers add items to their cart, the message updates in real time, creating a sense of progress and encouraging them to buy more to unlock the reward. For instance, a shopper might see, “Add $20 more to your cart to get free shipping!” and feel motivated to continue shopping.

Progress bars play on the psychology of goals. When customers see a visual indicator that they’re getting closer to an incentive, they often spend a little more to reach it. Studies on the “goal gradient effect” show that people accelerate their efforts as they approach a reward. For eCommerce stores, this means a free shipping bar encourages shoppers to add one more item to unlock free delivery.

Setting a free shipping threshold slightly above your current AOV can also be a smart move. Research suggests that placing the minimum order amount about 30% higher than your typical basket value motivates customers to increase their spend while still covering your shipping costs.

For example, if your average order is $100, you might offer free shipping at $150 to nudge customers to add an extra product.

Besides boosting revenue, a free shipping bar improves user experience. It removes the guesswork by telling customers exactly how much more they need to qualify, making your shipping policy transparent. A simple message like “Spend $200 more to get free shipping!” is easier to understand than a generic note buried in your terms of service.

A free shipping progress bar dynamically updates based on the shopper’s cart total. When the cart is empty, the bar displays the full threshold. As items are added, the bar fills up and the message adjusts to show the remaining amount. Once the cart reaches the free shipping threshold, the bar celebrates with a “Congratulations! You’ve unlocked free shipping” message.

You can place the bar at the top of your website, inside the mini‑cart, on the cart page, at checkout, or even as a small pop-up. Choose a position that gets noticed without being intrusive. It’s also important to keep the design clear: use contrasting colours, legible fonts, and concise text so that the bar doesn’t distract or confuse shoppers.

WebToffee’s marketing automation plugin makes it easy to add a free shipping bar to WooCommerce without any coding. Follow the steps below to add a free shipping bar to your WooCommerce store.

Step 1: Install and Activate WebToffee WooCommerce Marketing Automation Plugin

• In your WordPress dashboard, go to Plugins > Add New and search for “WebToffee Marketing Automation”.
• Install and activate the plugin on your website.

Step 2: Connect WooCommerce with WebToffee Marketing App

After installing the plugin, go to WebToffee Marketing > Connector.

Click on Connect now and follow the on-screen instructions to log in to WebToffee Marketing App.

Step 3: Create a New Shipping Bar

• Once connected, open the WebToffee Marketing app’s dashboard.
• Go to Widgets from the Forms & Widgets tab in the sidebar.
• Select the Free Shipping Bar option.

Step 4: Set your Free Shipping Threshold

• In the Goal amount, specify the minimum cart value required for free shipping. This should align with your shipping policy and be slightly above your average order value to encourage upselling.

For example, if your store currently offers free delivery at $100, enter that amount as the target.

• Choose whether to keep this banner sticky or scroll with the content
• Expand the Audience section and choose who should see the bar: select “All visitors,” “New visitors,” or “Existing visitors.”
• Expand the UTM Parameters section, click Add parameters, select a UTM parameter (e.g., utm_source, utm_medium, utm_campaign), and enter the corresponding value. The bar will only display when the visitor’s URL includes all specified parameters.
• Expand the Page URLs section to decide where to display the bar. You can show it on all pages or specify particular pages (e.g., only the homepage or checkout page).
• In the Product category section, select the product categories you want the free shipping bar to target.
• Choose whether the bar appears on “All devices,” “Desktop only,” or “Mobile only.”

• Go to the Edit template to modify the banner text and style. You can also add CTA buttons and coupons in the free shipping bar if needed.

When all settings are complete, click Save and then Publish to make the free shipping bar live on your WooCommerce store.

• Keep the message clear and concise: Avoid cluttered text; a simple “Only $50 away from free shipping” is more effective than a long sentence.
• Update in real time: The bar should reflect the cart total immediately after a product is added or removed, reinforcing the sense of progress.
• Match your branding: Use your store’s colour palette and typography so the bar feels like part of your site, not an intrusive advertisement.
• Test different placements: Try showing the bar as a top banner, a cart notice, or a small pop-up to see which position produces the highest lift in average order value.
• Use a sensible threshold: Set the free shipping amount slightly above your current AOV to encourage customers to add more while still covering your costs.

Adding a free shipping progress bar to your WooCommerce store is a simple yet powerful way to increase average order value and enhance the shopping experience. By showing customers exactly how close they are to unlocking free delivery, you tap into goal‑oriented behaviour and encourage them to add that extra item to their cart.

With the WebToffee WooCommerce marketing automation plugin, you can create a customised shipping bar in minutes. Set a threshold, write engaging messages, style it to match your brand, and choose the perfect placement.