在WooCommerce电商站点运营过程中，父商品分类页的展示逻辑直接影响用户的浏览体验。不少站点需要在父分类页面同时展示下属的所有子分类，并且对子分类的过长描述做截取处理，避免页面内容过于冗长。默认的WooCommerce逻辑可能不会自动在父分类页输出子分类信息，或者描述会完整展示，因此需要我们手动调整相关代码实现需求。
实现思路梳理
要实现父分类页显示子分类并截取描述，核心分为两个步骤：第一步是获取当前父分类下的所有子分类数据，第二步是对子分类的描述内容做长度截取，最后按照需求的结构输出到页面中。我们可以通过修改WooCommerce的分类模板文件，或者添加自定义钩子函数来实现，下面分别介绍两种常用方式。
方式一：修改分类模板文件
定位模板文件
首先找到WooCommerce的分类模板文件，默认路径为woocommerce/templates/archive-product.php，建议将该文件复制到当前主题目录下的woocommerce文件夹中进行修改，避免WooCommerce更新时覆盖自定义内容。
添加子分类展示代码
在模板文件中合适的位置（比如商品列表上方）添加以下代码，用于获取并展示子分类：
<?php
// 获取当前分类对象
$current_term = get_queried_object();
// 判断是否为商品分类页
if (is_product_category() && $current_term) {
// 获取当前分类的子分类
$child_terms = get_terms(array(
'taxonomy' => 'product_cat',
'parent' => $current_term->term_id,
'hide_empty' => false,
));
// 如果存在子分类则展示
if (!empty($child_terms) && !is_wp_error($child_terms)) {
echo '<div class="child-categories-wrapper">';
echo '<h2>子分类</h2>';
echo '<ul class="child-categories-list">';
foreach ($child_terms as $child_term) {
// 截取描述，保留前100个字符，超出部分用...代替
$desc = $child_term->description;
$trimmed_desc = mb_strlen($desc) > 100 ? mb_substr($desc, 0, 100) . '...' : $desc;
echo '<li class="child-category-item">';
echo '<a href="' . get_term_link($child_term) . '">' . $child_term->name . '</a>';
if (!empty($trimmed_desc)) {
echo '<p class="child-category-desc">' . $trimmed_desc . '</p>';
}
echo '</li>';
}
echo '</ul>';
echo '</div>';
}
}
?>
代码说明
上述代码中，首先通过get_queried_object()获取当前页面的分类对象，然后调用get_terms函数查询当前分类下的子分类，参数parent指定父分类ID，hide_empty设置为false表示即使子分类下没有商品也展示。
描述截取部分使用mb_substr函数，因为商品分类描述可能包含中文，使用多字节字符串函数可以避免截取乱码，这里设置截取前100个字符，超出部分拼接省略号。
方式二：使用自定义钩子函数
如果不想直接修改模板文件，也可以通过添加钩子函数的方式实现，将函数添加到当前主题的functions.php文件中即可：
<?php
// 在商品分类页商品列表前展示子分类
add_action('woocommerce_before_shop_loop', 'display_child_categories_with_trimmed_desc', 20);
function display_child_categories_with_trimmed_desc() {
// 仅在前台的商品分类页生效
if (!is_product_category()) {
return;
}
$current_term = get_queried_object();
if (!$current_term) {
return;
}
// 获取子分类
$child_terms = get_terms(array(
'taxonomy' => 'product_cat',
'parent' => $current_term->term_id,
'hide_empty' => false,
));
if (empty($child_terms) || is_wp_error($child_terms)) {
return;
}
// 输出子分类结构
echo '<section class="child-categories-section">';
echo '<h2>子分类</h2>';
echo '<div class="child-categories-grid">';
foreach ($child_terms as $child_term) {
$term_link = get_term_link($child_term);
$desc = $child_term->description;
// 截取描述，最多保留80个字符
$trimmed_desc = mb_strlen($desc) > 80 ? mb_substr($desc, 0, 80) . '...' : $desc;
echo '<div class="child-category-card">';
echo '<a href="' . esc_url($term_link) . '" class="child-category-link">';
echo '<h3>' . esc_html($child_term->name) . '</h3>';
echo '</a>';
if (!empty($trimmed_desc)) {
echo '<div class="child-category-desc">' . esc_html($trimmed_desc) . '</div>';
}
echo '</div>';
}
echo '</div>';
echo '</section>';
}
?>
样式调整建议
添加完功能代码后，可以根据站点的设计需求调整子分类的展示样式，以下是基础的CSS样式示例，可以添加到主题的样式文件中：
.child-categories-wrapper {
margin: 20px 0 40px;
padding: 20px;
background: #f8f8f8;
border-radius: 8px;
}
.child-categories-list {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin-top: 15px;
}
.child-category-item {
padding: 15px;
background: #fff;
border-radius: 6px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.child-category-item a {
color: #333;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
.child-category-item a:hover {
color: #0073aa;
}
.child-category-desc {
margin-top: 8px;
font-size: 14px;
color: #666;
line-height: 1.5;
}
注意事项
- 修改模板文件前一定要先备份原文件，避免修改出错无法恢复。
- 描述截取的长度可以根据实际页面布局调整，避免截取后内容显示不完整。
- 如果子分类数量较多，可以添加分页逻辑或者限制展示数量，避免页面加载过慢。
- 添加自定义函数时，要确保函数名唯一，避免和其他主题或插件的函数冲突。
WooCommerce子分类显示描述截取商品分类页WordPress修改时间：2026-06-10 16:36:40