如何将 Woo 通知模块添加到您的 Divi 产品页面模板
已发表: 2022-01-30确认和反馈是任何电子商务页面的重要元素。 用户想知道点击按钮购买产品后发生了什么。 他们还想要一种简单的方法来查看购物车中的物品。 Divi Woo 通知模块为您的 WooCommerce 产品页面提供了这些确切的功能。 在本文中，我们将了解如何为您的 Divi 产品页面设计和添加 Woo Notice 模块。 我们还将讨论您为什么需要一个以及添加它的最佳位置。
让我们开始吧。
预览
首先，让我们看看我们要构建什么。
桌面上的 Woo 通知模块
手机上的 Woo 通知模块
下载您的 WooCommerce 产品页面模板
首先，让我们为 Divi Theme Builder 获取 WooCommerce 产品页面模板。 您可以从头开始构建一个或从优雅主题博客下载一个。 在博客中搜索“产品页面模板”并下载压缩文件。 我正在为 Divi's Clothing Store Layout Pack 使用免费的产品页面模板。
接下来，解压缩文件。 要将其导入 Divi Theme Builder，请转到 WordPress 仪表板中的Divi > Theme Builder ，选择Portability ，单击Import选项卡，导航到并选择您的JSON 文件，然后单击Import Divi Theme Builder Templates 。 保存您的设置。 该文件会自动分配给所有产品页面。
- 迪维
- 主题生成器
- 可移植性
- 进口
- 选择您的文件
- 导入 Divi 主题生成器模板
- 节省
Woo 通知模块的作用
Woo Notice 模块做了两件重要的事情：
1 – 它向用户提供他们已成功将商品放入购物车的反馈。
2 – 它提供了一个购物车链接，他们可以在其中查看购物车中的商品。
Woo 通知模块具有 Woo 产品页面、购物车页面和结帐页面的选项。 第二个选项显示购物车状态和优惠券信息。 第三个显示了一个登录字段和一个优惠券字段。 我们将使用第一个选项——产品页面。
您可以让它显示当前产品、最新产品或您从列表中选择的任何产品。
与其他 Woo 模块不同，Woo Notice 模块仅在特定条件下显示在页面上。 仅当用户将产品添加到购物车时才可见。 此示例显示产品未添加到购物车时的产品页面。
将产品添加到购物车后，就会出现该模块。
添加 Woo 通知模块
与 Divi Builder 中的所有 Woo 模块一样，Woo 通知模块只有在您安装了 WooCommerce 时才是一个选项。 要添加模块，请单击灰色加号图标，搜索Woo Notice ，然后选择模块。 许多 Divi 产品页面模板都包含 Woo Notice 模块。
Woo 通知模块的放置位置
Woo Notice 模块的最佳位置是在页面顶部的面包屑下方。 这对用户来说会很突出，这是他们希望看到此类信息的位置。
我们可以在这个线框视图中看到，模块放置在产品信息的上方。
如何设计 Woo 通知模块的样式
我正在使用的模板已经具有模块样式。 如果您想添加自己的样式，我们将查看此样式，然后我们还将使用布局包中的设计队列以及 Clothing Store 布局包的页眉和页脚模板以不同的方式对其进行样式设置。 它包括一个在悬停时改变颜色的按钮。
首先，将背景设为白色。
- 背景：#ffffff
设计选项卡
选择Design选项卡并为 Title Font 选择Didact Gothic 。 将字体设为黑色并将行高设置为 2em。
- 标题字体：Didact Gothic
- 颜色：黑色
- 行高：2em
按钮样式
向下滚动到按钮并启用自定义样式。 将文本大小设置为 12 像素。 对于桌面选项，将文本颜色设置为白色，将背景设置为黑色。
- 使用按钮：是
- 文字大小：12px
- 文字颜色：#ffffff
- 背景颜色：#000000
选择悬停选项并将文本颜色设置为黑色，将背景颜色设置为#f8ded5。
- 悬停文本颜色：#000000
- 悬停背景颜色：#f8ded5
将边框宽度和半径设置为 0px，将字母间距设置为 3px，将字体粗细设置为粗体，并将字体样式设置为 TT。
- 边框宽度：0px
- 边框半径：0px
- 字母间距：3px
- 字体粗细：粗体
- 字体样式：TT
选择显示按钮图标，选择右箭头，然后选择仅在悬停时显示箭头。
- 显示按钮图标：是
- 图标：小右箭头
- 仅在悬停按钮上显示图标：是
接下来，我们需要添加一些Button Padding以在文本周围留出一些空间。 在顶部和底部添加 15px，在左侧和右侧添加 30px。 请注意，这不是模块的填充。 我们将在一分钟内添加它。
- 按钮内边距：15px（上、下）、30px（左、右）
向下滚动到间距。 在所有边添加 0em 边距，在所有边添加 15px 填充。 这些是默认设置。 关闭您的设置。
- 边距：0em（所有边）
- 填充：15px（所有边）
行设置
接下来，我们需要对Row 设置进行一些调整。 打开设置并选择设计选项卡。 选择使用自定义装订线宽度。 将装订线宽度设置为 1，将宽度设置为 94%。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：94%
最后，向下滚动到Spacing并在顶部添加 20px填充，在底部添加 10px。 关闭设置并保存您的工作。
- 内边距：顶部 20 像素，底部 10 像素
Woo 通知模块的另一种自定义样式
接下来，让我们从头开始添加和设置 Woo Notice 模块的样式。 对于这个，我们将删除原来的并添加我们自己的。 单击灰色加号图标，搜索Woo Notice ，并将其添加到 Woo Breadcrumbs 模块下的顶行。 为了设计这个，我们将使用布局中的想法。 我们将使用与原始 Row 相同的 Row，因此其设置与前面的示例相同。
在 Woo Notice 设置中，向下滚动到背景设置并选择渐变。 将第一种颜色设置为白色，将第二种颜色设置为#f8ded5。 渐变方向应设置为 90 度，开始和结束位置设置为 50%。 这将给它一个颜色设计，这是产品部分的镜子。
- 第一个渐变：#ffffff
- 第二梯度：#f8ded5
- 渐变方向：90度
- 起始位置：50%
- 结束位置：50%
设计选项卡
接下来，选择Design选项卡并为 Title Font 选择Didact Gothic 。 将字体设为黑色，桌面大小为 20px，手机大小为 15px，行高为 2em。
- 标题字体：Didact Gothic
- 颜色：#000000
- 文字大小：20px（手机为 15px）
- 行高：2em
按钮样式
向下滚动到按钮并选择使用自定义样式。 将桌面的文本大小设置为 12 像素，将手机的文本大小设置为 10 像素。 对于桌面选项，将文本颜色设置为黑色，将背景设置为#f7eee8。
- 为按钮使用自定义样式：是
- 文字大小：12px（手机为 10px）
- 文字颜色：#000000
- 背景颜色：#f7eee8
为背景颜色选择悬停选项并将其设置为#d8dad5。
- 悬停背景颜色：#d8dad5
边界
将边框宽度设置为 1 像素，半径设置为 30 像素，字母间距设置为 3 像素，字体粗细设置为粗体，字体样式设置为 TT。 将按钮图标设置保留为默认值。 这将在悬停时显示图标并包含默认的向右箭头。
- 边框宽度：1px
- 边框半径：30px
- 字母间距：3px
- 字体粗细：粗体
- 字体样式：TT
- 显示按钮图标：是
- 图标：小右箭头
- 仅在悬停按钮上显示图标：是
接下来，我们需要添加一些Button Padding来增加按钮文本周围的按钮大小。 在顶部和底部添加 15px，在左侧和右侧添加 30px。
- 按钮内边距：15px（上、下）、30px（左、右）
最后，向下滚动到Border 。 向所有边添加 40px。 这为我们提供了一个与布局设计相匹配的圆形模块。 关闭您的设置并保存您的工作。
- 圆角：40px（所有边）
结果
这是我们的 Woo Notice 模块在桌面和移动设备上的外观。
桌面上的 Woo 通知模块
手机上的 Woo 通知模块
结束的想法
这是我们对如何为您的 Divi 产品页面模板设置样式和添加 Woo 通知模块的看法。 该模块为用户添加了大量信息，用户希望看到这些信息。 这为他们提供了他们期望的反馈。 他们会立即知道产品已添加到他们的购物车中，并且他们将有一个简单的方法来查看他们的购物车。 该模块易于使用，应包含在每个 WooCommerce Divi 产品页面模板的顶部。
我们希望收到你的来信。 您是否在 Divi 产品页面模板中使用 Woo Notice 模块？ 让我们在评论中知道。