如何在WooCommerce自定义WhatsApp消息中包含选中产品变体及价格

我在WooCommerce产品页面添加了“Order on WhatsApp”按钮，点击后会跳转至WhatsApp并填充预设消息，内容为“我想要购买：产品名称及产品URL”。以下是我的代码：

function ecommercehints_content_after_add_to_cart_form() {
    // Get the ID of the current product
    $product_id = get_the_ID();

    // Get the product's title
    $product_title = get_the_title($product_id);

    // Get the product's URL
    $product_url = get_permalink($product_id);
    ?>
    <style>
    .order_on_whatsapp {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        border-radius: 3px;
        background-color: #fff;
        color: #131313;
        padding: 10px;
        text-decoration: none;
        font-weight: 700;
        border: 2px solid #5e51b6;
        font-size: 115%;
    }
    .order_on_whatsapp:hover{
        background-color: #6051BA;
        color: #fff;  
    }
    .order_on_whatsapp img {
        margin-right: 10px;
        width: 14px;
    }
    </style>
    <?php
    // Output the WhatsApp button with the product's title and URL in the pre-filled message
    echo '<a href="https://api.whatsapp.com/send?phone=+918488806776&text=Hello,%20I%20want%20to%20buy:%20' . 
    $product_title . ' (' . $product_url . ')" class="order_on_whatsapp">
    <img src="https://woo.cdesksolutions.com/wp-content/uploads/2022/11/whatsapp.webp" width="14px">
         Enquire on Whatsapp
    </a>';
}
add_action('woocommerce_after_add_to_cart_button', 'ecommercehints_content_after_add_to_cart_form', 30);

请问是否可以在预设消息中显示选中的产品变体及其价格？

当然可以实现。因为产品变体是用户在前端选择的，需要结合**PHP（输出基础信息）和JavaScript（动态获取选中的变体数据）**来更新WhatsApp的预设消息。

修改后的完整代码 #

function ecommercehints_content_after_add_to_cart_form() {
    global $product;
    
    // 获取产品基础信息
    $product_title = $product->get_title();
    $product_url = get_permalink($product->get_id());
    $base_phone = '+918488806776';
    
    // 初始化默认消息（简单产品用这个，变体产品会被JS替换）
    $default_text = urlencode("Hello, I want to buy: {$product_title} ({$product_url})");
    ?>
    <style>
    .order_on_whatsapp {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        border-radius: 3px;
        background-color: #fff;
        color: #131313;
        padding: 10px;
        text-decoration: none;
        font-weight: 700;
        border: 2px solid #5e51b6;
        font-size: 115%;
        margin-top: 10px;
    }
    .order_on_whatsapp:hover{
        background-color: #6051BA;
        color: #fff;  
    }
    .order_on_whatsapp img {
        margin-right: 10px;
        width: 14px;
    }
    </style>
    
    <!-- WhatsApp按钮，预留data属性存基础信息 -->
    <a href="https://api.whatsapp.com/send?phone=<?php echo esc_attr($base_phone); ?>&text=<?php echo $default_text; ?>" 
       class="order_on_whatsapp"
       data-base-title="<?php echo esc_attr($product_title); ?>"
       data-base-url="<?php echo esc_attr($product_url); ?>"
       data-base-phone="<?php echo esc_attr($base_phone); ?>">
        <img src="https://woo.cdesksolutions.com/wp-content/uploads/2022/11/whatsapp.webp" width="14px">
        Enquire on Whatsapp
    </a>

    <?php if ($product->is_type('variable')) : ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const waButton = document.querySelector('.order_on_whatsapp');
        const variationForm = document.querySelector('.variations_form');
        
        // 监听变体选择变化
        variationForm.addEventListener('show_variation', function(event) {
            const variation = event.detail.variation;
            const baseTitle = waButton.dataset.baseTitle;
            const baseUrl = waButton.dataset.baseUrl;
            const basePhone = waButton.dataset.basePhone;
            
            // 构建包含变体和价格的消息
            const variationText = variation.variation_description ? ` - ${variation.variation_description}` : '';
            const priceText = ` (Price: ${variation.display_price})`;
            const fullMessage = `Hello, I want to buy: ${baseTitle}${variationText}${priceText} (${baseUrl})`;
            
            // 编码消息并更新按钮链接
            waButton.href = `https://api.whatsapp.com/send?phone=${basePhone}&text=${encodeURIComponent(fullMessage)}`;
        });
        
        // 重置按钮链接（当变体选择被清空时）
        variationForm.addEventListener('hide_variation', function() {
            const defaultText = encodeURIComponent(`Hello, I want to buy: ${waButton.dataset.baseTitle} (${waButton.dataset.baseUrl})`);
            waButton.href = `https://api.whatsapp.com/send?phone=${waButton.dataset.basePhone}&text=${defaultText}`;
        });
    });
    </script>
    <?php endif; ?>
    <?php
}
add_action('woocommerce_after_add_to_cart_button', 'ecommercehints_content_after_add_to_cart_form', 30);

代码说明 #

• PHP部分：

  • 直接调用global $product获取当前产品对象，兼容简单产品与变体产品
  • 给按钮添加data-*属性存储基础信息，方便JS读取
  • 仅在变体产品页面加载JS代码，减少不必要的资源消耗

• JavaScript部分：

  • 监听WooCommerce内置的show_variation事件（用户选中有效变体时触发），从事件参数中获取变体描述、价格等数据
  • 动态拼接包含变体信息的预设消息，编码后更新按钮的跳转链接
  • 监听hide_variation事件，变体选择清空时重置按钮链接为默认内容

修改后，用户选择不同变体时，WhatsApp预设消息会自动更新为包含选中变体详情与对应价格的内容。

内容的提问来源于stack exchange，提问作者chirag