• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Consultar dudas de produtos por Whatsapp en WooCommerce

Consultar dudas de produtos por Whatsapp en WooCommerce

Consultar dudas de produtos por Whatsapp en WooCommerce

[ 25 septiembre 2018 ] [ Actualizado: 17 junio 2020 ]
[ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

mejoras social woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿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:

Enlace Whatsapp en producto WooCommerce

Pantalla movil Whatsapp con mensaje

 

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.'&amp;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

En un artículo anterior vimos una forma diferente de agregar Whatsapp en WordPress simplemente a través de un link

 

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

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar Whatsapp flotante en WordPressAgregar Whatsapp flotante en WordPress
  • Whatsapp en WordPressAgregar Whatsapp en WordPress sin usar plugins
  • Redes sociales sin plugins en WordPressAñadir redes sociales sin plugins en WordPress
  • Contenidos de texto a voz en  WordPressContenidos de texto a voz en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (8 votos, promedio: 4,88 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. zalo carrillo

    26 septiembre, 2018

    Excelente tutorial, me sirvió

  2. Pablo

    12 diciembre, 2018

    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.

    • Jhon Marreros Guzmán

      13 diciembre, 2018

      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/

  3. yisus

    1 febrero, 2019

    excelente aporte amigo, agradezco que compartas tus conocimientos

  4. Ruben

    20 febrero, 2019

    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.

    • Jhon Marreros Guzmán

      25 febrero, 2019

      Hola según lo que comentas es posible que tengas que hacer algunos ajustes por CSS.

  5. Eduardo Real

    26 marzo, 2019

    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.

    • Jhon Marreros Guzmán

      26 marzo, 2019

      Hola, revisa la ruta en donde tienes tu imagen y revisa también que tenga el nombre exacto.

  6. Mauricio Zeballos

    1 julio, 2019

    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 ?

    • Jhon Marreros Guzmán

      2 julio, 2019

      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.

  7. Jose

    4 septiembre, 2019

    me parece genial tu web. Saludos.
    he aprendido algunas cosas nuevas. 🙂

  8. Felipe

    21 diciembre, 2019

    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.

    • Jhon Marreros Guzmán

      21 diciembre, 2019

      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:

      	global $product;
      	$url_product= get_permalink( $product->get_id() );
      	echo 'La url es: '. $url_product;
      
      • No experto en PHP

        14 enero, 2020

        ¿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?

        • Jhon Marreros Guzmán

          14 enero, 2020

          Hola, según parece sólo se enviaría el texto de la url, podrías probar enviarlo como parte del mensaje:

          $url = ‘https://api.whatsapp.com/send?phone=’.$phone.’&text=’.str_replace(‘ ‘, ‘%20’, $message.'-'.$url_product); 
          

          El servicio de Whatsapp business tiene mucha más funcionalidad. Tomaré nota para un futuro tutorial sobre esto. Saludos.

  9. Helbert

    11 enero, 2020

    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

    • Jhon Marreros Guzmán

      11 enero, 2020

      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

  10. Jesús Tovar

    6 mayo, 2020

    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

    • Jhon Marreros Guzmán

      6 mayo, 2020

      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:

      global $product;
      $product->get_regular_price();
      $product->get_sale_price();
      $product->get_price();

      Saludos.

  11. gustavo

    7 mayo, 2020

    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…..

    • Jhon Marreros Guzmán

      8 mayo, 2020

      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/

      • Santiago

        14 julio, 2020

        Hola Jhon soy realmente no entendí cómo cambiar el número según el producto, ¿podrías dame más detalles?

        • Santiago

          14 julio, 2020

          Hola Jhon, ya lo pude hacer, igualmente muchas gracias

  12. Joseph Mendoza

    11 mayo, 2020

    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.

    • Jhon Marreros Guzmán

      11 mayo, 2020

      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.

      • Joseph Mendoza

        11 mayo, 2020

        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.

  13. Matias Sebastian

    25 junio, 2020

    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…

    • Jhon Marreros Guzmán

      25 junio, 2020

      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.

  14. Mauro Tonini

    10 julio, 2020

    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.

    • Jhon Marreros Guzmán

      11 julio, 2020

      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.

  15. Alberto

    16 julio, 2020

    Tenes que hacer el plugin de esto Jhon, asi todos lo pueden instalar en wordpress. Muchas gracias saludos

    • Jhon Marreros Guzmán

      16 julio, 2020

      Gracias Alberto, lo tendré en cuenta.

  16. Carlos

    6 agosto, 2020

    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.

    • Jhon Marreros Guzmán

      6 agosto, 2020

      Hola, depende de en qué página quieres insertarlo ya que es dependiende de un Hook.
      Saludos.

  17. Javier

    9 septiembre, 2020

    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

    • Jhon Marreros Guzmán

      11 septiembre, 2020

      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.

  18. Javier

    15 septiembre, 2020

    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

  19. Javier

    16 septiembre, 2020

    Ya lo resolvi. Gracias amigo

    • Jhon Marreros Guzmán

      18 septiembre, 2020

      Ok, que bueno.

  20. Victor Salazar

    8 octubre, 2020

    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?

    • Jhon Marreros Guzmán

      9 octubre, 2020

      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()

  21. Florencia

    29 enero, 2021

    Hola! ¿Cómo puedo hacer para que este enlace para preguntar por whatsapp aparezca justo después del precio?

    • Jhon Marreros Guzmán

      29 enero, 2021

      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/

  22. Cristofer

    14 marzo, 2021

    Hola, saludos. No logro colocar el icono de Whatsapp, cargué la imagen en la biblioteca, es ahí dónde debo hacerlo?

    • Jhon Marreros Guzmán

      16 marzo, 2021

      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.

      • Cristofer

        24 marzo, 2021

        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.

        • Jhon Marreros Guzmán

          25 marzo, 2021

          Hola, en tu caso si quieres usar la url absoluta, escribe directamente la url, es decir quedaría:

          
          $ico = '<img src="https://boniblom.com/wp-content/uploads/2021/03/whatsapp-icon.svg" width=20 height=20 />';
          
          
  23. Cristofer

    26 marzo, 2021

    Muchísimas gracias por el apoyo, pude resolver el problema, ya muestra el icono del whatsapp.

  24. Kevin

    30 marzo, 2021

    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;

    $items= wc()->cart->get_cart();
    foreach($items as $item ) {
        $_product =  wc_get_product( $item['product_id']);
        $product_name= $_product->get_name();
        $phone = 'xxxxxxxx';
        $message = 'Quiero información de los sgts productos: '.get_the_title().' '.$product_name.' ';
        $text = 'Preguntar por Whatsapp';
        $ico = '';
        $url = 'https://api.whatsapp.com/send?phone='.$phone.'&text='.str_replace(' ', '%20', $message);
        $link = '<a href="'.$url.'" rel="nofollow ugc">'.$ico. ' '.$text.'</a>';
        echo ''. $link. '';
    }
    
    • Jhon Marreros Guzmán

      4 abril, 2021

      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

  25. Mauro Tonini

    28 abril, 2021

    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.

  26. Lucia

    2 septiembre, 2021

    Hola! Muy bueno, muchas gracias!
    Pregunta, hay forma de hacer que este link a whatsapp sólo aparezca si el producto está agotado? Gracias 🙂

    • Jhon Marreros Guzmán

      4 septiembre, 2021

      Hola, podrías definir la variable global $product y luego comprobar con $product->get_stock_quantity(), evaluaré hacer un artículo sobre esto.

  27. Sebas

    4 julio, 2022

    Buen aporte, pero hay alguna forma de mostrarlo SOLO en ciertas categorías de productos eso seria increible

    • Jhon Marreros Guzmán

      7 julio, 2022

      Hola Sebas, si suena bien tener esta funcionalidad, lo anotaré para analizarlo e implementarlo en un futuro artículo. Saludos.

  28. Roberto

    13 julio, 2022

    Me gustaría poder agregar ese mismo código pero directamente en un botón. Uso elementor y Jetengine se podrá.

    • Jhon Marreros Guzmán

      13 julio, 2022

      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.

  29. Alvaro

    19 julio, 2022

    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)

    • Jhon Marreros Guzmán

      20 julio, 2022

      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.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Eliminar Opciones de Pantalla en WordPress

5 Temas para la Administración de WordPress

Aprende a usar mu-plugins en WordPress

Jerarquía de Archivos de Plantilla en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados