WordPress Made Easy

How to Add a Free Shipping Bar in WooCommerce

Do you have a WooCommerce store that offers free shipping?

Free shipping has been shown to reduce cart abandonment and boost overall sales conversion. The problem is that the majority of store owners fail to emphasize the free shipping offer.

In this article, we’ll show you how to increase sales by adding a free shipping bar to WooCommerce.

Adding a WooCommerce free shipping bar

Adding a WooCommerce Free Shipping Bar

One of the most common reasons for abandoned cart sales is shipping costs. Many online retailers address this by providing free shipping.

Making customers aware of your free shipping offer is an excellent way to increase sales at your online store.

An example of a free shipping bar can be found here. It’s a prominent website element that remains at the top of the screen as the user scrolls down the page:

Example of a free shipping bar

As you can see, the above example store encourages customers to spend a certain amount in order to receive free shipping. This is an excellent way to increase cart order value and sales volume.

Using the Advanced Coupon plugin for WooCommerce, you can enable incentivized free shipping.

Whatever method you use to enable free shipping, properly highlighting it on your website is critical, which is where a free shipping bar comes in.

We’ll use OptinMonster to make the shipping bar. It’s a versatile tool for making WordPress popups of all kinds.

Getting Started with OptinMonster and Integrating WordPress

To begin, go to the OptinMonster website and register for an account.

WPExpertpro’s founder, Homethagan, was a co-creator of OptinMonster. We use and recommend it here at WPExpertprobecause it’s a very popular optin tool.

After you’ve signed up for OptinMonster, you’ll need to download and activate the free OptinMonster WordPress plugin. Check out our step-by-step guide on how to install a WordPress plugin if you’re not sure how.

This plugin connects your WordPress site to the OptinMonster app. After you’ve activated it, go to your WordPress dashboard and click the OptinMonster menu. Then, under ‘Connect Your Account,’ click the ‘Connect Your Account’ button to link WordPress to your OptinMonster account.

Integrate OptinMonster with your WordPress blog.

Creating a WooCommerce Free Shipping Bar

You can now make your own free shipping bar. To begin, go to your WordPress dashboard’s OptinMonster page and click the ‘Create New Campaign’ button on the top right.

In OptinMonster, create a new campaign.

This will take you to the OptinMonster campaign builder, where you should choose the ‘Floating Bar’ campaign type.

Choose the Floating Bar campaign from the drop-down menu.

After that, scroll down and select a campaign template. OptinMonster has a large selection of professional templates from which to choose. For our WooCommerce free shipping bar, we’ll use the Alert template.

Place your mouse cursor over the template and select “Use Template”:

To begin creating your free shipping bar, select the Alert template.

Your campaign will now be prompted to be named by OptinMonster. Here you are free to use any name you want.

Choose a name for your OptinMonster campaign.

You can also select which website(s) the campaign will be run on. Your website should have been added for you by OptinMonster.

Click the Start Building button when you’re ready.

The OptinMonster builder interface will then appear. It will appear as follows:

OptinMonster's default alert bar template.

The floating bar is set to stay at the bottom of the screen by default. It’s simple to move it to the top of the screen if you prefer.

Simply go to the left-hand menu and select Floating Settings. Then select ‘Load Floating Bar at Top of Page?’ from the drop-down menu.

Fill the floating bar at the top of the page with content.

Simply click on the text in the bar to change it. On the left-hand side of your screen, the text editor will appear.

In OptinMonster, you can change the text of your floating bar.

You can change the text as you see fit. You can also alter the font style, color, and size, among other things. Your campaign’s preview will automatically update to reflect how it will appear in real-time.

The text and font have been changed in this example. We’ve also increased the font size slightly:

The text of your floating bar can be changed.

You have the option of changing the button on your free shipping bar as well. Simply click the button to bring up the settings in the left-hand panel. You can change the button’s text there.

Changing the free shipping button on your bar

Click the Action tab to send customers to a page on your website about free shipping. After that, type in the correct Redirect URL:

Change the URL of the button on your website.

It’s also simple to use a different color for your free shipping bar. To return to the main design settings, first click the Home button:

To return to your campaign's main display settings, click the Home button.

You can then change the color of your optin by going to Optin Settings » Optin View Styles.

To change the colors of your optin, go to Optin Settings - Optin View Styles.

You can change the background color by clicking on the Background Color box. You can use the color picker or enter the hex code. For ours, we went with green:

Changing the color of your campaign's background

When you’ve finished customizing your free shipping bar, click the Save button in the top right corner.

Use the green Save button at the top of the screen to save your campaign.

The next step is to choose the display rules, which determine who sees the free shipping bar on your site. Simply go to the top of your screen and select the Display Rules tab.

In OptinMonster, you can customize your display rules.

By default, OptinMonster shows your floating bar after a user has spent 5 seconds on any page of your site.

You might want your free shipping bar to appear immediately. Simply remove this rule to accomplish this. To do so, click the minus icon on the right-hand side:

Allow your free shipping bar to appear immediately.

The rule ‘Current URL path is any page’ should now be left to you.

The last step is to go live with your campaign on your website. At the top of the screen, select the Publish tab. By default, your campaign is paused while you’re building it. You can turn it on right here.

In OptinMonster, go to the Publish tab and turn on your campaign.

Go to OptinMonster » Campaigns in your WordPress dashboard to add your free shipping bar to your site. To see your free shipping bar campaign listed here, click the Refresh Campaigns button.

In the WordPress dashboard, refresh your campaigns list.

You can now go to your website and see your free shipping bar in action:

Example of a free shipping bar

We hope that this article has shown you how to add a free shipping bar to your WooCommerce store.

Comments are closed.