WooCommerce 单一产品页自动显示所有变体价格列表教程

心靈之曲

发布时间：2025-12-03 12:22:19

790人浏览过

来源于php中文网

原创

WooCommerce 单一产品页自动显示所有变体价格列表教程

本教程将指导您如何在 woocommerce 单一产品页面上自动显示所有产品变体的价格列表。通过集成自定义 php 函数和 woocommerce 钩子，您可以避免手动更新价格信息，确保客户始终能清晰地看到所有变体选项及其对应的价格，从而提升用户体验和管理效率。

在 WooCommerce 商店中，当一个产品拥有多个变体（如不同尺寸、颜色）时，每个变体通常对应一个独立的价格。默认情况下，用户需要通过下拉菜单选择特定变体才能看到其价格。为了提升用户体验，让客户一眼就能看到所有变体的价格范围或具体列表，我们可以通过自定义代码实现价格列表的自动化显示。这不仅减少了手动维护的工作量，也使得价格信息更加透明和易于访问。

自动化显示产品变体价格列表

要实现这一功能，我们需要编写一个自定义 PHP 函数，该函数会遍历当前产品的每一个变体，并提取其价格信息，然后将其显示在产品页面的指定位置。

核心代码实现

将以下代码添加到您的 WordPress 主题的 functions.php 文件中，或者集成到一个自定义插件中。

/**
 * 在 WooCommerce 单一产品页显示所有变体价格列表
 */
function list_variation_prices() {
    global $product; // 获取当前产品对象

    // 检查产品类型是否为“可变产品”
    if ($product->get_type() === 'variable') {
        // 获取所有子变体ID
        $variations = $product->get_children();

        // 如果存在变体，则开始构建列表
        if ($variations) {
            echo '<h3>所有变体价格</h3>'; // 可选：添加一个标题
            echo '<ul>'; // 使用无序列表来展示价格

            foreach ($variations as $variation_id) {
                // 获取每个变体的产品对象
                $vproduct = wc_get_product($variation_id);
                if ($vproduct) {
                    // 输出变体价格HTML
                    echo '<li>' . $vproduct->get_name() . ': ' . $vproduct->get_price_html() . '</li>';
                }
            }
            echo '</ul>';
        }
    }
}

/**
 * 将自定义函数挂载到 WooCommerce 单一产品页面的指定位置
 *
 * @hooked woocommerce_single_product_summary - 挂载点
 * @param int 25 - 优先级，决定显示位置
 */
add_action('woocommerce_single_product_summary', 'list_variation_prices', 25);

代码解析

list_variation_prices() 函数:
- global $product;: 声明全局变量 $product，以便在函数内部访问当前产品对象。
- if ($product->get_type() === 'variable'): 这是一个关键检查，确保只有可变产品才会执行后续逻辑。
- $variations = $product->get_children();: 获取当前可变产品的所有子变体（即每个具体的变体）的 ID 数组。
- foreach ($variations as $variation_id): 遍历每个变体 ID。
- $vproduct = wc_get_product($variation_id);: 根据变体 ID 获取对应的 WC_Product_Variation 对象，这样我们就可以访问该变体的具体属性和方法。
- echo '<li>' . $vproduct->get_name() . ': ' . $vproduct->get_price_html() . '</li>';: 这是输出价格的核心部分。
  - $vproduct->get_name(): 获取变体的名称（通常是产品名称加上变体属性，例如 "T-Shirt - Red, Large"）。
  - $vproduct->get_price_html(): 这是一个非常有用的 WooCommerce 方法，它会自动根据变体的常规价格和销售价格，生成格式化的价格 HTML 字符串，包括划线价格和促销价格。
add_action() 钩子:

飞书多维表格
表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

下载
- add_action('woocommerce_single_product_summary', 'list_variation_prices', 25);: 这行代码将 list_variation_prices 函数挂载到 woocommerce_single_product_summary 动作钩子上。
- woocommerce_single_product_summary: 这是 WooCommerce 在单一产品页面上显示产品摘要信息的区域。
- 25: 这是优先级参数。数字越小，函数执行得越早。通过调整这个值，您可以控制价格列表在产品信息块中的显示顺序。

自定义价格显示

在 echo '<li>' . $vproduct->get_name() . ': ' . $vproduct->get_price_html() . '</li>'; 这一行中，您可以根据需要替换 $vproduct->get_price_html() 为其他价格获取方法：

$vproduct->get_price(): 获取当前变体的实际价格（可能是销售价格）。
$vproduct->get_regular_price(): 获取变体的常规价格。
$vproduct->get_sale_price(): 获取变体的销售价格。

例如，如果您只想显示常规价格，可以这样修改： echo '<li>' . $vproduct->get_name() . ': ' . wc_price($vproduct->get_regular_price()) . '</li>'; 请注意，wc_price() 函数用于将数字价格格式化为带有货币符号的字符串。

调整显示位置

add_action 中的优先级参数（25）决定了您的价格列表在产品摘要区域中的显示顺序。您可以参考以下 WooCommerce 默认钩子优先级来选择合适的位置：

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 (结构化数据)

如果您想让价格列表显示在“添加到购物车”按钮之前，可以设置一个小于 30 的优先级，例如 25。如果想显示在简短描述之后，也可以使用 25。

注意事项与最佳实践

代码位置: 强烈建议将此类自定义代码放入子主题的 functions.php 文件中，而不是直接修改父主题。这样可以确保在主题更新时，您的更改不会丢失。对于更复杂的定制，可以考虑创建一个自定义插件。
性能考虑: 如果您的产品有非常多的变体（例如几百个），在页面加载时遍历并获取所有变体信息可能会对性能产生轻微影响。对于大多数情况，这不会是问题。

样式定制: 默认输出的列表可能不符合您的网站设计。您可以使用 CSS 对 <ul> 和 <li> 元素进行样式定制，以使其与主题风格保持一致。例如：

/* 在您的主题或子主题的 style.css 文件中添加 */
.single-product .product_summary ul {
    list-style: none; /* 移除默认列表点 */
    padding: 0;
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}
.single-product .product_summary ul li {
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #555;
}
.single-product .product_summary ul li .price {
    font-weight: bold;
    color: #333;
}