How to Add a Free Shipping Bar in WooCommerce

Do you provide free shipping in your WooCommerce retailer?

Offering free shipping is a confirmed manner to cut back cart abandonment and enhance general gross sales conversion. The problem is that almost all retailer house owners fail to clearly spotlight the free shipping provide.

In this text, we’ll train you ways to add a free shipping bar in WooCommerce to increase gross sales.

Adding a free shipping bar in WooCommerce

Adding a Free Shipping Bar in WooCommmerce

Shipping prices are one of many high causes behind deserted cart gross sales. Many on-line shops take care of this by providing free shipping.

Letting prospects find out about your free shipping provide is a wonderful means to increase gross sales out of your on-line retailer.

Here’s an instance of a free transport bar. It’s a distinguished web site aspect that stays on the high of the display because the person scrolls down:

Free shipping bar example

As you possibly can see, the instance retailer above is encouraging customers to spend a specific amount to get free transport. This is a nice to increase cart order worth and over gross sales quantity.

You can allow incentivized free transport through the use of the Advanced Coupon plugin for WooCommerce.

Regardless of the way you allow free shipping, correctly highlighting it in your website is essential, and that’s the place a free shipping bar comes in.

To create the transport bar, we’ll be utilizing OptinMonster. It’s a highly effective software for creating all sorts of WordPress popups.

Creating an OptinMonster Account and Connecting WordPress

First, you’ll want to go to the OptinMonster web site and join an account.

After you’ve signed up for OptinMonster, the subsequent step is to set up and activate the free OptinMonster plugin for WordPress. If you’re unsure how, take a look at our step-by-step information on how to set up a WordPress plugin.

This plugin connects the OptinMonster app to your WordPress website. After activating it, click on on the OptinMonster menu in your WordPress dashboard. Then, click on the ‘Connect Your Account’ button and join WordPress to your OptinMonster account.

Connect OptinMonster to your WordPress site

Creating The Free Shipping Bar for WooCommerce

Now, you possibly can create your free shipping bar. First, go to the OptinMonster web page in your WordPress dashboard after which click on the ‘Create New Campaign’ button on the highest proper.

Creating a new campaign in OptinMonster

This will take you to the OptinMonster marketing campaign builder the place you want to choose ‘Floating Bar’ as your marketing campaign sort.

Select the Floating Bar campaign

Next, scroll down and select your marketing campaign template. OptinMonster has a nice vary {of professional} templates to select from. We’re going to use the Alert template for our WooCommerce free shipping bar.

Bring your mouse cursor over the template and click on the ‘Use Template’ button:

Select the Alert template to start building your free shipping bar

OptinMonster will now immediate you to identify your marketing campaign. You can use any identify that you just like right here.

Name your OptinMonster campaign

You can even select which web site(s) you need to run the marketing campaign on. OptinMonster ought to have added your web site right here for you.

Once you’re prepared, click on the Start Building button.

You’ll then see the OptinMonster builder interface. It’ll appear like this:

The default alert bar template in OptinMonster

By default, the floating bar will stick to the underside of the display. If you need it on the high of the display as a substitute, that’s simple to change.

Simply click on on Floating Settings in the left-hand menu. Then, activate the ‘Load Floating Bar at Top of Page?’ possibility.

Load the floating bar at the top of the page

To change the textual content in the bar, merely click on on it. The textual content editor will open up on the left-hand aspect of your display.

Editing the text of your floating bar in OptinMonster

You can customise the textual content as wanted. You can even change the font type, coloration, font dimension, and extra. The preview of your marketing campaign will robotically replace to present the way it’ll look dwell.

Here, we’ve modified the textual content and the font. We’ve additionally barely elevated the font dimension:

Change the text of your floating bar

You can change the button in your free shipping bar, too. Simply click on on the button, and the settings will open up in the left hand panel. You can change the textual content of the button there.

Editing the button on your free shipping bar

To direct prospects to a web page in your web site about free shipping, click on on the Action tab. Then, enter the right Redirect URL:

Edit where the button redirects to on your website

If you need to use a totally different coloration on your free shipping bar, that’s simple too. First, click on on the Home button to return to the primary design settings:

Click the Home button to return to the main display settings for your campaign

Then, you possibly can go to Optin Settings » Optin View Styles to change the colour of your optin.

Go to Optin Settings - Optin View Styles to change the colors of your optin

After you click on in the Background Color field, you possibly can choose a new coloration. You can both enter the hex code or use the colour picker. We’ve chosen inexperienced for ours:

Changing the background color for your campaign

Once you’re joyful along with your free shipping bar, click on the Save button on the highest proper.

Save your campaign using the green Save button at the top of the screen

Next, you’ll want to choose the show guidelines which controls who ought to see the free shipping bar in your website. Simply click on on the Display Rules tab on the high of your display.

Setting your display rules in OptinMonster

By default, OptinMonster shows your floating bar after the person has been on any web page of your website for five seconds.

You May See : How to Create a Paywall in WordPress (with Preview Options)

You might want to have your free shipping bar load immediately. To do that, merely take away this rule. Click the minus icon on the best hand aspect to accomplish that:

Have your free shipping bar appear instantly

Now, you have to be left with the rule ‘Current URL path is any page.’

The ultimate step is to put your marketing campaign dwell in your website. Click the Publish tab on the high of the display. While you’re constructing your marketing campaign, it’s paused by default. You can swap it on right here.

Switch on your campaign under the Publish tab in OptinMonster

To put your free shipping bar in your WordPress website, go to OptinMonster » Campaigns in your WordPress dashboard. Click the Refresh Campaigns button to see your free shipping bar marketing campaign listed right here.

Refresh your campaigns list in the WordPress dashboard

Now, you possibly can go to your website and see your free shipping bar dwell:

Free shipping bar example

We hope this text helped you find out how to add a free shipping bar in WooCommerce. You may additionally need to take a look at our listing of the greatest WooCommerce plugins on your on-line retailer, and our comparability of the greatest enterprise telephone providers with sensible name routing options.

1 thought on “How to Add a Free Shipping Bar in WooCommerce”

  1. Pingback: How to Create a Secure Contact Form in WordPress

Leave a Comment

Your email address will not be published. Required fields are marked *