<aside> 💡 TL;DR

1. Create your widget copy on WhatsApp Widget Generator
2. Copy the HTML code, CSS link & JS link
3. Paste in footer.php of your main theme
4. Publish! </aside>

1. Creating the WhatsApp widget

You can create your own widget using the WhatsApp Widget Generator tool on Hoola’s website. This is the first step.

In there, you put your information:

1. Welcome message text
2. Teaser message text
3. CTA button text
4. Button Color

And in the next step:

1. Your WhatsApp business number
2. Your pre-filled message

Hit “Generate”

Your information is saved in an HTML code, this is what we need.

Test the link to see if it actually goes to your WhatsApp, and puts the right pre-filled message.

Hit “Copy” to copy the html code.

2. Add the code in WooCommerce

2.1. Universal way

In your WordPress admin dashboard, go to “Theme File Editor”

Then, on the right side:

1. Make sure your active theme is selected (often by default)
2. Click to open footer.php

Next, scroll all the way to find the </body> closing tag.

This is where you paste all the necessary code.

1. Copy the script & stylesheet:

<!-- Hoola WhatsApp Widget -->
<script defer src="<https://cdn.hoola.so/public/scripts/hoola-widget.js>"></script>
<link rel="stylesheet" href="<https://cdn.hoola.so/public/css/hoola-widget.css>" type="text/css">

<div id="hoola-pre-wrapper">
<div id="hoola-widget-wrapper" class="hoola-widget-wrapper"> 
...
<!-- Your Widget Code from the Generator -->
</div></div>

It should look something like this:

Hit “Update File” to publish.

2.2. Best practices

The following steps are slightly more technical.