如何自定义 WooCommerce 类别页面（插件和编码）

您想编辑您的类别页面吗？ 在本指南中，我们将向您展示使用和不使用插件自定义 WooCommerce 类别页面的不同方法。

类别页面通常是电子商务商店中最容易被忽视和最少定制的页面之一。 这是因为它通常充当产品和商店页面之间层次结构的桥梁。 但是，在一些实际场景中，用户依赖类别页面来浏览产品，因此对其进行编辑并充分利用它是有意义的。

在我们了解在 WooCommerce 中自定义类别页面的不同方法之前，让我们更好地了解这样做的好处。

为什么要编辑 WooCommerce 类别页面？

类别页面显示包含在该类别中的 WooCommerce 商店的所有产品。 尽管用户通常使用其他页面查找产品，但有时客户会发现从类别页面查找项目更容易。 例如，如果您不确定产品的名称但知道其类别，您可能会使用类别页面搜索产品。

最重要的是，如果您的客户受到类别页面的积极影响，他们可能会在您的网站上停留更长时间。 由于这些页面通常被忽略，如果您自定义它们，您将脱颖而出并改善客户体验。

好消息是 WooCommerce 允许您轻松自定义类别页面。 坏消息是 WooCommerce 提供的默认选项非常有限。 您只能编辑每个类别页面的名称、slug、父类别、描述文本、显示类型和缩略图。

您还可以使用主题定制器编辑其他元素，但如果您需要将类别页面提升到一个全新的水平，则需要其他内容。

这就是为什么在本指南中，我们将向您展示在 WooCommerce 中编辑类别页面并帮助您的客户更轻松地浏览您的网站的不同方法。

如何自定义 WooCommerce 类别页面

有多种方法可以在 WordPress 中轻松自定义您的 WooCommerce 类别页面：

1. 与迪维
2. 使用专用插件
3. 以编程方式（编码）

在本节中，我们将逐步介绍每种方法，以便您选择最适合您需求的方法。

注意：在开始之前，请确保您已正确设置 WooCommerce 并创建了所有必要的页面。

1. 使用 Divi 自定义 WooCommerce 类别页面

Divi是最受欢迎的 WordPress 主题之一，这是有充分理由的。 它具有许多功能，并且与 WooCommerce 完全兼容，这使其成为自定义类别页面的理想选择。

这个主题带有一个内置的拖放构建器，允许您创建自定义类别页面模板。 这样，您可以为类别页面创建模板，并将其用于您的 WooCommerce 商店中的所有页面。

Divi 如此易于使用的原因在于，您可以通过实时预览实时查看您使用构建器所做的所有更改。 Divi 还提供了各种模块，可以轻松地将许多元素添加到您的页面，帮助您在创建或编辑类别页面时节省大量时间。

1.1。 安装并激活 Divi

要开始使用 Divi，您需要先安装并激活它。 您可以从他们的官方网站下载 Divi zip 文件。

然后，转到您的 WordPress 仪表板并前往外观 > 主题>添加新的。

按上传主题并选择最近下载的 Divi .zip 文件上传到您的网站。 上传后，单击立即安装以安装主题并在安装完成后激活它。

激活 Divi 主题还将自动安装 Divi 构建器，它是我们将用于自定义类别页面的内置页面构建器。

1.2. 创建自定义类别页面模板

要开始创建自定义类别页面模板，您需要转到Divi > Theme Builder并按Add New Template 。

然后，勾选存档页面下的所有产品类别页面框，然后单击创建模板。

之后，在您刚刚添加的新模板上选择添加自定义正文。 由于我们正在使用 Divi 创建一个全新的模板，因此还要选择Build Custom Body选项。

您将在那里看到 3 个不同的选项：

• 从头开始构建您的模板
• 使用 Divi 库中的模板之一，并进一步使用它来自定义您的 WooCommerce 类别页面
• 克隆现有页面并将其用作所有产品类别页面的模板

您可以选择最适合您的任何选项。 对于本教程，我们将选择从头开始构建，因此我们点击开始构建按钮。

您将被重定向到类别页面布局，您将在其中使用 Divi Builder 创建模板。

