如何显示WooCommerce分类和子分类提升店铺导航体验

是否曾走进一家杂乱无章的商店，发现里面什么都没有？令人沮丧，对吧？网店也是如此。如果知识兔您的产品没有得到很好的组织，顾客甚至还没找到他们需要的东西就会离开。

WooCommerce 可以让您将产品分类到类别和子类别中，但要真正以用户友好的方式显示它们并不总是那么简单。这就是本指南的目的所在。

我将带您了解在 WooCommerce 中整齐显示分类的具体步骤，这样您的商店就可以轻松导航，顾客也可以轻松购物。

了解WooCommerce分类和子分类

WooCommerce 产品类别是根据产品的共同特征或功能对产品进行的广泛分组。例如，如果知识兔您经营一家服装店，您的产品类别可能包括男装、女装和童装。

每个产品类别可以包含多个子类别，这些子类别是一个类别中更具体的产品分组。

例如，在女装类别中，知识兔可以有上衣、下装、连衣裙和配饰等子类别。

在 WooCommerce 中使用类别和子类别可以创建一个更有条理、用户友好的商店，知识兔让客户更容易找到并购买他们想要的产品。

为什么要在WooCommerce中显示产品分类？

在 WooCommerce 中显示产品类别非常重要，原因有以下几点：

• 更方便导航：分类可帮助客户快速找到所需的产品，避免在无穷无尽的产品中滚动的麻烦。

• 更好地组织：将产品分门别类，知识兔可以保持商店整洁，方便用户，改善购物体验。

• 搜索引擎优化优势：使用相关的类别名称可以提高商店在搜索引擎中的可见度，吸引更多的有机流量。

• 定向营销：分类允许您突出显示特定产品，从而更容易推广销售或季节性商品。

• 加快购买速度：清晰的分类有助于客户更快地做出决定，从而提高销售额。

在WooCommerce中设置产品分类

在了解如何在店铺页面上显示类别和子类别之前，我们先来看看如何创建它们。

在创建商店时，您首先要创建主分类来定义广泛的产品组，然后知识兔添加子分类来进一步组织商品。

例如，如果知识兔您是卖鞋的，您可以创建一个名为“Shoes”的父类别，以及 Running Shoes 和 Formal Shoes 等子类别。

如何在WooCommerce中创建新的产品类别？

进入WordPress控制面板

导航至左侧菜单中的产品 → 类别。

填写类别详细信息

• • 名称：输入类别的描述性名称。例如：Shoes.
  • Slug（可选）：这是名称的 URL 友好版本。如果知识兔留空，WooCommerce 将自动生成一个。
  • 父类别：如果知识兔是主分类，则留空。如果知识兔是子类别，请从下拉菜单中选择父类别。
  • 描述（可选）：简要说明该类别的内容。
  • 显示类型：决定客户登陆该类别页面时产品的显示方式。选项包括
    • 默认– 遵循主题的默认布局。
    • 产品– 仅显示该类别中的产品。
    • 子类别– 显示子类别而不是单个产品。
    • 都显示 – 同时显示产品和子类别。
  • 缩略图：上传代表该类别的图片。这有助于客户直观地识别不同的产品部分。

保存类别

单击“添加新类别”，该类别将出现在右侧列表中。

新的“Shoes”类别就创建好了！

如何在WooCommerce中创建子类别？

如果知识兔您需要将产品组织成子类别（例如，在“Shoes”下，您想添加“Nike Shoes”或 “Adidas Shoes”），请按照以下步骤操作：

1. 进入WordPress 仪表板中的产品 → 类别。
2. 像之前一样添加一个新类别。
3. 在“父类别”下拉菜单中，知识兔选择该子类别所属的主类别。
4. 例如 如果知识兔要添加 “Nike Shoes”，请将“Shoes”设为父类别。
5. 根据需要填写其他详细信息（标题、描述、显示类型和缩略图）。
6. 单击 “添加新类别”，子类别将嵌套在父类别之下。

如何在WooCommerce中显示默认分类、子分类和产品？

