WooCommerce Free Shipping Bar

Support Purchase

The increase in sales and traffic to the website is very important for a website or an online store. Customers making a purchase usually enjoy the free shipping method. Woocommerce Free Shipping Bar – WooCommerce Free shipping plugin allows:

• Automatically detect customer’s IP and display shipping amount matched with shipping zones in WooCommerce.
• Display Free shipping bar and progress bar
• Variety of Free shipping bar and progress bar positions
• Design: You can design the shipping bar in order to match your theme or site’s style.
• Flexible custom messages on the shipping bar.
• Effect: Settings to let the shipping bar appear or hide after a certain time, or close the shipping bar button.
• Select shipping class to exclude when calculating subtotal
• Other outstanding features.

Automatically detect customer’s IP and display shipping amount matched with shipping zones in WooCommerce.

Detect IP: The plugin will detect customers’ countries based on their IP Addresses and display a free shipping bar respectively with that shipping zone at the country level.

Exclude shipping class:  You can create shipping classes in WooCommerce and eliminate calculating free shipping for these shipping classes in this plugin.

 

Display Free shipping bar and progress bar to offer WooCommerce free shipping over amount

• Free shipping bar: Free shipping bar with various messages to reach to free shipping. You can select to display the free shipping bar on the top header or bottom.
• Progress bar: There is a progress bar that shows how much more by percentage a customer should purchase to qualify for free shipping. This progress bar will display along with the free shipping bar
• Small progress bar: A small progress bar indicates how much more a customer should purchase to qualify for free shipping. A small progress bar can display on the menu cart, sidebar cart, cart page, and checkout page.

 

Variety of Free shipping bar and progress bar positions to display WooCommerce free shipping over amount

• Shipping bar positions: There are 2 positions that you can select to show the shipping bar: on the top header or at the bottom
• Progress bar positions: There are 2 main positions of the progress bar in comparison with the shipping bar: inside or under.
• Small progress bar positions:
  • On cart page: You can choose the Above process button, Below process button, Before cart table
  • On checkout page: You can choose the Above payment methods or the Below process button
  • On single product page: There is an option to display or not Small progress bar on this page
  • In mini cart: There is an option to display or not Small progress bar on the mini cart

 

Design: You can design to display WooCommerce Free Shipping over amount in order to match your theme or site’s style.

• Shipping bar: You can set the background color, text color, link color, font family, font size, text-align of the shipping bar.
• Progress bar: You can set the background color, text color, font size, bar effect (Plain, loading, border) of the progress bar.
• Custom CSS: Design shipping bar and progress bar as you want.

 

Flexible custom messages on shipping bar to offer WooCommerce free shipping over amount

• Announce system: Content is shown in the main progress bar when users access the website. Use the available shortcode to add in this form. For example, we are having a Free Shipping system for customers when you buy greater than or equal to {min_amount}
• Message purchased: Content is shown in the main progress bar when customers purchase something in comparison with the free shipping amount or display the amount left. The shortcodes are available including:  {total_amounts}; {cart_amount}; {min_amount}; {missing_amount} For example, You have purchased {total_amounts} of {min_amount}
• Message success: Content notification is shown in main progress bar when users total amount greater than or equal with a minimum order amount of Free Shipping zone and then users can directly go to checkout page with available shortcodes. For example Congratulation! You have achieved enough to be able to get free shipping. Go to {checkout_page}
• Message error: Message if not reach to free shipping and appear on the checkout page. Content is shown in main progress bar of checkout page when users missing amounts to receive Free Shipping. This total missing can be added with the available shortcodes. Example: You are missing {missing_amount} achieved enough to be able to get Free Shipping. Continue {shopping}
• Message Full Free Shipping: This message is used when min amount is zero and apply a free shipping coupon.

 

Effect

