Trying to add a WooCommerce free shipping progress bar to your store?
If you offer free shipping as an option for your customers, adding a progress indicator is a great way to encourage shoppers to increase the size of their orders.
However, as you’ve probably figured out if you’re reading this post, WooCommerce doesn’t offer any built-in functionality to add a free shipping progress bar to your store.
In this post, you’ll learn how to use the Merchant plugin to create a flexible free shipping progress indicator that you’ll be able to fully customize to match your needs.
One option is to display it as a universal top or bottom bar, with options to control the placement for desktop and mobile devices:
Or, you can also display it in specific locations on your single product, cart, and checkout pages like below (or you can mix both approaches!):
Beyond that, the Merchant plugin gives you plenty of other options for your free shipping bar:
- Enable or disable the bar at five different locations, including the single product page, cart, checkout, and more.
- Fully customize the text message for all three progress bar states.
- Choose whether to just show a text message or add the visual progress bar, as well.
- Choose whether or not to include tax in the free shipping calculation.
- Only show the free shipping progress bar to specific user roles or individual user accounts.
- Manually exclude specific user accounts from seeing the progress bar (that is, show it all customers except for these specific accounts).
- Fully customize the style of the progress bar, including choosing from eight pre-configured styles and tweaking detailed style rules.
A Quick Introduction to the Merchant Plugin
While the Merchant plugin offers dedicated functionality to add a free shipping progress indicator to your store, it’s actually not just a WooCommerce free shipping progress bar plugin.
Instead, it’s a modular toolkit of 47+ features that you can use to boost your store’s revenue and improve the shopping experience for your customers. One of these 47+ modules is the Free Shipping Bar module that I’m covering in this tutorial, but you’ll also find lots of other useful modules.
Because Merchant is 100% modular, it will only load the specific features that you choose to activate. That way, your store stays fast and lightweight and won’t need to load code for any features that you’re not actively using.
You can absolutely use Merchant for just a free shipping progress bar. However, after browsing all of the available modules, you’ll probably find at least a few other features that can also improve your store.
The modules are divided into six broad categories:
- Boost revenue – frequently bought together products, “Buy X, Get Y” deals, bulk discounts, storewide sales, product bundles, product waitlists, pre-orders, free gifts, and more.
- Convert more – product quick view, added to cart popup, sale countdown timer, sticky add to cart, product labels (such as sale tags), recently viewed products, and more.
- Reduce cart abandonment – buy now button, sliding side cart, cart reserved timer, and more.
- Build trust – trust badges, real-time sales notifications, improved product reviews, reasons to buy lists, and more.
- Improve experience – real-time product search, size charts, Google address autocomplete, wish lists, product video or audio, variation swatches, and more.
- Protect store – cookie banner and agree to terms checkbox.
You can also browse all of the features here to see all the different ways in which the Merchant plugin can improve your WooCommerce store.
How to Add a Free Shipping Progress Bar to WooCommerce With Merchant
Now, let’s get into the actual step-by-step guide on how to use the Merchant plugin to add a free shipping bar to your WooCommerce store.
You will not need any technical knowledge to set this up. Just follow along with the guide and choose the settings that work best for your store.
1. Install the Merchant Pro Plugin On Your Site
To get started, you’ll want to install and activate the Merchant plugin on your site.
While there is a free version of Merchant at WordPress.org, you’ll need Merchant Pro to access the Free Shipping Bar module.
Merchant Pro licenses start at just $79 and include access to every single module. You can purchase your license by clicking this link.
Once you’ve made your purchase, you can download Merchant Pro from your aThemes account area. After activating the plugin, it will launch a short setup guide to help you get up and running.
I also recommend adding your Merchant Pro license key so that you can receive in-dashboard update notifications.
2. Set Up Free Shipping Rules in WooCommerce (If You Haven’t Done So Already)
Before jumping into the Merchant plugin’s settings, you’ll want to make sure that you’ve actually set up free shipping rules for your store using the core WooCommerce settings.
To follow best practices, Merchant will use your core WooCommerce settings to calculate free shipping progress. That way, you don’t need to mess around with setting up free shipping rules in multiple spots.
Plus, if you ever change your free shipping rules in the future, Merchant will keep working properly – it will just use that new number when calculating free shipping progress.
If you’ve already set up your free shipping rules, you can skip ahead to the next section.
If you haven’t, you can go to WooCommerce → Settings → Shipping in your WordPress dashboard to set up free shipping rules.
You can then create/edit the zone where you want to offer free shipping and then add a free shipping method.
When setting up your free shipping method, you can choose a minimum order amount as the requirement and then add the minimum spending rule, which will be used for your free shipping progress bar.
Now, you’re ready to create the actual WooCommerce free shipping progress bar with Merchant.
3. Activate the Free Shipping Bar Module
As I mentioned earlier, the Merchant plugin uses a 100% modular approach to ensure that it only loads the specific features that you choose to activate on your store.
So, in order for your free shipping progress bar to show up, you’ll need to activate the Free Shipping Bar module for your store.
Go to Merchant → Modules in your WordPress dashboard. Then, select the Free Shipping Bar module, which should be listed in the “Boost Revenue” section.
On the next screen, click the blue Enable button to activate the module.
4. Configure Your Free Shipping Progress Bar
Now, you can use the options in the module settings area to configure the content, placement, and design of your free shipping progress bar.
There are three different settings areas:
- Content
- Placement
- Look and feel
Let’s go through them…
Content Settings
The Content settings let you control the text content of the free shipping progress bar, along with a few other important conditions.
To start, you can choose the text of the three potential message states of the progress bar:
- Initial message – this appears before a shopper has added any items to their cart.
- Free shipping text – this appears when the shopper has added some items to their cart, but the total order amount is not high enough to get free shipping.
- Qualified free shipping text – this appears when the total value of the shopper’s cart exceeds the minimum needed to qualify for free shipping.
I’ll show some examples of the different free shipping progress states below if you want to see these messages in action.
For the first two messages, you can also include merge tags to insert dynamic values:
- {amount} – shows the minimum amount for free shipping according to your store’s rules.
- {amount_left} – shows how much more shoppers need to add to get free shipping. That is, the free shipping amount minus the value of the shopper’s cart.
You also get a few other important choices:
- Include tax in calculation – if you enable this toggle, Merchant will include the amount of tax that the shopper will pay in the free shipping calculation.
- User Condition – by default, all users will see the free shipping bar. However, if you want to limit who sees it, you can choose to only display it for certain user roles or even specific user accounts.
- Exclusion List – this lets you choose specific user accounts to exclude from seeing the offer, which can be helpful if there are just a few accounts that you want to exclude (such as your store admins).
Placement Settings
Next, you can choose the placement of the free shipping bar.
First off, you can use the Top/Bottom Bar toggle to choose whether or not to enable a universal free shipping progress bar.
Here’s an example of what a sticky bottom bar looks like on the shop page of our demo store:
If you enable this, you’ll get a number of options to configure the bar:
- Position – you can choose to make it sticky (always visible) or fixed (which will hide the bar when a user scrolls)
- Show on – you can choose whether to show the free shipping bar on both desktop and mobile devices or just one type of device (e.g. only visitors browsing on a desktop).
- Desktop Placement and Mobile Placement – you can choose the placement of the bar on each respective device, including adding an optional vertical offset.
- Close (x) Icon – you can choose whether or not to let shoppers close the bar. If they do close it, you can also use the Session Expiration Time to control how long (in hours) until the bar will reappear for that visitor.
- Progress bar – you can choose whether to show a visual progress bar or just text explaining the free shipping offer.
- Show on Shop Page – you can choose whether or not to hide the free shipping bar on the main shop page.
In addition to the universal top/bottom bar, Merchant also gives you the option to display a free shipping progress bar in five other potential locations:
- Single Product Page
- Mini Cart
- Side Cart (if using Merchant’s Side Cart module)
- Cart Page (the “normal” shopping cart page)
- Checkout Page
You can turn each location on or off, which lets you display your bar in exactly the places where you want it to appear.
Note – Merchant will only display one free shipping indicator on each page. For example, if you enable the Single Product Page indicator while also using a universal Top/Bottom Bar, Merchant will hide the Top/Bottom Bar on the single product page and use the dedicated Single Product Page placement instead. However, if you disable the Single Product Page indicator, Merchant will then show the Top/Bottom Bar on single product pages.
For each location, you get at least three options:
- Bar – this lets you choose whether or not you want to display the free shipping bar in that location. If you turn it off, Merchant will not add any type of free shipping indicator to that location. Or, if you’re using a universal Top/Bottom Bar, Merchant will show that instead.
- Position – if you enable the bar at that location, this drop-down lets you choose the location of the bar for that placement. For example, if you’re displaying the free shipping bar on the cart page, you could choose whether to display the bar before the cart or after the order total amount.
- Progress Bar – this lets you choose whether or not to show the visual progress bar indicator. If you disable it, Merchant will just display the text message without a visual progress bar.
For some locations, you also get a Use Shortcode toggle. If you enable this, you get a shortcode that you can use to manually place the free shipping bar at that location, instead of relying on one of the preset locations in the Position drop-down.
You could use the shortcode in the editor, in your theme template files (via the do_shortcode function), in your page builder template designs (e.g. Elementor), and so on.
Look and Feel Settings
Finally, the Look and Feel settings let you control the colors and style of your free shipping progress bar.
It includes eight pre-configured style templates, all of which you can fully customize according to your preferences.
To begin, use the Template drop-down to choose your starting point.
Then, you can use the many options below to customize the design. As you make changes, you should see the live preview update to reflect your choices.
Note – regardless of which template you choose, you’ll still have access to the same style options. The template just includes pre-made choices for those style options – you’re still free to customize them as much as you want.
5. Test Your Free Shipping Progress Bar
Once you’ve configured all three settings areas, make sure to save everything by clicking the blue Save button that appears on the toolbar in the module settings area.
Then, I recommend testing your free shipping progress bar on the frontend to make sure everything is working as you want it to.
Start with an empty cart and navigate to a location where you’ve enabled the progress indicator (e.g. the Single Product Page).
Then, add an item to your cart. The message should then tell you how much more you need to spend to get free shipping.
To finish testing, add enough items to exceed the minimum free shipping amount. The message should change to tell you that you now qualify for free shipping.
Add Your First WooCommerce Free Shipping Progress Indicator Today!
With the Merchant plugin, you can easily add a flexible free shipping progress bar to various parts of your WooCommerce store, including the single product page, shopping cart, and checkout. You also have the option to display a universal top or bottom bar across your store.
The great thing about the Merchant plugin, though, is that it’s not just a WooCommerce free shipping bar plugin. It’s a complete toolkit of 47+ different features that you can use to improve your store and boost your revenue in all kinds of ways.
Because it’s 100% modular, you also don’t need to worry about any bloat. You can choose exactly which features to enable on your store and Merchant won’t load anything that you’re not using.
If you’re ready to get started, purchase Merchant Pro today.
