如何使用 Divi 的条件选项通过促销弹出窗口重新定位废弃的购物车

重新定位废弃的购物车是一种有效的营销技术，可以激励客户在将他们放弃的商品添加到您网站上的购物车后购买它们。 让这些客户回来完成购买的一种有效策略是为他们打算购买的商品提供折扣。 棘手的部分是仅向放弃购物车的用户提供这些折扣。

Divi 的条件选项包括允许您根据用户的 WooCommerce 购物车内容和页面访问显示或隐藏内容的显示条件。 这种条件组合可以通过折扣或促销弹出窗口重新定位那些放弃购物车的用户。

在本教程中，我们将向您展示如何通过创建一个智能促销弹出窗口来重新定位废弃的购物车，该弹出窗口仅在用户的购物车中有商品并访问过结帐页面时才会显示在登录页面上。

让我们开始吧！

抢先看

这是我们将在本教程中构建的促销弹出窗口的快速浏览。

如果用户已将产品添加到购物车并访问了结帐页面，则此促销弹出窗口将显示在页面上。

免费下载重定向废弃购物车促销弹出布局

要掌握本教程的布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送终极 Divi 登陆页面布局包的副本，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将立即成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载以访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后单击导入按钮。

完成后，部分布局将在 Divi Builder 中可用。

理解概念

在进入本教程的详细构建过程之前，了解我们将要构建的基本概念可能会有所帮助。 这个想法是使用 Divi Builder 在现有登录页面上构建促销弹出窗口。 构建促销弹出部分后，我们要添加条件选项，以在满足以下两个条件时显示该部分。

1. 用户的购物车中有内容
2. 用户访问了结帐页面

这可以在编辑部分（或任何 Divi 元素）时使用 Divi 的内置条件选项来完成。

一旦为该部分（或促销弹出窗口）设置了条件选项，我们现在可以通过在满足条件时显示弹出窗口来重新定位已放弃购物车的用户。 这个过程会是这样的……

1. 用户访问登录页面时未显示促销弹出窗口
2. 用户将内容添加到他们的购物车（满足条件 #1）
3. 用户访问结帐页面（满足条件 #2），但无论出于何种原因，用户都没有完成结帐过程并离开。
4. 然后，用户重新访问现在显示促销弹出窗口的登录页面，该页面将他们重定向到以折扣方式完成结帐过程。

很酷的东西！ 现在您了解了这个概念，让我们进入教程，好吗？

你需要什么开始

要开始，您需要执行以下操作：

1. 如果您还没有，请安装并激活 Divi 主题。
2. 在 WordPress 中创建一个新页面，并使用 Divi Builder 在前端（可视化构建器）编辑页面。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

使用 Divi 的条件选项通过促销弹出窗口重新定位废弃的购物车

第 1 部分：上传预制着陆页

在本教程中，我们将向 Divi 网站的登录页面添加促销弹出窗口。 为了快速启动这个过程，我们将从 Divi Builder 中导入 Perfumery Landing Page 布局。

为此，请打开设置菜单并单击从库添加图标。 然后搜索并找到 Perfumery Layout Pack 并单击以使用 Perfumery Layout Page Layout。

第 2 部分：构建一个固定部分作为促销弹出容器

加载着陆页后。 滚动到页面底部并在页面的页脚部分下方添加一个新的常规部分。

部分设置

宽度和填充

接下来，使用自定义最大宽度和填充更新部分设置，如下所示：

• 最大宽度：500px
• 内边距：顶部 10 像素，底部 10 像素

边界

然后给该部分一个边框。

• 边框宽度：15px
• 边框颜色：#f6f4f2

盒子阴影

边框到位后，为该部分添加一个盒子阴影以获得一点深度：

• 盒子阴影：见截图
• 盒子阴影模糊强度：38px
• 阴影颜色：rgba(203,146,116,0.6)

动画片

要为弹出窗口提供延迟动画，请按如下方式更新动画样式：

• 动画风格：翻转
• 动画方向：左
• 动画时长：3000ms

这将在页面加载后 3 秒显示弹出部分，并带有漂亮的翻转动画。

位置

在“高级”选项卡下，更新位置，使该部分保持固定在浏览器窗口的左下方。

• 位置：固定
• 位置：左下角

CSS 类

最终，我们将添加一个可点击的“X”图标来关闭/隐藏弹出窗口。 我们需要向该部分添加一个自定义 CSS 类，以便使用 jQuery 定位它。

输入以下 CSS 类：

• CSS 类：et-promo-popup

第 3 部分：向部分添加条件选项

一旦构建了部分（我们的弹出容器），我们就可以添加条件选项，当满足以下两个条件时将显示该部分。

1. 用户的购物车中有内容
2. 用户访问了结帐页面

显示条件一：购物车内容

首先，我们将添加一个显示条件，只要用户的购物车中有内容，就会显示该部分/弹出窗口。

为此，请转到部分设置下的高级选项卡。 然后单击加号图标以添加新条件。

在下拉菜单中，选择购物车内容条件。

在购物车内容设置弹出窗口中，确保选项仅在用户购物车时显示设置为“有产品” 。

然后保存更改。

注意：此条件特定于使用 WooCommerce 的 Divi 网站。

展示条件二：页面访问

接下来，我们将添加一个显示条件，该条件将在用户访问特定页面时显示该部分/弹出窗口，在本例中，该页面将是 WooCommerce 网站上的 Checkout 页面。

为此，请转到部分设置下的高级选项卡。 然后单击加号图标以添加新条件。

在下拉菜单中，选择页面访问条件。

