WhatsApp Order Button – Quick Contact for Orders

Intermediate

✓ Tested

📅 August 23, 2025

⬇️ 0 Downloads

📋 2 Copies

This code snippet adds WhatsApp contact buttons throughout your WooCommerce store, allowing customers to quickly reach you about their orders or products. No API or complex setup required – just add your phone number and it works instantly.

What does this code do?

The snippet creates clickable WhatsApp buttons that open a WhatsApp chat with pre-filled messages. When clicked, it opens WhatsApp (mobile app or WhatsApp Web) with your business number and a customized message based on the context.

Features:

Order Confirmation Page: Large button with order details pre-filled in message
My Account Orders: Quick contact button for each order in customer’s account
Floating Button: Sticky WhatsApp icon on product/shop pages
Smart Messages: Auto-fills relevant information (order number, product name, etc.)
Shortcode Support: Place WhatsApp button anywhere with [tpsc_whatsapp]
Mobile Optimized: Works perfectly on all devices
No Dependencies: Pure PHP/CSS solution, no external services needed

Where buttons appear:

Order “Thank You” page (after checkout)
Customer account order history
Floating button on product pages (optional)
Anywhere via shortcode

Pre-filled message examples:

After order: “Hi! I just placed order #1234 for $99.00. I’d like to check on my order status.”
Product page: “Hi! I’m interested in: [Product Name] – Link: [Product URL]”
My Account: “Hi! I have a question about my order #1234 from January 1, 2024.”

Shortcode usage:

Basic: [tpsc_whatsapp]
Custom message: [tpsc_whatsapp message=”I need help with shipping”]
Custom button text: [tpsc_whatsapp text=”Chat Now”]
Link style: [tpsc_whatsapp style=”link”]

⚠️ Important Warnings

⚠️ You MUST set your WhatsApp number in the code (line 10) or buttons won't work
⚠️ Use only WhatsApp/WhatsApp Business numbers (not regular phone numbers)
⚠️ The number must be in international format without spaces or special characters
⚠️ WhatsApp must be installed on user's device or WhatsApp Web must be accessible
⚠️ Some ad blockers might block WhatsApp links - test with ad blockers disabled
⚠️ The floating button might conflict with other floating elements (live chat, etc.)
⚠️ Pre-filled messages have character limits (around 1000 characters)
⚠️ Special characters in messages might need encoding
⚠️ On desktop, this opens WhatsApp Web (user must have it set up)
⚠️ This is a one-way link - you won't get automatic order status updates

💻 PHP Code

/**
 * Add WhatsApp contact button for WooCommerce orders
 * Displays WhatsApp button on order confirmation and customer pages
 * Prefix: tpsc_ (TP Snippet Collection)
 */

// Configuration - Set your WhatsApp number here
if (!defined('TPSC_WHATSAPP_NUMBER')) {
    define('TPSC_WHATSAPP_NUMBER', '972501234567'); // Replace with your number (country code + number, no + or spaces)
}

// Add WhatsApp button to order confirmation page
add_action('woocommerce_thankyou', 'tpsc_whatsapp_button_thankyou_page', 20);

function tpsc_whatsapp_button_thankyou_page($order_id) {
    if (!$order_id) return;
    
    $order = wc_get_order($order_id);
    if (!$order) return;
    
    // Get order details
    $order_number = $order->get_order_number();
    $customer_name = $order->get_billing_first_name();
    $order_total = $order->get_formatted_order_total();
    $order_status = wc_get_order_status_name($order->get_status());
    
    // Create WhatsApp message
    $message = sprintf(
        __("Hi! I just placed order #%s for %s. I'd like to check on my order status. Thank you!", 'woocommerce'),
        $order_number,
        $order_total
    );
    
    // Generate WhatsApp URL
    $whatsapp_url = tpsc_generate_whatsapp_url($message);
    
    // Display the button
    ?>
    <div class="tpsc-whatsapp-container">
        <h3><?php _e('Need Help with Your Order?', 'woocommerce'); ?></h3>
        <p><?php _e('Contact us instantly via WhatsApp for quick support!', 'woocommerce'); ?></p>
        <a href="<?php echo esc_url($whatsapp_url); ?>" 
           target="_blank" 
           class="tpsc-whatsapp-button"
           data-order="<?php echo esc_attr($order_number); ?>">
            <svg class="tpsc-whatsapp-icon" viewBox="0 0 24 24" width="20" height="20">
                <path fill="currentColor" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.149-.67.149-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414-.074-.123-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
            </svg>
            <?php _e('Contact Us on WhatsApp', 'woocommerce'); ?>
        </a>
    </div>
    <?php
}

// Add WhatsApp button to My Account order view
add_action('woocommerce_order_details_after_order_table', 'tpsc_whatsapp_button_my_account');

