本教程将指导您如何在 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() 钩子:
- 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; }登录后复制 - 国际化: 如果您的网站支持多语言，确保您的自定义文本（如“所有变体价格”）也进行国际化处理，例如使用 _e(‘所有变体价格’, ‘your-text-domain’);。
总结
通过上述方法，您可以轻松地在 WooCommerce 单一产品页面上自动化显示所有变体的价格列表。这不仅提升了用户体验，让客户能更直观地了解产品价格信息，也大大简化了商店管理员的维护工作。根据您的具体需求，您可以进一步定制价格的显示格式和列表的样式，使其完美融入您的网站设计。
以上就是WooCommerce 单一产品页自动显示所有变体价格列表教程的详细内容，更多请关注php中文网其它相关文章！