好了，我们已经了解了如何为商店设置类别和子类别，知识兔让访客可以直接从主页浏览产品，或通过点击进入特定产品类别档案缩小搜索范围。

但如何在商店中显示这些类别呢？

主要有两种方法：

1. 简单方法：使用 WooCommerce 的内置设置（无需编码）。
2. 代码方法：使用自定义代码进行高级自定义。

让我们逐步探讨这两种方法。

简单方法： 使用WooCommerce CMS

默认情况下，WooCommerce 并不总是以最有条理的方式显示类别、子类别和产品。如果知识兔你想要一个简洁的结构，先显示类别，再显示子类别和产品，下面就是具体的操作方法–无需接触任何代码。

方法 1：使用WordPress定制器设置类别显示

如果知识兔你想让 WooCommerce 自动处理布局，WordPress 定制器是最简单的方法。您可以控制商店页面是否只显示类别、显示带子类别的类别或混合显示所有类别。

具体操作如下：

前往 WordPress 面板中的“外观”→“自定义”。

点击 WooCommerce →产品目录 。

在“商店页面显示”下，知识兔选择 “显示类别”（如果知识兔只想显示类别）或 “ 同时显示 ”（也包括产品）。我只选择“显示类别”。然后知识兔，在“类别显示”下，我会选择“显示子类别和产品”。

点击“发布”，您的商店页面将立即更新。

商店页面将只显示父类别，而不是杂乱无章的产品列表。当用户点击一个类别时，会看到其子类别和产品整齐地显示出来。

方法 2：使用WooCommerce简码手动排列类别

如果知识兔内置设置无法满足您的控制需求，那么简码可以让您按照自己的意愿手动构建商店页面。我写过一篇关于 WooCommerce 短代码的详细博文，如果知识兔你是新手，不妨看看。

总之，你可以使用这些简码：

显示所有父类别：

[product_categories]

显示特定类别（用实际类别编号替换 ID）：

[product_categories ids="10,15,22"]

显示特定类别的产品：

[products category="your-category-slug"]

要在商店页面上使用这些简码，请按照以下步骤操作：

• 在 WordPress 仪表板中打开页面 →商店页面。
• 将简码粘贴到您希望类别或产品出现的位置。我将以这个简码为例：[product_categories]

• 点击更新，然后知识兔刷新网站查看更改。
• 现在，商店页面将只显示类别。

点击一个类别将显示它下面的子类别和产品–这正是网上商店应该有的样子。例如，我可以看到我商店中的“Bras & Tanks”类别有一个子类别“Clothing”。

因此，如果知识兔我点击它，就会看到子类别和产品。就像这样：

方法 3：使用WooCommerce区块进行可视化布局

对于使用Gutenberg 区块编辑器的用户，WooCommerce 分享了一种无需短代码的拖放方式来排列类别和子类别。

使用 WooCommerce 区块设置类别：

打开“页面 ” → “商店页面”，然后知识兔点击“编辑”。

按下 +（添加区块） 按钮并搜索“Product Categories List”。

点击插入，然后知识兔调整设置：

• 在“显示样式”下，知识兔选择“列表”（堆叠显示所有类别）或 “下拉菜单”（可折叠菜单）。

• 启用“显示层次结构”，这样子类别就会显示在父类别之下。

• 根据您的偏好调整其他显示设置。

单击“更新”，刷新商店页面。

您的类别将整齐地显示出来，子类别将显示在子类别的下方。就像这样：

这样，客户就可以毫不费力地浏览您的商店，使您的商店更易于浏览。

如何在店铺的不同区域显示WooCommerce分类和子分类？

现在，知识兔让我们来看看如何在店铺的不同区域显示 WooCommerce 类别和子类别：

1. 在导航菜单中显示分类

在主导航菜单中放置类别有助于客户快速找到所需内容。

• 进入 WordPress 后台的外观 → 菜单。

• 创建一个新菜单。我将其命名为“New Test Menu”。

