Tutorial para agregar un botón de WhatsApp a la página de contacto de tu tienda Prestashop.
Latest posts
-
Agregar Botón de WhatsApp a la Página de ContactoLeer más -
Traducción de Prestashop Usando Google Translate (Tutorial)Leer másTutorial paso a paso para usar el widget de Google Translate y poder traducir en masa módulos, plantillas, etc. de...
-
Volcar todas las claves y valores de POST y GET (PHP)Leer másAquí está el código PHP para volcar todas las claves y valores de $_POST y $_GET para depurar en una página.
Blog categories
Search in blog
Archived posts
Agregar Botón de WhatsApp a la Página de Contacto
El botón se añadirá a la columna izquierda de su página de contacto. Sin embargo, podrá colocarlo en cualquier otra parte de su tienda una vez que entienda el razonamiento.
Se recomienda realizar las modificaciones en un tema hijo si es posible. De lo contrario, realice los cambios en los archivos del tema original.
Paso 1:
Utilizando un programa FTP, abra el archivo /themes/your_theme/templates/contact.tpl
Paso 2:
Encuentre la siguiente línea de código:
{hook h='displayContactLeftColumn'}
Paso 3:
Añada las siguientes líneas de código justo debajo de la línea de código anterior:
{* Botón de WhatsApp *}
<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>
{* Botón de WhatsApp *}
Paso 4:
Reemplace 'XXXXXXXXXXXX' con el número de WhatsApp de su empresa. Por ejemplo, los números del Reino Unido comienzan con 44XXXXXXXXXX, mientras que los números de Turquía son como 90XXXXXXXXXX.
Paso 5:
Guarde y cargue el archivo nuevamente en su servidor.
No olvide vaciar su caché en la pestaña de Rendimiento para ver los cambios.
Related posts
-
Volcar todas las claves y valores de POST y GET (PHP)
Aquí está el código PHP para volcar todas las claves y valores de $_POST y $_GET para depurar en una página.Leer más
-
Traducción de Prestashop Usando Google Translate (Tutorial)
Tutorial paso a paso para usar el widget de Google Translate y poder traducir en masa módulos, plantillas, etc. de...Leer más
Leave a comment