用Woocommerce建立一个网上商店 [10] 弹出窗口，销售页面，特色产品

[10] 弹出窗口，销售页面，特色产品

文章来源  https://wpeyes.com/elementor/academy/

经营在线商店不仅仅是上传产品一次，然后坐下来希望它们能够销售的简单情况。作为店主，您需要不断想出新的方法来吸引顾客购买您的产品。

在本课中，我们将教您一些基本的营销技巧，您可以将这些技巧应用到您的商店中，以帮助推动您的销售额越来越高。

我们将首先创建一个弹出窗口。

这将向浏览商店的客户推荐产品。- 消除

接下来，我们将看看内置的“特色产品”选项。这将使我们能够使我们试图推动销售的特定产品脱颖而出。

最后，我们将为单个产品创建一个专门的销售页面。

因此，如果您准备好了，就让我们开始吧，让您的商店更上一层楼。

我们要添加到网站的第一个营销元素是弹出窗口。

弹出窗口是通知客户重要公告的好方法。您可以在您的商店中使用它们来推广产品、提供建议、收集访客信息等等。

关键是确定弹出窗口的时间，这样它们既有用又不烦人。没有人喜欢在查看网站时被大量弹出窗口淹没，因此战略性地 (struh tee juh kuh lee) 计划您的网站以确保它们为您的客户提供价值。

在我们使用在线商店弹出窗口的示例中，我们将创建一个仅在访问者首次访问我们网站时显示一次的窗口。弹出窗口将提示他们注册我们的时事通讯，这样做的奖励是他们的第一笔订单可享受 10% 的折扣。

让我们转到 Popups 区域并创建我们的第一个商店弹出窗口。

我们将其命名为“Newsletter Prompt”。

如果您愿意，您当然可以从库中选择一个模板开始，但我们将从头开始创建我们的模板，因此将关闭库。

在我们添加任何内容之前，让我们通过选择齿轮图标来配置一些常规弹出设置……

将宽度设置为 50VH……并将高度保留为“适合内容”……如果需要，您可以将其修改为“适合屏幕”或“自定义”。

我们保留了默认位置规则，因为我们希望弹出窗口直接显示在屏幕中间。

我们还将“覆盖”和“关闭按钮”保留为“显示”。

将动画设置为淡入……淡出。

然后在样式选项卡中…为弹出窗口设置背景图像…

设置位置……附件……重复……和大小……

我们将保留默认的叠加层。

在“关闭按钮”选项卡中设置关闭按钮的颜色……和大小（Primary 25）。

最后在高级选项卡中……向所有边添加 5% 的填充。

好的，太好了……现在让我们添加一些内容。

添加一个新的单列部分……然后放入标题小部件……修改文本……和样式（注册 – 中心 – 二级标题 – 1em 行高）。

复制标题……修改文本……然后是样式（并在您的第一笔订单上节省 10% – ）。

添加我们的分隔图像。

现在添加一个联系表。

给表格起个名字（时事通讯注册）

删除消息字段……将输入大小修改为中等……并隐藏标签。

现在修改按钮的大小……和文本（注册）。

我们将很快回到本节来完成我们的表单设置，但现在切换到样式选项卡并将文本颜色修改为辅助颜色……背景颜色为白色……边框宽度为 0……边框半径为 0。

现在在按钮样式下…设置排版（Button S Text – 1em）…背景颜色（黑色）…边框半径（0）…和悬停颜色（棕色）。

切换回“内容”选项卡，让我们微调我们的表单设置。

打开“提交后的操作”，默认情况下，我们的表单将自动添加到我们的提交数据库中，并通过电子邮件发送到管理员电子邮件地址。

如果您选择加号图标，您会看到一大堆附加选项。这些内置的 Elementor 功能可以节省大量时间，因为它们允许您将表单与许多第三方提供商以及其他弹出设置、重定向和其他电子邮件集成。

例如，如果您使用 MailChimp，您可以将此表单连接到您的 MailChimp 帐户，每次访问者填写此表单时，他们都会自动添加到您的邮件列表中。

有关将 Elementor 表单与第三方服务集成的更多信息，请查看我们文档中的详细说明。

在我们的示例中，我们将通过将提交的表单存储在我们的提交数据库中来保持简单，然后我们可以在稍后阶段手动将其添加到邮件列表中。

我们还将设置一封自动发送给客户的电子邮件，为他们提供 10% 的折扣代码。

最后，我们将配置弹出窗口在提交表单后关闭（选择弹出窗口）。

提交时不需要进行任何配置，所以让我们转到自动电子邮件。

我们将首先删除默认电子邮件地址。然后我们需要在此字段中插入一个短代码，以便在提交表单时将电子邮件发送给客户。为此，请打开表单字段选项卡……然后选择电子邮件……高级……并复制简码。

现在将此简码粘贴到“To Field”中。现在将使用在我们网站前端输入的任何电子邮件地址动态填充此字段。

修改邮件标题…

然后添加您的消息……（嘿！感谢您注册 Bakersons 的时事通讯。您的 10% 折扣是 F3FSCPC4）。

请注意，如果需要深入个性化您的电子邮件，您可以将 HTML 和短代码添加到此消息字段。

向下滚动，您会看到我们还可以控制发件人姓名……电子邮件地址……以及回复……抄送……和密件抄送（如果需要）。我们会将这些保留为表单的默认值。

最后打开弹出选项卡……并在操作下将其设置为“关闭弹出窗口”。这意味着一旦提交了表单，弹出窗口将自动关闭，客户可以继续浏览我们的网站。

如果我们现在选择“发布”，我们将自动进入显示条件窗口。

在这里我们可以为弹出窗口定义确切的显示设置。

