In this tutorial, you will learn how to add WhatsApp chat to your WordPress site. For this, we will not use any plugin and the result will be like the picture below.

WhatsApp Chat in WordPress without plugin

Add WhatsApp Chat to WordPress without plugins

Step 1.Add The Following Code to the functions.php File

In the WordPress dashboard, go to Appearance ➡ Theme File Editor and copy the following code into the theme’s functions.php file and update it.

You must create a child theme before making any changes to functions.php file. Otherwise, the applied changes will be lost after each update.
Create child theme in WordPress step by step [without plugin]

As an alternative method, you can use the Code Snippets plugin to insert your codes into WordPress.

/*
 *WhatsApp Chat by redpishi.com
 */
add_action( 'wp_footer', function () {  if ( !is_admin() ) {
	
$bubble_text = 'Hello 👋<br>Chat now via Whatsapp';	// use <br> for line break
$whatsup_number = '15819938781'; // your whatapp number
$whatsup_message='Hello👋 %0D%0A I have a question about your product on redpishi.com.';  // use %0D%0A for line break
	
?>
<div class="whatsapp">	
<?php	if ($bubble_text) { ?> 
	<div class="whatsappallmessage">
	<div class="whatsappclose" ><button class="whatsappclose-button" onclick="whatsapp(this)"> &times; </button></div>
	<a href="<?= "https://api.whatsapp.com/send?phone=".$whatsup_number."&text=".$whatsup_message ?>"><p class="whatsapptext"><?= $bubble_text; ?></p>	</a>
	</div>	
<?php }	 ?>
<a href="<?= "https://api.whatsapp.com/send?phone=".$whatsup_number."&text=".$whatsup_message ?>">
	<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" viewBox="0 0 14.552 14.552"><path opacity=".994" fill="#fff" d="M2.599 2.457h9.213v10.11H2.599z"></path><path d="M27.452 28.572c-.902-.277-1.499-.962-1.662-1.909-.049-.284-.065-2.013-.052-5.527l.02-5.114.203-.43a2.351 2.351 0 011.178-1.178l.43-.204h5.373c6.016 0 5.688-.024 6.341.47.394.298.642.643.812 1.13.125.359.13.537.13 5.537 0 5.758.007 5.635-.438 6.288a2.282 2.282 0 01-1.236.912c-.398.125-.58.13-5.6.125-4.386-.004-5.235-.02-5.499-.1zm2.077-2.492l1.252-.395.373.167c.64.287 1.146.39 1.918.392 1.423.002 2.515-.477 3.508-1.54.845-.906 1.25-1.944 1.25-3.212 0-1.362-.415-2.354-1.392-3.336-.663-.666-1.273-1.027-2.135-1.264-.44-.12-.63-.136-1.388-.11-.784.025-.936.05-1.414.229-1.776.666-2.93 2.132-3.135 3.983a4.54 4.54 0 00.3 2.246c.098.231.21.5.25.597.063.153.02.33-.33 1.359-.417 1.227-.432 1.28-.355 1.28.025 0 .61-.178 1.298-.396zm2.549-.772a4.51 4.51 0 01-.832-.317l-.355-.192-.69.223a12.1 12.1 0 01-.733.224c-.024 0 .059-.307.185-.682l.228-.683-.265-.531c-.337-.673-.46-1.165-.46-1.83 0-1.494.799-2.825 2.103-3.502 1.15-.597 2.43-.618 3.56-.058a3.937 3.937 0 012.147 2.833 3.92 3.92 0 01-2.034 4.182 3.921 3.921 0 01-2.854.333zm2.882-1.578c.398-.186.56-.405.566-.77l.005-.267-.514-.277c-.282-.152-.56-.277-.618-.277-.057 0-.23.131-.382.291-.153.16-.316.292-.363.292-.047 0-.303-.145-.568-.323-.444-.297-.873-.756-1.079-1.154-.082-.159-.067-.194.262-.603l.137-.17-.208-.575c-.23-.635-.316-.735-.623-.735-.434 0-.862.583-.865 1.18-.003.608.515 1.533 1.298 2.32.48.483.83.708 1.58 1.012.62.252.925.264 1.372.056z" fill="#10b916"></path><path d="M6.406 14.501c-3.164-.43-5.65-2.78-6.237-5.896-.137-.725-.135-1.89.004-2.629C.986 1.667 5.426-.956 9.567.426c2.51.838 4.289 2.866 4.863 5.547.108.501.108 2.155.001 2.66-.625 2.943-2.735 5.112-5.592 5.748-.666.148-1.812.205-2.433.12zm-2.277-2.977c.568-.18 1.064-.328 1.103-.327.039 0 .29.085.559.19.268.104.74.225 1.048.268 1.76.246 3.606-.742 4.396-2.352.389-.794.48-1.232.445-2.128-.046-1.19-.4-2.019-1.218-2.853-2.07-2.11-5.597-1.56-6.94 1.081-.586 1.153-.61 2.596-.061 3.787l.196.427-.361 1.058c-.38 1.115-.412 1.248-.28 1.204l1.113-.355zm2.392-.68a4.503 4.503 0 01-.753-.286l-.413-.204-.574.194c-.315.107-.61.194-.654.194-.055 0-.014-.197.13-.625l.209-.625-.242-.462c-.773-1.481-.473-3.185.763-4.323.686-.632 1.41-.907 2.392-.907.945 0 1.654.253 2.313.825.637.553.955 1.068 1.163 1.882.15.59.158 1.072.025 1.636-.315 1.338-1.437 2.453-2.741 2.723-.446.092-1.188.082-1.618-.022zM9.052 9.42c.319-.135.512-.384.548-.703l.032-.28-.538-.278-.538-.276-.304.3-.304.299-.335-.17a2.765 2.765 0 01-1.042-.928c-.233-.352-.245-.473-.062-.638.253-.228.262-.314.086-.784-.238-.638-.314-.736-.571-.736-.465 0-.862.595-.8 1.198.056.54.533 1.36 1.157 1.983.417.418.691.598 1.33.877.562.245.984.288 1.341.136z" fill="#11ba17"></path></svg>  
</a>
</div>	
<style>
.whatsapp {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    transition: all 0.3s ease;
}
p.whatsapptext {
    margin: 0;
    margin-bottom: 8px;
    text-align: center;
    background-color: #e1ffe9de;
    border-radius: 15px 5px 15px 5px;
    padding: 7px 7px 5px 7px;
    font-weight: bold;
    line-height: 1.2rem;
    font-size: 1rem;
    position: relative;
    word-wrap: break-word;
    max-width: 200px;
    color: #004303;
}
.whatsappclose {
    width: 100%;
    height: 1.7rem;
}
button.whatsappclose-button {
    padding: 0;
    background-color: #ffffff00;
    font-size: 1.45rem;
    cursor: pointer;
    color: #0000006b;
    transition: all 0.3s ease;
}
button.whatsappclose-button:hover {
    color: #000000;
}	
</style>
<script>
function whatsapp(e) {	e.parentElement.parentElement.remove() };
if (document.body.scrollWidth > 900 ) { document.querySelectorAll('div.whatsapp a').forEach(e => e.href = "https://web." + e.href.split(".").slice(1).join('.')) }
</script>	
<?php }},100);

