For most WordPress users the question is the same: how do I add a WhatsApp button to the site without breaking the theme or losing it on every update. This guide covers three methods (one line of code, a plugin and functions.php) plus the details for Elementor, WooCommerce and Gutenberg. For a general setup, see our post on adding a WhatsApp button to a website.
Three ways to add a WhatsApp button to WordPress
All three use the same single line of code; the difference is where you put it. If you do not code, method one or two is for you.
Method 1: One line of code (fastest, recommended)
- Create a free UC Action Hub account and enable the WhatsApp module.
- Enter your number with the country code (e.g.
905551112233) or your WhatsApp username; optionally add a pre-filled greeting. - Copy the single line of code the panel gives you.
- In WordPress, paste it into Appearance → Customize or your theme's "head/footer code" field. It runs before the
</body>tag.
The button goes live instantly. You never touch the code again; everything is managed from the panel.
Method 2: With a header & footer plugin
If you do not want to touch theme files, install an "Insert Headers and Footers" type plugin. Paste the code into the Footer (end of body) field and save. The advantage: a theme update will not remove the code, because it lives in the plugin.
Method 3: functions.php (for developers)
To add the code programmatically, use the wp_footer hook in your child theme's functions.php:
add_action('wp_footer', function () {
echo '<script src="https://ucwidgets.com/wa/v1.js" data-ucwa-key="YOUR_KEY" async></script>';
});Why a child theme? If you add it to the parent theme, the line is deleted on a theme update. A child theme is not affected by updates.
Elementor and page builders
If you use Elementor, Divi or WPBakery, you do not need to add the code to each page. Put the single line site-wide in theme settings → custom code or a header-footer plugin; the button appears on all builder pages. In Elementor Pro you can also use Site Settings → Custom Code.
A WhatsApp button on a WooCommerce store
If you sell with WooCommerce, product questions fill your WhatsApp directly rather than your inbox. A site-wide button shows on product, category, cart and checkout pages. Put a greeting like "Hi, I would like info about the ... product" and the customer asks the right question in one tap.
Gutenberg and the classic editor
The button is independent of the content editor; block (Gutenberg) or classic makes no difference. Once you add the code site-wide, it appears automatically on all posts and pages, with no extra block needed.
Settings from the panel: no code needed
- Color and position: match your brand, bottom right or left.
- Greeting message: the text that opens pre-filled in WhatsApp.
- Multiple numbers: department cards like Sales, Support (Pro).
- Username support: you can use your WhatsApp username instead of a number.
Common mistakes
- Wrong number format: enter it with the country code, no + or leading 0 (Turkey starts with
90). - Adding to the parent theme: it disappears on update; use a child theme or a plugin.
- Cache: if you use a caching plugin, clear the cache after adding it.
To add a WhatsApp button to WordPress, start from our WhatsApp Widget page and get the single line of code with a free account.