• 然后知识兔，知识兔点击左上角的“屏幕选项”，知识兔选择“产品类别”。

• 在左侧窗格中，会出现一个新标签，标题为“Product Categories”。单击它展开，知识兔选择你想要的类别，然后知识兔单击添加到菜单。

• 单击保存菜单应用更改。

现在，您的产品类别将显示在菜单中，方便客户找到他们想要的产品。

2. 在侧边栏显示分类

在侧边栏中添加类别可确保从任何页面都能看到它们，从而方便购物者进行导航。

1. 进入 WordPress 后台的外观 → 小工具。
2. 点击侧边栏的下拉菜单。

• 现在，添加一个新区块。

• 查找名为“Product Categories List”的小工具。

• 自定义设置。我会选择显示样式为下拉，因为我觉得这样更简洁。

• 现在，当我保存并查看更改后，我的侧边栏将显示所有类别。

3. 在页脚显示分类

将类别添加到页脚可确保每个页面都能访问这些类别，尤其是对于滚动到底部的用户。

下面介绍如何在页脚添加类别：

• 转到外观 → 小工具 。
• 将“产品类别”小工具拖到页脚小工具区域。

• 调整显示设置（例如，只显示父类别或包括子类别）。
• 单击“保存”，您的页脚就会变成这样。

代码方法：使用自定义代码

如果知识兔你想完全控制 WooCommerce 类别和子类别的显示方式，那么自定义代码就是你的不二选择。您无需依赖插件或主题设置，只需在网站上添加正确的代码段即可。下面是具体操作方法：

在产品前显示WooCommerce产品类别

默认情况下，WooCommerce 不会在产品之前显示产品类别。为了解决这个问题，我将添加一个函数，动态获取并显示类别。

首先，我要访问活动主题的 functions.php 文件。你可以通过 WordPress 仪表板进入外观 > 主题编辑器 ，或者使用 FileZilla 等 FTP 客户端进入 wp-content/themes/your-theme/ 。进入 functions.php 后，我将添加以下代码：

