How to add a free shipping progress bar in WooCommerce?

Free Shipping Progress Bar In WooCommerce
Author Bartosz Gajewski
Updated:
2023-04-23
Reading time:
5 minutes read

Displaying a free shipping progress bar in WooCommerce is an intelligent way to increase Average Order Value and boost your profit margin. It’s also effortless. In this article, I’ll show you how to do it using a completely free plugin in a few steps. 

We’re all familiar with this situation – you’re at your favorite online store and add an $80 product to your cart. After adding it to your cart, you get a message that if you add other products for more than $20, you’ll get free shipping. Shipping alone costs $10. So it seems logical to add something for $20 because you get the feeling that you will only pay $10 for it. This is how many e-commerce stores use complimentary shipping to increase their profits and average order value.

The key here, however, is to present the information about the missing amount for free shipping attractively. This is necessary for free shipping to maintain all its selling points. In this article, I’ll show you step-by-step how to add a free shipping progress bar in WooCommerce. All using a free plugin.

Why add a free shipping progress bar to WooCommerce?

There are several important reasons why offering free shipping and showing the amount missing for free shipping can be important for any online store. All of them share a common factor – they result in better sales.

Reduced cart abandonment

Free shipping gets results and is one of the most important factors in reducing abandoned shopping carts in e-commerce. This is clearly shown by research: According to Baymard, 48% of customers in their study abandoned their cart because the extra costs were too high (shipping charges, tax, fees).

cart abandonment stats

Higher Average Order Value

Displaying the remaining amount for free shipping with a progress bar is a fantastic way to increase Average Order Value (AOV) – one of the most crucial metrics in e-commerce. AOV is the average amount of money a customer spends on each purchase in an online store. It’s essential to keep this factor high because it translates to increased revenue and profit margins for the business. Free shipping is one of the most popular tactics store owners use to improve the Average Order Value. There’s nothing surprising about it. Customers love free shipping and are eager to add additional products to their cart to get free shipping.

Increased customer loyalty

Customers who receive free shipping are more likely to return to a store in the future, as they associate it with a positive shopping experience. They just know that they won’t have to pay extra fees in your store. One way to incentivize customers and encourage them to join your loyalty program is by providing them with the option to receive free shipping for their orders without any additional fees. Alternatively, let buyers pay a fair price for a bundle that includes free shipping. This may be a tempting offer that encourages visitors to join your loyalty program, resulting in stronger client relationships and more revenue.

What is a free shipping progress bar?

Using a free shipping progress bar in e-commerce encourages customers to raise the size of their order to be eligible for free shipping. The progress bar typically shows how much more the consumer must spend to qualify for free shipping and is visible on the website. Additionally, it gamifies the purchasing process. Customers are given a sense of urgency and excitement as they follow their progress toward receiving free delivery thanks to the progress bar. Providing clients with a specific objective to strive for can also help lower cart abandonment rates.

An effective free shipping progress bar should consist of three elements:

  • Target order value threshold – specify the amount a customer must reach to qualify for free delivery.
  • Clear progress indicator – place a clear progress indicator prominently on the page so customers can see how far they are from free delivery and how much they still need to spend.
  • Call To Action – use a message encouraging customers to add more products to their shopping cart for free delivery. You can use words such as “you’re only missing X zloty to get free delivery” or “add a few more products to your cart to get free delivery.”

Efficient free shipping progress bar

To make the free shipping progress bar as efficient as possible, it should be prominently displayed on your e-commerce website. Here are a few places where you can display the bar to maximize its effectiveness:

  • Above the header: This is a great place to display the progress bar because it’s one of the first things customers see when they land on your website.
  • In the shopping cart: Displaying the progress bar in the shopping cart is an effective way to remind customers of how much more they need to spend to qualify for free shipping.
  • On the product page: Displaying the progress bar on the product page can encourage customers to add more items to their cart to reach the free shipping threshold.
  • On the checkout page: Displaying the progress bar on the checkout page can help reduce cart abandonment rates by giving customers a clear goal to work towards.

