¿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 = '34123456789';
$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.
Artículos Relacionados
(8 votos, promedio: 4,88 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. 🙂
Excelente tutorial, muchas gracias.
¿Cómo puedo agregar en el mensaje ademas del nombre del producto, la URL de este?
Eso seria FANTASTICO.
muchas gracias.
Hola Felipe, dentro de la función puedes agregar un código para que haga referencia primero al objeto product y luego obtener en la variable $url_product el enlace, por ejemplo:
¿Podrias ser más claro porfavor?
$url = ‘https://api.whatsapp.com/send?phone=’.$phone.’&text=’.str_replace(‘ ‘, ‘%20’, $message);
Donde se mete esa $ para que aparezca en el mensaje?
Hola, según parece sólo se enviaría el texto de la url, podrías probar enviarlo como parte del mensaje:
El servicio de Whatsapp business tiene mucha más funcionalidad. Tomaré nota para un futuro tutorial sobre esto. Saludos.
Hola amigo gracias por las enseñanzas que nos das te pregunto yo quiero es con el botón de WhatsApp, compartir la imagen y el link que debería hacer o si tienes algún tutorial sobre esto,
De nuevo gracias
Hola, si buscas funcionalidad adicional, como el envío de imágenes, al parecer se puede hacer pero con la API de Whatsapp para negocios, revisa: https://www.whatsapp.com/business/api?lang=es
Hola. Saludos.. gracias por todo el tiempo empleado para enseñarnos con tus post, Pregunto!!: como seria el código para agregar el precio del producto debajo del titulo, por ejemplo:
“Quiero información del producto:
Camiseta cuello en V
$18,00”
sera que se puede hacer y de forma ordenada?? gracias
Hola Jesús, podrías probar declarando la variable global de producto y lueg accediendo a su métodos que te darán el precio, algo similar a:
Saludos.
Hola Buen dia, te consulto, tengo una web de clasificado, hay posibilidad de el whatsapp se configure con diferente teléfono de cada cliente, es decir tengo 20 clientes que ofrecen productos a la venta, necesitaría que cada producto que quieran preguntar algo los mensaje valla al cliente que corresponda , gracias…..
Hola Gustavo, si es posible, tienes que agregar un campo adicional al producto que almacene el teléfono de contacto, luego cuando se construya el enlace de whatsapp usar ese dato. Puedes usar por ejemplo ACF para agregar el campo, no es necesario que lo muestres sólo sería usarlo, revisa este artículo de referencia: https://decodecms.com/campos-personalizados-en-productos-de-woocommerce/
Hola Jhon soy realmente no entendí cómo cambiar el número según el producto, ¿podrías dame más detalles?
Hola Jhon, ya lo pude hacer, igualmente muchas gracias
Muchas gracias me sirvió, tengo una consulta: podría colocarlo en la sección “categoría de producto”? en vez que en el mismo producto?
Muchas gracias de antemano.
Hola, si es posible, sin embargo en lugar del hook woocommerce_share, tendrías que usar otro, por ejemplo: woocommerce_after_main_content, ten en cuenta también que no será accesible los datos del producto ya que no estas en la página de producto.
Saludos.
Muchas gracias por su respuesta, podría usar el link de producto como referencia? para que el asesor pueda ver de qué producto se trata.
Hola John!, un gusto visitar y ver todos los articulos que escribes y nos aclaras nuestras dudas…
Consulta, para tomar los datos del checkout de woocommerce y pasarlos a whatsapp, que hook debería usar?. Y seguiría estos pasos?…
global $product;
$product->get_regular_price();
$product->get_sale_price();
$product->get_price();
Gracias de antemano…
Hola, para revisar los Hooks que tienes disponibles en el checkout, revisa esta guia de visual de Hooks: https://www.businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/ , efectivamente luego puedes usar cualquier método del objeto de producto.
Hola Jhon, como estas? intente aplicar esto al theme porto, tanto en el functions que esta dentro del child como en el que viene por defecto en el tema y no tuve exito.
Hola, he probado en el theme porto y funciona correctamente, revisa si implementaste el código correctamente, revisa la ruta y nombre de tu imagen. Saludos.
Tenes que hacer el plugin de esto Jhon, asi todos lo pueden instalar en wordpress. Muchas gracias saludos
Gracias Alberto, lo tendré en cuenta.
Hola, Jhon. Para insertar este código en una página determinada de wordpress que no sea de producto? Me interesa recibir la URL determinada de esa página por mensaje de whatsapp.
Muchas gracias.
Hola, depende de en qué página quieres insertarlo ya que es dependiende de un Hook.
Saludos.
Buenas tardes amigo, excelentes tus aportes, mil felicitaciones.
Una pregunta:
Para un sitio multivendedor, que cada uno tiene su propio numero de telefono, como se haría la implementación del código?. Que cada tienda tenga su propio numero whatsapp.
Gracias de antemano amigo
Hola, pues sería cuestión de revisar esto, pero la idea sería detectar en qué tienda se encuentra actualmente y de acuerdo a eso recuperar la metadata de WooCommerce para esa tienda.
Gracias, te doy mas detalles:
uso WCFM para el sistema multivendedor.
La pagina es https://setevende.com
El dato a recuperar seria “el telefono del vendedor”, para eso ya use ACF tal como lo recomendaste anteriormente y cree un campo para el numero de whatsapp. Listo.
Tambien logre que dicho numero aparezca en la pagina del producto, “Contacteme a mi whatsapp: 11122233”, lo que no he logrado convertir eso en link a la web.whatsapp desde la pagina del producto
Gracias
Ya lo resolvi. Gracias amigo
Ok, que bueno.
Hola Jhon Marreros Guzmán, quiero agradecerte por todos, por ser tan cordial.
Tenia una duda, se muy poco de PHP. La pregunta es, como podríamos restringir a que este boton solo aparezca en usuario invitados?
Hola, revisa la función https://developer.wordpress.org/reference/functions/is_user_logged_in/ , en la parte inferior verás algunos ejemplo, en tu caso sería la negación de la función, usa una condicional comprobando la negación de esta función para envolver todo el código interno de la función dcms_question_whatsapp()
Hola! ¿Cómo puedo hacer para que este enlace para preguntar por whatsapp aparezca justo después del precio?
Hola, puedes usar otro Hook para la posición que deseas, revisa este artículo relacionado: https://decodecms.com/modificar-elementos-en-pagina-de-producto-de-woocommerce/
Hola, saludos. No logro colocar el icono de Whatsapp, cargué la imagen en la biblioteca, es ahí dónde debo hacerlo?
Hola, si, también es posible, ahora tienes que usar la ruta absoluta de la imagen, cuando ingresas a la biblioteca y luego a la imagen debes buscar la url absoluta, esa es la que debes usar.
Hola, buenas tardes. No logro hacerlo, ¿exactamente como debo colocar esa url?
Dentro de este renglón, ¿Cómo sería lo correcto?:
$ico = ”;
Este es la url de la imagen que genera la biblioteca: https://boniblom.com/wp-content/uploads/2021/03/whatsapp-icon.svg
Muchas gracias.
Hola, en tu caso si quieres usar la url absoluta, escribe directamente la url, es decir quedaría:
Muchísimas gracias por el apoyo, pude resolver el problema, ya muestra el icono del whatsapp.
Jhon Marreros Guzmán gracias por compartir tus conocimientos, quería preguntarte como puedo hacer lo mismo pero en el carrito de compras, es decir si una persona selecciono 3 productos se van al carrito de compras, ahora la persona quiere consultar o comprar los 3 productos por whatsapp, y que en el mensaje del whatsapp aparescan los 3 productos, consegui imprimir todos los productos en el frontend del sitio solo que no puedo hacer que aparezca todos los productos seleccionados en el whatsapp, solo me sale uno, mi codigo esta de la sgt forma;
Hola
Estas colocando dentro del bucle todo el código lo cual es incorrecto.
Dentro del bucle sólo tendrías que concatenar $message, adicional lógicamente a las variables de $_product y $product_name
El resto del código, para formar el enlace lo puedes poner al final del bucle, la lógica sería similar, sólo que el mensaje ahora tiene todos los productos
Hola!, hay alguna manera de agrega este mismo Hook a la vista en miniatura cuando mis productos se muestran en GRID, es decir, debajo de la “Vista Rápida” o Nombre del Producto.
Hola! Muy bueno, muchas gracias!
Pregunta, hay forma de hacer que este link a whatsapp sólo aparezca si el producto está agotado? Gracias 🙂
Hola, podrías definir la variable global $product y luego comprobar con $product->get_stock_quantity(), evaluaré hacer un artículo sobre esto.
Buen aporte, pero hay alguna forma de mostrarlo SOLO en ciertas categorías de productos eso seria increible
Hola Sebas, si suena bien tener esta funcionalidad, lo anotaré para analizarlo e implementarlo en un futuro artículo. Saludos.
Me gustaría poder agregar ese mismo código pero directamente en un botón. Uso elementor y Jetengine se podrá.
Hola, el problema es que los constructores trabajan de manera visual, podrías agregar el código HTML en algún bloque de Elementor por ejemplo, pero no sería dinámico, ya que en el código de ejemplo se usa get_the_title() para obtener el título de la página actual.
Hola, esta genial la explicación. Solo una consulta. ¿puedo generar el link para que el usuario pueda preguntar por el nombre del producto con imagen incluida? es decir que al administrador le llegue un mensaje tipo “quiero màs información sobre este producto (titulo) (imagen del producto)
Hola, podrías probar agregar código HTML de enlace en la variable $message, asegúrate también que tu enlace tenga correctamente configurado los metadatos de open graph para mostrar la imagen al compartir.