如何在 WooCommerce 单品页自动列出所有变体商品价格-php教程-PHP中文网

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

花韻仙語

发布： 2025-12-01 10:25:35

原创

534人浏览过

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

本教程详细指导如何在 woocommerce 单品页面自动展示所有商品变体的价格列表。通过集成自定义 php 函数和 woocommerce 动作钩子，您可以摆脱手动维护变体价格的繁琐，确保价格更新即时同步，并显著提升用户体验，让顾客无需切换选项即可一览所有变体的价格信息。

理解需求：自动化显示变体价格的必要性

在 WooCommerce 中，可变商品（Variable Product）允许商家为同一商品设置不同的属性组合（如尺寸、颜色）并对应不同的价格。默认情况下，顾客需要在单品页面通过下拉菜单选择特定变体后，才能看到该变体的价格。对于拥有多个变体和复杂价格结构的商品，这种交互方式可能导致用户体验不佳，因为顾客需要多次操作才能了解所有价格范围。

手动在商品描述中列出所有变体价格不仅耗时，而且一旦价格发生变动，就需要手动更新文本，极易出错且效率低下。本教程旨在提供一个自动化解决方案，通过编程方式动态获取并显示所有变体价格，确保数据的准确性和实时性。

核心实现：通过自定义函数获取并展示变体价格

要实现变体价格的自动化展示，我们需要编写一个自定义 PHP 函数，该函数将负责：

判断当前商品是否为可变商品。
获取所有可用的变体。
遍历每个变体，提取其价格信息。
将价格信息格式化并输出为列表。

这个函数通常放置在您当前主题（推荐使用子主题）的 functions.php 文件中。

编写自定义函数

以下是实现上述功能的 PHP 代码：

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

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

        // 如果存在变体，则开始构建价格列表
        if ( ! empty( $variation_ids ) ) {
            echo '<div class="product-variations-price-list">'; // 添加一个容器 div 便于样式控制
            echo '<h4>所有变体价格:</h4>'; // 添加一个标题
            echo '<ul>'; // 开始无序列表

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

                // 确保变体商品对象有效且可购买
                if ( $vproduct && $vproduct->is_purchasable() && $vproduct->get_price() !== '' ) {
                    // 获取并输出变体的价格HTML，包括销售价和原价
                    echo '<li>' . $vproduct->get_name() . ': ' . $vproduct->get_price_html() . '</li>';
                }
            }
            echo '</ul>'; // 结束无序列表
            echo '</div>'; // 结束容器 div
        }
    }
}

登录后复制

代码解析：

global $product;: 声明全局变量 $product，以便在函数内部访问当前正在显示的商品对象。
$product->is_type('variable'): 判断当前商品是否为可变商品。只有可变商品才会有变体价格列表。
$product->get_children(): 获取当前可变商品的所有子变体的 ID 数组。
wc_get_product( $variation_id ): 根据变体 ID 获取对应的 WC_Product_Variation 对象，通过此对象我们可以访问变体的详细信息，如名称和价格。
$vproduct->get_name(): 获取变体的名称。这通常是其属性的组合，例如“T恤 - 红色, 大号”。
$vproduct->get_price_html(): 这是 WooCommerce 提供的一个非常方便的方法，它会自动根据变体的常规价格和销售价格生成格式化的 HTML 价格字符串（例如，会显示划线的原价和当前的销售价）。
<ul> 和 <li> 标签：用于将价格列表以标准 HTML 无序列表的形式呈现，便于阅读和样式控制。

集成到 WooCommerce 单品页：使用 Action Hook

仅仅定义了函数还不够，我们还需要告诉 WooCommerce 何时何地执行这个函数。这通过使用 WooCommerce 的“动作钩子”（Action Hook）来实现。动作钩子允许我们在 WooCommerce 的特定事件或位置插入自定义代码。

AI Humanize

使用AI改写工具，生成不可被AI检测的文本内容

154

查看详情

对于在单品页显示内容，woocommerce_single_product_summary 是一个常用的钩子，它位于商品摘要区域。

/**
 * 将自定义价格列表函数挂载到 WooCommerce 单品页面的摘要区域
 * 优先级 25 将使其显示在商品描述（excerpt）之后，添加到购物车按钮之前。
 */
add_action( 'woocommerce_single_product_summary', 'list_variation_prices', 25 );

登录后复制

add_action() 函数解析：

