通八洲科技

NEWS CENTER 新闻中心

在WooCommerce单品页自动列出所有商品变体价格

日期：2025-12-08 00:00 / 作者：霞舞
上一篇 下一篇

本教程旨在解决woocommerce可变商品价格手动列出的痛点。通过集成一段php代码到您的wordpress网站，您可以自动在单品页显示所有变体的价格列表，无需手动更新。文章将详细指导如何使用woocommerce_single_product_summary钩子，动态获取并以清晰列表形式展示每个商品变体的价格，提升用户体验并简化管理流程。

痛点分析：手动管理WooCommerce变体价格的挑战

对于WooCommerce商店中销售可变商品（如不同尺寸、颜色或材质）的商家而言，一个常见的问题是如何清晰地向顾客展示所有变体的价格。默认情况下，顾客通常需要从下拉菜单中选择一个变体，才能看到其对应的价格。这不仅增加了顾客的浏览步骤，也可能导致他们错过某些价格选项。为了改善用户体验，许多商家选择手动在商品描述中列出所有变体及其价格，但这带来了巨大的维护负担：每当变体价格发生变化时，都需要手动更新文本内容，耗时且容易出错。

解决方案概述：动态列出所有变体价格

为了解决上述问题，我们可以利用WooCommerce提供的动作钩子（Action Hooks）和函数，动态地在单品页面上生成并显示所有变体的价格列表。这种方法的好处是，一旦变体价格在后台更新，前台显示的价格列表也会自动同步，从而实现自动化管理。

我们将通过以下步骤实现这一功能：

  1. 创建一个自定义PHP函数，用于获取并格式化所有变体的价格。
  2. 将该函数挂载到WooCommerce单品页面的特定位置。

核心代码实现

将以下PHP代码添加到您的WordPress子主题的functions.php文件，或者通过自定义插件引入。

/**
 * 在WooCommerce单品页列出所有变体价格
 */
function display_all_variation_prices_list() {
    global $product; // 获取当前全局产品对象

    // 检查当前产品是否为可变产品
    if ($product && $product->is_type('variable')) {
        // 获取所有变体ID
        $variation_ids = $product->get_children();

        // 如果存在变体，则开始构建价格列表
        if ($variation_ids) {
            echo '
可选变体价格：
'; // 可选标题，可根据需要修改或删除
            echo '
    '; // 开始无序列表

            foreach ($variation_ids as $variation_id) {
                // 根据变体ID获取变体产品对象
                $variation_product = wc_get_product($variation_id);

                // 确保变体产品有效且有价格
                if ($variation_product && $variation_product->get_price()) {
                    // 获取变体的名称（属性组合）
                    $attributes = $variation_product->get_variation_attributes();
                    $variation_name_parts = array();
                    foreach ($attributes as $key => $value) {
                        // 移除 'attribute_' 前缀，并获取属性名
                        $taxonomy = str_replace('attribute_', '', $key);
                        // 获取属性的显示名称
                        $attribute_label = wc_attribute_label($taxonomy, $variation_product);
                        $variation_name_parts[] = $attribute_label . ': ' . $value;
                    }
                    $variation_name = implode(' / ', $variation_name_parts);

                    // 获取变体的价格HTML（包含销售价和常规价）
                    $price_html = $variation_product->get_price_html();

                    // 输出列表项：变体名称 - 价格
                    echo '
  • ' . esc_html($variation_name) . ' - ' . $price_html . '
    • ';
                }
            }
            echo '
'; // 结束无序列表
        }
    }
}

/**
 * 将自定义函数挂载到WooCommerce单品页面的特定位置
 * 优先级为25，通常位于产品摘要之后、添加到购物车按钮之前
 */
add_action('woocommerce_single_product_summary', 'display_all_variation_prices_list', 25);

代码解释：

钩子与显示位置

woocommerce_single_product_summary是一个非常常用的WooCommerce动作钩子，它允许开发者在产品摘要区域插入自定义内容。通过调整add_action函数中的优先级（第三个参数），您可以精确控制价格列表的显示位置。

以下是一些woocommerce_single_product_summary钩子默认挂载的函数及其优先级，供您参考：

在我们的示例中，优先级设置为25，这意味着价格列表将显示在产品短描述（优先级20）之后，添加到购物车按钮（优先级30）之前。如果您希望将其显示在其他位置，例如标题下方，可以尝试将优先级设置为8或12。

自定义价格显示格式

在上述代码中，我们使用了$variation_product->get_price_html()来获取格式化的价格。如果您需要更精细地控制价格的显示方式，可以使用以下方法替换它：

示例：只显示销售价格（如果存在），否则显示常规价格

// ... 在 foreach 循环内部 ...
if ($variation_product && $variation_product->get_price()) {
    $attributes = $variation_product->get_variation_attributes();
    $variation_name_parts = array();
    foreach ($attributes as $key => $value) {
        $taxonomy = str_replace('attribute_', '', $key);
        $attribute_label = wc_attribute_label($taxonomy, $variation_product);
        $variation_name_parts[] = $attribute_label . ': ' . $value;
    }
    $variation_name = implode(' / ', $variation_name_parts);

    $display_price = $variation_product->get_sale_price() ? $variation_product->get_sale_price() : $variation_product->get_regular_price();
    // 使用 wc_price 函数格式化价格
    $formatted_price = wc_price($display_price);

    echo '
  • ' . esc_html($variation_name) . ' - ' . $formatted_price . '
    • ';
}
// ...

    通过这种方式，您可以根据自己的需求灵活地构建价格显示字符串。

    注意事项