Progress Bar

With our free shipping progress bar, you can give your customers a clear picture of just how close they are to qualifying for free shipping. This not only stops shoppers from leaving, but also encourages them to add more items to their cart and increase their order value – boosting your revenue in the process.

There are two types of progress bars: Linear and Circular

It displays a progress bar on the cart and checkout pages, as well as in the mini-cart widget showing a value that still needs to be added to the cart to get free shipping.

Allow zero shipping cost

Shipping costs are typically not a concern. However, when a free shipping class is applied with a price value of 0,00, our system is designed to either display a “Qualified for free shipping” message or hide the shipping progress bar, depending on your preferences. To facilitate this functionality, especially when utilizing third-party shipping plugins like WooCommerce Advanced Free Shipping, it’s important to enable the relevant option. This is because such plugins introduce their own shipping methods at a cost of zero, which directly interacts with our system’s ability to recognize and apply the free shipping criteria.

Custom positions

Some themes are using fully customized cart and checkout templates and if they are not including default WooCommerce hooks, some of these positions might not work.
In that case, you can implement a shortcode, or contact our support team for advice.

Shortcode

To implement Progress Bar anywhere on the site, simply copy/paste the shortcode.

[fsl-progress-bar]

After Free Shipping Threshold is Reached

Once the free shipping threshold is reached, the Free Shipping Label plugin offers two options to enhance customer experience:

1. Show Message:
   • Description: Displays a custom message indicating that the free shipping threshold has been met.
   • Configuration: Set the message in the “Message after threshold is reached” text field under the Text section.
2. Show Full Progress Bar:
   • Description: Keeps the progress bar visible and filled to 100%, reinforcing that the threshold has been achieved.

These options can be combined or used separately. If both are turned off, nothing will be displayed after the threshold is reached, keeping the checkout process clean and uncluttered.

Design

In the PRO version, users have the option to select either a linear or circular progress bar, both of which can be easily customized to match the theme and branding.

Linear Progress Bar

Bar type, Threshold Indicator Icon, Text color, Background color, Box maximal width, and Box alignment are available only in the PRO version.

Threshold Indicator Icon

When the Threshold Indicator Icon is set up and enabled, it will be displayed in a circular design at the end of the progress bar. This placement serves as a visual milestone marker, showing customers how close they are to achieving the free shipping threshold. The circular design is intended to draw attention and clearly indicate the point at which free shipping is attained.

It provides a visual cue to customers about their progress toward the free shipping threshold. When enabled, it opens additional customization settings to tailor the indicator’s appearance and functionality.

Circular Progress Bar

The circular progress bar can be styled in multiple ways. Here are a few examples.

Inside circle you can choose to show title, description, icon or leave it empty.

To remove the color and leave it empty, simply clear it. If the text color is left empty, it will inherit the default text color of the theme.

WordPress Blocks

Blocks are the components for adding content in the new WordPress block editor.
You can find the Progress Bar block under woocommerce category.

Widgets

Similar to the block implementation, Progress Bar is also available as a widget.
You can add it to the sidebar, header, footer, single product page, etc.