WooCommerce 单一产品页自动显示所有变体价格列表教程

本教程将指导您如何在 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 '
所有变体价格
'; // 可选：添加一个标题
            echo '
'; // 使用无序列表来展示价格

            foreach ($variations as $variation_id) {
                // 获取每个变体的产品对象
                $vproduct = wc_get_product($variation_id);
                if ($vproduct) {
                    // 输出变体价格HTML
                    echo '
' . $vproduct->get_name() . ': ' . $vproduct->get_price_html() . '
';
                }
            }
            echo '
';
        }
    }
}

/**
 * 将自定义函数挂载到 WooCommerce 单一产品页面的指定位置
 *
 * @hooked woocommerce_single_product_summary - 挂载点
 * @param int 25 - 优先级，决定显示位置
 */
add_action('woocommerce_single_product_summary', 'list_variation_prices', 25);

代码解析

1. 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 '
   • ' . $vproduct->get_name() . ': ' . $vproduct->get_price_html() . '
   ';: 这是输出价格的核心部分。
   • $vproduct->get_name(): 获取变体的名称（通常是产品名称加上变体属性，例如 "T-Shirt - Red, Large"）。
   • $vproduct->get_price_html(): 这是一个非常有用的 WooCommerce 方法，它会自动根据变体的常规价格和销售价格，生成格式化的价格 HTML 字符串，包括划线价格和促销价格。

2. add_action() 钩子:

   

   Teleporthq

   一体化AI网站生成器，能够快速设计和部署静态网站

   下载
   • add_action('woocommerce_single_product_summary', 'list_variation_prices', 25);: 这行代码将 list_variation_prices 函数挂载到 woocommerce_single_product_summary 动作钩子上。
   • woocommerce_single_product_summary: 这是 WooCommerce 在单一产品页面上显示产品摘要信息的区域。
   • 25: 这是优先级参数。数字越小，函数执行得越早。通过调整这个值，您可以控制价格列表在产品信息块中的显示顺序。

自定义价格显示

在 echo '

• $vproduct->get_price(): 获取当前变体的实际价格（可能是销售价格）。
• $vproduct->get_regular_price(): 获取变体的常规价格。
• $vproduct->get_sale_price(): 获取变体的销售价格。

例如，如果您只想显示常规价格，可以这样修改： echo '

调整显示位置

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。

注意事项与最佳实践

1. 代码位置: 强烈建议将此类自定义代码放入子主题的 functions.php 文件中，而不是直接修改父主题。这样可以确保在主题更新时，您的更改不会丢失。对于更复杂的定制，可以考虑创建一个自定义插件。
2. 性能考虑: 如果您的产品有非常多的变体（例如几百个），在页面加载时遍历并获取所有变体信息可能会对性能产生轻微影响。对于大多数情况，这不会是问题。
3. 样式定制: 默认输出的列表可能不符合您的网站设计。您可以使用 CSS 对
   和
   • 元素进行样式定制，以使其与主题风格保持一致。例如：

     /* 在您的主题或子主题的 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 单一产品页面上自动化显示所有变体的价格列表。这不仅提升了用户体验，让客户能更直观地了解产品价格信息，也大大简化了商店管理员的维护工作。根据您的具体需求，您可以进一步定制价格的显示格式和列表的样式，使其完美融入您的网站设计。