WhatsApp Chat Widget for Shopify and WooCommerce: The 2026 Setup Guide

How to add a WhatsApp chat widget to Shopify, WooCommerce or any website — no-code apps, raw HTML, placement rules that convert, and how to track every click.

2026-09-21

WhatsApp Chat Widget for Shopify and WooCommerce: The 2026 Setup Guide

A store visitor who has a question at 21:47 does not fill in a contact form. They either leave, or they message you.

A WhatsApp chat widget turns that hesitation into a conversation: it opens WhatsApp with your number already loaded, on the page where the doubt appeared. Here's how to add one to Shopify, WooCommerce or any site — and where to place it so it actually gets clicked.

The three levels of WhatsApp on a website

Not every WhatsApp button is the same thing. Pick the level you actually need.

| --- | --- | --- | --- |

95% of small stores should start with level 1 or 2. You can generate the link in seconds with the WhatsApp link generator — the widget is just that link, styled and pinned to the screen.

Step 1: build the link before you build the widget

The widget is decoration. The link is the machine.

Create one link per purpose instead of one generic link:

Product page: "Hi, I have a question about [Product name]"
Checkout help: "Hi, I'm stuck at checkout on [order]"
Delivery/returns: "Hi, I'd like to know where my order is"
Wholesale/partners: "Hi, I'm a reseller looking for prices"

Pre-filled text does two things: the customer doesn't have to think, and your message arrives already sorted, so you know what they need before reading it. The message template guide has ready-made wording, and the message formatter handles bold, italics and line breaks inside the link.

Check the number is real and typing-enabled with the WhatsApp number checker — a widget pointing at a landline is a dead end nobody reports back to you.

Step 2: add it to Shopify

Two ways, in order of effort.

Option A — no code, via an app

Search the Shopify App Store for a free WhatsApp chat widget (several exist with a free tier). Install, paste your number, choose bubble colour and side, save. Done in five minutes.

Trade-off: third-party JavaScript on every page, and some apps route messages to their own inbox instead of your phone.

Option B — theme code (5 minutes, zero dependency)

Shopify admin → Online Store → Themes → Edit code
Open theme.liquid (or sections/footer.liquid)
Paste this just before :

<a href="https://wa.me/3212345678?text=Hi%2C%20I%20have%20a%20question%20about%20my%20order"
   class="wa-bubble" target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
  <svg viewBox="0 0 32 32" width="28" height="28" fill="#fff" aria-hidden="true">
    <path d="M16 3a13 13 0 0 0-11 20L3 29l6-2a13 13 0 1 0 7-24zm0 2a11 11 0 0 1 0 22 11 11 0 0 1-5.6-1.5l-.4-.2-3.5 1 1-3.4-.2-.4A11 11 0 0 1 16 5z"/>
  </svg>
</a>

<style>
.wa-bubble{position:fixed;right:20px;bottom:20px;z-index:9999;
  width:56px;height:56px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);text-decoration:none}
@media(max-width:640px){.wa-bubble{bottom:76px}}
</style>

Replace the number and message. Prefer to skip hand-coding? The button generator outputs the same snippet already filled in, with your text and colours.

The @media line is deliberate: on mobile, Shopify's own sticky cart and payment badges sit at the bottom, and they will cover the bubble.

Step 3: add it to WooCommerce or WordPress

WooCommerce needs no product-level integration for a basic widget:

Appearance → Theme File Editor (or a child theme's footer.php)
Paste the same snippet before
Clear your cache plugin (WP Rocket, LiteSpeed, W3 Total Cache) — otherwise you'll stare at a page that "doesn't update"

For per-product links, use WooCommerce's single template hook:

// functions.php — bubble on product pages with the product name pre-filled
add_action('wp_footer', function () {
  if (!is_product()) return;
  $title = rawurlencode(get_the_title());
  printf(
    '<a class="wa-bubble" href="https://wa.me/3212345678?text=Hi%%2C%%20I%%27m%%20interested%%20in%%20%s">Chat</a>',
    $title
  );
});

A WordPress plugin is a legitimate shortcut if your team avoids theme files — audit it the same way: does it load scripts everywhere, and does the message land on your phone?

Keep zero third-party scripts on checkout where you can. Money pages are the worst place to add a new dependency.

Step 4: where to put it (this is where the sales are)

The bubble in the corner is the floor, not the ceiling. The highest-converting placements are contextual:

Product page, under the add-to-cart button: "Ask a question about this item" as a text link. Highest intent on the whole site.
Cart and checkout: "Need help completing your order?" One line, no bubble.
Shipping page: "Check delivery to your city" with the destination pre-filled.
Order confirmation / thank-you page: the moment to offer follow-up updates.
Mobile sticky bar: a full-width bar at the very bottom beats a small bubble on phones — thumbs are already there.

Test order: product page link first, then cart, then the bubble.

Step 5: track it like any other channel

An untracked button is a nice decoration. Add UTM parameters to the link:

https://wa.me/3212345678?text=Hi%2C%20question%20about%20my%20order%20%5Butm%3Dproduct-page%5D

Then log each click in your analytics (GA4, Plausible, Matomo) with one event name across pages. The full method — events, campaign tags and per-page reporting — is in the WhatsApp chat analytics guide.

Watch three numbers monthly: clicks per 1,000 sessions, conversations that end in an order, and first response time. The third one is the one that quietly decides whether the whole setup pays off. If replies take four hours, the widget is generating disappointment, not sales. For the fast, honest version of that flow, see conversational commerce in 2026.

Mistakes that kill conversion

Pointing the widget at a number nobody monitors. The single most expensive mistake on this list.
Covering the checkout button on mobile. Test on a real phone, not the desktop preview.
Cold-messaging people who clicked. A click is an invitation to answer, not consent for a broadcast list — that's how numbers get banned.
No away message outside opening hours. Say when you'll reply; the customer waits instead of leaving.

Quick reference

| Platform | Fastest route |

| --- | --- |

| Shopify | theme.liquid before , or a free chat app |

| WooCommerce / WordPress | footer.php or wp_footer hook, then clear cache |

| Any static site | snippet in your global footer partial |

| Link-in-bio, email, ads | plain wa.me link — generate one here |

| Printed material, packaging | WhatsApp QR code pointing at the same link |

The 30-minute version

Build your link with a pre-filled, context-specific message. Paste the snippet in your footer. Adjust the mobile position so nothing is covered. Add tracking parameters. Set an away message. Then reply fast for one week and compare conversations to orders.

That's the whole system. It starts with a link you can create in under a minute.