要开始构建模板，您需要选择结构。 在New Row下，选择类别页面所需的行类型。 您可以添加多行和多列。 类别页面标题和正文至少需要 2 行，但如果要在类别页面正文上添加侧边栏，也可以有更多列。

选择行数和列数后，您将不得不添加 Divi 模块以进一步自定义类别页面布局。

1.3. 类别页眉

对于类别页面标题，您需要为类别页面添加页面标题和面包屑。

要添加帖子标题，请单击行中的“ + ”图标，在搜索栏中搜索帖子标题，然后选择它。

您将看到不同的帖子标题选项。 您可以添加元图像和特色图像，但我们不会在本教程中使用它们，因此我们将禁用元素部分下的显示元和显示特色图像选项。

值得注意的是，您无需在此处添加任何标题，因为它会在您预览网站时自动显示动态帖子标题。 此外，在“设计”选项卡中，您可以编辑标题的背景颜色和字体。

还有一些高级选项可以添加 CSS ID、类、自定义 CSS、滚动效果等。 完成所有必要的更改后，单击“勾号”图标以保存更改。

1.3.1 - 添加面包屑模块

您还需要一个面包屑模块​​以在类别页面中进行额外导航，因此再次单击“ + ”图标以添加新模块并搜索“ Woo Breadcrumb ”。

然后，在“内容”选项卡下的“产品”部分中选择“本产品”选项。 这将为您的客户希望看到的产品类别添加动态标题。

再次使用“设计”和“高级”选项卡进行必要的更改，最后单击“勾号”图标以保存更改。

1.4. 类别页面正文

完成标题编辑后，您可以转到类别页面正文。 如果您还没有添加行，请单击绿色的“ + ”图标并选择要添加的行类型。 之后，您需要在此处添加商店模块，因为它包含您商店的所有产品。

按行中的“ + ”图标并搜索Shop模块。

单击它后，您将能够在类别页面上为您的产品配置选项。

在“内容”选项卡中，您可以编辑类别页面的所有元素。 确保启用“使用当前页面”以显示客户在您的在线商店中选择的特定产品类别的产品。

现在您需要做的就是编辑页面的其他显示元素。 例如，您可以从此处添加每页显示的列数或产品数和分页数。 此外，您还可以从“设计”和“高级”选项卡中编辑产品和价格文本的字体等等。 完成所有必要的更改后，按“勾号”图标保存更改。

您可以使用 Divi Builder 添加更多行或自定义页脚区域，只需记住在完成所有操作后将页面模板正文保存在屏幕的右下角。

保存更改后，关闭 Divi Builder，您将被重定向到 Theme Builder 仪表板。 单击此处保存更改以将更改保存到您的模板。

现在，当您预览任何产品类别的类别页面时，您将能够看到您的所有更改。

2. 使用插件自定义 WooCommerce 类别页面

如果您不使用 Divi 并且不想替换当前主题，则编辑 WooCommerce 类别页面的最佳选择是使用专用的 WordPress 插件。

在本教程中，我们将使用类别编辑器插件，因为它是免费的、易于使用的，并且可以让您单击几下即可自定义类别页面。 该工具主要针对类别页面的描述区域，并为您提供了一个编辑器。 这样，您可以编辑产品类别的描述以在类别页面上显示它们。

要开始使用此插件，请在您的 WordPress 仪表板中转到Plugins > Add New 。 然后，搜索Category Editor ，单击Install Now，然后激活插件。

您也可以通过直接从 WordPress 存储库下载插件来手动安装它。 如果您想了解有关此过程的更多信息，可以查看我们的指南，了解如何手动安装插件。

激活类别编辑器后，转到产品 > 类别，然后在要自定义描述的类别上按编辑。

在这里，您将看到一个文本编辑器已添加到描述区域，您可以在其中更改文本字体、标题、列表和对齐方式。 此外，您可以添加类别图像并使用“文本”选项卡通过一些代码自定义类别描述。

完成所有必要的更改后，按更新并在类别页面上预览更改。

这就是您可以使用插件自定义 WooCommerce 类别页面的方式。 但是，如果您想要更多自定义选项并具有编码技能，您可以编写自己的解决方案。 让我们来看看如何做到这一点。

3. 以编程方式自定义 WooCommerce 类别页面

