¿Te gustaría que tus usuarios contacten directamente por Whatsapp si tienen alguna duda sobre un producto específico?, en este artículo aprenderás cómo integrar la opción de consultas de dudas de productos por Whatsapp en WooCommerce.
Resultado Final
Al final queremos obtener algo similar a como se muestra en la siguiente imagen:
Agregando código para crear el enlace
Usaremos uno de los Hooks que tiene WooCommerce llamado woocommerce_share. El siguiente código lo puedes agregar en el archivo functions.php de tu theme o child-theme.
add_action( 'woocommerce_share', 'dcms_question_whatsapp' );
function dcms_question_whatsapp(){
$phone = '34610123456';
$message = 'Quiero información del producto: '.get_the_title().' ';
$text = 'Preguntar por Whatsapp';
$ico = '<img src="'.get_stylesheet_directory_uri().'/img/whatsapp.png" width=20 height=20 />';
$url = 'https://api.whatsapp.com/send?phone='.$phone.'&text='.str_replace(' ', '%20', $message);
$link = '<a class="dc-link" href="'.$url.'" target="_blank">'.$ico. ' <span>'.$text.'</span></a>';
echo '<div class="dc-whatsapp-container">'. $link. '</div>';
};
En el código anterior:
- Utilizamos el hook de WooCommerce woocommerce_share el cual hace referencia a la función: dcms_question_whatsapp
- Dentro de esta función puedes configurar los valores de teléfono (al cual te llegarán los mensajes), mensaje por defecto, y el texto del enlace
- Puedes configurar igualmente una imagen como icono, en el ejemplo hay una imagen llamada whatsapp.png en la carpeta img del theme
- Finalmente se imprime el HTML generado
Conclusión
Como hemos visto, puedes agregar un enlace de Whatsapp en el detalle de producto de manera simple y sin usar plugins, este enlace te permitirá mantener un chat directo con tu número telefónico, en caso tus clientes tengan alguna duda sobre algún producto.
¿Aún con dudas?, en el siguiente video se detalla los puntos anteriores
Artículos Relacionados
(5 votos, promedio: 5,00 de 5)
Cargando…
Excelente tutorial, me sirvió
Hola, yo tengo el tema «motors» para WordPress, que es un clasificados de vehiculos y me gustaria hacer lo mismo con los autos, que los visitantes tengan la opcion de enviarles a los vendedores un mensaje atravez de un boton de whatsapp consultando por un vehiculo en particular, podrias ayudarme con eso? Saludos.
Hola, lo que comentas es justo lo que se trata en este artículo, tienes algún problema implementando el código?, si tienes problemas o quieres modificarlo el comportamiento mejor envía un mensaje a través del formulario de contacto: https://decodecms.com/contacto/
excelente aporte amigo, agradezco que compartas tus conocimientos
Excelente aporte. Funciona perfecto. Muchas Gracias.
Solo me causa algún problema alinear la imagen (me envía un salto de linea?? es muy grande la imagen ??) y me queda el enlace consultar en el siguiente renglón. Uso Storefront.
Hola según lo que comentas es posible que tengas que hacer algunos ajustes por CSS.
Hola, muy bueno el código, funciona perfecto. Solo un detalle. El icono de WS no se ve, aparece la imagen de imagen no encontrada. igual gracias porque es muy util.
Hola, revisa la ruta en donde tienes tu imagen y revisa también que tenga el nombre exacto.
Hola Jhon muy bueno el tutorial! te hago una consulta, estoy utilizando elementor builder, para mostrar la info del producto y no me aparece el boton de preguntar por whatsapp. que puede ser ?
Hola, no he probado con Elementor Builder, posiblemente tengas que agregar el botón con Elementor, consulta con los desarrolladores, ya que entiendo que tienes la versión de pago.
me parece genial tu web. Saludos.
he aprendido algunas cosas nuevas. 🙂