How to Display Categories and Subcategories in WooCommerce

保持电商网站的产品整洁分类，合理组织产品可以让客户更轻松地找到他们需要的商品。然而，对于有大量产品分类的大型电商网站来说，会麻烦点。

但是，可以通过 创建分类和子分类 来整齐地排列产品，从而提高客户的购物体验，让他们更方便地浏览商店。这一点不能忽略。

在文章中，我们会 一步步指导 如何在 WooCommerce 商店中 显示产品分类和子分类，帮助你们的网站提升用户体验。

whether WooCommerce 新手 nevertheless 电商老手，这些技巧都有所帮助。

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

在 WooCommerce 商店中显示产品分类有下面几个重要原因：

• 方便导航：清晰的分类可以让顾客快速找到他们需要的产品，提升购物体验。
• 更好的产品组织：合理分类能使商店布局更加整洁，提高用户的浏览效率。
• raise SEO rankings：在分类名称中用相关关键词，有助于网站在搜索引擎结果页面（SERP）中获得更好的排名。
• 有助于营销推广：展示产品分类方便顾客，还能帮助商家更好地推广特定产品或活动，提高转化率。

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

在设置 WooCommerce 商店时，通常会选择 “显示分类/子分类和产品” 选项，方便访客可以直接从首页选择产品，或者通过点击产品分类页面来筛选商品。

在 WooCommerce 商店中显示分类的方法

Go to WooCommerce Settings

• leave for WooCommerce → Settings

选择产品选项

• strike (on the keyboard) offerings 选项卡

调整显示设置

• option demonstrate options (as in computer software settings)
• exist 商店页面显示 respond in singing 默认分类显示 选项中，选择 同时显示分类和产品（Show both）

Save Changes

• strike (on the keyboard) Save Changes 按钮，应用新的设置

caveat

If required 自定义显示 WooCommerce 分类，可以用代码修改 functions.php 文件（位于主题文件夹中）。要在编辑前 Backup Sites，防止发生意外。

如何在 WooCommerce 中显示产品分类

WooCommerce 提供了 woocommerce_product_category() 函数，它可以在输出产品之前显示 分类或子分类。这个函数是可插入的（pluggable），意味着可以在主题中 重写 以自定义显示效果。

Steps:

• show (a ticket) functions.php file（位于主题文件夹中）。
• 插入下面代码，用于在商店页面展示产品分类：

function woocommerce_get_product_category_of_subcategories( $category_slug ){
  $terms_html = array();
  $taxonomy = 'product_cat';
  
  $parent = get_term_by( 'slug', $category_slug, $taxonomy );
  
  $children_ids = get_term_children( $parent->term_id, $taxonomy );
 
    
  foreach($children_ids as $children_id){
        $term = get_term( $children_id, $taxonomy ); 
        $term_link = get_term_link( $term, $taxonomy ); 
        if ( is_wp_error( $term_link ) ) $term_link = '';
    
        $terms_html[] = '<a href="/en/' . esc_url( $term_link ) . '/" rel="tag" class="' . $term->slug . '">' . $term-&gt;name . '</a>';
  }
  return '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>';
}

代码解析：

• get_queried_object_id()：获取当前查询的分类 ID。
• get_terms( 'product_cat', $args )：获取该分类下的子分类。
• woocommerce_subcategory_thumbnail( $term )：显示分类缩略图。
• get_term_link( $term )：获取分类链接，并在前端显示。
• add_action( 'woocommerce_before_shop_loop', 'woocommerce_product_category', 100 );：将该函数挂载到 WooCommerce 商店页面的产品列表循环前，确保分类优先显示。

Effect:

代码会在 store page 显示产品分类，让用户可以先浏览分类，再选择具体产品，提高导航体验。

如何列出 WooCommerce 产品分类的子分类

可以用自定义函数，通过 父级产品分类的 slug 来获取 WooCommerce 的子分类，并以超链接形式展示出来。

Operational Steps:

1. show (a ticket) functions.php file（位于当前主题的文件夹中）。
2. 插入下面代码，用于获取某个分类下的子分类列表：

function woocommerce_get_product_category_of_subcategories( $category_slug ){
  $terms_html = array();
  $taxonomy = 'product_cat';
  
  $parent = get_term_by( 'slug', $category_slug, $taxonomy );
  
  $children_ids = get_term_children( $parent->term_id, $taxonomy );
 
    
  foreach($children_ids as $children_id){
        $term = get_term( $children_id, $taxonomy ); 
        $term_link = get_term_link( $term, $taxonomy ); 
        if ( is_wp_error( $term_link ) ) $term_link = '';
    
        $terms_html[] = '<a href="/en/' . esc_url( $term_link ) . '/" rel="tag" class="' . $term->slug . '">' . $term-&gt;name . '</a>';
  }
  return '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>';
}

代码解析：

• get_term_by( 'slug', $category_slug, $taxonomy )：获取指定分类的对象。
• get_term_children( $parent->term_id, $taxonomy )：获取该分类下的所有子分类 ID。
• 遍历 $children_ids::
  • 获取子分类的 term 对象。
  • 获取分类链接 get_term_link( $term, $taxonomy )The
  • 生成 <a> 超链接，展示子分类名称。