在“购物车内容设置”弹出窗口中，确保选项“仅当用户显示”设置为“已访问特定页面” 。 然后从弹出的页面列表中选择结帐页面。

然后保存更改。

如果所有条件都为真，则显示

由于我们有多个条件，我们可以选择在任何或所有条件为真时显示该部分。

在这种情况下，当所有条件都为真时显示促销弹出窗口是有意义的（用户在他们的购物车中有内容并且他们已经访问了结帐页面）。

在显示条件下，选择以下内容：

• 如果所有条件都为真，则显示

此时，我们正在寻找的条件功能已经到位，仅当用户拥有购物车内容并访问了结帐页面时才显示该部分。 现在，我们需要做的就是用创建促销所需的内容填充该部分。

第 4 部分：创建促销弹出内容

要为促销弹出窗口创建内容，我们将添加四个模块：

1. 带有可点击 X 图标的简介模块，因此用户可以关闭弹出窗口
2. 标题和正文的文本模块
3. 促销代码的另一个文本模块
4. 还有一个按钮模块，它将重定向到结帐页面，以便用户完成购买。

创建“X”图标以关闭弹出窗口

图标所在的行

在我们添加“X”图标简介之前，向该部分添加一个新的单列行。

更新行设置如下：

• 天沟宽度：1
• 宽度：100%
• 内边距：0px 顶部，0px 底部

然后给该行一个具有更高 z 索引的绝对位置，如下所示：

• 职位：绝对
• Z指数：12

图标

要创建“X”图标以关闭弹出窗口，请在行内添加一个新的简介模块。

从简介内容中取出任何默认的标题或正文文本。 然后单击以使用 X 图标作为简介。

在设计选项卡下，更新以下内容：

• 图标颜色：#ddd
• 图标字体大小：40px

• 宽度：40 像素
• 模块对齐：右
• 高度：40 像素

在 Advanced 选项卡下，将以下自定义 CSS 类添加到简介：

• CSS 类：et-close-popup-icon

稍后我们将需要使用我们的 jQuery 来定位这个类。

为弹出窗口创建标题和正文

我们要添加的其他模块需要单独一行。 在包含简介图标的前一行下方添加一个新的单列行。

然后按如下方式更新行设置：

• 天沟宽度：1
• 宽度：100%
• 内边距：顶部 0px，底部 20px，左侧 40px，右侧 40px

要添加标题和正文内容，请在新行内添加一个新文本模块。

使用以下 HTML 更新正文区域内的内容：

<h2>Get 20% Off!</h2>
Use the following coupon code during checkout to get 20% off your perfume order when you buy today! This offer is only available for a limited time.

在设计选项卡下，更新文本样式如下：

• 文本字体粗细：半粗体
• 文字文字大小：18px
• 文字行高：1.8em
• 文本对齐：居中
• 标题 2 字体：Cormorant Garamond
• 标题 2 字体粗细：中等
• 标题 2 文本颜色：#000
• 标题 2 文字大小：54px（桌面）、38px（平板电脑和手机）

为弹出窗口创建促销代码

要创建促销代码，请在前一个文本模块下添加一个新文本模块。

使用文本“代码：香水”更新正文区域

在设计选项卡下，更新以下内容：

• 文本字体粗细：半粗体
• 文字文字颜色：#cb9274
• 文字文字大小：16px
• 文字字母间距：2px
• 文本对齐：居中

• 边距：顶部 15px，底部 15px
• 内边距：顶部 15 像素，底部 15 像素
• 边框宽度：4px
• 边框颜色：#f4e8dc
• 边框样式：虚线

为弹出窗口创建按钮

为了创建按钮，请复制预制布局上现有按钮之一的按钮模块。

然后通过促销代码文本模块下的按钮模块。

更新按钮文本和对齐方式如下：

• 按钮文本：在结帐时使用优惠券
• 按钮对齐方式：居中

不要忘记添加结帐页面的链接。 为此，您可以使用将动态页面链接作为按钮链接 URL 添加到现有结帐页面。

单击“X”图标时关闭弹出窗口的自定义代码

对于我们的最后一步，我们需要添加一个 CSS 和 jQuery 的快速片段以在单击“X”图标时关闭弹出窗口。

要添加代码，请在按钮下添加一个新的代码模块。

然后粘贴以下 CSS 确保将代码包装在必要的样式标签中。

.et-close-popup-icon:hover {
  cursor: pointer;
}

在包含 CSS 片段的最后一个样式标签下，粘贴以下 jQuery，确保使用必要的脚本标签包装代码。

(function ($) {
  $(document).ready(function () {
    $(".et-close-popup-icon").on("click", function() {
      $(".et-promo-popup").slideUp("slow");
    })
  });
})(jQuery);

最后结果

目前，促销弹出窗口将保持隐藏状态，直到您成功满足 Divi 在该部分的条件选项设置的两个条件。 这意味着您必须将产品添加到购物车，然后访问结帐页面。 之后，回到我们刚刚建立的登陆页面，你会在页面加载后 3 秒看到促销弹出窗口。

这是满足条件后访问页面时促销弹出窗口的样子。

这是手机上的弹出窗口。

这是用户在看到成功重新定位他们以完成结帐过程的促销之前所经历的过程示例。

最后的想法

Divi 的条件选项为以战略方式展示内容的大量机会打开了大门。 我们在本教程中构建的促销弹出窗口非常适合重新定位废弃的购物车。 但是还有很多方法可以微调条件以满足您自己的需求，或者构建一个全新的流程来重新定位废弃的购物车。 我很想听听你的想法！

我期待在评论中收到您的来信。

干杯!