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

本教程旨在解决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);

代码解释：

• global $product;: 这行代码用于访问当前页面的全局$product对象，其中包含了当前商品的详细信息。
• $product->is_type('variable'): 这是一个条件判断，确保只有当当前商品是“可变产品”类型时，才执行后续的变体价格获取逻辑。
• $product->get_children(): 此方法返回一个包含所有变体ID的数组。
• wc_get_product($variation_id): 对于每个变体ID，我们使用此函数来实例化一个WC_Product_Variation对象，以便访问该变体的具体属性和价格信息。
• $variation_product->get_variation_attributes(): 获取变体的属性数组，例如 ['attribute_pa_color' => 'red', 'attribute_pa_size' => 'M']。
• wc_attribute_label($taxonomy, $variation_product): 用于获取属性的友好显示名称（例如，从pa_color转换为“颜色”）。
• implode(' / ', $variation_name_parts): 将变体的属性值组合成一个易读的字符串，作为变体的名称显示。
• $variation_product->get_price_html(): 这是WooCommerce提供的一个非常方便的函数，它会自动返回一个格式化的价格字符串，包括常规价、销售价，甚至可以包含折扣百分比等。
• add_action('woocommerce_single_product_summary', 'display_all_variation_prices_list', 25);: 这行代码是关键。它将我们自定义的display_all_variation_prices_list函数挂载到woocommerce_single_product_summary动作钩子上。25是优先级参数，它决定了我们的内容在页面上的显示顺序。

钩子与显示位置

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

Shop7z网上购物系统至尊版

Shop7z网上购物系统支持电脑版+手机版+支付宝及微信支付，支持QQ和微信一键登陆，系统集众家之所长，大气超美观页面+手机版+商品组合套餐+限时抢购秒杀+图片批量上传+淘宝数据包导入+弹出式分类菜单+不同规格不同价格+新订单邮件通知+销售报表打印与Excel输出+物流跟踪打印查询+会员积分及优惠券+邮件群发+图片在线管理+销售统计报表+五种价格体系+礼品礼券+微信公众号支付+扫码支付等等等。

下载

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

• woocommerce_template_single_title - 5 (产品标题)
• woocommerce_template_single_rating - 10 (产品评价星级)
• woocommerce_template_single_price - 10 (主要价格显示)
• woocommerce_template_single_excerpt - 20 (产品短描述)
• woocommerce_template_single_add_to_cart - 30 (添加到购物车按钮)
• woocommerce_template_single_meta - 40 (产品元数据，如SKU、分类、标签)
• woocommerce_template_single_sharing - 50 (产品分享按钮)
• WC_Structured_Data::generate_product_data() - 60 (结构化数据)

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

自定义价格显示格式

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

• $variation_product->get_price(): 获取当前（可能包含销售价）的数字价格。
• $variation_product->get_regular_price(): 获取产品的常规价格（原价）。
• $variation_product->get_sale_price(): 获取产品的销售价格（特价）。

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

// ... 在 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 . '
';
}
// ...

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

注意事项

• 代码放置位置： 强烈建议将代码放置在子主题的functions.php文件中，而不是直接修改父主题。这样可以确保在主题更新时您的更改不会丢失。或者，创建一个自定义插件来管理这类功能性代码。
• 性能考量： 对于拥有大量变体（例如，一个产品有数百个变体）的商品，每次加载页面时遍历并获取所有变体信息可能会