• 返回 HTML 代码，将所有子分类用逗号分隔显示出来。

Effect:

这段代码可以用于在 WooCommerce 商店页面 动态显示某个产品分类的子分类，方便用户浏览和筛选产品。

如何显示 WooCommerce 分类描述

可以在 WooCommerce 产品详情页的模板文件 中添加代码，以显示产品所属分类的描述信息。

Code Description:

1. pass (a bill or inspection etc) wp_get_post_terms() 获取当前产品的 分类信息The
2. 遍历分类数组，获取并输出分类的 描述内容The

Code Example:

global $post;
$args = array( 'taxonomy' => 'product_cat',);
$terms = wp_get_post_terms($post->ID,'product_cat', $args);
 
$count = count($terms);
if ($count > 0) {
 
  foreach ($terms as $term) {
        echo '<div class="woocommerce-get-product-category">';
        echo $term->description;
        echo '</div>';
 
  }
 
}

Effect:

这段代码将在 Product Detail Page 显示该产品所属分类的 描述信息，方便用户了解该分类的详细内容。

如何创建自定义插件来显示 WooCommerce 产品分类

在 WooCommerce 中，通常可以通过在 functions.php 文件中添加代码来显示产品分类和子分类。如果不想修改 functions.phpThe

解决方案：创建自定义插件

将功能封装到插件中，可以 避免修改主题文件，还可以 随时启用或禁用该功能，更加灵活。

步骤 1：创建插件文件夹

go into wp-content/plugins 目录，在其中创建一个新文件夹，例如：
361sale-products-categories-in-archives

步骤 2：创建插件文件

• 在刚创建的文件夹中，新建一个 PHP 文件，命名为：361sale-product.php
• 打开该文件，并添加插件基本信息：

<?php
/**
 * Plugin Name: WooCommerce Product Category 
 * Description: Display WooCommerce categories on WooCommerce product pages
**/

步骤 3：添加分类显示功能

在插件文件中添加下面代码，用于获取并显示产品分类和子分类：

function 361sale_product_subcategories( $args = array() ) {
 
    }
add_action( 'woocommerce_before_shop_loop', '361sale_product_subcategories', 50 );

现在在函数中添加下面代码片段：

$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>';
                    echo '<a href="/en/' .  esc_url( get_term_link( $term ) ) . '/" class="' . $term->slug . '">';
                        echo $term->name;
                    echo '</a>';
                echo '</h2>';
                                                                     
            echo '</li>';
                                                                     
 
    }
     
    echo '</ul>';
 
}

上面代码首先获取当前查询的对象，并将其 ID 定义为 $parentidThe

然后，它用 get_terms() 函数查找当前分类下的 subcategoryThe

对于每个子分类，该代码会：

• expense or outlay woocommerce_subcategory_thumbnail() 显示分类缩略图
• 在分类名称外添加超链接，指向该分类的 Archive Page

创建插件样式文件

1. 在插件文件夹中创建 css catalogs
2. exist css 目录下创建 style.css file
3. 插件主文件命名为 cloudways-product.php
4. 在插件文件中添加下面代码来加载 CSS 文件::

