Pro Free Shipping Bar

The Free Shipping Bar module allows you to display a stylish progress bar together with a message that informs your customers about the availability of free shipping at your WooCommerce store and shows them the amount they still need to spend to qualify for it.

The module is fully customizable so you can:

• select which parts of your WooCommerce store you want to show it on (e.g. Shop page, Cart page, single product pages, mini cart, etc.)
• configure its content and design
• show or hide it on different device types (desktop vs mobile) and for different user groups
• …and more

In the screenshot below, you can see an example of a free shipping bar added with Merchant Pro to a WooCommerce shop page:

Below, we’ll see how to configure and activate the Free Shipping Bar module.

1. Open the Free Shipping Bar Module

Open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.

Find the Boost Revenue section, then click the Free Shipping Bar module to open its settings page:

2. Set Up a Free Shipping Rule in WooCommerce

To use the module, first you’ll need to create a free shipping rule with a minimum order amount in WooCommerce.

When the module opens, click the Add Shipping button that will take you to the relevant WooCommerce admin page (you can also access this page manually by clicking the WooCommerce > Settings > Shipping menu in your WordPress admin area):

On WooCommerce’s Shipping page, click the Add shipping zone button:

When the admin page of the new shipping zone opens, enter a Zone name, select the Zone regions, and then click the Add shipping method button:

When the Create shipping method modal appears on the screen, choose the Free shipping option.

Then, set the Free shipping requires field to ‘A minimum order amount’, define a minimum order amount, and then click the Create and save button:

3. Customize the Content of Your Shipping Bar

Now, return to the module’s admin page by clicking Merchant > Free Shipping Bar in your WordPress admin area.

Find the Content section, review the default messages the module will show your customers, and adjust them to match your brand voice (or, you can go with the default values).

You have access to the following options:

• Initial Message – Here, you can change the message your customer will see when their cart is empty. You can use the {amount} variable, which dynamically pulls the minimum order amount from your WooCommerce shipping settings (default value: ‘Free shipping for orders over {amount}’).
• Free shipping text – Here, you can customize the message your customer will see when there’s at least one product in their cart, but they haven’t reached the minimum order amount yet. You can use the {amount_left} variable, which dynamically calculates how much they still have to spend to reach the minimum order amount (default value: ‘You are {amount_left} away from free shipping.’).
• Qualified free shipping text – Here, you can configure the message your customer will see once they reach the minimum order amount (default value: ‘You have qualified for free shipping.’).
• Include tax in calculation – This option lets you include the amount of tax in the calculation of the minimum order amount.
• User Condition – Here, you can select the users or user groups who will see the shipping bar. The available options are All Users, Selected Users, and Selected Roles.

If you’ve changed any of the default values, click the Save button in the top-right corner of the page.

4. Configure the Placement of the Module

You can find the Placement panel below Content on the module’s admin page. It allows you to customize the placement of your free shipping bar in the different areas and pages of your WooCommerce store.

You can configure the following options:

• Top/Bottom Bar – This toggle lets you show or hide the free shipping bar at the top and/or bottom of your site. If enabled, you can also customize the following options:
  • Position – Here, you can choose between two display options: Sticky (always visible) and Fixed (hidden on scroll).
  • Show on – Here, you can define the device types for which you want to show the free shipping bar. The available options are Both, Desktop Only, and Mobile Only.
  • Desktop Placement – This option lets you choose between two locations for desktop users: Top and Bottom.
  • Custom vertical offset – Here, you can set a custom distance between the free shipping bar and the top or bottom of the page on desktop.
  • Mobile Placement – This option lets you choose between two locations for mobile users: Top and Bottom.
  • Custom vertical offset – Here, you can set a custom distance between the shipping bar and the top or bottom of the page on mobile.
  • Close (x) icon – Here, you can enable or disable a close icon for the shipping bar.
  • Session Expiration Time – If you show a close icon, here you can set the number of hours after which the shipping bar will re-appear after a user has closed the bar.
  • Progress Bar – Here, you can enable or disable a progress bar inside the free shipping bar.
  • Show on Shop page – Here, you can show or hide the shipping bar on your Shop page.
• Single Product Page – This option lets you show or hide the free shipping bar on your single product pages. If enabled, you can also customize the following options:
  • Use Shortcode – Here, you can activate a shortcode that allows you to fine-tune the position of the module on single product pages. As this is a developer feature, only activate it, if you know how shortcodes work in WordPress. The module’s shortcode for single product pages is [merchant_module_free_shipping_progress_bar_single_product_page].
  • Position – This option only shows up when the previous Use Shortcode option is deactivated (if you activate the single product page shortcode, you control the position of the module by adding the shortcode manually to the WooCommerce single product page template). It allows you to define the location of the shipping bar on your single product pages. The available options are Before Add to Cart Form, After Add to Cart Quantity, After Add to Cart Form, After Single Product Summary, and After Single Product.
  • Progress Bar – Here, you can enable or disable a progress bar inside the free shipping bar on your single product pages.
