Botón de Whatsapp sin plugins para Woocommerce

Botón de Whatsapp es buscado por muchas personas y en muchas ocasiones ellos usan un plugin para este propósito, pero no es la única forma. Puedes agregar el botón de whatsapp sin plugins para woocommerce con un simple script.

El enlace

https://web.whatsapp.com/send?phone={PHONE}&text={CONTENT}

Debes usar un número telefónico completo, incluído el código internacional, además un mensaje inicial. Este enlace funciona en el escritorio como en mobil porque cuando haces click, se abre una página intermediaria que evalúa si abrir la app de Whatsapp en tu teléfono o Whatsapp Web en tu escritorio.

Diseño del botón de whatsapp sin plugins para Woocommerce

Si conoces CSS, puedes diseñar este botón a tu gusto. Nosotros preferimos color verde en combinación con el blanco porque son los colores primarios de Whatsapp, además agregaremos un ícono SVG.

Botón de Whatsapp en la página de producto

Puedes usar este botón en cualquier lugar, pero en este ejemplo lo pondremos debajo del titulo del producto. Recuerda poner este código en tu functions.php  de tu tema activo.

<?php
function letsgodev_add_whatsapp_button() {
  $phone_number = '5491199999999';
  $content = 'I need to help';

  $link = sprintf(
    'https://web.whatsapp.com/send?phone=%s&text=%s',
    $phone_number, rawurlencode($content)
  );

  $style = '.letsgodev_whatsapp {
    border: 1px solid #249235;
    border-radius: 10px;
    padding: 10px 30px 10px 55px;
    background-color: #FFFFFF;
    color: #249235;
    text-decoration: none;

    background: url(https://blog.letsgodev.com/wp-content/uploads/2020/02/whatsapp_logo_green.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: 10px center;
  }

  .letsgodev_whatsapp:hover {
    border: 0;
    background-color: #249235;
    color: #FFFFFF;
  }';

  echo '<style>'.$style.'</style>';
  echo '<a href="'.$link.'" class="letsgodev_whatsapp">Need help?</a>';
}

add_action( 'woocommerce_single_product_summary', 'letsgodev_add_whatsapp_button', 6 );

Si necesitas poner el botón en otra posición, puedes cambiar la prioridad:

<?php

// Debajo del precio
add_action( 'woocommerce_single_product_summary', 'letsgodev_add_whatsapp_button', 11 );

// Debajo del resumen
add_action( 'woocommerce_single_product_summary', 'letsgodev_add_whatsapp_button', 21 );

// Debajo del boton de agregar al carrito
add_action( 'woocommerce_single_product_summary', 'letsgodev_add_whatsapp_button', 31 );

// Debajo de las variables meta
add_action( 'woocommerce_single_product_summary', 'letsgodev_add_whatsapp_button', 41 );

Si tienes algunas preguntas, sólo deja un comentario