在WooCommerce单品页自动显示所有变体商品价格列表

日期：2025-12-13 00:00 / 作者：聖光之護

本教程旨在指导WooCommerce用户如何在产品详情页自动展示所有变体商品的详细价格列表，从而取代手动输入，并确保价格信息随商品更新而同步。通过集成自定义PHP代码和WooCommerce动作钩子，我们将实现一个动态生成价格列表的功能，提升用户体验和管理效率。

一、问题背景与解决方案概述

在WooCommerce中，对于拥有多种变体（如不同尺寸、颜色）的产品，其价格可能因变体而异。许多商家为了方便顾客了解所有价格选项，会在产品描述中手动列出每个变体的价格。然而，这种做法效率低下，且在价格变动时需要反复手动更新，极易出错。

本教程将提供一个自动化解决方案，通过在主题的 functions.php 文件中添加一段自定义PHP代码，利用WooCommerce的动作钩子（Action Hook）在产品详情页动态抓取并展示所有变体的价格列表。这意味着一旦变体价格在后台更新，前台显示的价格列表也会自动同步，无需任何手动干预。

二、实现步骤

要实现变体价格的自动列表显示，您需要将提供的PHP代码片段添加到您的WordPress主题（推荐使用子主题）的 functions.php 文件中。

1. 访问主题的 functions.php 文件

您可以通过以下两种方式访问并编辑 functions.php 文件：

通过WordPress后台： 登录WordPress后台，导航至“外观” > “主题文件编辑器”。在右侧文件列表中找到并选择 functions.php 文件。
通过FTP/文件管理器： 使用FTP客户端或您的主机控制面板中的文件管理器，导航到 /wp-content/themes/您的主题名称/ 目录，然后打开 functions.php 文件进行编辑。

重要提示： 在修改 functions.php 文件之前，请务必备份您的网站或该文件。错误的修改可能导致网站无法访问。强烈建议使用子主题进行任何代码修改，以避免主题更新时代码被覆盖。

2. 添加自定义PHP代码

将以下代码复制并粘贴到 functions.php 文件的末尾（在 ?> 标签之前，如果存在的话）。

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

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

        // 如果存在变体
        if ($variations_ids) {
            echo ''; // 添加一个容器以便于CSS样式控制
            echo '' . esc_html__('所有变体价格', 'your-text-domain') . ''; // 可选标题
            echo ''; // 使用无序列表显示价格

            // 遍历每个变体ID
            foreach ($variations_ids as $variation_id) {
                // 获取变体产品对象
                $variation_product = wc_get_product($variation_id);

                // 确保变体产品对象有效且可见
                if ($variation_product && $variation_product->is_purchasable() && $variation_product->is_in_stock()) {
                    // 获取并显示变体的HTML格式价格
                    echo '' . $variation_product->get_price_html() . '';
                }
            }
            echo '';
            echo '';
        }
    }
}

/**
 * 将上述函数挂载到WooCommerce的单品页摘要区域
 * 优先级 25 将使其显示在价格和简短描述之后，添加到购物车按钮之前。
 * 您可以调整优先级以改变显示位置。
 */
add_action('woocommerce_single_product_summary', 'list_variation_prices_on_single_product', 25);

代码说明：

list_variation_prices_on_single_product() 函数：
- global $product;：获取当前产品页面的全局 $product 对象。
- if ($product->get_type() === 'variable')：判断当前产品是否为可变产品。只有可变产品才需要列出变体价格。
- $variations_ids = $product->get_children();：获取当前可变产品所有子变体的ID数组。
- foreach ($variations_ids as $variation_id)：循环遍历每个变体ID。
- $variation_product = wc_get_product($variation_id);：根据变体ID获取对应的 WC_Product_Variation 对象，以便访问其属性。
- if ($variation_product && $variation_product->is_purchasable() && $variation_product->is_in_stock())：这是一个额外的检查，确保我们只显示可购买且有库存的变体价格，您可以根据需要调整此条件。
- echo '
- ' . $variation_product->get_price_html() . '

