Do you offer free shipping on your WooCommerce store?

你们在WooCommerce商店提供免费送货吗？

Offering free shipping is a proven way to reduce cart abandonment and increase overall sales conversion. The challenge is that most store owners fail to clearly highlight the free shipping offer.

提供免费送货是减少购物车放弃并提高整体销售转换率的行之有效的方法。 面临的挑战是，大多数商店的老板都无法清楚地突出免费送货优惠。

In this article, we’ll teach you how to add a free shipping bar in WooCommerce to boost sales.

在本文中，我们将教您如何在WooCommerce中添加免费送货栏以促进销售。

在WooCommmerce中添加免费送货栏 (Adding a Free Shipping Bar in WooCommmerce)

Shipping costs are one of the top reasons behind abandoned cart sales. Many online stores deal with this by offering free shipping.

运费是放弃手推车销售的主要原因之一。 许多在线商店通过提供免费送货服务来解决这一问题。

Letting customers know about your free shipping offer is a great way to boost sales from your online store.

让客户知道您的免费送货优惠是增加在线商店销售额的好方法。

Here’s an example of a free shipping bar. It’s a prominent website element that stays at the top of the screen as the user scrolls down:

这是免费送货酒吧的示例。 当用户向下滚动时，它是一个显着的网站元素，位于屏幕顶部：

As you can see, the example store above is encouraging users to spend a certain amount to get free shipping. This is a great to boost cart order value and over sales volume.

如您所见，上面的示例商店鼓励用户花费一定的金额来获得免费送货。 这对于提高购物车订单价值和超额销售量是一个很好的选择。

You can enable incentivized free shipping by using the Advanced Coupon plugin for WooCommerce.

您可以使用WooCommerce的Advanced Coupon插件启用激励性免费送货。

Regardless of how you enable free shipping, properly highlighting it on your site is key, and that’s where a free shipping bar comes in.

无论您如何启用免费送货，在您的网站上正确突出显示它都是关键，这就是免费送货的地方。

To create the shipping bar, we’ll be using OptinMonster. It’s a powerful tool for creating all types of WordPress popups.

要创建运送栏，我们将使用OptinMonster。 这是用于创建所有类型的WordPress弹出窗口的强大工具。

Creating an OptinMonster Account and Connecting WordPress

创建一个OptinMonster帐户并连接WordPress

First, you’ll need to visit the OptinMonster website and sign up for an account.

首先，您需要访问OptinMonster网站并注册一个帐户。

Note: OptinMonster was co-created by Syed Balkhi, WPBeginner’s founder. It’s an extremely popular optin tool that we use here on WPBeginner and we highly recommend it.

注意： OptinMonster由WPBeginner的创始人Syed Balkhi共同创建。 这是我们在WPBeginner上使用的极为流行的optin工具，我们强烈建议您使用。

After you’ve signed up for OptinMonster, the next step is to install and activate the free OptinMonster plugin for WordPress. If you’re not sure how, check out our step by step guide on how to install a WordPress plugin.

在注册OptinMonster之后，下一步就是安装并激活适用于WordPress的免费OptinMonster插件 。 如果您不确定如何安装，请查看我们的逐步指南， 了解如何安装WordPress插件 。

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

此插件将OptinMonster应用程序连接到您的WordPress网站。 激活它后，单击WordPress仪表板中的OptinMonster菜单。 然后，单击“连接您的帐户”按钮，并将WordPress连接到您的OptinMonster帐户。

为WooCommerce创建免费送货栏 (Creating The Free Shipping Bar for WooCommerce)

Now, you can create your free shipping bar. First, go to the OptinMonster page in your WordPress dashboard and then click the ‘Create New Campaign’ button on the top right.

现在，您可以创建免费送货栏。 首先，转到WordPress信息中心中的OptinMonster页面，然后单击右上角的“创建新广告系列”按钮。

This will take you to the OptinMonster campaign builder where you need to select ‘Floating Bar’ as your campaign type.

这将带您到OptinMonster广告系列构建器，在其中您需要选择“浮动栏”作为广告系列类型。

Next, scroll down and choose your campaign template. OptinMonster has a great range of professional templates to choose from. We’re going to use the Alert template for our WooCommerce free shipping bar.

接下来，向下滚动并选择您的广告系列模板。 OptinMonster有多种专业模板可供选择。 我们将对我们的WooCommerce免费送货栏使用Alert模板。

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

将鼠标光标移到模板上，然后单击“使用模板”按钮：

