WooCommerce分类页无插件显示带图子分类及父类产品方法

完全适配你当前使用的WordPress + WooCommerce + Elementor + Shoptimizer环境，不需要安装额外插件，有两种可直接落地的实现方式：

方案1：纯代码实现（轻量无冗余） #

• 第一步：先调整WooCommerce基础配置，进入后台WooCommerce > 设置 > 产品 > 显示页面，将「分类页显示」选项设置为同时显示子分类和产品，打开基础渲染开关。
• 第二步：将下方自定义代码添加到当前子主题的functions.php文件中，代码作用是调整分类页内容渲染顺序，强制先输出带图片的子分类列表，再展示父分类下全部产品，同时原生适配Shoptimizer主题样式，不会出现排版错乱。

// 调整WooCommerce分类页渲染顺序：先展示子分类列表，后展示父分类全部产品
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_product_subcategories', 10 );
add_action( 'woocommerce_before_shop_loop', 'custom_render_subcategories_before_products', 5 );
function custom_render_subcategories_before_products() {
    if ( is_product_category() ) {
        $current_term = get_queried_object();
        // 仅顶级父分类页渲染子分类模块，二级及以下分类页不重复输出
        if ( $current_term->parent == 0 ) {
            woocommerce_product_subcategories( array(
                'before' => '<div class="custom-subcategory-grid cols-4">',
                'after'  => '</div>',
                'force'  => true
            ) );
        }
    }
}

// 适配Shoptimizer主题子分类缩略图尺寸
add_filter( 'subcategory_archive_thumbnail_size', function( $size ) {
    return 'woocommerce_thumbnail';
} );

代码中cols-4参数可根据需求修改为cols-3/cols-5，对应子分类列表每行显示3/5个卡片，Shoptimizer原生支持这套网格类名，无需额外编写CSS样式。

方案2：Elementor可视化实现（无需编写代码） #

如果你使用Elementor Pro版本，可直接通过主题生成器可视化搭建页面，零代码实现需求：

• 第一步：进入后台模板 > 主题生成器，新建产品分类归档模板，设置生效范围为所有顶级产品分类。
• 第二步：在编辑器中按需求顺序拖入对应组件：
  • 拖入「归档标题」组件放置在页面最顶部，作为分类页标题
  • 拖入「产品分类」组件，设置查询规则为当前归档项的子分类，开启分类图片、分类名称显示，调整网格列数到你需要的数值
  • 拖入「产品归档」组件，设置查询规则为当前归档关联产品，保留默认分页、排序功能即可
• 第三步：发布模板，Shoptimizer主题会自动兼容Elementor生成的归档页样式，无需额外适配。

注意：使用代码方案前请备份子主题functions.php文件，避免语法错误导致站点异常；使用Elementor方案时，请将WooCommerce后台「分类页显示」选项改回「仅显示产品」，避免页面重复输出子分类内容。

内容的提问来源于stack exchange，提问作者Z1pas