add_action('woocommerce_single_product_summary', 'list_variation_prices_on_single_product', 25);：

这是一个WooCommerce动作钩子，用于将我们的自定义函数挂载到产品详情页的特定位置。
woocommerce_single_product_summary 是一个常用的钩子，它位于产品标题、评分、价格和简短描述之后，添加到购物车按钮之前。
25 是函数的执行优先级。数值越小，执行越早。默认的优先级如下（供参考）：
- 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
- woocommerce_template_single_sharing - 50

三、自定义与优化

1. 调整价格显示方式

在 list_variation_prices_on_single_product 函数内部，$variation_product->get_price_html() 用于显示格式化的价格（可能包含原价和销售价）。如果您需要更具体的控制，可以替换为以下方法：

$variation_product->get_price();：获取当前（销售或常规）价格。
$variation_product->get_regular_price();：获取常规价格。
$variation_product->get_sale_price();：获取销售价格。

例如，如果您只想显示常规价格，可以将代码改为：

echo '' . wc_price($variation_product->get_regular_price()) . '
';

请注意，get_price() 等方法返回的是数字，通常需要使用 wc_price() 函数进行格式化，以确保货币符号和千位分隔符正确显示。

2. 改变显示位置

通过调整 add_action 函数中的优先级数值，您可以改变价格列表在产品详情页上的显示位置。参考上面列出的默认优先级，您可以尝试不同的数值，例如：

add_action('woocommerce_single_product_summary', 'list_variation_prices_on_single_product', 15);：将列表显示在简短描述之前。
add_action('woocommerce_single_product_summary', 'list_variation_prices_on_single_product', 35);：将列表显示在添加到购物车按钮之后。

您也可以将钩子更改为其他位置，例如：

woocommerce_before_single_product_summary：在产品摘要区域上方。
woocommerce_after_single_product_summary：在产品摘要区域下方。

3. 样式定制

我们为价格列表添加了一个 div 容器，类名为 woocommerce-variation-price-list。您可以使用CSS来自定义这个列表的样式，使其与您的网站设计更好地融合。例如，在您的主题的 style.css 文件中添加：

.woocommerce-variation-price-list {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.woocommerce-variation-price-list h4 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.woocommerce-variation-price-list ul {
    list-style: none; /* 移除默认列表点 */
    padding: 0;
    margin: 0;
}

.woocommerce-variation-price-list li {
    padding: 5px 0;
    border-bottom: 1px dotted #f0f0f0;
    display: flex;
    justify-content: space-between; /* 示例：如果价格和变体名称分开显示 */
    align-items: center;
}

.woocommerce-variation-price-list li:last-child {
    border-bottom: none;
}

四、注意事项

备份是关键： 在对 functions.php 文件进行任何修改之前，请务必进行网站备份。
使用子主题： 强烈建议在子主题的 functions.php 中添加代码。这样，当您的父主题更新时，您的自定义代码不会被覆盖。
测试： 添加代码后，务必访问您的可变产品页面，检查价格列表是否正确显示，并确保网站功能正常。
性能： 对于拥有大量变体（例如数百个）的产品，循环遍历并获取每个变体信息可能会对页面加载速度产生轻微影响。在大多数情况下，这不会是问题，但如果遇到性能瓶颈，可能需要考虑更高级的缓存策略。
国际化： 代码中使用了 esc_html__('所有变体价格', 'your-text-domain')，请将 your-text-domain 替换为您主题或插件的文本域，以确保字符串可以被翻译。

五、总结

通过本教程提供的代码和详细说明，您已经成功地为WooCommerce产品详情页实现了变体价格的自动化列表显示。这不仅大大提高了管理效率，减少了手动更新的繁琐，还为顾客提供了更清晰、更全面的价格信息，从而提升了整体购物体验。记住，灵活运用WooCommerce的钩子机制，是实现高度定制化和自动化功能的强大工具。