如何在 WooCommerce 上添加弹出窗口

本指南涵盖了在您的商店中创建 WooCommerce 弹出窗口所需了解的所有内容，即使之前没有经验。

除了设置之外，您还会找到与转换相关的提示，以帮助您通过 WooCommerce 弹出窗口获得更多潜在客户和销售。

在这篇文章中，我们将介绍：

• WooCommerce 弹出窗口的好处
• 创建 WooCommerce 弹出窗口的步骤

为什么使用 WooCommerce 弹出窗口？

您已经在许多在线商店中看到了弹出窗口。 有没有想过为什么企业会使用它们，尽管它们有分散注意力的名声？

原因很简单：弹出窗口将网站流量转化为销售额。

它们可以成为您电子邮件列表中新潜在客户的稳定来源。 此外，弹出窗口可以有效地促进销售、收集客户反馈并将流量吸引到您网站上的特定页面。

如果您以正确的方式设计它们，您的访问者实际上会喜欢它们。

但不要只相信我的话——

Ben，他的弹出窗口成功故事，有很多有价值的收获，对它们有这样的看法。

Faguo 是另一家喜欢弹出广告的企业，它通过弹出广告活动捕获了5,000 多封新电子邮件。

我可以继续前进，但是——

让我们向您的商店添加一个 WooCommerce 弹出窗口。

如何创建 WooCommerce 弹出窗口

准备好？ 只需按照以下步骤将弹出窗口添加到您的 WooCommerce 网站。

第 1 步：获取免费的 Wisepops 帐户

要创建 WooCommerce 弹出窗口，我们需要一个应用程序。

显然，我们的首选是Wisepops 。 第一步：创建一个 Wisepops 帐户并将其连接到您的 WooCommerce 商店。

使用 Google 登录或传统登录选项注册免费的 Wisepops 帐户。 按照下面短视频中的简单步骤注册免费试用。

不用担心，您无需添加信用卡详细信息。 您正在尝试 Wisepops 100% 免费且不附带任何条件——我们希望每个人都能体验我们产品的价值。

更喜欢插件来安装应用程序？ 在 WooCommerce 上尝试Wisepops 插件。 ● 易于使用 ● 定期更新 ● 来自用户的 5 星评价

第 2 步：将设置代码添加到您的商店

现在是时候连接您的 WooCommerce 商店和 Wisepops。

这很简单。

单击仪表板顶部的获取我的设置代码按钮。

该按钮将显示代码供您复制。

单击复制按钮并根据说明添加设置代码。 唯一的要求 – 将代码放在您网站页面 HTML 的末尾，就在 </body> 标记之前。

注册完成后，Wisepops 会将您带到您的仪表板。 这就是您管理广告系列的地方。 一个运营中心，如果你愿意的话。

第 3 步：创建弹出广告系列

现在，让我们创建您的第一个 WooCommerce 弹出窗口。

我建议制作一个折扣券弹出窗口。 折扣是客户购买的主要动力，因此我们可以在建立受众的同时尝试获得一些快速销售。

要开始制作广告系列 -

单击仪表板中的新广告系列。

从那里，Wisepops 将要求您选择构建活动的方式。

让我们使用Campaign Assistant - 这是一个适合初学者的选择。

第四步：选择你的目标

接下来，Wisepops 会问你想用这个 WooCommerce 弹出窗口做什么。

您可以在多个选项中进行选择，但让我们选择增加您的受众群体。 我们将创建一个带有优惠券的弹出窗口，以建立一个电子邮件列表并推动销售。

然后，在出现的菜单中选择优惠券。

第 5 步：选择模板

现在，我们为您的 WooCommerce 弹出窗口选择一个模板。

Wisepops 有很多选择。

我将使用第二个模板 - 此弹出窗口旨在将访问者的注意力集中在我们慷慨的报价上。 这里是。

第 6 步：个性化模板

