Woocommerce Free Shipping Bar

Created: 02/27/2017
Latest update: 08/16/2017
By: Villatheme
Thank you for purchasing our plugin. If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum. Thanks so much!

What is the WooCommerce Free Shipping Bar?

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 free shipping method. Woocommerce Free Shipping Bar – WooCommerce Free shipping plugin allows:

– Display the total amounts of customers to reach the minimum order amount Free Shipping system.

– Display banner notification program Free Shipping.

– Show message successful when customers purchase to enough minimum amount Free Shipping or amounts missing to reach Free Shipping.

– Display progress with percentage amount current.


– Support users to know how much they need to purchase to receive free shipping.

– Works on mobile! You are able to activate/deactivate the plugin on desktop/mobile.

– Detect User’s IP to get shipping method of their country.

– A direct adjustment progress bar will show: Background color bar, text color, background color progress bar, background color current progress bar, font-family, font size.

– Available 3 styles to display the progress bar.

– Available 2 styles position to show the progress bar.

– Enable or Disable percentage current.

– Custom message Announce system, message purchased, message success and message error.

– Set initial delay, time to display to show.

– Allow close progress bar.

– Allow hidden Progress bar from specific pages.

– FAST. Progress bar uses Ajax Technology. The bar will update the progress when customer click add to cart without reloading the page.

– Easy to use

System Requires:

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

WordPress 4.4.x or higher (Recommeneded WordPress 4.5+)

Woocommerce 2.6.x (Important: You must install and activate plugin Woocommerce version 2.6.x or higher before install Woocommerce Free Shipping Bar).

max_execution_time 60

memory_limit 125M

post_max_size 64M

upload_max_filesize 64M


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.

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

General setting

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

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

Detect IP: Detect user’s IP (300 view/day at https://ipfind.co )

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


Style: There are 3 styles to show form progress bar in front-end. Turn on one style

Background Color: pick a color for background of top progress bar.

Text Color: pick a color for text in content of top progress bar.

Link Color: pick a color for link in content of top progress bar.

Font-Family: Select a font-family for text in content of progress bar.

Font-Size: Select a font-size for text in top progress bar.

Text Align: Select text align for top progress bar. It can be shown on the left or center horizontal of top progress bar.

Enable Progress: Turn on to display percentage progress bar.

Progress Background Color: pick a color for background of percentage progress bar.

Current Progress Background Color: pick a color for background current of percentage progress bar.

Progress Text Color: pick a color for text of percentage progress bar.

Font-size progress bar: Select a font-size for text in percentage progress bar.

Position: There are 2 position to show progress bar in front-end. Turn on one position.


Announce System: Content is shown in main progress bar when users access to website. Use available shortcode to add in this form

Example: We are having Free Shipping system for customer when you buy greater than or equal to {min_amount}


Message Purchased: Content notification is shown in main progress bar when user add a product to cart. Use some available shortcodes to add in this form.

Example: You have purchased {total_amounts} of {min_amount} Free Shipping system.


Message Success: Content notification is shown in main progress bar when users total amount greater than or equal with minimum order amount of Free Shipping zone and then users can direct go to checkout page with available shortcode.

Example: Congratulation ! You have achieved enough to be able to get free shipping. Go to {checkout_page}


Message Error: Content is shown in main progress bar of checkout page when users missing amounts to received Free Shipping. This total missing can be added with available shortcode.

Example: You are missing {missing_amount} achieved enough to be able to get Free Shipping. Continue {shopping}


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, Title or Slug.




is_page( array(‘About’, ‘Contact’, 50, 75) )


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

Add Free Shipping zone and setting minimum order amount

Go to Dashboard >> WooCommerce >> Settings. Move to Shipping tab, you can add new shipping zone with your country sell product: Add shipping zone >> Enter Zone Name >> Select regions within this zone >> Save changes.

After that you need Add shipping method >> Choose Free Shipping >> Add shipping method.

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

Turn it on

Go to Dashboard >> Woo Free Shipping >> General box >> Turn on plugin either on desktop or mobile of both of them, select a Free shipping zone default >> click “Save” to get the changes

Design for progress bar

Go to Dashboard >> Woo Free Shipping >> Design>> Configure as you want:


  • Small Progress bar: Show progress bar at bottom Cart page, Checkout page
  • Position on cart page: Above or below the Progress button
  • Position on the checkout page: Above or below the Payment methods
  • Show single product page: Enable to show progress bar below add to cart button


Configure Message, Effect and Assign page

Go to Dashboard >> Woo Free Shipping >> configure Message, Effect, Assign

It’s already done, now you can see it in front-end:


Extra information

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.