如果您不使用 Divi 并且不想安装任何第三方工具，那么编写自己的解决方案是一个很好的选择。 以编程方式编辑类别页面的主要优点是它为您提供了更大的灵活性。

即使您不是经验丰富的开发人员，WooCommerce 也为您提供了几个简码和简码属性来帮助您完成此过程。 如果您不熟悉短代码，请查看本指南以更好地了解如何使用它们。

使用这些简码，您可以在任何页面上显示产品类别：

• [ product_category ] – 显示特定的产品类别
• [ product_categories ] – 显示您商店的所有产品类别

您可以将它们与产品类别属性一起使用来修改它们显示产品类别的方式。 例如，如果要显示顶级产品类别并隐藏子类别，可以使用以下简码：

[ product_categories number="0" parent="0" ]

预览页面后，您将能够看到顶级类别。

此外，您还可以使用各种代码片段在 WooCommerce 中编辑您的类别页面。 最常见的示例之一是创建自定义类别。

在我们向您展示如何操作之前，请确保您备份您的 WordPress 网站并使用子主题。 我们将更改一些核心主题文件，因此如果出现问题，您可能会破坏您的网站。 这就是为什么始终建议您拥有可以恢复的备份版本以避免任何问题的原因。

创建自定义类别页面标题

要使用代码片段创建自定义类别页面标题，您需要转到外观 > 主题编辑器并将以下代码片段添加到子主题的functions.php文件中。

 add_filter( 'woocommerce_page_title', 'QL_customize_woocommerce_page_title', 10, 1 );
function QL_customize_woocommerce_page_title( $page_title) {
 // Custom title for the product category 't-shirts'
 if ( is_product_category('t-shirts') ) { $page_title = 'Something';
 }
 // Custom title for the product category 'hoodies'
 elseif ( is_product_category('hoodies') ) {
 $page_title = 'Something else'; }
 return $page_title;
}

有关该片段的更多信息，请查看此站点。

这样，您可以在类别页面上显示自定义标题而不是默认类别标题。

更改产品类别页面的背景

同样，您也可以使用代码片段更改产品类别页面的背景。 只需将以下代码片段再次粘贴到funtions.php文件中。

 if (is_product_category()){ add_action( 'wp_head' , function () { ?> <style> .woocommerce.post-type-archive-product { background-image:none !important; } .woocommerce.single-product { background-image:none !important; } </style> <?php }); }

代码检查元素是否为产品类别并更改背景颜色。 有关更多信息，请查看此网站。

这些只是几个示例，但您可以做的还有很多。 随意将此片段作为基础并添加您自己的自定义代码来自定义商店中的类别页面。

奖励：将快速视图添加到类别页面

自定义 WooCommerce 类别页面的另一个有趣选项是添加快速查看功能。 快速查看将允许您的客户在相应类别页面上查看产品详细信息，而无需打开实际的产品页面。 这将为购物者在浏览您的在线商店时提供更好的用户体验。

要向类别页面添加快速查看功能，我们将使用WooCommerce Direct Checkout插件。 它是 WooCommerce 的最佳结帐插件之一，具有大量功能，可帮助您提高转化率和销售额。

尽管这是一个免费增值插件，但要快速查看类别页面，您需要安装免费版本和高级计划之一。 因此，首先，前往此页面安装并激活 WooCommerce Direct Checkout。

安装并激活插件后，前往 WordPress 仪表板中的WooCommerce > Direct Checkout > Archives 。 通过从下拉列表中选择是激活添加快速查看按钮选项，然后保存更改。

如果您从前端检查您的网站，您会看到“立即购买/添加到购物车”按钮旁边出现了一个新按钮。 例如，对于那些使用 Storefront 主题的人来说，按钮看起来像这样。

当您单击快速查看按钮时，将打开一个弹出窗口，其中包含有关产品的所有最重要信息，例如标题、价格、描述等。 这样，客户可以直接将产品添加到他们的购物车，而无需打开产品页面。

您可以进一步自定义快速查看按钮和弹出窗口。 有关如何执行此操作的更多信息，请查看我们的指南，了解如何在 WooCommerce 中添加快速视图。

改进类别页面的建议

如前所述，类别页面的整体设计和界面对于发展您的在线商店非常重要。 这是一个非常有用的页面，您可以在购买之前比较同一类别中的不同产品。