我们的客户喜欢 Wisepops，因为它允许他们更改弹出窗口中的每个元素。 通过这样做，他们制作了令人惊叹的弹出窗口，看起来像是他们网站的自然扩展。

这是来自法果的一位快乐的客户 Martin 的名言。

事实上，潜在客户生成实验可能非常有用（从 Martin 那里得到它——他的实验产生了令人印象深刻的 15% CTR ），因此必须知道如何个性化您的弹出窗口。

这正是我们现在要学习的内容。

选择模板后，Wisepops 会将您重定向到广告系列编辑器。 在那里，您会看到模板，可以使用了。

这是其原始版本的外观。

在 Campaign Builder 中，您会看到包含五个部分的主菜单： Popup、Blocks、Tab、JS和Display 。 我们将通过单击我们想要更改的元素来自定义我们的 WooCommerce 弹出窗口——这非常简单。

让我们进行这些自定义：

• 将标题更改为“减 20 美元怎么样？”
• 正文为“如果您现在注册，您的订单可享受 20 美元的折扣”。
• 将 CTA 按钮的颜色从红色更改为黑色
• 将标题的字体大小增加到 40 像素
• 添加原始图像

我会先点击标题。 然后，我将单击立即出现的编辑按钮。 标题的文字会这样自动选择，所以我可以开始输入新版本了。

所以，我也会对正文做同样的事情。

要增加字体，我将在单击任何文本元素后转到模板上方显示的大小选择器。

接下来，要添加原始图像，请单击默认图像。 Wisepops 会自动打开您左侧的图像设置。

单击替换按钮并从您的计算机中选择一个图像（我使用的是从 Unsplash 下载的 Arno Senoner 的照片）。

最后的定制：

单击 CTA 按钮以显示自定义设置。 在编辑器的顶部，找到颜色设置（尺寸选择器之后）。

在背景颜色中选择黑色。

完成后，模板将如下所示。 这样更好，同意吗？

只剩下一个大问题：

当访问者点击获取我的优惠券时会发生什么？

在这种情况下，Wisepops 将显示带有优惠券代码的感谢弹出窗口。 单击谢谢以查看此弹出窗口。

我们可以让文本保持原样。 但一定要更改优惠券本身——它默认为FIVEOFF 。

我们可以对您的 WooCommerce 弹出窗口进行更多出色的自定义。 但是，让我们暂时离开设计并继续下一步。

请记住，您可以更改任何内容 - 只需单击单个元素即可进行任何调整。

第 7 步：选择何时显示弹出窗口

让我们将其设为退出意图弹出窗口。

这意味着当访问者即将离开您的商店时，将显示该广告系列。 我选择了这个，因为它比“传统”弹出窗口高出 5%。

设置时间 -

转到“显示”主菜单选项中的“触发器”部分。

在那里，选择On Exit 。

竞选活动几乎完成。

点击屏幕右上角的保存来保存您的广告系列。

第 8 步：激活您的广告系列

我们快到了。

单击左上角的 Wisepops 徽标以转到仪表板。 在那里，确保您位于“广告系列”标签中。

接下来，将切换开关设置为打开以激活您的第一个 WooCommerce 弹出广告系列。

你都准备好了！

下一步

在您的商店中弹出 WooCommerce 是收集电子邮件和推动销售的好方法。 我们的客户甚至报告了高达 17% 的点击率，这意味着每个月都会有数千条新线索添加到电子邮件列表中。

现在我们已经学会了如何创建 WooCommerce 弹出窗口，这只是跟踪和改进您的活动的问题。 但不要止步于此——尝试不同的方式来转换您的流量（优惠券、免费送货、提前获得销售等）。

我们有在各种情况下为您提供帮助的指南：

• 如何为B使用弹出窗口缺少星期五营销
• 产生更多潜在客户和销售的最佳弹出窗口实践
• 如何提高电子商务商店的访客参与度

如果您在弹出窗口方面需要任何帮助，请查看 Wisepops 帮助中心或使用应用程序中的聊天功能向客户服务团队发送消息。