Comment afficher les catégories et sous-catégories dans WooCommerce

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

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

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

indépendamment du fait que... WooCommerce 新手 néanmoins 电商老手，这些技巧都有所帮助。

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

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

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

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

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

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

Allez dans les paramètres de WooCommerce

• partir pour WooCommerce → Paramètres

选择产品选项

• frappe (sur le clavier) offres 选项卡

调整显示设置

• option démontrer options (comme dans les paramètres d'un logiciel informatique)
• existent 商店页面显示 répondre en chantant 默认分类显示 选项中，选择 同时显示分类和产品（Show both）

Enregistrer les modifications

• frappe (sur le clavier) Enregistrer les modifications 按钮，应用新的设置

mise en garde

Si nécessaire 自定义显示 WooCommerce 分类，可以用代码修改 functions.php 文件（位于主题文件夹中）。要在编辑前 Site de sauvegarde，防止发生意外。

如何在 WooCommerce 中显示产品分类

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

Les étapes :

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

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="/fr/' . esc_url( $term_link ) . '/" rel="tag" class="' . $term->slug . '">' . $term-&gt;nom . '</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 商店页面的产品列表循环前，确保分类优先显示。

Effet :

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

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

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

Procédure d'exploitation :

1. spectacle (un billet) functions.php papiers（位于当前主题的文件夹中）。
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="/fr/' . esc_url( $term_link ) . '/" rel="tag" class="' . $term->slug . '">' . $term-&gt;nom . '</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 ).
  • 生成 <a> 超链接，展示子分类名称。
• 返回 HTML 代码，将所有子分类用逗号分隔显示出来。

Effet :

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

如何显示 WooCommerce 分类描述

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

Description du code :

1. faire passer (un projet de loi, une inspection, etc.) wp_get_post_terms() 获取当前产品的 分类信息.
2. 遍历分类数组，获取并输出分类的 描述内容.

Exemple de code :

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>';
 
  }
 
}

Effet :

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

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

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

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

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

步骤 1：创建插件文件夹

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

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

然后，它用 get_terms() 函数查找当前分类下的 sous-catégorie.

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

• dépense ou frais woocommerce_subcategory_thumbnail() 显示分类缩略图
• 在分类名称外添加超链接，指向该分类的 Page d'archives

创建插件样式文件

1. 在插件文件夹中创建 css répertoire (sur le disque dur de l'ordinateur)
2. existent css 目录下创建 style.css papiers
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 商店页面显示产品分类非常简单，按照下面步骤操作即可：

• 进入 WordPress 后台，悬停在 外观（Appearance） 按钮上。
• 点击“自定义（Customize）” Options.

• 向下滚动Trouver WooCommerce > 产品目录（Product Catalog）.

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

• Enregistrer les modifications，商店页面现在会显示产品分类。

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

En outre, le une barre latérale (dans un logiciel) répondre en chantant menu 来显示产品分类，后面可以进一步了解这些方法。

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

existent une barre latérale (dans un logiciel) 显示产品分类是一个很好的优化策略，它可以让顾客在浏览商店时 始终看到可选的分类，方便他们进一步探索产品。

Méthode de réglage

• 进入 WordPress 后台，前往 外观 > 小工具（Widgets）.
• localiserune barre latérale (dans un logiciel)（Sidebar）并点击下拉菜单。

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

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

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

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

Méthode de réglage

• 进入 WordPress 后台，前往 外观 > 菜单（Menus）.

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

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

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

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

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

在某些情况下，需要 nestle peut-être mettre en ordre 产品分类，例如：

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

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

如何在 WooCommerce 中隐藏产品分类

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

1. Utilisation de plug-ins
2. 使用代码

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

Il est possible d'utiliser Hide Categories and Products for WooCommerce 插件来隐藏分类。该插件是付费工具，价格为 $4.09/月.

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

procédure

1. entrer dans WooCommerce → Products Visibility → Global Visibility.
2. 选择你想要隐藏的产品分类。
3. Enregistrer les modifications，隐藏的分类将在商店页面中消失。

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

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

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

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 分类图片大小: :

• 进入 WordPress 后台，前往 外观 > 自定义（Customize）.

• 在自定义面板中Cliquez sur WooCommerce > 产品图片（Product Images）.

• 在图片设置中Sélection 默认尺寸 peut-être 点击“自定义” 手动设置图片大小。

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

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

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

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

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

prescription

• entrer dans Apparence > Menu（Menus）。
• Cliquez sur le coin supérieur droit de l'écran “屏幕选项”（Screen Options）。
• tique “产品分类”（Product Categories）选项。

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

问题 2：分类图片未显示

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

prescription

• 确保每个分类都已 设置图片.
• entrer dans 产品 > 分类（Products > Categories）。
• 点击分类名称下方的 "Editer".（Edit）。
• Faites défiler vers le bas jusqu'à “缩略图”（Thumbnail）部分，点击 “上传/添加图片”（Upload/Add Image）。

• Enregistrer les modifications，然后刷新页面检查是否生效。

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

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

prescription

• entrer dans 产品 > 分类（Products > Categories）。
• dépense ou frais 拖拽（Drag-and-Drop） mode (de vie) 重新排列分类顺序.

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

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

prescription

如果想隐藏空分类，在 主题的 functions.php papiers 中添加下面代码片段：

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 插件设置(par exemple Yoast SEO peut-être Rang Math），确保分类页面未被设置为 “noindex”.
• entrer dans Paramètres > Lecture（Settings > Reading），确保 “阻止搜索引擎索引本站点”（Discourage search engines from indexing this site）non vérifié.

résumés

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