Back to Blog
Tutorial

How to Add a WhatsApp Button to Your WooCommerce Product Page (No Code Required)

A customer lands on your product page, has a question, and leaves because there's no easy way to reach you. A WhatsApp button fixes that in under 20 minutes. Here's the full setup - number format, pre-filled messages, and button placement.

February 25, 202610 min read
How to Add a WhatsApp Button to Your WooCommerce Product Page (No Code Required)

A customer lands on your product page, has a question, and somewhere between looking for a contact form and not finding one, they leave. That's the version of the story that doesn't end in a sale.

The fix - a WhatsApp button right there on the product page - takes less than 20 minutes to set up on WooCommerce. No code, no developer, no theme editing. Just a plugin and a few settings that are worth getting right the first time.

Sort Out Your WhatsApp Number Format Before Anything Else

Every WhatsApp plugin generates what's called a wa.me link - a direct URL that opens a chat with a specific number. The format that link requires is your full international phone number: country code first, then the number itself, no plus sign, no spaces, no dashes, no parentheses. Just digits.

A Brazilian number written as (11) 91234-5678 becomes 5511912345678. A UK number written as +44 7700 900123 becomes 447700900123. The reason this matters upfront: most plugins will accept a wrongly formatted number without any error, display the button fine, and silently open a chat with a number that doesn't exist. Plenty of store owners have gone weeks with a non-functional button for exactly this reason.

Once you have the number in the right format, verify it before going any further. Open a browser tab, go to https://wa.me/YOURNUMBER with your actual number. If it opens a WhatsApp chat with your account, the format is right.

Personal Account, WhatsApp Business, or the API - Which One to Use

If you're currently using a personal WhatsApp number for your store, it works for receiving messages but has one visible downside: customers who tap your button see whatever name is saved in your personal profile - which reads as someone's private account, not a business.

WhatsApp Business is free to download, lets you set a proper business name and description, and supports automated away messages when you're offline. For a no-code button on a product page, it's the right setup for most stores.

The WhatsApp Business API is a different tier - built for high-volume messaging and CRM integration, requiring a Meta-approved platform to access. If you're starting from scratch, the standard WhatsApp Business app is where to begin.

Picking a Plugin

Comparing WhatsApp button plugins for WooCommerce

There are roughly a dozen WordPress plugins that can put a WhatsApp button on a WooCommerce product page. The differences that show up in day-to-day use are: whether the pre-filled message can pull in live product data, how much control you have over button placement, and how far the integration goes beyond just placing a button.

ChatCart Pro goes further than a button. When a customer taps it on the product page - or cart, mini-cart, or checkout - the plugin creates a real WooCommerce order in the background and opens WhatsApp with a fully formatted summary: product name, variations (size, color), shipping method and cost, delivery address, payment method, and order total. The customer sends that message and the sale is effectively done. It also includes a floating button with configurable position and page-level controls, a custom checkout form manager with drag-and-drop fields and input masks for CPF, CNPJ, SSN, and other regional formats, per-category number routing, and a built-in analytics dashboard that tracks clicks by button type, product, and page. Available at veloryntech.com/chatcartpro for $29/month.

Click to Chat is the most widely installed standalone WhatsApp button plugin - over 200,000 active installs on WordPress.org. The free version handles the basics: a configurable button on product pages, dynamic pre-filled messages that pull in the product name and URL, and five placement positions relative to the add-to-cart area. For stores that want a button without the full checkout replacement flow, the free version is enough for most setups.

OneClick Chat to Order is free and built around a similar order-through-WhatsApp model to ChatCart Pro, though without the automatic background order creation or the analytics layer. Worth considering as a lightweight free alternative if the full ChatCart Pro feature set is more than your store needs right now.

The step-by-step walkthrough below uses ChatCart Pro — the most complete WooCommerce WhatsApp integration available, with automatic order creation, per-category number routing, and a built-in analytics dashboard. $29/month subscription.

Installation

Download the plugin ZIP from veloryntech.com/chatcartpro after purchase. In your WordPress dashboard, go to Plugins → Add New Plugin → Upload Plugin. Select the ZIP file and click Install Now → Activate. A ChatCart Pro item will appear in your left sidebar.

The Settings That Actually Matter

Your Phone Number

In the General tab of ChatCart Pro settings, enter your number in the international format you verified earlier — digits only, country code first, no formatting. For a US number: 12025550123. Save, then run the wa.me test again to confirm it's routing correctly before going live.

The Pre-Filled Message

ChatCart Pro builds the order message automatically in three parts. You control the opening and closing text; the plugin fills in everything in between.

  • Opening message: set freely in settings. For example: "Hi, I'd like to place an order:"
  • Order details: generated by the plugin from the checkout form — product name, variations (size, color), delivery address, shipping method and cost, payment method, and order total. This block is built automatically and cannot be manually edited.
  • Closing message: also set freely. For example: "Please confirm my order. Thank you!"

