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

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

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

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

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

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

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

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

这个函数通常放置在您当前主题（推荐使用子主题）的 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 价格字符串（例如，会显示划线的原价和当前的销售价）。
• 和
  • 标签：用于将价格列表以标准 HTML 无序列表的形式呈现，便于阅读和样式控制。

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

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

  Shakker

  多功能AI图像生成和编辑平台

  140 查看详情

  对于在单品页显示内容，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 );
  ?>

  注意事项与最佳实践

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

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

     ' . __('所有变体价格:', 'your-text-domain') . '

     ';

  总结

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

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

# 如果您  # 阿里营销宝哪个推广好  # 蓝百万seo  # 新疆高效网站建设  # 南京制作网站建设推广  # 一站式营销公司推广文案  # 西安网站产品优化  # 福建快速关键词排名优  # 米业网站推广  # 黑帽seo批量优化  # 网站商品陈列位营销推广  # 遍历  # 如何在  # 您的  # css  # 您可以  # 购物车  # 这是  # 自定义  # 单品  # 币  # php 函数  # 性能瓶颈  # 多语言  # ai  # html  # php 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】

相关推荐： 小红书网页版首页入口 小红书网页版电脑端官方登录链接  Google Drive API服务器端访问指南：服务账户认证详解  sublime如何撤销关闭的标签页_sublime重新打开已关闭文件技巧  word文档行距怎么调？word文档调行距的操作步骤  《淘票票》添加到苹果钱包教程  Yandex浏览器官方入口_Yandex搜索引擎中文版  Golang中的rune与byte类型区别是什么_Golang字符与字节处理详解  wps文字怎么设置文字环绕图片的方式_wps文字如何设置文字环绕图片方式  Win10输入法不见了怎么办 Win10找回语言栏图标教程  大熊猫抓取竹子的“大拇指”其实是什么？蚂蚁庄园课堂今天答案最新11月30日  多闪APP官方下载安装入口_多闪最新版本获取入口  《大学搜题酱》官网地址登录  铁路12306怎么申请退票_铁路12306退票申请操作流程  德邦快递收费标准详解  动漫之家观看全集库 动漫之家免费资源网地址  风车动漫官网首页入口登录 风车动漫在线观看正版地址  《海豚家》注销账号方法  word怎么将图片设置为页面背景并不影响打印_Word图片背景设置方法  C++二维数组动态分配方法_C++指针与数组内存布局  lol小红书怎么|直播|？lol小红书|直播|是什么意思？  实现可重用自定义Python Range类  b站怎么查看视频的码率_b站视频码率查看方法  红手指专业版app注册教程  汽车之家网页版免费登录_汽车之家官网首页直接进入  视频号视频怎么免费保存到相册？保存到相册需要注意什么？  如何在Golang中处理表单文件上传_Golang 表单文件上传示例  掌握产品代码正则表达式：避免常见陷阱与精确匹配  c++中的const关键字用法大全_c++ const正确使用指南  Git命令与VS Code UI操作的对应关系解析  Lar*el怎么实现全文搜索_Lar*el Scout集成Algolia教程  c++20的指定初始化(Designated Initializers)怎么用_c++ C风格结构体初始化  sublime如何处理超大文件不卡顿 _sublime打开大日志文件技巧  windows10怎么开启卓越性能_windows10电源选项代码激活  《王者荣耀世界》英雄获取攻略  创建您的便携版VS Code：让配置随身携带  驱动人生：游戏修复指南  Eclipse开发J*a快速入门  韩剧圈正版官网入口_韩剧圈官方指定登录  《随手记》备份数据方法  yy漫画官方网站登录入口_yy漫画在线阅读页面地址  PySimpleGUI中实现键盘按键与按钮事件绑定教程  漫蛙官网(首页入口)_漫蛙漫画稳定访问教程分享  修复UI元素交互障碍：从“开始”按钮到信息框的平滑过渡实现  PPT页面尺寸怎么修改 PPT自定义幻灯片大小与方向设置【教程】  优化长HTML属性值：SonarQube警告与实用策略  c++如何掌握指针的核心用法_c++指针入门到精通指南  鲨鱼剧场app金币获取方法  byrutor直接访问入口 byrutor官方游戏库  Go App Engine 项目结构与包管理深度指南  TikTok收藏夹无法删除视频如何解决 TikTok收藏管理优化方法 

 2025-12-01