How to add WhatsApp chat link with product/URL link in WordPress and woo-commerce

Computer Technology Coding  - Godfrey_atima / Pixabay

In this tutorial, we will create a WhatsApp message link that will prefill the chat window with the URL of the current page. Such links are pretty useful when you want to add a WhatsApp customer support link and don’t want to trouble your customer by asking for the product or page they are querying about. This code/button will auto-populate the WhatsApp chat window with the URL of the page and in most cases give a preview of that page. I am personally using functionality on my e-commerce site as a request for a product customization button. You can check the button on this product page.

Okay! let’s dig in.

The Steps

The functionality needs a bit of coding (although you can use plugins) and three simple steps.

1. Adding current URL shortcode functionality

In case you are already using a plugin to insert current URL of the page using short codes, you can skip this step. However if not you will have to edit the functions.php file of your theme.

Warning: never edit the functions.php file of the theme directly. It might crash your theme and will also get lost on theme updates. Create a child theme and then edit the functions.php file. If you are not sure how to do this read about this here.

To edit the functions file go to Appearance > Theme Editor and select your theme/child theme. Once there click on the Theme Functions file (functions.php).

Add the following code in your functions.php file and save the file.

add_shortcode ('inserturl', 'get_current_url');
function get_current_url() {
	$pageURL = 'http';
	if( isset($_SERVER["HTTPS"]) ) {
		if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
	}
	$pageURL .= "://";
	$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
	return $pageURL;
}

To test if the code is working fine, edit any published page or post of your blog and add the following code into the body of the post. Square brackets are needed.

[inserturl]

Make sure you toggle and use the text version of the editor. Or if you are using blocks, use shortcode block or classic block and edit as HTML.

Save/Publish the page. The webpage should show the url of your current page.

2. Adding WhatsApp chat button

WhatsApp chat buttons are nothing but a hyperlink. So this link can be used as a normal link or linked to an image.

For creating the link use the following code

https://wa.me/whatsappphonenumber

Here replace the ‘whatsappphonenumber‘ with your WhatsApp number in international format. Omit any brackets, dashes, plus signs, and leading zeros. For India numbers, it would be 91XXXXXXXXXX.

You can add the text you want to get pre-filled or leave it blank. However, it would be better to have some text for testing purposes. Here is the updated code/link.

https://wa.me/whatsappphonenumber/?text=urlencodedtext

Here replace ‘urlencodedtext‘ with your own text. Also, the text must be URL encoded. Use this tool to encode.

Example link

https://wa.me/918527224554?text=I%27m%20inquiring%20about%20the%20WhatsApp%20button%20tutorial

Once you have edited the link to your liking paste it on any published page and test it out. If it works as intended, we can move on to the last and final step.

Read more about there here

2. Adding URL to the WhatsApp button/link

If both the codes from step one and two are working fine, we can go ahead and merge the two.

This is the easiest step. Just replace the text with the shortcode. You can also add additional text before or after the shortcode.

For example, in our code, it would be

https://wa.me/918527224554?text=[inserturl]

You can use it as a stand-alone link or use it with an image.

Try this code out on this page (Chat with our support button)

2 Comments

  1. daniel
    July 2, 2021

    Thanks!

    Reply

Leave a Reply

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

Scroll to top