When the customer taps the button after completing the checkout form, the full order summary lands in your WhatsApp. No back-and-forth asking for details — everything is already there.

Button Label and Position

ChatCart Pro lets you set the button label separately for each context: product page, cart, and checkout. Use action-oriented text — "Order via WhatsApp" converts better than just "WhatsApp" because it tells the customer exactly what will happen. For position, "After add to cart form" is the most reliable option across different themes. If the button lands somewhere unexpected, that position resolves most theme hook conflicts.

Button Appearance

The button uses WhatsApp green (#25D366) by default, which is immediately recognizable. Customers know what the button does before reading the label. You can adjust styling from the settings panel if your theme requires it.

Test It Properly Before Leaving It Live

Go to a product page, tap the button, go through the checkout form, and verify four things: the order summary is complete and accurate, the conversation opens to the correct WhatsApp number, the WooCommerce order was created in the background (check WooCommerce → Orders), and the button renders correctly on a phone screen. Do this on mobile — layout issues on small screens appear first.

The Floating Button — a Separate Decision

ChatCart Pro includes a floating button configured separately under the Floating Button tab: a sticky WhatsApp icon pinned to the corner of the screen as the customer scrolls. You can set its message, position (left or right), and which page types it appears on.

Whether to use it depends on your market. In Brazil, India, and most of the Middle East, a floating button reads as normal and expected. In the US and UK, where WhatsApp has lower penetration as a business contact channel, it's more likely to be ignored. If you turn it on, restrict it to product pages and checkout — a floating button on a blog post is just noise.

Going deeper on floating buttons: The Floating WhatsApp Button: Does It Actually Increase Store Inquiries? - what the UX research says about when the button works and when it creates friction.

A Few Things That Come Up After It's Live

Response time matters more than most people expect. A customer who sends a WhatsApp message from your product page is usually still on the page, or still thinking about the product. A reply that comes back in two or three minutes frequently ends in a sale. One that arrives six hours later is talking to someone who has moved on. If the person managing WhatsApp can't respond quickly during business hours, set an automated greeting that tells customers when to expect a reply - WhatsApp Business supports this natively under Business Tools → Away Message.

Watch what people actually ask. The questions that come through are a real-time report on what your product pages aren't communicating clearly. If the same sizing question comes in three times in a week, the product page needs better sizing information. The button generates sales conversations and feedback at the same time.

If You're Running Multiple Product Lines or Have a Team

Everything described above routes all product page inquiries to a single WhatsApp number. For a solo operator or a small team sharing one number, that works fine. If your store has genuinely separate departments - different product categories handled by different people - routing everything to one number creates sorting overhead that adds up quickly.

ChatCart Pro handles per-category number routing natively through its Number Routing tab, alongside the full order creation and analytics features described above. The one-time pricing makes it one of the most cost-effective complete solutions available.

Related: Multi-Number WhatsApp Routing for WooCommerce Stores With Multiple Product Lines - the full setup guide for routing inquiries to different teams or departments.

Want the most complete WhatsApp integration for WooCommerce? ChatCart Pro creates real WooCommerce orders automatically when customers tap the button, includes per-category routing, analytics, and a custom checkout form — $29/month.

Get ChatCart Pro →

Common Things That Go Wrong

Button visible but chat opens to wrong or invalid number: Number format. Go to plugin settings, delete the current entry, retype as nothing but digits: country code + local number, no plus, no spaces, no dashes. Use the wa.me link test to confirm before saving.

Button doesn't appear on product pages: In ChatCart Pro, go to ChatCart Pro → General and confirm the plugin is active and your license key is validated. Then check the button position setting (Before or After "Add to Cart") and save again. If it still doesn't show, deactivate any caching plugins temporarily to rule out a cached page serving the old layout.

Checkout form doesn't open after clicking the button: This usually means a JavaScript conflict with your theme or another plugin. Open your browser's console (F12 → Console tab) and look for JS errors on the product page. Try switching to Storefront theme briefly to isolate the conflict.

WooCommerce order is not created after the customer submits the form: Make sure WooCommerce is active and on version 5.0 or higher. ChatCart Pro creates the order in the background at form submission - if orders aren't appearing in WooCommerce → Orders, check the ChatCart Pro Analytics page to confirm whether clicks are being tracked at all.

tutorialwhatsapp buttonwoocommercepluginsetupwhatsapp button woocommerceadd whatsapp button woocommercewoocommerce whatsapp plugin setupchatcart prowhatsapp order button woocommercewoocommerce whatsapp checkoutbest whatsapp plugin woocommercewhatsapp plugin for developersinstall whatsapp plugin woocommerce

Share this article

Comments

Leave a Comment

More Articles