woocommerce_single_product_summary: 这是 WooCommerce 提供的一个动作钩子，位于商品标题、评分、价格和简短描述之后，添加到购物车按钮之前。
'list_variation_prices': 这是我们上面定义的函数名，表示当 woocommerce_single_product_summary 钩子被触发时，将执行 list_variation_prices 函数。
25: 这是优先级参数。数字越小，函数执行得越早。默认优先级是 10。通过调整这个数字，您可以控制价格列表在单品页摘要区域中的具体位置。

以下是 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 (商品分享按钮)

将优先级设置为 25，意味着我们的价格列表将显示在商品简短描述（优先级 20）之后，添加到购物车按钮（优先级 30）之前。

完整代码示例

将以下代码片段完整添加到您的子主题的 functions.php 文件中：

<?php
/**
 * 在 WooCommerce 单品页列出所有变体商品的价格
 */
function list_variation_prices() {
    global $product;

    if ( $product && $product->is_type('variable') ) {
        $variation_ids = $product->get_children();

        if ( ! empty( $variation_ids ) ) {
            echo '<div class="product-variations-price-list">';
            echo '<h4>所有变体价格:</h4>';
            echo '<ul>';

            foreach ( $variation_ids as $variation_id ) {
                $vproduct = wc_get_product( $variation_id );

                if ( $vproduct && $vproduct->is_purchasable() && $vproduct->get_price() !== '' ) {
                    echo '<li>' . $vproduct->get_name() . ': ' . $vproduct->get_price_html() . '</li>';
                }
            }
            echo '</ul>';
            echo '</div>';
        }
    }
}

/**
 * 将自定义价格列表函数挂载到 WooCommerce 单品页面的摘要区域
 * 优先级 25 将使其显示在商品描述（excerpt）之后，添加到购物车按钮之前。
 */
add_action( 'woocommerce_single_product_summary', 'list_variation_prices', 25 );
?>

登录后复制

注意事项与最佳实践

代码放置位置：务必将代码放置在子主题的 functions.php 文件中。直接修改父主题的 functions.php 会在主题更新时丢失您的更改。如果您没有子主题，建议先创建一个。
价格显示格式：
- $vproduct->get_price_html() 会输出包含货币符号、销售价（如果适用）和HTML标签的完整价格字符串。
- 如果您只需要裸露的价格数字，可以使用 $vproduct->get_price() 获取当前价格（可能是销售价），$vproduct->get_regular_price() 获取常规价格，或 $vproduct->get_sale_price() 获取销售价格。您可以根据需求替换 get_price_html()。

样式定制：代码中为价格列表添加了 product-variations-price-list 类和 h4 标题。您可以使用 CSS 对其进行美化，以符合您网站的整体设计。例如：

.product-variations-price-list {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}
.product-variations-price-list h4 {
    font-size: 1.1em;
    margin-bottom: 10px;
}
.product-variations-price-list ul {
    list-style: none;
    padding-left: 0;
}
.product-variations-price-list li {
    margin-bottom: 5px;
    line-height: 1.5;
}
.product-variations-price-list li ins { /* 销售价样式 */
    color: #e24b4b;
    font-weight: bold;
    text-decoration: none;
}
.product-variations-price-list li del { /* 原价样式 */
    color: #999;
    text-decoration: line-through;
    margin-right: 5px;
}

登录后复制

性能考量：对于拥有极大量变体（例如数百个）的商品，遍历所有变体并获取其数据可能会对页面加载速度产生轻微影响。在大多数情况下，这并不是问题，但如果您遇到性能瓶颈，可能需要考虑缓存机制或更高级的优化方法。
多语言支持：如果您使用多语言插件（如 WPML 或 Polylang），确保变体名称和任何自定义文本都通过 __() 或 _e() 函数进行国际化，以便翻译。例如：echo '<h4>' . __('所有变体价格:', 'your-text-domain') . '</h4>';

总结

通过上述步骤，您已经成功地在 WooCommerce 单品页实现了所有商品变体价格的自动化列表显示。这个解决方案不仅提升了网站的易用性，减少了手动维护的工作量，还确保了价格信息的实时性和准确性。这种方法是 WooCommerce 开发中利用动作钩子和自定义函数来扩展核心功能的典型示例，对于提升用户体验和运营效率都具有重要意义。

以上就是如何在 WooCommerce 单品页自动列出所有变体商品价格的详细内容，更多请关注php中文网其它相关文章！