类别页面是任何电子商务网站的重要组成部分。 客户浏览产品类别以找到他们需要的东西。 这就是为什么您的类别页面需要看起来和您的产品页面一样好。 使用 Divi 的 Theme Builder，创建类别页面模板比以往任何时候都容易。 在本教程中，我们将向您展示如何逐步创建类别页面模板并使用 Divi 的内置选项对其进行样式设置。 此外，我们将向您展示如何在 Themify WooCommerce 产品过滤器插件的帮助下使其可过滤。
并排打开两个浏览器选项卡。 将第一个选项卡用于主题构建器，将第二个选项卡用于类别页面的实时预览。 以这种方式工作以查看进度。 为了您的方便，我们还添加了模板作为免费下载。
让我们开始吧！
预览
在我们开始重新创建模板之前，让我们看一下类别页面模板在不同屏幕尺寸上的样子。
桌面
移动的
免费下载 Woo 类别页面模板
要使用免费的 Woo 类别页面模板，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
1.更新您的产品和类别
在构建模板之前，请确保您的产品按正确的类别进行组织。 检查它们是否也被正确标记。 这些在设置产品过滤器插件时很重要。
2.设置插件
下载并安装
下载 WooCommerce 产品过滤器。 导航到您的插件仪表板并上传插件的 .zip 文件以进行安装。 或者，在目录中搜索插件。 该插件将在您的仪表板菜单中添加一个新选项卡。 确保您也激活了插件。
添加新的过滤器表单
单击仪表板中的插件选项卡。 在插件设置中，单击按钮以添加新的过滤器表单。
设置过滤器表单
要使您的可过滤侧边栏看起来与本文预览中的完全一样，请使用下面提到的设置。 之后您可以随时调整这些设置。
- 布局：垂直
- 空字段：如果为空，则不显示字段
- 产品排序：隐藏产品排序
- 分页选项：无限滚动
- 重置按钮：无重置按钮
- 分类法之间的逻辑关系：AND
- 结果页面模板：在同一页面上显示结果
创建类别字段
在主区域下方的菜单栏中，您将看到一系列选项卡。 将“类别”选项卡拖放到其下方的构建器中。 然后调整设置如下：
- 字段标题：类别
- 包括儿童：是
- 显示为：复选框
- 逻辑：或
- 顺序：名称，降序
- 布局：水平，2列
创建标签字段
现在将“标签”选项卡拖放到构建器中。 确保它位于“类别”选项卡下方。 调整设置如下：
- 字段标题：类型
- 显示为：复选框
- 顺序：名称，降序
- 布局：水平，2列
- 颜色图标
- 背景：透明
- 文字颜色：深棕色#44000d
单击保存以生成简码
保存您的工作并关闭构建器。 您将在插件的主菜单中看到简码。 复制它，你以后需要它。
3.在主题生成器中重新创建产品类别页面模板
打开主题生成器/添加新模板
是时候开始重新创建模板了！ 打开您的主题生成器并添加一个新模板。
设置模板设置
在模板设置中，选择“特定产品类别页面”。 单击要将此模板分配到的类别。 我们将选择手工皮具。
添加自定义正文
然后，单击“添加自定义正文”。
选择构建自定义主体
我们将从头开始重新创建此模板，因此请继续选择“构建自定义主体”。
从头开始构建
进入可视化构建器后，再次选择从头开始构建的选项。
第 1 节 设置
背景
进入模板编辑器后，您会注意到一个部分。 打开该部分并添加背景颜色。
- 背景颜色：透明蓝灰色 – rgba(68,66,109,0.02)
添加行
立柱结构
现在添加一个具有以下列结构的新行：
浆纱
接下来调整行的大小设置。
- 天沟宽度：1
- 宽度
- 桌面：90%
- 平板电脑和手机：85%
- 最大宽度：1920px
间距
然后，在不同的屏幕尺寸上应用一些不同的间距值。
- 左边距和右边距
- 桌面：自动
- 平板电脑：55px
- 电话：30 像素
- 上边距：100px
将帖子标题模块添加到第一列
元素
是时候添加模块了，从第 1 列中的帖子标题模块开始。仅启用标题。
背景
接下来添加背景颜色。
标题文字
移至设计选项卡并设置标题文本的样式。
- 职称等级：H1
- 字体： Josefin Sans
- 重量：粗体
- 款式：TT
- 颜色：#44000d
- 尺寸
- 桌面：32px
- 平板电脑：28px
- 电话：30 像素
- 行高：1.2 em
间距
也调整间距。
- 顶部填充
- 台式机和平板电脑：100px
- 底部填充：80px
- 左填充
- 右填充
- 台式机和平板电脑：30px
- 电话：10像素
边界
给模块一些圆角。
- 圆角：15px 所有四个
盒子阴影
并添加一个微妙的盒子阴影。
- 盒子阴影：第二个选项
- 水平位置：12px
- 垂直位置：12px
- 模糊强度：20px
- 传播强度：-5px
- 阴影颜色：#dddddd
将文本模块添加到第一列
内容
在前一个模块的正下方添加一个文本模块。 在内容框中，添加您从插件复制的简码。
背景
接下来添加背景颜色。
文本
设置文本样式。
- 字体： Josefin Sans
- 颜色：#44000d
- 尺寸
- 桌面：20px
- 平板电脑：18px
- 电话：16像素
- 间距：1px
间距
调整间距设置。
- 上边距：50px
- 顶部和底部填充：40px
- 左右内边距：30px
边界
然后，添加一些圆角。
- 圆角：15px 所有四个
盒子阴影
并通过添加一个微妙的盒子阴影来完成模块设置。
- 盒子阴影：第二个选项
- 水平位置：12px
- 垂直位置：12px
- 模糊强度：20px
- 传播强度：-5px
- 阴影颜色：#dddddd
将商店模块添加到第二列
内容
进入下一栏！ 添加商店模块并调整主要设置如下：
- 产品查看类型：默认
- 使用当前页面：是
- 列布局：3列
图片
转到设计选项卡并相应地设置图像样式：
- 图像圆角：15px 所有四个
- 图像框阴影：第二个选项
- 水平位置：6px
- 垂直位置：6px
- 模糊强度：18px
- 阴影颜色：#dddddd
标题文字
接下来为标题文本设置样式。
- 字体： Josefin Sans
- 重量：半粗体
- 对齐方式：右
- 颜色：#44000d
- 尺寸
- 桌面：26px
- 平板电脑：24 像素
- 电话：17px
- 间距：2px
价格文本
不要忘记设置价格文本的样式。
- 字体： Josefin Sans
- 对齐方式：右
- 颜色：#44000d
- 尺寸：15 像素
- 字母间距：2px
- 行高：46px
间距
也调整间距设置。
- 顶部填充
- 左填充
- 桌面：50px
- 平板电脑和手机：0px
自定义 CSS
最后但同样重要的是，在高级选项卡中添加自定义的两行 CSS 代码，以在 shop 模块中的不同元素之间生成一些空间。 就是这样！
- 图片：padding-bottom：20px
- 价格：padding-bottom：40px
padding-bottom: 20px;
padding-bottom: 40px;
预览
我们已完成重新创建 WooCommerce 产品类别页面模板。 让我们再看看不同屏幕尺寸上的成品设计。
桌面
移动的
最后的想法
此产品类别页面模板可应用于您的 WooCommerce 商店中的所有类别和标签。 在产品过滤器插件的帮助下，您可以添加适合您自己的商店和产品的过滤器设置。 您可以使用任何 Divi woo 模块以任何方式个性化您的商店。 我们希望这个模板能帮助您为您的设计添加个性化的外观。 如果您有任何问题或建议，请在评论中告诉我们！