如何在 WooCommerce 分类页中显示带缩略图的子分类及当前分类商品列表-php教程-PHP中文网

如何在 WooCommerce 分类页中显示带缩略图的子分类及当前分类商品列表

本文介绍如何通过纯代码方式，在 woocommerce 分类页面顶部展示带图片的子分类列表，下方自动显示当前父分类下的全部商品，无需插件，兼容 elementor 和 shoptimizer 等主流主题。

本文介绍如何通过纯代码方式，在 woocommerce 分类页面顶部展示带图片的子分类列表，下方自动显示当前父分类下的全部商品，无需插件，兼容 elementor 和 shoptimizer 等主流主题。

在默认 WooCommerce 分类页（如 /product-category/parent/）中，系统仅显示当前分类下的商品，而不会自动列出其子分类。若希望提升导航体验与页面结构化程度（例如商城首页式布局：先展示子类目入口，再呈现本类商品），可通过钩子 + 自定义函数实现——且完全不依赖插件。

✅ 实现原理简述

利用 woocommerce_before_shop_loop 钩子，在商品循环开始前插入自定义子分类渲染逻辑；通过 get_terms() 获取当前查询分类（get_queried_object_id()）的所有直接子分类，并调用 WooCommerce 内置函数 woocommerce_subcategory_thumbnail() 渲染带链接的分类缩略图。

?️ 推荐代码（已优化增强版）

将以下代码添加至当前主题的 functions.php 文件（建议使用子主题避免更新丢失）：

/**
 * 在分类页顶部显示带缩略图的子分类列表
 * 同时保留原商品列表（自动生效于下方）
 */
function display_subcategories_with_thumbnails() {
    // 仅在产品分类归档页执行
    if ( ! is_tax( 'product_cat' ) ) {
        return;
    }

    $parent_id = get_queried_object_id();

    $args = array(
        'taxonomy'     => 'product_cat',
        'parent'       => $parent_id,
        'hide_empty'   => true, // 仅显示有产品的子分类
        'orderby'      => 'menu_order', // 按后台排序顺序
        'order'        => 'ASC',
    );

    $subcategories = get_terms( $args );

    if ( ! is_wp_error( $subcategories ) && ! empty( $subcategories ) ) {
        echo '<div class="woocommerce-subcategories-grid">';
        echo '<h3 class="subcat-title">浏览子分类</h3>';
        echo '<ul class="woocommerce-categories columns-3">';

        foreach ( $subcategories as $term ) {
            $thumbnail_id = get_term_meta( $term->term_id, 'thumbnail_id', true );
            $thumbnail    = $thumbnail_id ? wp_get_attachment_image( $thumbnail_id, 'woocommerce_thumbnail', false, array( 'class' => 'attachment-woocommerce_thumbnail' ) ) : wc_placeholder_img( 'woocommerce_thumbnail' );

            echo '<li class="woocommerce-product-category-item">';
            echo '<a href="'%20.%20esc_url(%20get_term_link(%20%24term%20)%20)%20.%20'" class="subcategory-link">';
            echo $thumbnail;
            echo '<span class="category-name">' . esc_html( $term->name ) . '</span>';
            echo '</a>';
            echo '</li>';
        }

        echo '</ul>
</div>';
    }
}
add_action( 'woocommerce_before_shop_loop', 'display_subcategories_with_thumbnails', 15 );

⚠️ 注意事项与最佳实践

缩略图支持：WooCommerce 5.0+ 默认为每个分类提供「分类图像」字段（位于分类编辑页底部），请确保已为子分类上传并保存缩略图；否则将显示占位图。

样式控制：.columns-3 类可配合 CSS 实现响应式网格（例如每行最多 3 个子分类），推荐在主题自定义 CSS 或 style.css 中补充：

.woocommerce-subcategories-grid ul.columns-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
}
.woocommerce-product-category-item .subcategory-link {
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
}
.woocommerce-product-category-item img {
    margin-bottom: 0.5rem;
    border-radius: 4px;
    transition: transform 0.2s;
}
.woocommerce-product-category-item:hover img {
    transform: scale(1.03);
}

性能提示：该逻辑仅在分类页触发，不影响首页或商品页；若子分类数量极大（>50），建议启用对象缓存或考虑分页逻辑（需额外扩展）。
Elementor / Shoptimizer 兼容性：因使用标准 WooCommerce 钩子，与 Elementor 页面构建器及 Shoptimizer 主题完全兼容；如使用 Elementor 编辑分类模板，请确保「主题默认模板」被启用（而非完全自定义 Elementor 模板），否则钩子可能不生效。

✅ 最终效果：访问任一父级产品分类页时，页面顶部将优雅呈现带图、可点击的子分类网格，下方则保持原生商品循环（含筛选栏、排序、分页等所有功能），兼顾用户体验与开发简洁性。