Tutorial to add a Whatsapp button to the contact page of your Prestahop store.
Latest posts
-
Add Whatsapp button to the contact pageRead more -
Prestashop Translation Using Google Translate (Tutorial)Read moreStep by step tutorial to use the Google Translate widget to be able to mass translate Prestashop modules, templates etc.
-
Dump all POST and GET keys and values (PHP)Read moreHere is the PHP code dto dump all $_POST and $_GET keys and values to debug on a page
Blog categories
Search in blog
Archived posts
Add Whatsapp button to the contact page
The button will be added to the left column of your contact page. However, you will be able to place it anywhere else on your store once you get the reasoning.
It is recommended to make the modifications on a child theme if possible. Otherwise, do the changes on the original theme files.
Step 1:
Using an FTP program, open the file /themes/your_theme/templates/contact.tpl
Step 2:
Find the below code line:
{hook h='displayContactLeftColumn'}
Step 3:
Add the below code lines right under the above code line:
{* Whatsapp Button *}
<div class="block whatsapp">
<div class="icon"><span class="mdi--whatsapp"></span></div>
<div class="data">
{l s='Chat with' d='Shop.Theme.Global'}:<br>
<div class="whatsapp-button">
<a href="https://wa.me/XXXXXXXXXXXX" target="_blank" title="Whatsapp">
{l s='Whatsapp' d='Shop.Theme.Global'}
</a>
</div>
</div>
</div>
<style>
.whatsapp-button {
display: inline-block;
background-color: #25D366;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}
.whatsapp-button a {
color: #fff;
text-decoration: none;
}
.mdi--whatsapp::after {
display: inline-block;
width: 2.5em;
height: 2.5em;
vertical-align: -0.125em;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237a7a7a' d='M12.04 2c-5.46 0-9.91 4.45-9.91 9.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21c5.46 0 9.91-4.45 9.91-9.91c0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2m.01 1.67c2.2 0 4.26.86 5.82 2.42a8.23 8.23 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.24 8.23c-1.48 0-2.93-.39-4.19-1.15l-.3-.17l-3.12.82l.83-3.04l-.2-.32a8.2 8.2 0 0 1-1.26-4.38c.01-4.54 3.7-8.24 8.25-8.24M8.53 7.33c-.16 0-.43.06-.66.31c-.22.25-.87.86-.87 2.07c0 1.22.89 2.39 1 2.56c.14.17 1.76 2.67 4.25 3.73c.59.27 1.05.42 1.41.53c.59.19 1.13.16 1.56.1c.48-.07 1.46-.6 1.67-1.18s.21-1.07.15-1.18c-.07-.1-.23-.16-.48-.27c-.25-.14-1.47-.74-1.69-.82c-.23-.08-.37-.12-.56.12c-.16.25-.64.81-.78.97c-.15.17-.29.19-.53.07c-.26-.13-1.06-.39-2-1.23c-.74-.66-1.23-1.47-1.38-1.72c-.12-.24-.01-.39.11-.5c.11-.11.27-.29.37-.44c.13-.14.17-.25.25-.41c.08-.17.04-.31-.02-.43c-.06-.11-.56-1.35-.77-1.84c-.2-.48-.4-.42-.56-.43c-.14 0-.3-.01-.47-.01'/%3E%3C/svg%3E");
}
.whatsapp .icon {
float: left;
width: 3.5rem;
}
.whatsapp .data {
width: auto;
overflow: hidden;
font-size: .875rem;
color: #232323;
}
</style>
{* Whatsapp Button *}
Step 4:
Replace 'XXXXXXXXXXXX' with the whatsapp number of your business. For example, UK numbers start with 44XXXXXXXXXX, while Turkiye numbers are like 90XXXXXXXXXX
Step 5:
Save and upload the file back to your server.
Do not forget to clear your cache on the Performance tab to see the changes.
Related posts
-
Dump all POST and GET keys and values (PHP)
Here is the PHP code dto dump all $_POST and $_GET keys and values to debug on a pageRead more
-
Prestashop Translation Using Google Translate (Tutorial)
Step by step tutorial to use the Google Translate widget to be able to mass translate Prestashop modules, templates etc.Read more
Leave a comment