本教程将指导您如何在WooCommerce单产品页面上自动显示所有可变产品的变体价格列表，无需手动输入。通过编写自定义PHP函数并利用WooCommerce钩子，您可以动态获取并以清晰的列表形式呈现不同变体的价格信息，从而提升用户体验并实现价格信息的自动化管理。
在WooCommerce商店中，当产品拥有多个变体（如不同尺寸、颜色）时，通常用户需要通过下拉菜单选择特定变体才能看到其对应的价格。为了提升用户体验，有时我们需要在单产品页面上直接列出所有可用变体的价格，让顾客一目了然。本教程将详细介绍如何通过自定义代码实现这一功能，从而实现价格信息的自动化展示。
核心实现原理
实现这一功能主要依赖于WordPress和WooCommerce的钩子（Hooks）机制。我们将编写一个自定义PHP函数，该函数会：
- 判断当前产品是否为可变产品。
- 获取该产品的所有子变体（即每个具体的变体）。
- 遍历这些变体，并提取每个变体的价格信息。
- 将价格信息格式化并输出为HTML列表。
- 最后，使用add_action钩子将此函数挂载到WooCommerce单产品页面的特定位置，使其自动执行并显示价格列表。
实现步骤
步骤一：创建自定义函数以获取并显示变体价格
首先，我们需要编写一个PHP函数来处理变体价格的获取和显示逻辑。
function list_variation_prices() {
global $product; // 声明全局产品对象
// 检查当前产品是否为可变产品
if ($product->get_type() === 'variable') {
// 获取所有子变体ID
$variations = $product->get_children();
// 如果存在变体，则开始构建价格列表
if ($variations) {
echo '- '; // 开始无序列表
foreach ($variations as $variation_id) {
// 根据变体ID获取WC_Product_Variation对象
$vproduct = wc_get_product($variation_id);
// 输出列表项，包含变体的价格HTML
echo '
- ' . $vproduct->get_price_html() . ' '; } echo '
代码解析：
- global $product;: 在函数内部访问WooCommerce的全局产品对象，以便获取当前页面的产品信息。
- $product->get_type() === 'variable': 判断当前产品是否为“可变产品”类型。只有可变产品才会有多个变体价格。
- $product->get_children(): 这个方法返回一个数组，其中包含当前可变产品所有子变体（variation）的ID。
- wc_get_product($variation_id): 通过变体ID获取到一个WC_Product_Variation对象。这个对象包含了特定变体的所有详细信息，包括价格。
- $vproduct->get_price_html(): 这是WooCommerce提供的一个便捷方法，它会根据产品的销售状态（原价、促销价）和货币设置，返回一个格式化的价格HTML字符串。
步骤二：将函数挂载到WooCommerce单产品页面
编写好函数后，需要将其挂载到WooCommerce单产品页面的某个动作钩子上，以便在页面加载时自动执行。
/**
* 挂载自定义函数到WooCommerce单产品页面的总结区域
* 调整优先级可以改变显示位置。常用优先级参考：
* @hooked woocommerce_template_single_title - 5 (产品标题)
* @hooked woocommerce_template_single_rating - 10 (产品评价)
* @hooked woocommerce_template_single_price - 10 (产品价格范围)
* @hooked woocommerce_template_single_excerpt - 20 (产品简短描述)
* @hooked woocommerce_template_single_add_to_cart - 30 (添加到购物车按钮)
* @hooked woocommerce_template_single_meta - 40 (产品元信息)
* @hooked woocommerce_template_single_sharing - 50 (产品分享按钮)
* @hooked WC_Structured_Data::generate_product_data() - 60 (结构化数据)
*/
add_action('woocommerce_single_product_summary', 'list_variation_prices', 25);代码解析：
- add_action(): 这是WordPress用于挂载函数的标准API。
- 'woocommerce_single_product_summary': 这是一个WooCommerce动作钩子，它位于单产品页面的产品标题、价格、简短描述和添加到购物车按钮所在的“总结”区域。
- 'list_variation_prices': 这是我们上面定义的函数名。
- 25: 这是函数的执行优先级。数字越小，函数执行得越早。在此示例中，我们将其设置为25，这意味着它将在简短描述（优先级20）之后、添加到购物车按钮（优先级30）之前显示。您可以根据需要调整此优先级，以改变价格列表在页面上的具体位置。
代码放置位置
将上述两个代码块（自定义函数和add_action调用）放置到以下位置之一：
- 主题的 functions.php 文件： 这是最常见的做法。如果您使用的是子主题，请将代码添加到子主题的 functions.php 文件中，以避免在主题更新时丢失更改。
- 自定义插件： 对于更专业的开发或需要将功能在多个网站上复用的情况，建议创建一个简单的自定义WordPress插件来包含这些代码。
自定义显示格式
当前代码使用 get_price_html() 方法来显示价格，它会自动包含货币符号和促销价的删除线等HTML格式。如果您需要更精细的控制，例如只显示纯数字价格，或者想在价格旁边显示变体的属性（如“尺寸：小 - $100”），您可以进行以下修改：
-
获取纯数字价格：
- $vproduct->get_price(): 获取当前变体的实际价格（可能是促销价）。
- $vproduct->get_regular_price(): 获取当前变体的原价。
- $vproduct->get_sale_price(): 获取当前变体的促销价。 您可以根据需要选择其中一个，并使用 wc_price() 函数进行格式化，例如：wc_price($vproduct->get_price())。
-
显示变体属性： 要显示变体的属性，您需要访问变体对象中的属性数据。例如，如果您的变体有“颜色”和“尺寸”属性：
foreach ($variations as $variation_id) { $vproduct = wc_get_product($variation_id); $attributes = $vproduct->get_variation_attributes(); // 获取变体属性数组 $attribute_string = []; foreach ($attributes as $key => $value) { // $key 通常是 'attribute_pa_color' 或 'attribute_size' // $value 是属性值，如 'red' 或 'small' $attribute_name = wc_attribute_label(str_replace('attribute_', '', $key)); // 获取属性的显示名称 $attribute_string[] = $attribute_name . ': ' . $value; } $price_html = $vproduct->get_price_html(); echo ' - ' . implode(', ', $attribute_string) . ' - ' . $price_html . ' '; }
这段代码将输出类似 颜色: red, 尺寸: small - $100 的格式。
注意事项
- 缓存： 如果您的网站使用了缓存插件，在添加或修改代码后，请务必清除网站缓存，以确保更改能够立即生效。
- 性能： 对于拥有大量变体（例如几百个）的产品，遍历所有变体并获取其数据可能会对页面加载速度产生轻微影响。在大多数情况下，这不会成为问题，但如果遇到性能瓶颈，可能需要考虑更高级的优化方案（如AJAX加载）。
- 主题兼容性： 虽然woocommerce_single_product_summary是一个标准的WooCommerce钩子，但某些高度定制的主题可能会修改其行为或布局。如果代码没有按预期工作，请检查主题的文档或代码。
总结
通过本教程，您已经学会了如何在WooCommerce单产品页面上自动列出所有变体价格。这种方法不仅能够消除手动维护价格列表的繁琐工作，还能显著提升用户在浏览可变产品时的体验，使他们能够快速了解所有选项的价格，从而更高效地做出购买决策。根据您的具体需求，您可以进一步定制价格的显示格式和包含的信息，以完美融入您的网站设计。