• Initial delay: Set a certain time to let the free shipping bar disappear
• Close shipping bar button: enable to close the shipping bar
• Time to display: Enable to set time progress bar display.
• Set time to disappear: Enter the values(s) you want to display in the progress bar, after that time, the progress bar will automatically hide.
• Show gift box: Enable this the plugin will show a gift box when customers add a product to the cart. When clicking on the box the progress bar will appear. Disable these options, the plugin will show only the progress bar.

 

Other outstanding features

• Gift icon: The icon to call out the WooCommerce Free Shipping over amount bar when it is hidden.
• Compatible with cache plugins.
• Assign: Select on which pages, the free shipping bar hide or show.
• Responsive:  The plugin works perfectly on any device.
• Easy to use.

Required:

Make sure that those limits to a minimum as follows in order for free-trouble while installing:

1. WordPress 5.0+
2. PHP 7.0+
3. WooCommerce 7.0+

 

Download Plugin:

Go to Plugin >> Add New >> Upload Plugin >> Choose file >> select file zip plugin >> click “Install Now” >> click “Active plugin”.

Done! Let’s start using plugin.

Install and Set up Video:

After installing and activating the plugin, you need to configure to show Progress bar:

In this step, let’s add Free shipping zones in WooCommerce. To offer the free shipping method it must be added to a Shipping Zone and you can add it to as many Shipping Zones as you like. Here’s how:

1/ Go to: WooCommerce > Settings > Shipping.

2/ Select a Shipping Zone, Click Edit

• Note: The Detect IP feature can be applied to detect in the country level, not working for states or provinces and regions within a country. Therefore, Shipping zones must be set at the country level.

3. After that you need to add a shipping method >> Choose Free Shipping >> Add shipping method.

4. Click to Free Shipping >> setting a minimum order amount for this free shipping zone

 

 

 

 

1. Announce system: Content is shown in the main progress bar when users access the website. Use the available shortcode to add in this form. For example, we are having a Free Shipping system for customers when you buy greater than or equal to {min_amount}
   • 
2. Message purchased: Content is shown in the main progress bar when customers purchase something in comparison with the free shipping amount or display the amount left. The shortcodes are available including:  {total_amounts}; {cart_amount}; {min_amount}; {missing_amount} For example, You have purchased {total_amounts} of {min_amount}
   • 
3. Message success: Content notification is shown in main progress bar when users total amount greater than or equal with a minimum order amount of Free Shipping zone and then users can directly go to checkout page with available shortcodes. For example Congratulation! You have achieved enough to be able to get free shipping. Go to {checkout_page}
   • 
4. Message error: Message if not reach to free shipping and appear on the checkout page. Content is shown in main progress bar of checkout page when users missing amounts to receive Free Shipping. This total missing can be added with the available shortcodes. Example: You are missing {missing_amount} achieved enough to be able to get Free Shipping. Continue {shopping}
   • 
5. Message Full Free Shipping: This message is used when min amount is zero and when applying a free shipping coupon.
   • 
6. Compatible with cache plugin: Enable this feature if the messages on the free shipping are cached by cache plugin.
7. Header selector: Add CSS selector to make free shipping bar working with the header bar

 

Initial delay: delay time to show progress bar after loading site completely.

Close Message: enable the close button on the progress bar so visitors can close form in front-end.

Time to display: Enable to set time progress bar display.

Set time to disappear: Enter the values(s) you want to display the progress bar, after that time, the progress bar will automatically hide.

Show gift box: Enable this the plugin will show a gift box when customers add a product to cart. When clicking on the box the progress bar will appear. Disable this options, the plugin will show only the progress bar.

Assign Pages: Checked to checkbox to hide progress bar on some main pages.

Conditional Tags: to specific which pages to hide progress bar. You can use the Page’s ID, Slug.

* IMPORTANT NOTE:

Our plugin supports assigning the free shipping bar on certain pages using WP’s Conditional tags. To handle WP’s Conditional Tags, this plugin uses eval() which is very dangerous because it allows the execution of arbitrary PHP code. Therefore, please only fill this field with proper conditional tags which are validated and/or provided by trusted developers.

Example:

is_page('About')

is_page(50)