Ultimately, the placement of the free shipping progress bar will depend on the design of your website and the customer journey. Therefore, it’s essential to test different placements and analyze the results to determine what works best for your business.

How to add a free shipping progress bar in WooCommerce?

Let’s jump into action. You can add a free shipping progress bar in WooCommerce in just few simple steps:

  • Step 1. Install the free version of the Flexible Shipping Plugin
  • Step 2. Add a Flexible Shipping method to your WooCommerce Shipping Zone
  • Step 3. Configure the free shipping threshold
  • Step 4. Adjust the free shipping bar
  • Step 5. Enable free shipping progress bar

We will go through all the steps individually so that you can quickly implement a free shipping progress bar in your WooCommerce store. In the end, I will show you the effect of these steps. Let’s get started!

Install free version of the Flexible Shipping Plugin

The entire tutorial will be based on the free version of the Flexible Shipping plugin. With over 100,000 active installations worldwide, this free table rate shipping plugin is a popular choice for online retailers. It offers a range of advanced features that go beyond what’s available with standard flat rate shipping, including the ability to create customized shipping conditions based on various factors. With Flexible Shipping, you can easily configure conditional shipping rules for your WooCommerce store, making it a powerful tool for managing shipping costs and boosting customer satisfaction.

Flexible Shipping WooCommerce

The best Table Rate Shipping for WooCommerce. Period. Create shipping rules based on weight, order totals or item count.

Download for free or Go to WordPress.org
100,000+ Active Installations
Last Updated: 2024-04-08
Works with WooCommerce 8.4 - 8.7.x

Above all, however, the plugin has advanced capabilities to configure free shipping above a certain amount and display a free shipping progress bar. And all of this is entirely free of charge.

Add Flexible Shipping method in your WooCommerce Shipping Zone

First, go to WooCommerce → Settings → Shipping. There, edit the shipping zone in which you want to free shipping bar. Next, click on Add shipping method button.

Add Flexible Shipping method

Then, select the type of your shipping method. Pick the Flexible Shipping.

new Flexible shipping method

Having the Flexible Shipping method added, it’s time to manage WooCommerce shipping method.

In General Settings section, you can set Method Title and Description. Below you can also change the tax settings for shipping and WooCommerce advanced free shipping

free shipping settings flexible shipping plugin

Configure the free shipping threshold

In the Free Shipping Threshold field, enter the amount that will become the free shipping level. After filling in this field, you should be able to display the remaining amount for free shipping in WooCommerce. To do this, just check the ‘Left to free shipping’ notice box.

Display the notice with the amount left for free shipping

Adjust the free shipping bar

Having the “left to free shipping” notice enabled, it’s time to configure it. In the LFFS notice text field, you can change the free shipping bar message. Remember to use Call To Action.

Enable free shipping progress bar

It’s not over yet. The final step is to turn on the free shipping progress bar itself. To do this, all you need to do is to enable the LFFS progress bar checkbox.

LFFS progress bar

Remember to save the changes and that’s it! In addition to the free shipping itself, you can use other features of the Flexible Shipping plugin to configure your Shipping Scenario.

WooCommerce free shipping progress bar in action

Having gone through the whole process, let’s check out how the free shipping progress bar looks in my test store using Storefront Theme.

WooCommerce free shipping progress bar in action

Remember that the appearance of the progress bar depends on the WordPress theme you are using.

 

Comments
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Check out our case studies

Dream Home Story
Furniture shipping via WooCommerce – Dream Home’s Case Study

Learn how to configure custom shipping rules for furniture orders – from heavy and bulky to small and light.

4 minutes read
Octolize Case Study
Vitrek’s Story

Read Octolize Case Study about Vitrek – a provider of innovative global solutions for High Voltage Test and Measurement.

2 minutes read
Octolize Case Study
EnglishSpeakingMum’s Story

Read Octolize Case Study about EnglishSpeakingMum – Polish dedicated and involved parenting blogger.

2 minutes read