如何在 WooCommerce 分类页显示子分类列表（含缩略图）并保留商品展示-php教程-PHP中文网

如何在 WooCommerce 分类页显示子分类列表（含缩略图）并保留商品展示

本文介绍如何通过纯代码方式，在 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="'%20.%20esc_url(%20%24link%20)%20.%20'" 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」模板并保留默认循环钩子。