Botón de contacto por WhatsApp

Agrega a tu web un botón de WhatsApp para que te puedan contactar directamente en tu teléfono. Un código sencillo, sin necesidad de instalar plugins. Sustituye el texto ‘tu-telefono‘ por tu número de WhatsApp (sin espacios, incluyendo delante el código del país, sin el signo «+» delante (por ejemplo, para España, 34XXXXXXXX), y la ruta de la imagen por la que quieras que aparezca como botón.

PHP:

add_action('wp_footer', 'whatsapp_icon');
function whatsapp_icon() {
    echo '<a href="https://wa.me/tu-telefono" target="_blank" rel="noopener noreferrer" class="whatsapp-icon"><img src="url-de-la-imagen-del-icono-de-whatsapp" alt="Icono de WhatsApp"><span>Contacta por WhatsApp</span></a>';
}

CSS:

.whatsapp-icon {
    bottom: 25px;
    cursor: pointer;
    position: fixed;
    right: 25px;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    z-index: 999;
}
  
  .whatsapp-icon:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}
  
  .whatsapp-icon img {
    display: block;
    height: 60px;
    width: 60px;    
  }
  
  .whatsapp-icon span {
    display: none;
  }
  
  .whatsapp-icon:hover span {
    color: #ffffff;
    display: block;
    background-color: #d24632;
    font-family: 'Oxygen', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin-left:10px;
    padding: 10px 30px;
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    white-space: nowrap;
}
  
  .whatsapp-icon:hover span:hover {
      background-color: #d24632;
      color: #ffffff;
      transition-duration: .4s;
  }