OptinMonster will now prompt you to name your campaign. You can use any name that you like here.

OptinMonster现在将提示您命名广告系列。 您可以在此处使用任何喜欢的名称。

You can also choose which website(s) you want to run the campaign on. OptinMonster should have added your website here for you.

您还可以选择要在其上运行广告系列的网站。 OptinMonster应该已经在这里为您添加了您的网站。

Once you’re ready, click the Start Building button.

准备就绪后，单击开始构建按钮。

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

然后，您将看到OptinMonster构建器界面。 它看起来像这样：

By default, the floating bar will stick to the bottom of the screen. If you want it at the top of the screen instead, that’s easy to change.

默认情况下，浮动栏将停留在屏幕底部。 如果您希望将其显示在屏幕顶部，则很容易更改。

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

只需单击左侧菜单中的浮动设置。 然后，打开“加载页面顶部的浮动栏？”。 选项。

To change the text in the bar, simply click on it. The text editor will open up on the left-hand side of your screen.

要更改栏中的文本，只需单击它。 文本编辑器将在屏幕的左侧打开。

You can customize the text as needed. You can also change the font style, color, font size, and more. The preview of your campaign will automatically update to show how it’ll look live.

您可以根据需要自定义文本。 您还可以更改字体样式，颜色，字体大小等。 广告系列的预览将自动更新，以显示其实时效果。

Here, we’ve changed the text and the font. We’ve also slightly increased the font size:

在这里，我们更改了文本和字体。 我们还略微增加了字体大小：

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

您也可以更改免费送货栏上的按钮。 只需单击按钮，设置将在左侧面板中打开。 您可以在那里更改按钮的文本。

To direct customers to a page on your website about free shipping, click on the Action tab. Then, enter the correct Redirect URL:

要将客户引导到您网站上有关免费送货的页面，请单击“操作”选项卡。 然后，输入正确的重定向URL：

If you want to use a different color for your free shipping bar, that’s easy too. First, click on the Home button to return to the main design settings:

如果您想在免费送货栏上使用其他颜色，那也很容易。 首先，单击“主页”按钮以返回到主要设计设置：

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

然后，您可以转到Optin设置»Optin视图样式来更改您的Optin的颜色。

After you click in the Background Color box, you can select a new color. You can either enter the hex code or use the color picker. We’ve chosen green for ours:

在“背景颜色”框中单击后，可以选择一种新颜色。 您可以输入十六进制代码或使用颜色选择器。 我们为我们选择了绿色：

Once you’re happy with your free shipping bar, click the Save button on the top right.

对免费送货栏感到满意后，请点击右上角的保存按钮。

Next, you’ll need to select the display rules which controls who should see the free shipping bar on your site. Simply click on the Display Rules tab at the top of your screen.

接下来，您需要选择显示规则，以控制哪些人应在您的网站上看到免费送货栏。 只需单击屏幕顶部的显示规则标签。

By default, OptinMonster displays your floating bar after the user has been on any page of your site for 5 seconds.

默认情况下，当用户进入网站的任何页面5秒钟后，OptinMonster都会显示浮动条。

You may want to have your free shipping bar load instantly. To do this, simply remove this rule. Click the minus icon on the right hand side to do so:

您可能希望立即加载免费送货栏。 为此，只需删除此规则。 单击右侧的减号图标以执行此操作：

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

现在，应该留给规则“当前URL路径是任何页面”。

The final step is to put your campaign live on your site. Click the Publish tab at the top of the screen. While you’re building your campaign, it’s paused by default. You can switch it on here.

最后一步是将广告系列投放到您的网站上。 点击屏幕顶部的发布标签。 在制作广告系列时，默认情况下它已暂停。 您可以在这里打开它。

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

要将免费送货栏放在WordPress网站上，请转到WordPress信息中心中的OptinMonster»广告系列 。 单击刷新广告系列按钮以查看此处列出的免费送货栏广告系列。

Now, you can visit your site and see your free shipping bar live:

现在，您可以访问您的网站并实时查看免费送货栏：

We hope this article helped you learn how to add a free shipping bar in WooCommerce. You might also want to check out our list of the best WooCommerce plugins for your online store, and our comparison of the best business phone services with smart call routing features.

我们希望本文能帮助您学习如何在WooCommerce中添加免费送货栏。 您可能还需要查看我们为您的在线商店提供的最佳WooCommerce插件列表，以及我们对具有智能呼叫路由功能的最佳商务电话服务的比较。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-add-a-free-shipping-bar-in-woocommerce/