WooCommerce如何通过自定义循环将可变产品变体作为独立商品展示

一、现有自定义循环代码完善 #

你当前的代码仅获取了pa_sub-select属性的术语列表，未关联到具体的变体产品对象，因此无法直接获取价格与加购链接。可参考如下修正后的代码，先获取可变产品的所有可用变体，再匹配对应属性输出相关信息：

<?php
// 校验当前产品为可变产品
if ( $product->is_type('variable') ) {
    // 获取该可变产品下所有上架、可售的变体
    $available_variations = $product->get_available_variations();
    
    foreach ( $available_variations as $variation_data ) {
        // 实例化变体产品对象
        $variation = wc_get_product( $variation_data['variation_id'] );
        // 获取变体对应pa_sub-select属性值，可按需添加第二个属性的获取逻辑
        $sub_select_val = $variation->get_attribute('pa_sub-select');
        if ( empty($sub_select_val) ) continue;
?>
<li>
    <span><?php echo esc_html( $sub_select_val ); ?></span>
    <span>Price for this package is: <?php echo $variation->get_price_html(); ?></span>
    <a href="<?php echo esc_url( $variation->get_add_to_cart_url() ); ?>">
        <?php echo esc_html( $variation->get_add_to_cart_text() ); ?>
    </a>
</li>
<?php
    }
}
?>

二、通过functions.php修改默认归档页循环 #

可以通过主题/子主题的functions.php修改archive-product.php的默认循环逻辑，无需直接编辑模板文件，避免主题更新后代码被覆盖。核心思路是通过WooCommerce原生钩子拦截默认商品输出，遇到可变产品时直接输出其所有变体作为独立商品：

// 将以下代码添加到主题/子主题的functions.php文件末尾
add_action( 'woocommerce_shop_loop', function() {
    global $product;
    // 仅处理可变产品，简单产品沿用默认输出逻辑
    if ( !$product->is_type('variable') ) return;

    // 移除默认的可变产品输出内容，避免重复展示
    remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
    remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

    // 循环输出所有变体
    $available_variations = $product->get_available_variations();
    foreach ( $available_variations as $variation_data ) {
        $variation = wc_get_product( $variation_data['variation_id'] );
        // 以下HTML结构可按需调整为匹配你主题的商品卡片结构，保持样式统一
        ?>
        <div class="product variation-item">
            <h2 class="woocommerce-loop-product__title">
                <?php echo esc_html( $variation->get_name() ); ?>
            </h2>
            <div class="woocommerce-loop-product__price">
                <?php echo $variation->get_price_html(); ?>
            </div>
            <a href="<?php echo esc_url( $variation->get_add_to_cart_url() ); ?>" class="button add_to_cart_button">
                <?php echo esc_html( $variation->get_add_to_cart_text() ); ?>
            </a>
        </div>
        <?php
    }
}, 5 );

注意事项 #

• 代码所有输出都做了转义处理，符合WooCommerce开发安全规范
• 如需展示两个可选属性，只需在变体输出部分额外获取第二个属性的内容即可，无需调整核心逻辑
• 可自行修改变体输出的HTML类名，匹配你现有主题的商品样式，无需额外写CSS适配

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