function 361sale_product_cats_css() {
 
 
    wp_register_style( '361sale_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );
 
 
    wp_enqueue_style( '361sale_product_cats_css' );
 
}
 
add_action( 'wp_enqueue_scripts', '361sale_product_cats_css' );

这样，插件就能正确加载 style.css，用于自定义子分类的显示样式。

如何在 WooCommerce 商店页面显示产品分类

在 WooCommerce 商店页面显示产品分类非常简单，按照下面步骤操作即可：

• Go to the WordPress backend，悬停在 外观（Appearance） 按钮上。
• 点击“自定义（Customize）” Options.

• 向下滚动Find WooCommerce > 产品目录（Product Catalog）The

• 找到“商店页面显示”（Shop Page Display）设置，点击下拉菜单，选择 “显示分类”（Show Categories）。

• Save Changes，商店页面现在会显示产品分类。

这样，就能轻松在 WooCommerce 商店页面展示 Product Classification，优化用户浏览体验。

In addition, the a side-bar (in software) respond in singing menu 来显示产品分类，后面可以进一步了解这些方法。

如何在侧边栏显示产品分类

exist a side-bar (in software) 显示产品分类是一个很好的优化策略，它可以让顾客在浏览商店时 始终看到可选的分类，方便他们进一步探索产品。

Setting method

• Go to the WordPress backendGo to 外观 > 小工具（Widgets）The
• locatea side-bar (in software)（Sidebar）并点击下拉菜单。

• 查找“产品分类（Product Categories）”小工具The
• 拖动该小工具到侧边栏区域，然后进行自定义设置。
• 可以添加其他小工具，例如价格筛选、分类筛选等，增强侧边栏的功能性。

这样，在 WooCommerce 侧边栏显示产品分类后，顾客可以 更方便地浏览不同分类的商品，提升购物体验。

如何在菜单中显示 WooCommerce 产品分类

在菜单中显示 Product Classification 是一种直观的方式，能够让顾客快速了解商店销售的商品类别。

Setting method

• Go to the WordPress backendGo to 外观 > 菜单（Menus）The

• 点击左上角的“屏幕选项”（Screen Options），然后勾选 “产品分类”（Product Categories）The

• 在左侧面板中，会出现“产品分类”选项，点击展开，即可看到商店中的所有分类。
• 选择要添加到菜单的分类and then click “添加到菜单”（Add to Menu） Button.

• 点击“保存菜单”（Save Menu） 按钮，完成设置。

这样，WooCommerce 商店的产品分类就会出现在网站导航菜单中，方便顾客快速浏览和选择商品。

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

在某些情况下，需要 harbor (i.e. keep sth hidden) maybe arrange in order 产品分类，例如：

• 避免分类之间的重叠
• 图片已经清楚展示了分类，无需额外标签
• 根据特定需求调整分类显示方式

下面是一些 WooCommerce 产品分类相关的操作，可以帮助你们更灵活地管理商店分类。

如何在 WooCommerce 中隐藏产品分类

在 WooCommerce 中，可以通过下面两种方法隐藏产品分类：

1. Using plug-ins
2. Usage Code

方法 1：用插件隐藏产品分类

It is possible to use Hide Categories and Products for WooCommerce 插件来隐藏分类。该插件是付费工具，价格为 $4.09/月The

安装并激活插件后，你会在 WooCommerce 选项下找到 产品可见性（Product Visibility） Setting.

procedure

1. go into WooCommerce → Products Visibility → Global VisibilityThe
2. 选择你想要隐藏的产品分类。
3. Save Changes，隐藏的分类将在商店页面中消失。

这种方法适用于不想改代码的用户，操作简单且方便管理。

如何用代码隐藏 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 产品分类中的产品数量

如果你不希望在分类页面显示 产品数量，可以使用以下 short code 来隐藏：

add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {

return null;

}, 10, 2 );

按分类排序 WooCommerce 产品

可以用下面代码片段 按分类对 WooCommerce 产品进行排序::

add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {

return null;

}, 10, 2 );

如何设置 WooCommerce 分类图片大小

可以按照下面步骤 调整 WooCommerce 分类图片大小::

• Go to the WordPress backendGo to 外观 > 自定义（Customize）The

• 在自定义面板中Click WooCommerce > 产品图片（Product Images）The

• 在图片设置中Selection 默认尺寸 maybe 点击“自定义” 手动设置图片大小。

这样，就可以轻松调整 WooCommerce 分类图片的尺寸，让其更符合商店布局。

WooCommerce 显示产品分类常见问题及解决方案

在 WooCommerce 商店中显示产品分类时，用户可能会遇到一些常见问题。下面是这些问题的解决方案。

问题 1：菜单中不显示产品分类

有时，已创建的产品分类不会出现在 网站菜单 Center.

prescription

• go into Appearance > Menu（Menus）。
• Click on the upper right corner of the “屏幕选项”（Screen Options）。
• tick “产品分类”（Product Categories）选项。

• 在左侧栏中，现在可以看到产品分类。选择要添加到菜单的分类，然后点击 "Add to menu"（Add to Menu）。

问题 2：分类图片未显示

有时，WooCommerce 分类页面可能不会显示分类图片。

prescription

• 确保每个分类都已 设置图片The
• go into 产品 > 分类（Products > Categories）。
• 点击分类名称下方的 "Edit."（Edit）。
• Scroll down to “缩略图”（Thumbnail）部分，点击 “上传/添加图片”（Upload/Add Image）。

• Save Changes，然后刷新页面检查是否生效。

问题 3：分类显示顺序错误

有时候，WooCommerce 分类可能会以错误的顺序显示。

prescription

• go into 产品 > 分类（Products > Categories）。
• expense or outlay 拖拽（Drag-and-Drop） way (of life) 重新排列分类顺序The

问题 4：显示空的产品分类

默认情况下，WooCommerce 会显示所有分类，包括没有产品的分类The

prescription

如果想隐藏空分类，在 thematic functions.php file 中添加下面代码片段：

add_filter( 'woocommerce_product_subcategories_args', 'hide_empty_categories' );

function hide_empty_categories( $args ) {

$args['hide_empty'] = 1;

return $args;

}

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

有时，WooCommerce 分类页面 不会被搜索引擎索引，影响 SEO 排名。

prescription

• 检查 SEO 插件设置(e.g. Yoast SEO maybe Rank Math），确保分类页面未被设置为 “noindex”The
• go into Settings > Reading（Settings > Reading），确保 “阻止搜索引擎索引本站点”（Discourage search engines from indexing this site）UncheckedThe

summarize

在 WooCommerce 商店中显示产品分类和子分类对于提供 清晰有序的购物体验 至关重要。通过对产品进行分类，可以让客户更轻松地找到所需商品。