How to add WhatsApp Chat to WooCommerce

There are many free and paid plugins that will help you to add WhatsApp chat functionality to a WooCommerce website. In this blog, we will use Join.chat plugin by Creame. This is a freemium plugin. The free version gives you the basic functionalities. If you if you want advanced features you can install the premium version

  1. Install Join.chat WhatsApp Plugin

Go to Plugins > Add new to open the WordPress plugin repository. Then search for join.chat and install the plugin by Creame. Once the installation is complete, activate the plugin.

  1. Configure the Join.chat Settings

Once you install the Join.chat plugin, it will add a new sub-menu under Settings in the WordPress sidebar and this is where you can configure the plugin.

Go to Settings > Join.chat to open the plugin’s settings page.

In the General settings page, you can adjust the basic settings for the plugin.

Telephone

This is where you need to enter your WhatsApp number. First, choose your country using the flag icon to get the country code. Then enter your phone number.

Message

The content on this field will be sent to your WhatsApp number from the website visitors when they start the chat with you. This message is automatically sent from the customer’s WhatsApp account when they click the open WhatsApp button.

Please remember that this should be like the text a customer would send to you to initiate the chat.

This allows you to choose the chat icon shown on your web page. The default icon is great, so you don’t need to change it.

Tooltip

The content on this field is displayed next to the WhatsApp icon on your website. The default text is Need help? You can use the same or change it if you wish. It’s better to keep the default text here. If you change, please make sure it’s very short, not more than 3 words.

Position on Screen

You can position the WhatsApp chat icon at the left bottom corner or right bottom corner. By default, it is on the right bottom corner. You don’t need to change this as well as most websites position the chatbot icon on the right bottom corner.

Button delay

This setting allows you to set the delay time to load the button on the screen after the page is completely loaded. Loading the chat icon after a few seconds since the page is loaded is efficient in grabbing the attention of the visitors.

A 3-5 seconds delay is ideal for most websites.

Mobile-only

You can check this checkbox to limit the WhatsApp chat feature only for mobile devices.

It’s better to leave this unchecked so Desktop users can also use the WhatsApp chat feature.

WhatsApp Web

Check this box to open the WhatsApp web version for the customer when they click the Open WhatsApp button.

Call to Action

The content entered on this field will be shown to the visitor as a notification when they visit your website. You can enter a call to action message with coupon code or something in this field to persuade the customer WhatsApp you.

In our example, we use

Hey, 20% discount on products above $50 today! WhatsApp now to get the coupon.

The following image shows how this message will be displayed to the customer on your website.

Open Chat

The content on this field is displayed next to the button to launch WhatsApp on the customer’s computer or smartphone. It’s better to keep the default text. The following image shows how this text is displayed to the customer.

Theme color

This setting allows you to choose the theme color for the WhatsApp chat window. It’s recommended to keep the default color because it’s consistent with the WhatsApp brand color.

Logo

This is a premium option that allows you to remove the “Powered by Join.chat” link in the small window with the Open chat button which is opened when the customer clicks on the WhatsApp icon on your web page.

Chat delay

This setting allows you to automatically open the chat window to the visitors after a delay. If you don’t want this window to be automatically opened, you can enter 0 to disable this feature.

This feature allows you to persuade the visitors to contact you if they don’t take any action on the page. So, a 10-second delay is recommended.

Pageviews

This setting allows you to show the chat window to the visitors automatically after they visit a specific number of pages on your website. You can leave the default option as it is.

Notification balloon

Check this option to show a notification symbol on the top of the WhatsApp icon when the chat window message is triggered. This makes your chat feature popup less intrusive. So, it’s recommended to keep this enabled (check the checkbox).

After making all the changes in the General settings page, click on the Save Changes button.

  1. Set the Join.chat Visibility settings

Once you are done with the General settings page, click on Visibility to go to the Visibility settings page for Join.chat plugin.

This page allows you to control on which pages you want to show the WhatsApp chat icon.

You have three options: Show, Hide or Inherit.

The Inherit option takes the value of the Global visibility option.

By default, the WhatsApp chat icon displayed on all pages. So, most probably, you don’t want to make any change on this page.

If you have made any change on this site, don’t forget to click the Save Changes button at the bottom.

  1. Configure the Join.chat WooCommerce settings

In the WooCommerce tab, you can define dynamic messages to be displayed on the chat window.
You can use variables like {SITE} {URL} {TITLE} {PRODUCT} {SKU} {PRICE} in the message to display the product data dynamically.

The placeholder text will give you an idea of how you can use the variables in the messages.

Summary

Join.chat by Creame is a simple and elegant solution to add WhatsApp chat option on your WooCommerce website. The biggest advantage of this plugin is that it allows you to show a chat window with dynamic content on single product pages by fetching various product data. The disadvantage of this plugin is that it shows a logo of the Join.chat beneath the chat window. However, this can be removed if you purchase the premium version or buy an add-on.