如何修改WooCommerce店铺页面主查询以仅显示商品颜色变体

嘿，我完全懂你的需求——就是要把每个颜色变体拆成独立条目展示在店铺页面，而不是只显示父级的可变商品。下面给你两种可行方案，代码方案更灵活可控，插件方案适合不想碰代码的情况：

方案一：自定义代码（推荐） #

这个方法通过WooCommerce的钩子修改查询逻辑，让店铺页面加载所有颜色变体，同时调整显示标题为「父商品名+颜色」，完全贴合你的示例需求。

步骤1：修改店铺页面的产品查询 #

把下面的代码添加到你的主题functions.php文件，或者用「Code Snippets」插件来管理（更安全，避免误改主题文件导致网站崩溃）：

// 让店铺页面仅加载带有颜色属性的产品变体
add_action( 'woocommerce_product_query', 'display_color_variations_in_shop' );
function display_color_variations_in_shop( $query ) {
    // 仅在前端店铺页面生效，后台不受影响
    if ( is_shop() && $query->is_main_query() && ! is_admin() ) {
        // 设置查询对象为产品变体
        $query->set( 'post_type', 'product_variation' );
        // 筛选出带有颜色属性的变体（这里的pa_color是颜色属性的slug，记得替换成你自己的）
        $query->set( 'meta_query', array(
            array(
                'key'     => 'attribute_pa_color',
                'compare' => 'EXISTS'
            )
        ) );
        // 排除父级可变商品，只保留变体条目
        $query->set( 'post_parent__not_in', array(0) );
    }
}

步骤2：调整变体的显示标题 #

默认变体标题不够直观，我们把它改成「父商品名称 + 颜色名称」，比如你说的「Product A Yellow」：

// 把变体标题修改为父商品名+颜色名称
add_filter( 'the_title', 'variation_title_with_color', 10, 2 );
function variation_title_with_color( $title, $post_id ) {
    if ( is_shop() && get_post_type( $post_id ) === 'product_variation' ) {
        // 获取父级商品对象
        $parent_product = wc_get_product( wp_get_post_parent_id( $post_id ) );
        // 获取颜色属性的slug值
        $color_slug = get_post_meta( $post_id, 'attribute_pa_color', true );
        // 把slug转换为友好的颜色名称（比如把yellow转成Yellow）
        $color_term = get_term_by( 'slug', $color_slug, 'pa_color' );
        $color_name = $color_term ? $color_term->name : ucfirst( $color_slug );
        
        // 组合成最终显示的标题
        $title = $parent_product->get_name() . ' ' . $color_name;
    }
    return $title;
}

步骤3：优化变体的显示细节 #

添加下面的代码，确保变体的价格、库存信息正常加载，并且不会自动附加冗余属性到标题：

// 禁止变体标题自动添加属性后缀
add_filter( 'woocommerce_product_variation_title_include_attributes', '__return_false' );

// 确保变体加载父商品的基础数据（比如缩略图、描述框架）
add_action( 'woocommerce_before_shop_loop_item', 'load_variation_parent_data' );
function load_variation_parent_data() {
    global $product;
    if ( $product instanceof WC_Product_Variation ) {
        $product->set_parent_data( wc_get_product( $product->get_parent_id() ) );
    }
}

⚠️ 重要提醒：如果你的颜色属性slug不是pa_color（比如你设置的是color），一定要把代码里所有pa_color替换成你的实际属性slug（属性slug可以在WooCommerce→属性页面查看）。

方案二：使用插件（无需代码） #

如果不想写代码，可以用专门的WooCommerce插件实现：

• Woocommerce Show Single Variations：这款插件允许你指定在店铺页面显示哪些属性的变体，只需在设置里勾选「颜色」属性，就能自动把每个颜色变体拆成独立条目。
• Variation Swatches for WooCommerce：除了提供好看的颜色选框，也支持在店铺页面展开变体为单独条目，配置界面很直观，新手也能快速上手。

测试与注意事项 #

1. 不管用哪种方案，修改后记得清除网站缓存（如果用了缓存插件），刷新店铺页面查看效果。
2. 测试时要确保每个颜色变体都设置了正确的库存和价格，避免出现显示异常。
3. 用代码方案的话，建议先用 staging 测试环境验证，再部署到生产环境，避免影响正常访客。

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