精心设计的类别页面可以帮助您让客户在您的在线商店中停留更长时间。 他们在您的商店获得的体验越好，他们就越有可能购买并成为忠实客户。

为确保您充分利用您的类别页面并从竞争对手中脱颖而出，以下是一些将它们提升到新水平的建议。

1.添加大产品图片

说到网上购物，一张图片值一千个字。 购物者希望在访问产品页面之前看到他们感兴趣的产品的大而清晰的图像。

但是，这并不意味着您应该在类别页面中使用非常大的产品图片。 非常大的图像往往会更重并使您的网站变慢，因此在大图像和网站速度之间找到一个很好的平衡点。

例如，您可以使用图像大小为300-400 像素的 3 列类别页面。 这应该足以在中等大小的显示器或移动设备上显示所需的产品详细信息。

你可以在耐克的分类页面上看到一个很好的例子，它是最著名的运动服装品牌之一。 耐克使用足够清晰的大图片作为产品缩略图。

此外，请记住，如今在线购物已广泛在移动设备上进行。 确保在桌面和移动设备上测试您的类别页面，以便尺寸和设计适合每种屏幕尺寸。

2.使用有吸引力的标题图片

我们都知道第一印象很重要，在网上购物时更是如此。 当客户打开类别页面时，他们首先注意到的是页面的标题。 这就是为什么您应该确保为每个类别使用有吸引力的标题。

创建有吸引力的标题的最佳方法之一是添加标题图像。 请记住您网站的整体设计，并将标题图片与您在线商店的整体配色方案相匹配。

例如，您可以在 MAC Cosmetics 等许多面向时尚的在线商店中找到标题图片。

如您所见，MAC 使用了一种非常有创意的方式来显示标题图像。 类别标题图像由其图像组成，并且还将深色方案与标题菜单相匹配。

3.始终保持面包屑可见

面包屑是确保您的网站访问者位于正确位置的最有用的元素之一。 面包屑导航还可以帮助用户浏览您的网站，从而帮助他们更快地找到他们正在寻找的内容并改善他们的购物体验。

在浏览产品时，有时客户会点击不同的东西，可能会在您的商店中迷路。 通过让面包屑始终可见，用户可以立即看到他们所在的位置并轻松返回所需的类别。

一些网站更喜欢在侧边栏显示类别，但大多数在线商店使用导航路径，因为客户更容易回到他们之前的位置。

如果您已经按照上面的 Divi 教程进行操作，那么显示面包屑不会成为问题。 如果您使用不同的主题，请查看本指南以了解如何在每个页面上添加和显示面包屑。

4. 检查产品是否在正确的类别中

尽管这看起来很明显，但手动添加产品时可能会发生错误。 因此，这一点与其说是建议，不如说是提醒。

进行例行检查以确保所有产品都分配到正确的类别并且没有混淆。 您不需要每天都检查，但偶尔检查一次很重要。 您还可以检查产品、类别和描述的拼写错误。

产品或其类别的任何错误都可能影响访问者对您网站的印象。 如果您在浏览网上商店并在笔记本电脑类别中发现一些牛仔裤，您会怎么想？ 不时进行检查不会花费太多时间，并且会帮助您保持一切井井有条。

如果您想进一步改善您的电子商务商店，请查看我们的 WooCommerce 提示以优化您的在线商店。

结论

总而言之，您的类别页面在您的商店中起着重要作用。 为了从竞争对手中脱颖而出，您应该自定义您的 WooCommerce 类别页面并充分利用它。 同样，您还可以编辑您的商店、产品、我的帐户和结帐页面，以便在您访问时改造您的整个商店。

最后，我们讨论了编辑类别页面的不同方法：

• 与迪维
• 使用专用插件
• 以编程方式

我们希望本指南对您有用，您可以轻松地编辑您的类别页面。 此外，我们还为您提供了额外提示，可在您的类别页面上添加产品快速视图。

最后，我们还看到了一些建议，以改进您的类别页面并使用更好的图像提高您的转化率，并使面包屑始终可见。

如果本教程有用，我们建议您也看看以下教程：

• 如何在 WooCommerce 中隐藏和删除“添加到购物车”按钮
• 自定义 WooCommerce 购物车页面
• 如何向 WooCommerce 结帐添加费用