我们只想向初次访问者显示一次弹出窗口。

选择添加条件…并将其保留为默认的“整个站点”。这是将向第一位访问者显示的弹出窗口，无论他们首先登陆哪个页面。

现在在“触发器”下启用“页面加载”，我们将其设置为 5 秒。

最后切换“高级规则选项卡”，在“最多显示 X 次”下，我们将其设置为 1，确保弹出窗口仅显示一次。

现在保存并关闭，您的弹出窗口已准备好用于您的商店。

如果我们现在在新窗口中打开我们的商店并等待几秒钟，您会看到弹出窗口显示……我们可以填写表格……一旦我们选择注册……弹出窗口消失，我们可以继续浏览。

弹出窗口是任何网站的强大营销功能，Elementor 弹出窗口构建器是一个有价值的工具包，它允许您为您的网站创建多样化的弹出窗口集合，并允许进行超出本课程范围的广泛配置。请务必通过此视频说明中的链接查看我们的专用教程以获取更多信息。

现在我们已经了解了如何为我们的商店创建弹出窗口，让我们来看看 WooCommerce 的特色产品。

特色产品是在您的网站上推广特定项目的好方法，而且设置起来非常快速和容易。一旦您设置了一些特色产品，您就可以使用“产品小部件”轻松地在整个网站上显示它们，就像我们在网站主页上所做的那样。

有两种方法可以在 WooCommerce 中将产品设置为“特色”，并且都在产品页面上完成，所以让我们现在就去那里。

第一种方法（可能也是最简单的方法）是在特征栏中选择星号。这样做将重新加载页面，正如您所看到的，该产品现在有一颗实心星，现在正式被视为特色产品。

第二种方法是选择“快速编辑”选项。在这里，我们可以使用复选框来指示我们是否希望该产品成为特色。进行任何修改后，请务必保存更改。

现在让我们选择另外两个要展示的产品……

好的，不错。现在我们已经选择了一些要展示的产品，让我们看看如何在我们的网站上展示它们。

首先在 Elementor 编辑器中打开主页……然后向下滚动到这个部分，就在我们的英雄形象下方。

搜索…并放入“产品小部件”。

暂时不要担心这个小部件的样式，我们很快就会解决这个问题。但现在切换到“查询”选项卡并在“来源”下选择“精选”。正如您所看到的，我们刚刚设置为“特色”的四种产品现在正在展示。

现在让我们修复样式，而不是手动调整样式以匹配我们网站的其余部分，我们可以以更有效的方式实现这一点。

我们之前在创建商店模板时设置了“产品小部件”的样式，所以让我们在新选项卡中打开该模板……右键单击“产品小部件”并选择“复制”。

现在回到主页，右键单击“产品小部件”并选择“粘贴样式”。

哇，这太容易了！？

如果我们现在访问我们的主页，您可以看到 4 种特色产品现在显示在非常显眼的位置。

在您的商店中使用特色产品是在独特位置推广特定产品的一种简单有效的方式。尝试不同的组合和位置，直到找到最适合您商店的设置。

在本课的最后一部分，我们将创建一个只销售一种产品的专用销售页面。

网站所有者在销售电子书、课程或专业商品等产品时创建专门的销售页面是很常见的。这样做可以为访问者提供良好的用户体验，因为它允许您提供专门为目标产品或服务设计的定制体验。

在我们的网站上，我们创建了这个销售页面，它直接链接到面包店食谱的数字电子书。

我们提供了一些示例食谱来吸引用户，提供了产品说明，然后是“添加到购物车”按钮。

如您所见，选择“添加到购物车”按钮可让用户轻松直接进入购物车页面。

让我们进入 Elementor 编辑器，看看我们是如何将这个产品添加到我们的页面的。

正如您所看到的，我们已经预先创建了这个页面来显示我们的标题图像、文本以及我们的示例食谱。

如果我们继续滚动，您会看到我们有一个空列，可以添加我们的产品。

让我们搜索并放入“产品小部件”。

就像我们之前在创建特色产品区域时所做的那样，我们将从之前创建的产品小部件中复制样式，以节省我们在样式设置上的时间。

打开当前正在使用此小部件的任何模板或页面……复制小部件……并将样式粘贴到我们销售页面上的产品小部件上。

现在将列和行调整为 1，因为我们只想在此页面上显示 1 个产品。

现在让我们切换到查询选项卡……在源下选择手动选择……然后搜索我们的食谱电子书。

好吧，太好了……事情开始成形了。

现在让我们做一些额外的风格调整……

切换到样式并向框区域添加 75px 填充……将背景更改为白色……然后应用框阴影 (25% 10 5 15 0)。

现在让我们更新我们的页面并进行测试。

太棒了，我们的销售页面已经完成，可以让我们吸引流量了。

学习一些基本的营销技巧确实可以将您的商店推向一个新的高度。

将 Elementor 和 WooCommerce 一起使用的好处在于，设置和测试多种不同的组合和想法非常容易，让您可以找到最适合您商店的营销技巧。

Elementor 和 WooCommerce 确实是完美的组合。

通过结合使用这些工具，您拥有为任何类型的企业创建令人惊叹的在线商店所需的一切。

从初始设置和配置的简易性，到创建所有基于商店的模板和产品的能力，Elementor 和 WooCommerce 是一对很棒的组合。

在本课程中，我们涵盖了与使用 Elementor 和 WooCommerce 建立在线商店相关的所有方面，您知道拥有成功实现这一目标所需的知识和技能。

请务必在评论中发布您的网站链接，与我们分享您的店铺创意。

感谢您的收看，一定要喜欢并订阅我们的频道，以获取更多精彩的教程和课程。