本教程详细指导如何在 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 便于样式控制
echo '所有变体价格:
'; // 添加一个标题
echo ''; // 开始无序列表
foreach ( $variation_ids as $variation_id ) {
// 根据变体ID获取变体商品对象
$vproduct = wc_get_product( $variation_id );
// 确保变体商品对象有效且可购买
if ( $vproduct && $vproduct->is_purchasable() && $vproduct->get_price() !== '' ) {
// 获取并输出变体的价格HTML，包括销售价和原价
echo '- ' . $vproduct->get_name() . ': ' . $vproduct->get_price_html() . '
';
}
}
echo '
'; // 结束无序列表
echo ''; // 结束容器 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 价格字符串（例如，会显示划线的原价和当前的销售价）。
-
- 和
- 标签：用于将价格列表以标准 HTML 无序列表的形式呈现，便于阅读和样式控制。
集成到 WooCommerce 单品页：使用 Action Hook
仅仅定义了函数还不够，我们还需要告诉 WooCommerce 何时何地执行这个函数。这通过使用 WooCommerce 的“动作钩子”（Action Hook）来实现。动作钩子允许我们在 WooCommerce 的特定事件或位置插入自定义代码。
对于在单品页显示内容，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 文件中：
is_type('variable') ) { $variation_ids = $product->get_children(); if ( ! empty( $variation_ids ) ) { echo ''; echo ''; } } } /** * 将自定义价格列表函数挂载到 WooCommerce 单品页面的摘要区域 * 优先级 25 将使其显示在商品描述（excerpt）之后，添加到购物车按钮之前。 */ add_action( 'woocommerce_single_product_summary', 'list_variation_prices', 25 ); ?>所有变体价格:
'; echo '- ';
foreach ( $variation_ids as $variation_id ) {
$vproduct = wc_get_product( $variation_id );
if ( $vproduct && $vproduct->is_purchasable() && $vproduct->get_price() !== '' ) {
echo '
- ' . $vproduct->get_name() . ': ' . $vproduct->get_price_html() . ' '; } } echo '
注意事项与最佳实践
- 代码放置位置：务必将代码放置在子主题的 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 '
' . __('所有变体价格:', 'your-text-domain') . '
';
总结
通过上述步骤，您已经成功地在 WooCommerce 单品页实现了所有商品变体价格的自动化列表显示。这个解决方案不仅提升了网站的易用性，减少了手动维护的工作量，还确保了价格信息的实时性和准确性。这种方法是 WooCommerce 开发中利用动作钩子和自定义函数来扩展核心功能的典型示例，对于提升用户体验和运营效率都具有重要意义。
