是否曾走进一家杂乱无章的商店，发现里面什么都没有？令人沮丧，对吧？网店也是如此。如果您的产品没有得到很好的组织，顾客甚至还没找到他们需要的东西就会离开。
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”），请按照以下步骤操作：
- 进入WordPress 仪表板中的产品 → 类别。
- 像之前一样添加一个新类别。
- 在“父类别”下拉菜单中，选择该子类别所属的主类别。
- 例如 如果要添加 “Nike Shoes”，请将“Shoes”设为父类别。
- 根据需要填写其他详细信息（标题、描述、显示类型和缩略图）。
- 单击 “添加新类别”，子类别将嵌套在父类别之下。
如何在WooCommerce中显示默认分类、子分类和产品？
好了，我们已经了解了如何为商店设置类别和子类别，让访客可以直接从主页浏览产品，或通过点击进入特定产品类别档案缩小搜索范围。
但如何在商店中显示这些类别呢？
主要有两种方法：
- 简单方法：使用 WooCommerce 的内置设置（无需编码）。
- 代码方法：使用自定义代码进行高级自定义。
让我们逐步探讨这两种方法。
简单方法： 使用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]
![[product_categories]](https://static.wbolt.com/wp-content/uploads/2025/03/image3-577.png!o "[product_categories]")
- 点击更新，然后刷新网站查看更改。
- 现在，商店页面将只显示类别。
点击一个类别将显示它下面的子类别和产品–这正是网上商店应该有的样子。例如，我可以看到我商店中的“Bras & Tanks”类别有一个子类别“Clothing”。
因此，如果我点击它，就会看到子类别和产品。就像这样：
方法 3：使用WooCommerce区块进行可视化布局
对于使用Gutenberg 区块编辑器的用户，WooCommerce 提供了一种无需短代码的拖放方式来排列类别和子类别。
使用 WooCommerce 区块设置类别：
打开“页面 ” → “商店页面”，然后点击“编辑”。
按下 +（添加区块） 按钮并搜索“Product Categories List”。
点击插入，然后调整设置：
- 在“显示样式”下，选择“列表”（堆叠显示所有类别）或 “下拉菜单”（可折叠菜单）。
- 启用“显示层次结构”，这样子类别就会显示在父类别之下。
- 根据您的偏好调整其他显示设置。
单击“更新”，刷新商店页面。
您的类别将整齐地显示出来，子类别将显示在子类别的下方。就像这样：
这样，客户就可以毫不费力地浏览您的商店，使您的商店更易于浏览。
如何在店铺的不同区域显示WooCommerce分类和子分类？
现在，让我们来看看如何在店铺的不同区域显示 WooCommerce 类别和子类别：
1. 在导航菜单中显示分类
在主导航菜单中放置类别有助于客户快速找到所需内容。
- 进入 WordPress 后台的外观 → 菜单。
- 创建一个新菜单。我将其命名为“New Test Menu”。
- 然后，点击左上角的“屏幕选项”，选择“产品类别”。
- 在左侧窗格中，会出现一个新标签，标题为“Product Categories”。单击它展开，选择你想要的类别，然后单击添加到菜单。
- 单击保存菜单应用更改。
现在，您的产品类别将显示在菜单中，方便客户找到他们想要的产品。
2. 在侧边栏显示分类
在侧边栏中添加类别可确保从任何页面都能看到它们，从而方便购物者进行导航。
- 进入 WordPress 后台的外观 → 小工具。
- 点击侧边栏的下拉菜单。
- 现在，添加一个新区块。
- 查找名为“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 '<ul class="woocommerce-categories">';
foreach ($terms as $term) {
echo '<li class="woocommerce-product-category-page">';
woocommerce_subcategory_thumbnail($term);
echo '<h2><a href="' . esc_url(get_term_link($term)) . '">' . $term->name . '</a></h2>';
echo '</li>';
}
echo '</ul>';
}
}
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[] = '<a href="' . esc_url($term_link) . '" class="' . $term->slug . '">' . $term->name . '</a>';
}
}
return '<span class="subcategories-' . $category_slug . '">' . implode(', ', $terms_html) . '</span>';
}
要显示“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 '<div class="woocommerce-get-product-category">' . $term->description . '</div>';
}
}
检索分配给当前产品的类别并显示其描述。
创建管理产品类别的自定义插件
与其修改 functions.php，我可以把它变成一个自定义插件。这样可以保持模块化，并确保即使在主题更新后功能也能保持不变。
- 我会通过 FTP 连接到网站（例如使用 FileZilla），然后转到 wp-content/plugins/.
- 然后，我将创建一个名为 wbolt-product-categories-in-archives 的文件夹。
- 在该文件夹中，我将创建一个名为 wbolt-product.php 的文件，并添加以下代码：
<?php /** * Plugin Name: WooCommerce Product Category * Description: Displays WooCommerce categories on product pages. * Version: 1.0 * Author: Your Name **/ function wbolt_product_subcategories() { $parentid = get_queried_object_id(); $args = array('parent' => $parentid); $terms = get_terms('product_cat', $args); if ($terms) { echo '<ul class="product-cats">'; foreach ($terms as $term) { echo '<li class="category">'; woocommerce_subcategory_thumbnail($term); echo '<h2><a href="' . esc_url(get_term_link($term)) . '">' . $term->name . '</a></h2>'; echo '</li>'; } echo '</ul>'; } } 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 categories
echo 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”。
- 此外，检查“设置”>“阅读 ”中的“搜索引擎可见性”设置，确保“阻止搜索引擎索引此网站”选项未被选中。
小结
在 WooCommerce 商店中显示类别和子类别对于为客户提供清晰有序的购物体验至关重要。通过对产品进行分类，您可以让客户更容易找到他们正在寻找的产品，并鼓励他们探索相关产品。
在本教程中，您已经了解了如何创建一个插件，从产品列表中独立输出产品类别或子类别。
通过实施这些方法，您可以增强 WooCommerce 商店的可用性和功能，从而提高客户满意度和销售额。
常见问题
Q. 如何在WooCommerce中显示产品分类？
要在 WooCommerce 中显示产品类别，您可以
- 转到外观 > 自定义
- 导航至 WooCommerce > 产品目录
- 选择在商店页面显示类别
- 单击保存更改
Q. 如何查找 WooCommerce 中的产品类别 ID？
以下是查找 WooCommerce 产品类别 ID 的方法：
- 进入 WooCommerce 控制面板 → 产品 → 类别
- 将鼠标悬停在[类别名称]上 → 点击[类别名称]或在出现时点击编辑
- 找到 URL。例如，tag_ID=16，其中 16 是类别的 ID。
Q. 什么是WooCommerce产品属性？
产品属性是一项附加功能，允许您添加产品尺寸、颜色等。要将产品与其属性关联起来，您必须进入产品页面并创建产品变体。
Q. 如何在 WooCommerce 中添加产品？
请按照以下步骤在 WooCommerce 中添加产品：
- 进入 WooCommerce 面板。
- 点击产品 → 添加新产品。
- 添加产品详细信息，如产品标题、描述、价格、图片等。
Q. 什么是WooCommerce中的简单产品？
简单产品只有一个 SKU，没有变化或其他专属功能。例如，空白服装。
Q. 什么是WooCommerce中的可变产品？
在可变产品中，您有多个变体/选项，每个变体/选项可能有不同的 SKU 或价格。例如，一把椅子有多种颜色和尺寸可供选择。
Q. 如何在WooCommerce中创建可变产品？
请按照以下步骤在 WooCommerce 中创建可变产品：
- 转到 WooCommerce → 产品。
- 选择添加产品按钮或编辑现有产品。
- 显示“产品数据”。
- 从产品数据下拉菜单中选择变量产品。
Q. 什么是 WooCommerce 中的 SKU？
SKU 是一个唯一标识符，您可以根据信息系统使用的 “Part number” 或 “Product ID” 名称找到它。
Q. 如何更改WooCommerce中产品的价格？
以下是在 WooCommerce 中更改产品价格的方法：
- 转到“产品”选项卡。
- 选择您要编辑的产品。
- 然后转到产品数据面板，选择常规选项卡。
- 用数字更新正常价格字段或销售价格字段。
Q. 如何显示 WooCommerce 中的所有产品？
请按照以下步骤显示 WooCommerce 商店中的所有产品：
- 转到 WooCommerce →设置
- 单击“产品”选项卡，然后选择“显示”选项。
- 在“商店页面显示” 和“默认分类” 显示选项中选择“显示产品”。
- 保存更改。
Q. 如何在WooCommerce中显示类别说明？
要在 WooCommerce 中显示类别描述，请按照以下步骤操作：
- 进入 WordPress 面板并导航至产品 > 类别。
- 选择要添加或编辑描述的类别。
- 在描述框中添加所需的内容。
- 单击“更新”保存更改。
- 默认情况下，WooCommerce 会在类别档案页面上显示类别描述。如果看不到，请检查您的主题设置或使用 PHP 自定义主题文件，以确保描述包含在布局中。
Q. 如何在WordPress中显示类别？
要在 WordPress 中显示分类，可以使用以下方法：
- 进入 WordPress 面板。
- 导航至外观 > 小工具。
- 将“类别”小部件拖动到所需的小部件区域（如侧边栏）。
- 配置部件设置，例如显示为下拉或显示帖子计数，然后保存更改。
Q. 如何在WooCommerce中添加分类Banner？
要在 WooCommerce 中添加分类 banner 广告，请按以下步骤：
- 进入 WordPress 仪表板中的“产品”>“类别”。
- 选择您要编辑的类别。
- 在缩略图部分上传图片。
评论留言