WooCommerce：如何在产品标签页面先展示关联分类而非直接显示产品列表？

针对你的需求，我们可以通过自定义代码实现「先显示关联分类，点击后再展示对应分类下带标签的产品」的效果，完全不需要创建大量子分类。下面是具体的实现步骤：

1. 添加查询过滤逻辑 #

首先，我们要修改产品标签归档页的主查询，当URL中带有分类过滤参数时，只展示对应分类下的带标签产品。将以下代码添加到你的主题functions.php文件（或自定义插件中，更安全，避免主题更新丢失）：

add_action( 'pre_get_posts', 'filter_tag_archive_by_category' );
function filter_tag_archive_by_category( $query ) {
    // 仅在前端产品标签归档页生效
    if ( ! is_admin() && $query->is_main_query() && is_product_tag() ) {
        $selected_cat = isset( $_GET['filter_cat'] ) ? sanitize_text_field( $_GET['filter_cat'] ) : '';
        
        if ( ! empty( $selected_cat ) ) {
            // 过滤查询，只显示指定分类下的产品
            $query->set( 'product_cat', $selected_cat );
        }
    }
}

2. 在标签页顶部显示关联分类列表 #

接下来，我们要在产品标签归档页的产品列表上方，自动生成所有包含该标签产品的分类选项（比如你的Cat2和Cat5），同时添加「全部产品」选项方便用户切换。将以下代码同样添加到functions.php：

add_action( 'woocommerce_before_main_content', 'display_tag_associated_categories', 10 );
function display_tag_associated_categories() {
    // 仅在产品标签归档页显示
    if ( is_product_tag() ) {
        $current_tag = get_queried_object();
        $tag_id = $current_tag->term_id;
        
        // 获取该标签下有产品的所有产品分类ID
        $category_ids = get_terms( array(
            'taxonomy' => 'product_cat',
            'object_ids' => get_objects_in_term( $tag_id, 'product_tag' ),
            'fields' => 'ids',
            'orderby' => 'name',
            'order' => 'ASC'
        ) );
        
        if ( ! empty( $category_ids ) ) {
            $selected_cat = isset( $_GET['filter_cat'] ) ? sanitize_text_field( $_GET['filter_cat'] ) : '';
            
            echo '<div class="tag-category-filters">';
            echo '<h3>选择分类查看产品</h3>';
            echo '<ul>';
            
            // 添加「全部产品」选项
            $all_url = remove_query_arg( 'filter_cat' );
            echo '<li><a href="' . esc_url( $all_url ) . '" class="' . ( empty( $selected_cat ) ? 'active' : '' ) . '">全部产品</a></li>';
            
            // 遍历输出关联分类
            foreach ( $category_ids as $cat_id ) {
                $category = get_term( $cat_id, 'product_cat' );
                $cat_url = add_query_arg( 'filter_cat', $category->slug );
                $active_class = ( $selected_cat === $category->slug ) ? 'active' : '';
                
                echo '<li><a href="' . esc_url( $cat_url ) . '" class="' . esc_attr( $active_class ) . '">' . esc_html( $category->name ) . '</a></li>';
            }
            
            echo '</ul>';
            echo '</div>';
        }
    }
}

3. 添加美化样式 #

为了让分类过滤选项看起来更友好，添加以下CSS到主题的style.css文件或自定义CSS面板：

.tag-category-filters {
    margin: 20px 0;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 4px;
}

.tag-category-filters ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tag-category-filters a {
    padding: 8px 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.tag-category-filters a.active,
.tag-category-filters a:hover {
    background: #2d7dd2;
    color: #fff;
    border-color: #2d7dd2;
}

效果说明 #

• 当用户访问www.website.com/product-tag/test-tag-1/时，页面顶部会显示「全部产品」、「Cat2」、「Cat5」三个选项；
• 点击「Cat2」后，URL会变成www.website.com/product-tag/test-tag-1/?filter_cat=cat2，页面只显示Cat2分类下带Test Tag 1的产品；
• 点击「全部产品」会回到初始状态，显示所有带Test Tag 1的产品。

注意事项 #

• 优先推荐用自定义插件来添加代码，避免主题更新时代码丢失；
• 测试前请清除网站缓存，确保新代码生效；
• 如果需要修改文本内容（比如「选择分类查看产品」），直接替换代码中的对应字符串即可。

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