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 便于样式控制
            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 );
  ?>

  注意事项与最佳实践

  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 开发中利用动作钩子和自定义函数来扩展核心功能的典型示例，对于提升用户体验和运营效率都具有重要意义。