WooCommerce gives you full control over your store — including the ability to add a WhatsApp button without installing a single plugin. This guide covers three practical methods using PHP hooks and direct HTML, plus how to craft dynamic pre-filled messages that include the product name automatically.
Why WooCommerce Sellers Need WhatsApp
Email response rates for e-commerce inquiries average around 20%. WhatsApp open rates are above 90%. That gap explains why more and more WooCommerce store owners are adding a direct messaging channel alongside their standard contact forms.
The use cases are concrete:
- Abandoned cart recovery: A customer who left items in the cart but gave you their number during a previous order can be reached over WhatsApp. A short "Still interested in [product]?" message recovers carts that automated emails never reach.
- Pre-purchase questions: Shoppers on mobile don't want to fill out a contact form and wait 24 hours. They want a quick answer about sizing, compatibility, or shipping before they commit. A WhatsApp button reduces friction at the exact moment of decision.
- Trust signal: A study of mobile shoppers in Latin America and Southern Europe found that 40% of consumers prefer to ask a question via messaging over email before making an online purchase. Displaying a WhatsApp button tells hesitant buyers there's a real person behind the store.
The good news: WooCommerce is built on WordPress, which gives you fine-grained hooks to inject buttons exactly where you want them — no plugin overhead required.
Method 1: Add WhatsApp Button via Functions.php
This is the cleanest approach for developers. You add a small PHP function to your theme's functions.php file (or a site-specific plugin), hook it into WooCommerce's product page action, and the button appears automatically on every single product page — without touching any template file.
Step 1: Go to your WordPress admin → Appearance → Theme Editor (or use a child theme's functions.php). Paste the following at the bottom of the file:
/**
* Add WhatsApp button to WooCommerce single product pages
* Hook: woocommerce_single_product_summary (priority 35, after add-to-cart)
*/
add_action( 'woocommerce_single_product_summary', 'ilh_whatsapp_product_button', 35 );
function ilh_whatsapp_product_button() {
global $product;
// Replace with your WhatsApp-enabled number (international format, no + or spaces)
$whatsapp_number = '15551234567';
$product_name = rawurlencode( $product->get_name() );
$message = rawurlencode( 'Hi, I\'m interested in ' ) . $product_name . rawurlencode( ' — can you help?' );
$whatsapp_url = 'https://wa.me/' . $whatsapp_number . '?text=' . $message;
echo '<a href="' . esc_url( $whatsapp_url ) . '"
target="_blank"
rel="noopener noreferrer"
class="button alt ilh-whatsapp-btn"
style="background:#25D366;color:#fff;border-color:#25D366;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.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>
Ask on WhatsApp
</a>';
}
Step 2: Replace 15551234567 with your actual WhatsApp number in international format (country code first, no plus sign, no spaces). Save the file.
Step 3: Visit any product page on your store. The green "Ask on WhatsApp" button will appear below the Add to Cart button. When tapped on mobile, WhatsApp opens with the message "Hi, I'm interested in [exact product name] — can you help?" already typed.
The hook priority 35 places the button after the Add to Cart button (priority 30) but before the product meta (priority 40). Adjust the number if your theme positions things differently.
Method 2: Add WhatsApp Button to Product Description
If you don't want to edit PHP code, you can add the button directly inside a product's description using the WordPress block editor. This is ideal for featuring WhatsApp on specific products only — without touching the theme.
In the WooCommerce product editor, switch to the Text / HTML tab of the description field and paste:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%27m%20interested%20in%20this%20product%20%E2%80%94%20can%20you%20help%3F"
target="_blank"
rel="noopener"
style="display:inline-flex;align-items:center;gap:8px;background:#25D366;
color:#fff;padding:12px 20px;border-radius:8px;
text-decoration:none;font-weight:600;font-size:15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.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>
Ask on WhatsApp
</a>
The limitation of this approach is that the message is static — it can't dynamically insert the product name. For a personalised message per product, use Method 1 or manually edit the text= parameter for each product.
Method 3: WhatsApp on the Checkout / Thank-You Page
Adding WhatsApp to the WooCommerce order confirmation (thank-you) page turns a passive receipt into an active support touchpoint. A customer who just placed an order and sees "Questions about your order? Chat on WhatsApp" is far more likely to reach out — and far less likely to file a chargeback without trying to resolve an issue first.
Add this to your functions.php:
add_action( 'woocommerce_thankyou', 'ilh_whatsapp_thankyou', 10, 1 );
function ilh_whatsapp_thankyou( $order_id ) {
$order = wc_get_order( $order_id );
$whatsapp_number = '15551234567'; // your number
$message = rawurlencode(
'Hi! I just placed order #' . $order_id . ' on your store. I have a quick question.'
);
$url = 'https://wa.me/' . $whatsapp_number . '?text=' . $message;
echo '<div style="margin:24px 0;padding:20px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;">
<p style="margin:0 0 12px;font-weight:600;">Need help with your order?</p>
<a href="' . esc_url( $url ) . '" target="_blank" rel="noopener"
style="display:inline-flex;align-items:center;gap:8px;background:#25D366;
color:#fff;padding:12px 20px;border-radius:8px;text-decoration:none;font-weight:600;">
Chat on WhatsApp
</a>
</div>';
}
The order number is injected automatically into the pre-filled message, so your customer service team immediately knows which order the conversation is about.
Crafting the Perfect Pre-filled Message
The pre-filled message is the difference between a customer who starts a conversation and one who abandons the click. Good pre-filled messages are specific, low-effort to send, and give you context before you reply.
The PHP snippet in Method 1 dynamically builds the message using $product->get_name(). So if the product is "Blue Merino Wool Scarf – Size M", the customer opens WhatsApp with:
Hi, I'm interested in Blue Merino Wool Scarf – Size M — can you help?
You can customise the message template to match your brand tone. Here are three variations for different store types:
- Fashion/apparel: "Hi! I have a question about [product name] — sizing or availability?"
- Electronics: "Hello, I'd like to confirm compatibility before ordering [product name]."
- Handmade/custom: "Hi, I'm interested in [product name] — can I request a custom version?"
For the URL encoding to work correctly in PHP, always use rawurlencode() on both the static string and the product name. The urlencode() function encodes spaces as + which WhatsApp doesn't interpret correctly in the text= parameter — rawurlencode() uses %20 which works reliably.
Tracking WhatsApp Clicks with UTM Parameters
WhatsApp links open an external app, so they won't show up in your Google Analytics referral data on their own. The way to track them is to append UTM parameters to a landing page URL — but since the WhatsApp link itself opens the app rather than a page, the practical approach is to track the click event in GA4 via a JavaScript event listener, or to route customers through a tracked landing page before the WhatsApp redirect.
The simplest method is to add a data- attribute to your button and fire a GA4 event when it's clicked. Add this script anywhere after the button HTML:
<script>
document.querySelectorAll('.ilh-whatsapp-btn').forEach(function(btn) {
btn.addEventListener('click', function() {
gtag('event', 'whatsapp_click', {
'event_category': 'engagement',
'event_label': document.title,
'utm_source': 'whatsapp',
'utm_medium': 'product_page'
});
});
});
</script>
Alternatively, use InstantLinkHub's UTM Builder to create a tagged URL for a dedicated landing page (e.g., https://yourstore.com/contact/?utm_source=whatsapp&utm_medium=product_page&utm_campaign=product_inquiry) and link your WhatsApp button to that page first, with a redirect or chat widget on arrival.
Either approach lets you segment WhatsApp-driven traffic in GA4 and compare it to email, organic, and paid channels — useful data for deciding where to focus your customer communication efforts.
Speaking of measuring results: once you know which products drive the most WhatsApp conversations, you'll want to know your actual profit margin per order after payment processing fees. Feexio lets WooCommerce sellers calculate their net earnings after PayPal, Stripe, or other payment gateway fees — useful when deciding which products are worth promoting through high-touch channels like WhatsApp.
Frequently Asked Questions
Does adding WhatsApp to WooCommerce require a plugin?
No. All three methods in this guide use either PHP added to functions.php or plain HTML in the product description. No plugin is installed or activated. The button is a simple anchor tag pointing to wa.me — WhatsApp's official click-to-chat URL format.
Can I use the same WhatsApp number for all products?
Yes, and that's exactly what Method 1 does. The single PHP function hooks into all product pages simultaneously. The only thing that changes per product is the dynamic message text, which includes the product name automatically. Your WhatsApp number stays the same throughout.
How do I make the WhatsApp button appear on mobile only?
Add a CSS class to your button (e.g., class="ilh-whatsapp-btn") and add this rule to your theme's stylesheet or the WordPress Customizer's Additional CSS box:
@media (min-width: 768px) {
.ilh-whatsapp-btn {
display: none !important;
}
}
This hides the button on screens 768px and wider (typically desktops and tablets), while keeping it visible on mobile — where WhatsApp usage is most natural. Adjust the breakpoint to match your theme's mobile breakpoint if needed.
Generate your WhatsApp link
Create the link with your number and a custom pre-filled message, then paste it into your WooCommerce theme using the code above.
Create WhatsApp Link Free