is_page( array('About', 'Contact', 50, 75) )

 

In this step, let’s enable the plugin’s functions, design the free shipping bar and configure messages on the front end.

A. Enable the plugin’s functions

 

1. Enable: Turn on Woo Free Shipping Bar plugin on desktop.

2. Free Shipping Zone: Select Free Shipping Zone default (require)

3. Detect IP: The plugin will detect customers’ countries based on their IP Addresses and display a free shipping bar respectively with that shipping zone at the country level.

* Note:

+ If set, the “Free Shipping Zone” option above will not be used. If no IP is detected, the shipping bar will show the general zone that’s set in WooCommerce shipping settings > Locations not covered by your other zones.

+ This option can be applied to detect at the country level, not working for states or provinces and regions within a country.

4. Mobile: Woo Free Shipping Bar will show on mobile and responsive.

5. Exclude shipping class: This feature helps you to exclude calculating free shipping for the product shipping classes you set in WooCommerce. 

 

B. Design the Free shipping bar on the front end.

The images below are the interface of the Design tab,  in this tab, you will configure how the free shipping displays on the front end. Go to the Design section to learn more about the settings.

 

C. Messages

This tab provides flexible custom messages on the shipping bar to offer WooCommerce free shipping over the amount. Go to the Messages section to learn more about the options.

 

After installing and activating plugin, you need to configure to show Progress bar:

General settings

In the general settings, you will enable the plugin’s functions and select free shipping zones.

Go to Woo Free Shipping > General.  

1. Enable: Turn on Woo Free Shipping Bar plugin on desktop.

2. Mobile: Use this option to show free shipping bar on mobile device.

3. Detect IP: The plugin will detect customers’ countries based on their IP Addresses and display a free shipping bar respectively with that shipping zone at the country level.

* Note:

+ If set, the “Free Shipping Zone” option will not be used. If no IP is detected, the shipping bar will show the general zone that’s set in WooCommerce shipping settings > Locations not covered by your other zones.

+ This option can be applied to detect at the country level, not working for states or provinces and regions within a country.

4. Free Shipping Zone: Select Free Shipping Zone default (require)

5. Minimum value to display: Only display free shipping when the cart value reaches this one

6. Exclude shipping class: This feature helps you to exclude calculating free shipping for the product shipping classes you set in WooCommerce. 

7. Always show free shipping bar: Show the free shipping bar with Message Full Free Shipping regardless of conditions

8. Compatible with cache plugin: Use this option if you message is cached

 

 

Assign

The Assign section allows you to select on which pages, the free shipping appears or hides.

1. Assign pages: Tick on the boxes on which you want the free shipping bar to be hidden.

2. Conditional tags: Show/Hide the free shipping bar on specific pages as per your needs using WordPress and WooCommerce conditional tags

* IMPORTANT NOTE:

Our plugin supports assigning the free shipping bar on certain pages using WP’s Conditional tags. To handle WP’s Conditional Tags, this plugin uses eval() which is very dangerous because it allows the execution of arbitrary PHP code. Therefore, please only fill this field with proper conditional tags which are validated and/or provided by trusted developers.

 

 

Effect

1. Initial delay: After this time, the free shipping will be automatically hidden. It will appear again until you load the page or change to another page.

2. Close message: Enable to display the close button on the free shipping bar, click on it to close the free shipping bar on the front end.

3. Time to disappear: Enable to allow to set up a schedule for hiding the free shipping bar.

4. Set time to disappear: Set a time value to hide the free shipping bar.

5. Show gift box: Enable to use an icon to open the free shipping bar. Go to the Design tab to select a style of the icon: Truck or an uploaded image.

 

 

Design

In the Design tab, you can configure how the free shipping bar, progress bar display on the front end.

Go to Woo Free Shipping Bar > Design.

