Go to athemes.com

Pro Free Shipping Progress Bar

The ‘Free Shipping Progress Bar’ feature allows you to display a progress bar that shows your customers how close they are to getting free delivery. It’s included as a module in Botiga Pro.

Important: To make this feature work, your WooCommerce store must have the ‘Free Shipping’ method enabled along with the ‘Minimum Order Amount’ option.

1. Enable the Free Shipping Method in Your Store

In your WordPress admin area, go to WooCommerce > Settings > Shipping and add a new shipping zone:

Add a new shipping zone to WooCommerce

In the shipping zone settings, enter the zone name and regions, then click the Add shipping method button:

Location of the add shipping method button

Select the Free shipping method and click the Add shipping method button:

Choose the free shipping option

2. Configure Your Free Shipping Method

Now, you need to create a rule that defines the requirements for free shipping.

To do so, click the Edit link below the Free shipping method:

Edit your free shipping method

Select the ‘A minimum order amount’ option from the ‘Free shipping requires…’ dropdown.

Once selected, two new options will appear on the screen. Define a ‘Minimum order amount’ and save the changes:

Define a minimum order amount for the free shipping

3. Enable the ‘Free Shipping Progress Bar’ Module

In your admin area, go to Appearance > Theme Dashboard > Theme Features and enable the module:

That’s it! Now, the free shipping progress bar will be automatically displayed in the cart, mini cart, and checkout pages/areas in your Botiga Pro WooCommerce store.

4. Customize Your Free Shipping Progress Bar

To customize your free shipping progress bar, click the Customize button inside the Free Shipping Progress Bar module on the Theme Features page.

You have access to the following options:

Here are the customization options in detail:

General

  1. Display On: Defines the pages where the free shipping progress bar will be displayed.
  2. Include Tax In Calculation: Any WooCommerce tax will be taken to account in the free shipping value goal.

Style

  1. Text Color: Defines the text color of the progress bar.
  2. Progress Bar Wrapper Background Color: Defines the background color of the progress bar’s wrapper.
  3. Progress Bar Background Color: Defines the background color of the progress bar.
  4. Progress Bar Height: Defines the height of the progress bar in pixels.
  5. Border Radius: Defines the border radius of the progress bar in pixels.