function woocommerce_product_category() {$woocommerce_category_id = get_queried_object_id();$args = array('parent' => $woocommerce_category_id);$terms = get_terms('product_cat', $args);if ($terms) {echo '
';foreach ($terms as $term) {echo '
';woocommerce_subcategory_thumbnail($term);echo '
' . $term->name . '
';echo '
';}echo '
';}}add_action('woocommerce_before_shop_loop', 'woocommerce_product_category', 100);

这段代码会抓取正在浏览的当前类别，获取其子类别，并在产品出现之前列出它们。WooCommerce 已内置缩略图支持，因此 woocommerce_subcategory_thumbnail($term); 函数将自动显示类别图片。

获取并显示特定类别的子类别

如果知识兔我想显示特定类别的子类别而不是当前类别，知识兔可以使用以下代码。当我想显示“electronics”或 “clothing”等类别的子类别时，这种方法就很有用：

function woocommerce_get_product_category_of_subcategories($category_slug) {$taxonomy = 'product_cat';$parent = get_term_by('slug', $category_slug, $taxonomy);$children_ids = get_term_children($parent->term_id, $taxonomy);$terms_html = array();foreach ($children_ids as $child_id) {$term = get_term($child_id, $taxonomy);$term_link = get_term_link($term, $taxonomy);if (!is_wp_error($term_link)) {$terms_html[] = '' . $term->name . '';}}return '' . implode(', ', $terms_html) . '';}

要显示“electronics”类别的子类别，我会在相关模板文件中这样调用：

echo woocommerce_get_product_category_of_subcategories('electronics');

在产品页面上显示类别说明

WooCommerce 不会自动在产品页面上显示分类描述。要添加这个功能，我需要修改 functions.php 文件。我将使用 FTP 客户端（或 WordPress 仪表板中的主题编辑器）打开文件并添加这段代码：

global $post;$terms = wp_get_post_terms($post->ID, 'product_cat');if (!empty($terms)) {foreach ($terms as $term) {echo '' . $term->description . '';}}

检索分配给当前产品的类别并显示其描述。

创建管理产品类别的自定义插件

与其修改 functions.php，我可以把它变成一个自定义插件。这样可以保持模块化，并确保即使知识兔在主题更新后功能也能保持不变。

• 我会通过 FTP 连接到网站（例如使用 FileZilla），然后知识兔转到 wp-content/plugins/.

• 然后知识兔，我将创建一个名为 wbolt-product-categories-in-archives 的文件夹。
• 在该文件夹中，我将创建一个名为 wbolt-product.php 的文件，并添加以下代码：

   $parentid);$terms = get_terms('product_cat', $args);if ($terms) {echo '
  ';foreach ($terms as $term) {echo '
  ';woocommerce_subcategory_thumbnail($term);echo '
  ' . $term->name . '
  ';echo '
  ';}echo '
  ';}}add_action('woocommerce_before_shop_loop', 'wbolt_product_subcategories', 50);

为类别显示添加自定义样式

由于分类需要一些样式，我将在插件中添加一个自定义 CSS 文件。

• 在插件文件夹（wbolt-product-categories-in-archives）中，我将创建一个 CSS 文件夹，并在其中创建一个名为 style.css 的文件。
• 我将添加这些 CSS 代码，以调整分类显示的样式：

  .product-cats {display: flex;flex-wrap: wrap;list-style: none;padding: 0;}.product-cats .category {margin: 10px;text-align: center;}.product-cats h2 {font-size: 16px;margin-top: 10px;}

• 为确保 CSS 已加载，我将返回 wbolt-product.php，并添加此函数来调用样式表：

  function wbolt_product_cats_css() {wp_enqueue_style('wbolt_product_cats_css', plugins_url('css/style.css', FILE));}add_action('wp_enqueue_scripts', 'wbolt_product_cats_css');

现在，当我从 WordPress 仪表盘激活这个插件时，它会自动在产品之前显示产品类别，并配有缩略图和指向类别页面的链接。

WooCommerce商店可能需要的其他产品类别操作

有时，您需要隐藏或排序产品类别。也许是因为重叠，也许是因为图片解释了类别，而您不需要显示标签。

不管是什么原因，知识兔让我们来探讨一下您的 WooCommerce 商店可能需要的其他一些与产品类别相关的操作。

如何在WooCommerce中隐藏产品类别

您可以通过两种方式在 WooCommerce 中隐藏产品类别：

• 通过插件
• 通过代码

让我们一起来探讨这两种方法。

如何在WooCommerce中隐藏产品类别（通过插件）

您可以使用名为 Hide Categories and Products for Woocommerce 的插件。这是一个付费工具，价格为 4.09 /月。安装插件后，您将在 WooCommerce 选项下看到它。

然后知识兔，您需要按照以下说明进行操作：

WooCommerce → Products Visibility → Global Visibility

然后知识兔，知识兔选择要隐藏的类别并保存更改。这样做将有助于您在 WooCommerce 中隐藏产品类别。

如何在WooCommerce中隐藏产品类别（通过代码）

您可以使用自定义代码来隐藏产品类别。下面是一个使用 get_term 过滤器隐藏产品类别的代码示例：

add_action( 'woocommerce_before_shop_loop', 'show_product_categories', 20 );function show_product_categories() {// Display product categoriesecho do_shortcode( '[product_categories]' );}

您也可以使用其他自定义方法来完成工作。具体修改取决于您的要求。

如何在WooCommerce中隐藏产品类别标题

您可以使用以下代码在 WooCommerce 中隐藏产品类别标题：

add_action( 'init', function() {remove_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title', has_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title' ) );} );

如何在WooCommerce中隐藏产品类别计数

您可以使用以下简码在 WooCommerce 中隐藏产品类别计数：

add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {return null;}, 10, 2 );

如何在WooCommerce中按类别排序

您可以使用以下简码按类别排序：

add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {return null;}, 10, 2 );

如何设置WooCommerce分类图片大小