function tpsc_whatsapp_button_my_account($order) {
    $order_number = $order->get_order_number();
    $order_date = $order->get_date_created()->format('F j, Y');
    
    $message = sprintf(
        __("Hi! I have a question about my order #%s from %s.", 'woocommerce'),
        $order_number,
        $order_date
    );
    
    $whatsapp_url = tpsc_generate_whatsapp_url($message);
    
    ?>
    <div class="tpsc-whatsapp-account">
        <a href="<?php echo esc_url($whatsapp_url); ?>" 
           target="_blank" 
           class="tpsc-whatsapp-button-small">
            <svg class="tpsc-whatsapp-icon" viewBox="0 0 24 24" width="16" height="16">
                <path fill="currentColor" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.149-.67.149-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414-.074-.123-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
            </svg>
            <?php _e('Ask about this order on WhatsApp', 'woocommerce'); ?>
        </a>
    </div>
    <?php
}

// Add floating WhatsApp button on product pages
add_action('wp_footer', 'tpsc_whatsapp_floating_button');

function tpsc_whatsapp_floating_button() {
    // Only show on product pages (optional - remove this condition to show everywhere)
    if (!is_product() && !is_shop() && !is_product_category()) {
        return;
    }
    
    $default_message = __("Hi! I'm interested in your products and would like more information.", 'woocommerce');
    
    // If on single product page, customize message with product name
    if (is_product()) {
        global $product;
        if ($product) {
            $product_name = $product->get_name();
            $product_price = $product->get_price_html();
            $product_url = get_permalink($product->get_id());
            
            $default_message = sprintf(
                __("Hi! I'm interested in: %s - Link: %s", 'woocommerce'),
                $product_name,
                $product_url
            );
        }
    }
    
    $whatsapp_url = tpsc_generate_whatsapp_url($default_message);
    
    ?>
    <a href="<?php echo esc_url($whatsapp_url); ?>" 
       target="_blank" 
       class="tpsc-whatsapp-floating"
       aria-label="<?php esc_attr_e('Contact on WhatsApp', 'woocommerce'); ?>">
        <svg viewBox="0 0 24 24" width="30" height="30">
            <path fill="currentColor" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.149-.67.149-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414-.074-.123-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
        </svg>
        <span class="tpsc-whatsapp-tooltip"><?php _e('Chat with us!', 'woocommerce'); ?></span>
    </a>
    <?php
}

// Helper function to generate WhatsApp URL
function tpsc_generate_whatsapp_url($message = '') {
    $phone_number = TPSC_WHATSAPP_NUMBER;
    $encoded_message = urlencode($message);
    
    // Use wa.me for better compatibility
    return "https://wa.me/{$phone_number}?text={$encoded_message}";
}

// Add CSS for WhatsApp buttons
add_action('wp_head', 'tpsc_whatsapp_button_styles');

function tpsc_whatsapp_button_styles() {
    ?>
    <style>
        /* Thank you page button container */
        .tpsc-whatsapp-container {
            background: #f0f9ff;
            border: 2px solid #25d366;
            border-radius: 10px;
            padding: 20px;
            margin: 30px 0;
            text-align: center;
        }
        
        .tpsc-whatsapp-container h3 {
            color: #1a1a1a;
            margin-bottom: 10px;
        }
        
        .tpsc-whatsapp-container p {
            color: #666;
            margin-bottom: 20px;
        }
        
        /* Main WhatsApp button */
        .tpsc-whatsapp-button {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #25d366;
            color: white !important;
            padding: 15px 30px;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none !important;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
        }
        
        .tpsc-whatsapp-button:hover {
            background: #128c7e;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
            color: white !important;
        }
        
        /* Small button for My Account page */
        .tpsc-whatsapp-account {
            margin: 20px 0;
        }
        
        .tpsc-whatsapp-button-small {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #25d366;
            color: white !important;
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none !important;
            transition: all 0.3s ease;
        }
        
        .tpsc-whatsapp-button-small:hover {
            background: #128c7e;
            color: white !important;
        }
        
        /* WhatsApp icon */
        .tpsc-whatsapp-icon {
            flex-shrink: 0;
        }
        
        /* Floating WhatsApp button */
        .tpsc-whatsapp-floating {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: #25d366;
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            z-index: 9999;
            transition: all 0.3s ease;
            animation: tpsc-whatsapp-pulse 2s infinite;
        }
        
        .tpsc-whatsapp-floating:hover {
            background: #128c7e;
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }
        
        .tpsc-whatsapp-floating svg {
            fill: white;
        }
        
        /* Tooltip for floating button */
        .tpsc-whatsapp-tooltip {
            position: absolute;
            right: 70px;
            background: #333;
            color: white;
            padding: 8px 12px;
            border-radius: 5px;
            font-size: 14px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        
        .tpsc-whatsapp-floating:hover .tpsc-whatsapp-tooltip {
            opacity: 1;
        }
        
        .tpsc-whatsapp-tooltip:after {
            content: '';
            position: absolute;
            right: -5px;
            top: 50%;
            transform: translateY(-50%);
            border-left: 5px solid #333;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
        }
        
        /* Pulse animation */
        @keyframes tpsc-whatsapp-pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
            }
            70% {
                box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
            }
        }
        
        /* Mobile responsive */
        @media (max-width: 768px) {
            .tpsc-whatsapp-floating {
                bottom: 20px;
                right: 20px;
                width: 55px;
                height: 55px;
            }
            
            .tpsc-whatsapp-tooltip {
                display: none;
            }
            
            .tpsc-whatsapp-button {
                padding: 12px 20px;
                font-size: 14px;
            }
        }
        
        /* Print styles - hide WhatsApp buttons when printing */
        @media print {
            .tpsc-whatsapp-container,
            .tpsc-whatsapp-account,
            .tpsc-whatsapp-floating {
                display: none !important;
            }
        }
    </style>
    <?php
}