1. Small Progress bar: Enable to show progress bar at bottom Cart page, Checkout page, or single product page. The small progress bar will replace the free shipping bar, so when this bar is enabled, on single product/Cart/Checkout page, customer will see it instead of free shipping bar.
2. Position on Cart page: Select position for the bar on Cart page
3. Position on Checkout page: Select position for the bar on Checkout page
4. Show on single product page: Enable to show the bar on single product page below “Add to cart” button
5. Show in Menu cart: Enable to display the progress bar on the menu cart on the front end.
6. Position on mini cart: There are 2 positions you can choose to display the progress bar on the mini cart: at the top or at the bottom
7. Color: Adjust Background Color, Text Color, Link Color, Small progress bar Text Color, and Small bar Link Color. See the change in Preview (18)
8. Text: Set up the font size, font family and text alignment. See the change in Preview (18)
9. Enable Progress: The progress bar is tied with the shipping bar to reflect the purchasing process to reach free shipping, enable this option if you want to use this feature
10. Progress Color: Adjust Background Color (default background), Current Background Color (how far the customer reaches to get free shipping), and Text Color
11. Font-Size Progress Bar: Font size of the text above
12. Progress Bar Effect: Select progress bar effect
13. Style: Select a position of the progress bar with 3 styles available
14. Position: Select to display the progress bar on the top or at the bottom
15. Header selector: Specify the CSS selector for the for the free shipping bar
16. Gift Icon: Use an icon to open the free shipping bar. If “Custom Image” is selected, add your own image in the 15.a below
17. Custom Icon: Add your own image and make it the gift icon
18. Preview: Any changes in design like color, font size, font family, text alignment… will reflect here

 

 

Messages

1. Announce system: Content is shown in the main progress bar when users access the website. Use the available shortcode to add in this form. For example, we are having a Free Shipping system for customers when you buy greater than or equal to {min_amount}
   • 
2. Message purchased: Content is shown in the main progress bar when customers purchase something in comparison with the free shipping amount or display the amount left. The shortcodes are available including:  {total_amounts}; {cart_amount}; {min_amount}; {missing_amount} For example, You have purchased {total_amounts} of {min_amount}
   • 
3. Message success: Content notification is shown in main progress bar when users total amount greater than or equal with a minimum order amount of Free Shipping zone and then users can directly go to checkout page with available shortcodes. For example Congratulation! You have achieved enough to be able to get free shipping. Go to {checkout_page}
   • 
4. Message error: Message if not reach to free shipping and appear on the checkout page. Content is shown in main progress bar of checkout page when users missing amounts to receive Free Shipping. This total missing can be added with the available shortcodes. Example: You are missing {missing_amount} achieved enough to be able to get Free Shipping. Continue {shopping}
   • 
5. Message Full Free Shipping: This message is used when min amount is zero and when applying a free shipping coupon.
   • 

 

Plugin	Author	Compatible
Curcy WooCommerce Multi Currency	VillaTheme	Fully
YITH WooCommerce Frequently Bought Together Premium	YITH	Fully
WPML	OnTheGoSystems	Fully
Polylang	WP SYNTEX	Fully
WooCommerce Cart All in One	VillaTheme	Fully
WP Rocket	WP rocket	Fully
SG Optimizer	SiteGround	Fully
FOX – Currency Switcher Professional for WooCommerce	realmag777

 

Watch this tutorial video to set up WooCommerce Free Shipping Bar with multilingual plugins.

 

 

WooCommerce Cart All in One

You can display the free shipping bar or WooCommerce Free Shipping bar on the sidebar cart of WooCommerce Cart All in  One by the shipping bar shortcode. This feature is available in the premium version of these two plugins.

Step 1: Activate these 2 plugins premium version

Step 2: Go to Cart All In One > Sidebar cart, go to the Design option.

Step 3: In the Cart All In One customization, go to the Sidebar Cart Footer section,

Step 4: In the Custom message option, and the free shipping bar shortcode there: [woo_free_shipping_bar]

Step 5: Configure WooCommerce Free shipping normally and check the shipping bar on sidebar cart.

Thank you for your attention! If you have any question, please create a topic at FORUM (http://villatheme.com/supports/), we will support within 24 hours.