WooCommerce如何在单产品页动态显示所有变体价格列表

WooCommerce默认的单产品页对于可变产品，只会展示变体价格的最小最大值区间，不会直接列出每个变体的具体价格，用户需要逐个选择属性才能看到对应价格，操作体验不够友好。我们可以通过自定义代码实现在单产品页动态显示所有变体的价格列表，让用户快速对比不同变体的价格差异。

实现原理说明

WooCommerce的可变产品所有变体信息都存储在产品的子文章中，每个变体对应一个product_variation类型的文章，变体的价格、属性等数据都保存在对应的post meta中。我们只需要获取当前可变产品的所有子变体，再提取每个变体的价格和属性信息，就可以动态渲染出完整的价格列表。

具体实现步骤

步骤1：获取当前产品的所有变体

首先我们需要在单产品页的钩子函数中，获取当前产品的所有可用变体，过滤掉不可用的变体数据。

// 获取当前产品的所有变体
function get_product_all_variations($product) {
    if (!$product || !$product->is_type('variable')) {
        return array();
    }
    $variations = $product->get_available_variations();
    return $variations;
}

步骤2：渲染变体价格列表

我们可以在woocommerce_single_product_summary钩子中添加自定义函数，在合适的位置输出变体价格列表。下面的代码会遍历所有变体，提取属性名和对应价格，生成无序列表展示。

// 在单产品页显示所有变体价格列表
add_action('woocommerce_single_product_summary', 'display_all_variation_prices', 25);
function display_all_variation_prices() {
    global $product;
    if (!$product || !$product->is_type('variable')) {
        return;
    }
    $variations = get_product_all_variations($product);
    if (empty($variations)) {
        return;
    }
    echo '<div class="variation-price-list">';
    echo '<h3>所有变体价格</h3>';
    echo '<ul>';
    foreach ($variations as $variation) {
        // 获取变体属性
        $attributes = $variation['attributes'];
        $attr_str = '';
        foreach ($attributes as $key => $value) {
            $attr_name = str_replace('attribute_', '', $key);
            $attr_str .= $attr_name . ':' . $value . ' ';
        }
        // 获取变体价格
        $variation_obj = wc_get_product($variation['variation_id']);
        $price = $variation_obj->get_price_html();
        echo '<li>' . esc_html(trim($attr_str)) . '：' . $price . '</li>';
    }
    echo '</ul>';
    echo '</div>';
}

步骤3：添加基础样式优化显示效果

默认输出的列表样式比较简陋，我们可以添加一些CSS样式优化显示效果，让价格列表更清晰易读。把下面的样式代码添加到主题的style.css文件中即可。

.variation-price-list {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
}
.variation-price-list h3 {
    margin-top: 0;
    font-size: 16px;
    color: #333;
}
.variation-price-list ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}
.variation-price-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    font-size: 14px;
    color: #666;
}
.variation-price-list li:last-child {
    border-bottom: none;
}

注意事项

• 如果产品变体数量很多，建议添加折叠功能，避免页面过长影响加载速度
• 变体价格如果设置了折扣，get_price_html()方法会自动显示原价和折扣价，无需额外处理
• 如果修改了变体信息，价格列表会自动同步更新，不需要手动维护
• 代码需要添加到主题的functions.php文件中，或者使用自定义代码片段插件添加，避免主题更新时代码丢失

常见问题排查

如果价格列表没有显示，可以先检查当前产品是否为可变产品类型，再打印$variations变量查看是否成功获取到变体数据。如果变体属性显示异常，可以检查属性名的处理逻辑是否和网站的实际属性设置匹配，适当调整str_replace的参数即可。

WooCommerce变体价格单产品页动态显示价格列表修改时间：2026-07-18 19:57:24