Step 2.Customize the WhatsApp chat code

By deleting this line of code you can remove Welcome message from WhatsApp Chat.

$bubble_text = 'Hello 👋<br>Chat now via Whatsapp';	// use <br> for line break
Remove Welcome message from WhatsApp Chat

Enter the website support WhatsApp number here:

$whatsup_number = '15819938781'; // your whatapp number

You can change the customer’s default WhatsApp message here.

$whatsup_message='Hello👋 %0D%0A I have a question about your product on redpishi.com.';  // use %0D%0A for line break
customer's default WhatsApp chat message

Step 3.Update the functions.php and check the result

After updating the function file, check your website with your computer and mobile phone and make sure it works correctly by clicking on the WhatsApp chat.

If you want the WhatsApp chat button to be displayed only on certain pages, please read the following article.
How to add PHP code in WordPress [without plugins]

If this article is difficult for you to read in text, you can watch the video version below.

Share this post
Maya
Maya

Hi, my name is Maya and I’m a WordPress plugin developer. I created this website to share some of the helpful codes that I’ve used in my own projects.
If you’re looking for a custom plugin for your website, you can contact me by clicking on Hire a developer in the menu. I’d love to hear from you.

Articles: 50

6 Comments

    • Remove this line:
      add_action( "wp_footer", function () { if ( !is_admin() ) {

      Add this line:
      add_action( "wp_footer", function () { if ( !is_checkout() ) {

  1. Very nice thank you. I have a question. How to hide on specific pages? For example, on the payment page

Leave a Reply

Your email address will not be published. Required fields are marked *