本教程详细指导如何在 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 '所有变体价格:
'; 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 '
'; echo ''; } }}/** * 将自定义价格列表函数挂载到 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 ‘
‘ . __(‘所有变体价格:’, ‘your-text-domain’) . ‘
‘;
总结
通过上述步骤，您已经成功地在 WooCommerce 单品页实现了所有商品变体价格的自动化列表显示。这个解决方案不仅提升了网站的易用性，减少了手动维护的工作量，还确保了价格信息的实时性和准确性。这种方法是 WooCommerce 开发中利用动作钩子和自定义函数来扩展核心功能的典型示例，对于提升用户体验和运营效率都具有重要意义。
以上就是如何在 WooCommerce 单品页自动列出所有变体商品价格的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1339247.html
微信扫一扫 
支付宝扫一扫 