• Mini Cart – This option lets you show or hide the free shipping bar in your mini cart. If enabled, you can also customize the following options:
  • Position – Here, you can define the location of the shipping bar in your mini cart. The available options are Before Cart Items and After Subtotal.
  • Progress Bar – Here, you can enable or disable a progress bar inside the free shipping bar in your mini cart.
• Side Cart – This option lets you show or hide the free shipping bar in your side cart. If enabled, you can also customize the following options:
  • Position – Here, you can define the location of the shipping bar in your side cart. The available options are Before Cart Items, Before Cart Buttons, and After Cart Buttons.
  • Progress Bar – Here, you can enable or disable a progress bar inside the free shipping bar in your side cart.
• Cart Page – This option lets you show or hide the free shipping bar on your Cart page. If enabled, you can also customize the following options:
  • Use Shortcode – Here, you can activate a shortcode that allows you to fine-tune the position of the module on the Cart page. As this is a developer feature, only activate it, if you know how shortcodes work in WordPress. The module’s shortcode for the Cart page is [merchant_module_free_shipping_progress_bar_cart_page].
  • Position – This option only shows up when the previous Use Shortcode option is deactivated (if you activate the Cart page shortcode, you control the position of the module by adding the shortcode manually to the WooCommerce Cart page template). It allows you to define the location of the shipping bar on your Cart page. The available options are Before Cart, After Order Total, and After Cart Table.
  • Progress Bar – Here, you can enable or disable a progress bar inside the free shipping bar on your Cart page.
• Checkout Page – This option lets you show or hide the free shipping bar on your Checkout page. If enabled, you can also customize the following options:
  • Use Shortcode – Here, you can activate a shortcode that allows you to fine-tune the position of the module on the Checkout page. As this is a developer feature, only activate it, if you know how shortcodes work in WordPress. The module’s shortcode for the Checkout page is [merchant_module_free_shipping_progress_bar_checkout_page].
  • Position – This option only shows up when the previous Use Shortcode option is deactivated (if you activate the Checkout page shortcode, you control the position of the module by adding the shortcode manually to the WooCommerce Checkout page template). It allows you to define the location of the shipping bar on your Checkout page. The available options are Before Checkout Form, Checkout Billing, Checkout Shipping, Before Payment, After Payment, and After Checkout Form.
  • Progress Bar – Here, you can enable or disable a progress bar inside the free shipping bar on your Checkout page.

Once the Placement options are configured, click the Save button in the top-right corner of the page.

5. Customize the Look and Feel of Your Free Shipping Bar

You can find the Look and Feel panel under the Placement panel on the module’s admin page. Here, you can customize the design of your free shipping bar.

The available options are as follows:

• Template – Here, you can choose from a handful of pre-designed templates (Solar Night, Lively Breeze, Midnight Tide, Clean Slate, Fresh Frost, Sky Harmony, and Ocean Breeze) for your shipping bar. Or, you can create a custom template using the options below.
• Close (x) icon color – Here, you can define the color of the close icon of the free shipping bar.
• Text color – This option lets you customize the font color of the static text strings that appear in the free shipping bar.
• Variable Text color – This option lets you customize the font color of the dynamic text strings (inserted from the variables you used in your Content settings) that appear in the free shipping bar.
• Font Size – Here, you can change the font size of the text that appears in the bar.
• Background Color – This is the background color of your shipping bar.
• Spacing Inside Top – Here, you can define the top padding.
• Spacing Inside Bottom – Here, you can define the bottom padding.
• Spacing Inside Right – Here, you can define the right padding.
• Spacing Inside Left – Here, you can define the left padding.
• Text Bottom Spacing – This option allows you to customize the amount of space that appears below the text in the shipping bar.
• Corner Radius – Here, you can customize the border radius of the shipping bar.
• Border Size – This is the border width of the shipping bar.
• Border Color – Here, you can set the border color.
• Progress Bar Background Color – This is the background color of the progress bar shown inside the free shipping bar.
• Progress Bar Foreground Color – This is the color of the progress bar shown inside the free shipping bar.
• Progress Bar Height – Here, you can configure the height of the progress bar.
• Progress Bar Width – Here, you can configure the width of the progress bar.
• Corner Radius – Here, you can change the border radius of the progress bar.

If you’ve changed any of the default values, click the Save button in the top-right corner of the page.

6. Enable the Module

Now, your Free Shipping Bar module is configured. To activate it, click the Enable button at the top of the page:

Video Walkthrough

For a live demo of the Free Shipping Bar module you can watch the video below: