WhatsApp Order Button – Quick Contact for Orders
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
×
![]()
1 / 3