WordPress WooCommerce：主分类无商品时仍显示子分类并隐藏子分类商品

问题原因 #

你之前的代码通过修改tax_query的include_children参数限制商品查询范围，但当主分类下无商品时，WooCommerce默认逻辑会跳过子分类的显示流程，导致子分类无法正常展示。

解决步骤 #

1. 隐藏主分类页面的商品列表 #

替换原有的pre_get_posts钩子函数，直接让主查询返回0个商品，彻底隐藏商品列表：

function hide_products_in_parent_cat( $wp_query ) {
    if ( isset( $wp_query->query_vars['product_cat'] ) && $wp_query->is_main_query() && $wp_query->is_tax( 'product_cat' ) ) {
        // 设置每页商品数为0，隐藏所有商品
        $wp_query->set( 'posts_per_page', 0 );
    }
}
add_action( 'pre_get_posts', 'hide_products_in_parent_cat' );

2. 强制显示子分类（无论是否有商品） #

添加钩子函数，主动获取并显示当前分类的子分类，通过hide_empty => false确保即使子分类无商品也能展示：

function display_child_product_cats() {
    // 仅在商品分类页面执行
    if ( ! is_tax( 'product_cat' ) ) return;

    $current_cat = get_queried_object();
    // 获取当前分类的所有子分类
    $child_cats = get_terms( array(
        'taxonomy'   => 'product_cat',
        'parent'     => $current_cat->term_id,
        'hide_empty' => false, // 即使子分类无商品也显示
        'orderby'    => 'name',
        'order'      => 'ASC'
    ) );

    if ( empty( $child_cats ) || is_wp_error( $child_cats ) ) return;

    // 输出子分类列表，匹配WooCommerce默认样式
    echo '<div class="woocommerce columns-' . esc_attr( wc_get_loop_prop( 'columns' ) ) . '">';
    echo '<ul class="products">';
    foreach ( $child_cats as $child_cat ) {
        $thumbnail_id = get_term_meta( $child_cat->term_id, 'thumbnail_id', true );
        $image_url = $thumbnail_id ? wp_get_attachment_url( $thumbnail_id ) : wc_placeholder_img_src();
        $cat_link = get_term_link( $child_cat );

        echo '<li class="product-category product">';
        echo '<a href="' . esc_url( $cat_link ) . '" class="woocommerce-LoopProduct-link">';
        echo '<img src="' . esc_url( $image_url ) . '" alt="' . esc_attr( $child_cat->name ) . '" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" />';
        echo '<h2 class="woocommerce-loop-category__title">' . esc_html( $child_cat->name ) . '</h2>';
        if ( $child_cat->description ) {
            echo '<p class="woocommerce-loop-category__description">' . esc_html( wp_trim_words( $child_cat->description, 10 ) ) . '</p>';
        }
        echo '</a>';
        echo '</li>';
    }
    echo '</ul>';
    echo '</div>';
}

// 在商品列表区域之前显示子分类
add_action( 'woocommerce_before_shop_loop', 'display_child_product_cats', 5 );
// 当主分类无商品时，在空状态区域显示子分类
add_action( 'woocommerce_no_products_found', 'display_child_product_cats', 5 );

3. 可选：样式调整（按需使用） #

如果子分类显示样式和主题不匹配，可添加以下CSS调整：

.product-category.product {
    margin-bottom: 2em;
}
.product-category.product img {
    width: 100%;
    height: auto;
}

说明 #

• 该方案不依赖主分类是否有商品，无论主分类下是否存在商品，都会主动加载并展示所有子分类。
• 子分类显示样式与WooCommerce默认分类样式保持一致，无需大幅调整即可适配多数主题。
• hide_empty => false参数确保即使子分类下无商品，也会被正常显示。

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