本文介绍如何通过纯代码方式，在 woocommerce 默认分类归档页中，自动显示当前分类的子分类（含图片和链接），并在其下方正常展示该父分类下的全部商品，无需插件，兼容 elementor 和 shoptimizer 等主流主题。
本文介绍如何通过纯代码方式，在 woocommerce 默认分类归档页中，自动显示当前分类的子分类（含图片和链接），并在其下方正常展示该父分类下的全部商品，无需插件，兼容 elementor 和 shoptimizer 等主流主题。
在 WooCommerce 中，默认的分类页面（如 /product-category/parent/）仅展示当前分类下的商品，不显示其子分类——这在多层级品类结构中常造成用户体验断层。幸运的是，WooCommerce 提供了灵活的钩子机制，我们可通过自定义函数 + woocommerce_before_shop_loop 钩子，在商品列表上方精准插入子分类网格。
以下为经过优化、安全加固且兼容现代主题的完整实现方案：
✅ 推荐代码（已增强健壮性与可维护性）
将以下代码添加至当前子主题的 functions.php 文件末尾（强烈建议使用子主题，避免更新丢失）：
/**
* 在分类页顶部显示子分类列表（含缩略图、标题与链接）
* 仅当存在子分类时渲染，避免空列表干扰布局
*/
function display_subcategories_with_thumbnails() {
// 确保仅在产品分类归档页执行
if ( ! is_tax( 'product_cat' ) || ! function_exists( 'woocommerce_subcategory_thumbnail' ) ) {
return;
}
$parent_term_id = get_queried_object_id();
// 获取直接子分类（parent 参数为当前分类 ID）
$subcategories = get_terms( array(
'taxonomy' => 'product_cat',
'parent' => $parent_term_id,
'hide_empty' => false, // 即使无商品也显示子分类（按需可设 true）
'orderby' => 'menu_order',
'order' => 'ASC'
) );
// 检查是否有子分类
if ( is_wp_error( $subcategories ) || empty( $subcategories ) ) {
return;
}
echo '<div class="woocommerce-subcategories-grid">';
echo '<h3 class="screen-reader-text">' . esc_html__( 'Subcategories', 'woocommerce' ) . '</h3>';
echo '<ul class="woocommerce-categories-list">';
foreach ( $subcategories as $subcategory ) {
$link = get_term_link( $subcategory );
if ( is_wp_error( $link ) ) {
continue;
}
echo '<li class="woocommerce-product-category-item">';
echo '<a href="' . esc_url( $link ) . '" class="subcategory-link">';
woocommerce_subcategory_thumbnail( $subcategory ); // 内置函数，自动输出带 alt 的 img 标签
echo '<h4 class="subcategory-title">' . esc_html( $subcategory->name ) . '</h4>';
echo '</a>';
echo '</li>';
}
echo '</ul></div>';
}
add_action( 'woocommerce_before_shop_loop', 'display_subcategories_with_thumbnails', 10 );? 关键说明与注意事项
- 执行时机：使用 woocommerce_before_shop_loop 钩子（优先级 10），确保子分类出现在商品循环之前，且不影响原有商品排序与分页逻辑。
-
安全性强化：
- 使用 esc_url() 和 esc_html() 防止 XSS；
- 添加 is_tax('product_cat') 和 function_exists() 双重校验，避免在非分类页报错；
- 处理 get_term_link() 的错误返回，提升鲁棒性。
-
样式适配建议：
- .woocommerce-subcategories-grid 和 .woocommerce-categories-list 为语义化容器类，便于 CSS 定制（例如 Flex/Grid 布局）；
- Shoptimizer 主题默认支持 .woocommerce-product-category-item 类，可直接复用其响应式栅格样式；
- 若需调整缩略图尺寸，可通过 woocommerce_subcategory_thumbnail 的 thumbnail_size 参数（需自行扩展或使用 woocommerce_subcategory_thumbnail_size 过滤器）。
- Elementor 兼容性：该方案完全基于 PHP + WooCommerce 钩子，与 Elementor 页面构建器无冲突；若分类页由 Elementor 自定义模板控制，请确保启用「WooCommerce Archive」模板并保留默认循环钩子。
? 最后提醒
- ❗ 切勿直接修改父主题 functions.php —— 所有自定义代码必须置于子主题中；
- ✅ 修改后清空对象缓存（如 WP Super Cache、Redis）及浏览器缓存；
- ? 调试技巧：临时添加 var_dump( $subcategories ); die(); 可验证子分类获取是否正确；
- ? 如需支持多语言（WPML / Polylang），请额外检查 get_terms() 的语言上下文参数。
通过以上方案，您即可在不依赖任何插件的前提下，优雅实现「分类页 → 子分类导航（带图）→ 当前分类商品列表」的三层信息架构，显著提升商城导购效率与 SEO 可发现性。
