WooCommerce：在单产品页动态显示所有变体价格列表

本教程将指导您如何在WooCommerce单产品页面上自动显示所有可变产品的变体价格列表，无需手动输入。通过编写自定义PHP函数并利用WooCommerce钩子，您可以动态获取并以清晰的列表形式呈现不同变体的价格信息，从而提升用户体验并实现价格信息的自动化管理。

在WooCommerce商店中，当产品拥有多个变体（如不同尺寸、颜色）时，通常用户需要通过下拉菜单选择特定变体才能看到其对应的价格。为了提升用户体验，有时我们需要在单产品页面上直接列出所有可用变体的价格，让顾客一目了然。本教程将详细介绍如何通过自定义代码实现这一功能，从而实现价格信息的自动化展示。

核心实现原理

实现这一功能主要依赖于WordPress和WooCommerce的钩子（Hooks）机制。我们将编写一个自定义PHP函数，该函数会：

1. 判断当前产品是否为可变产品。
2. 获取该产品的所有子变体（即每个具体的变体）。
3. 遍历这些变体，并提取每个变体的价格信息。
4. 将价格信息格式化并输出为HTML列表。
5. 最后，使用add_action钩子将此函数挂载到WooCommerce单产品页面的特定位置，使其自动执行并显示价格列表。

实现步骤

步骤一：创建自定义函数以获取并显示变体价格

首先，我们需要编写一个PHP函数来处理变体价格的获取和显示逻辑。

function list_variation_prices() {
    global $product; // 声明全局产品对象

    // 检查当前产品是否为可变产品
    if ($product->get_type() === 'variable') {
        // 获取所有子变体ID
        $variations = $product->get_children();

        // 如果存在变体，则开始构建价格列表
        if ($variations) {
            echo '<ul>'; // 开始无序列表
            foreach ($variations as $variation_id) {
                // 根据变体ID获取WC_Product_Variation对象
                $vproduct = wc_get_product($variation_id);
                // 输出列表项，包含变体的价格HTML
                echo '<li>' . $vproduct->get_price_html() . '</li>';
            }
            echo '</ul>'; // 结束无序列表
        }
    }
}

代码解析：

SuperDesign

开源的UI设计AI智能体

216

查看详情

• global $product;: 在函数内部访问WooCommerce的全局产品对象，以便获取当前页面的产品信息。
• $product-youjiankuohaophpcnget_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 '<li>' . implode(', ', $attribute_string) . ' - ' . $price_html . '</li>';
  }

  登录后复制

  这段代码将输出类似 颜色: red, 尺寸: small - $100 的格式。

注意事项

• 缓存： 如果您的网站使用了缓存插件，在添加或修改代码后，请务必清除网站缓存，以确保更改能够立即生效。
• 性能： 对于拥有大量变体（例如几百个）的产品，遍历所有变体并获取其数据可能会对页面加载速度产生轻微影响。在大多数情况下，这不会成为问题，但如果遇到性能瓶颈，可能需要考虑更高级的优化方案（如AJAX加载）。
• 主题兼容性： 虽然woocommerce_single_product_summary是一个标准的WooCommerce钩子，但某些高度定制的主题可能会修改其行为或布局。如果代码没有按预期工作，请检查主题的文档或代码。

总结

通过本教程，您已经学会了如何在WooCommerce单产品页面上自动列出所有变体价格。这种方法不仅能够消除手动维护价格列表的繁琐工作，还能显著提升用户在浏览可变产品时的体验，使他们能够快速了解所有选项的价格，从而更高效地做出购买决策。根据您的具体需求，您可以进一步定制价格的显示格式和包含的信息，以完美融入您的网站设计。

以上就是WooCommerce：在单产品页动态显示所有变体价格列表的详细内容，更多请关注php中文网其它相关文章！