// Shortcode for manual WhatsApp button placement
add_shortcode('tpsc_whatsapp', 'tpsc_whatsapp_shortcode');

function tpsc_whatsapp_shortcode($atts) {
    $atts = shortcode_atts(array(
        'message' => '',
        'text' => __('Contact on WhatsApp', 'woocommerce'),
        'style' => 'button', // button, link, or floating
    ), $atts);
    
    $whatsapp_url = tpsc_generate_whatsapp_url($atts['message']);
    
    $class = 'tpsc-whatsapp-button';
    if ($atts['style'] === 'link') {
        $class = 'tpsc-whatsapp-link';
    }
    
    ob_start();
    ?>
    <a href="<?php echo esc_url($whatsapp_url); ?>" 
       target="_blank" 
       class="<?php echo esc_attr($class); ?>">
        <svg class="tpsc-whatsapp-icon" viewBox="0 0 24 24" width="20" height="20">
            <path fill="currentColor" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.149-.67.149-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414-.074-.123-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
        </svg>
        <?php echo esc_html($atts['text']); ?>
    </a>
    <?php
    return ob_get_clean();
}

📝 Installation Instructions

CRITICAL FIRST STEP - SET YOUR PHONE NUMBER:
1. Find this line at the top of the code:
define('TPSC_WHATSAPP_NUMBER', '972501234567');
2. Replace with YOUR WhatsApp Business number
3. Format: Country code + number (no spaces, no +, no dashes)
Examples:
- USA: 12125551234
- UK: 447911123456
- Israel: 972501234567
- India: 919876543210

INSTALLATION:
1. Set your phone number (see above)
2. Copy the entire code
3. Go to WordPress Admin → Appearance → Theme Editor → functions.php
4. Paste at the bottom of the file
5. Save changes
6. Test by placing a test order

CUSTOMIZING MESSAGES:
Find these lines to customize the pre-filled messages:
- Line 24: Message for order confirmation page
- Line 57: Message for My Account page
- Line 102: Default message for product pages

TO CONTROL WHERE FLOATING BUTTON APPEARS:
Line 96-98 controls where the floating button shows
Currently shows on: product pages, shop, categories
To show everywhere: Remove the if condition on line 96-98
To show only on products: Change to: if (!is_product()) return;

USING THE SHORTCODE:
Add anywhere in pages/posts/products:
[tpsc_whatsapp] - Basic button
[tpsc_whatsapp message="Custom message here"] - Custom message
[tpsc_whatsapp text="Chat Now!"] - Custom button text
[tpsc_whatsapp style="link"] - Text link instead of button

TO DISABLE SPECIFIC BUTTONS:
Comment out the relevant add_action line:
- Line 14: Disables thank you page button
- Line 42: Disables My Account buttons
- Line 91: Disables floating button

CUSTOMIZING APPEARANCE:
Colors: Find #25d366 (WhatsApp green) and replace with your color
Size: Adjust padding and font-size values in CSS
Position: For floating button, change bottom: 30px and right: 30px

TESTING:
1. Place a test order and check the thank you page
2. Go to My Account → Orders
3. Visit a product page to see floating button
4. Click any button to verify it opens WhatsApp correctly

📸 Screenshots

💬 Let's Connect and Share!

❓

Got a question about this snippet?

Something not working as expected? Need help customizing it for your specific needs?

💡

Want to request a custom snippet?

Have an idea for functionality you're missing on your site? Tell us what you're looking for!

🤝

Have an awesome snippet you're using?

Share it with us! Our community loves learning and growing together.

No comments yet.

WhatsApp Order Button – Quick Contact for Orders

What does this code do?

Features:

Where buttons appear:

Pre-filled message examples:

Shortcode usage:

⚠️ Important Warnings

📝 Installation Instructions

📸 Screenshots

📊 Statistics

📋 Requirements

⚡ Quick Actions

💬 Let's Connect and Share!

Got a question about this snippet?

Want to request a custom snippet?

Have an awesome snippet you're using?

Leave a Comment Cancel reply

Leave a Comment

Email Verification