以下是设置 WooCommerce 类别图片大小的方法：

• 进入“外观”，知识兔点击“自定义”。

• 点击面板中的 WooCommerce，然后知识兔选择 Product Images。

• 你会看到一些设置。选择你喜欢的设置，或点击“自定义”设置自定义尺寸。

就是这样。按照上述简单步骤，就能帮你设置 WooCommerce 类别图片大小。

组织WooCommerce产品类别的最佳实践

有效组织 WooCommerce 产品类别可以大大改善用户体验，提高店铺管理效率。以下是一些组织产品类别和子类别的最佳实践：

• 选择简单、具有描述性且易于理解的类别名称。
• 限制主分类的数量。
• 确保子类别与主类别相关且具体。
• 确保根据产品的特点和功能对产品进行一致的分类。
• 优化分类页面
• 定期检查商店的组织结构，并根据需要进行调整。
• 确保您的店铺设计响应迅速、移动友好。
• 启用面包屑功能，知识兔帮助用户在类别、子类别和产品页面之间轻松导航。

针对SEO优化WooCommerce产品类别的技巧

以下是一些针对搜索引擎优化优化 WooCommerce 产品类别的技巧：

• 进行关键词研究
• 优化类别和子类别名称
• 创建搜索引擎友好型 URL
• 为每个类别和子类别创建独特、关键字丰富的描述
• 使用标题标签（如 H1、H2、H3）来构建类别和子类别页面。
• 为类别和子类别使用高质量的图片，并对图片进行优化，以便快速加载。
• 添加内部链接
• 在类别和子类别页面中添加模式标记（结构化数据）。
• 使用搜索引擎优化插件，如 Yoast SEO 或 Rank Math，知识兔帮助您优化 WooCommerce 商店。

用户在显示产品类别时遇到的常见问题及其解决方案

用户在 WooCommerce 商店中显示产品类别时可能会遇到一些常见问题。本节将介绍这些问题及其解决方案。

问题 #1：菜单上不显示类别

有时，您已经确定了类别，但它们并没有出现在菜单上。您可以按照以下步骤解决这个问题：

解决方案

按照以下步骤操作：

• 进入 WordPress 面板中的“外观”>“菜单 ”。
• 点击右上角的“屏幕选项”选项卡，确保选中“产品类别”复选框。

• 现在，你可以在左侧栏看到产品类别。选择要添加到菜单的类别，然后知识兔点击“添加到菜单”。

• 这样就完成了。

问题 #2：不显示分类图片

有时您无法在 WooCommerce 商店中看到分类图片，但这很容易解决。

解决方法

首先，您必须确保为每个类别分配了图片。要做到这一点

• 转到产品 >类别。
• 点击类别名称下方的“编辑”。
• 向下滚动到“缩略图”部分，然后知识兔单击“上传/添加图片”设置类别图片。

• 保存更改。

问题 #3：类别显示顺序错误

有时，您会发现 WooCommerce 商店中的类别显示顺序不正确。

解决方法

您可以按照以下步骤手动设置产品类别的顺序：

• 转到产品 >类别。
• 使用拖放界面根据需要重新排列类别。

问题 #4：显示空类别

默认情况下，WooCommerce 会显示所有类别，包括空类别。

解决方法

要隐藏空类别，请在主题的 functions.php 文件中添加以下代码段：

add_filter( 'woocommerce_product_subcategories_args', 'hide_empty_categories' );function hide_empty_categories( $args ) {$args['hide_empty'] = 1;return $args;}

问题 #5：分类页面未被搜索引擎收录

有些用户可能会发现，他们的 WooCommerce 类别页面没有被搜索引擎收录。

解决方法

• 确保您的分类页面未在搜索引擎优化插件设置（如 Yoast SEO 或 Rank Math）中设置为 “noindex”。
• 此外，检查“设置”>“阅读 ”中的“搜索引擎可见性”设置，确保“阻止搜索引擎索引此网站”选项未被选中。

下载仅供下载体验和测试学习，不得商用和正当使用。

点击下载