Añadir un botón de WhatsApp a los productos de WooCommerce

Dificultad Baja

Añadir un botón de WhatsApp a los productos de WooCommerce puede ser una excelente manera de facilitar la interacción entre los clientes y los administradores. El objetivo como siempre es el de aumentar las ventas. Antes de enseñarte como añadir este botón, te vamos a dar el consejo que te debería haber dado la agencia de SEO o desarrollo web con la que trabajes: ¡si no vas a contestar a los mensajes a tiempo no lo pongas!

Puedes utilizar plugins destinados a este cometido, sin embargo, hoy te enseñamos como hacerlo mediante código fuente.

Cómo añado el botón de WhatsApp sin plugins a mis productos de WooCommerce

En primer lugar, es importante indicar que existen varios sitios donde podemos añadir el botón de contactar por WhatsApp en una ficha de producto. Lo más adecuado, es ubicarlo en un sitio donde sea visible de manera rápida por el usuario y fomente la interacción sin ser invasivo. En nuestro caso, vamos a añadir este botón debajo de la descripción corta del producto. Para ello, añadiremos en el archivo functions.php el siguiente código:

/* FUNCIÓN QUE AÑADE EL BOTÓN DE WHATSAPP */
function anadir_btn_whatsapp() {
  global $product;
   // CONSEGUIMOS EL TÍTULO DEL PRODUCTO
   $titulo = get_the_title();

   // TRATAMOS EL TÍTULO PARA QUITARLE LOS CARACTERES EXTRAÑOS
   $titulo = str_replace("/", "-", $titulo);
   $titulo = str_replace('"', "-", $titulo);
   $titulo = str_replace("'", "-", $titulo);
   $titulo = str_replace("&", "-", $titulo);
   $titulo = str_replace("?", "-", $titulo);
   $titulo = str_replace("¿", "-", $titulo);
   $titulo = str_replace("$", "-", $titulo);
   
   ///EL TELÉFONO MÓVIL AL QUE ENVIAREMOS LA INFO CON EL PREFIJO SIN + NI 00
   $telefono = '34999999999';

   // AÑADIMOS EL ENLACE A WHATSAPP PERSONALIZADO
   echo '<a target="_blank" href="https://api.whatsapp.com/send?phone='.$telefono.'&text=Hola! He visto la web y me gustaría saber más información sobre el producto: '.$titulo.'">Consulta WhatsApp <img src="URL_IMAGEN_LOGO_WHATSAPP" /> </a>';
}

Es importante realizar una serie de comprobaciones en el titular del producto para que al incluirlo en el texto automático que se enviará en el mensaje de WhatsApp. Para hacer la consulta más rápida y tratar de captar una consulta compulsiva, incluir el título del producto en el mensaje que se precargará al abrir la conversación es una gran idea.

Para añadir el botón de WhatsApp a la zona inferior de la descripción corta del producto, añadiremos el siguiente código (debajo o arriba), de la función anterior:

/* EJECUTAMOS LA FUNCIÓN DESPUÉS DE LA DESCRIPCIÓN CORTA */ 
add_action( 'woocommerce_single_product_summary', 'anadir_btn_whatsapp', 25 );

Si deseas añadirlo antes de la descripción corta, deberás emplear el siguiente código, el cual emplea un hook diferente:

/* EJECUTAMOS LA FUNCIÓN DESPUÉS DE LA DESCRIPCIÓN CORTA */  
add_action( 'woocommerce_after_single_product_summary', 'anadir_btn_whatsapp', 25 );

Recuerda que deberás darle los estilos al botón para dejarlos en armonía con las líneas de diseño de tu web. En lugar de una imagen, también puedes emplear una tipografía con iconos como podría ser la de font-awesome.

De esta sencilla manera, podemos añadir un botón de WhatsApp a las fichas de producto sin necesidad de plugins que sobrecarguen nuestro WordPress y fomentemos la interacción con los clientes. ¿Estás preparado/a?

Descubre cómo cambiar el precio de un producto en WooCommerce por un botón de WhatsApp.

¿Qué hooks existen en la ficha de producto de WooCommerce?

• woocommerce_before_single_product
• woocommerce_before_single_product_summary
• woocommerce_single_product_summary
• woocommerce_single_product_description
• woocommerce_after_single_product_summary
• woocommerce_after_single_product
• woocommerce_product_meta_start
• woocommerce_product_meta_end
• woocommerce_product_thumbnails
• woocommerce_review_before_comment_meta
• woocommerce_review_meta
• woocommerce_review_before_comment_text
• woocommerce_review_comment_text
• woocommerce_review_after_comment_text: