WooCommerce te da control total sobre tu tienda, incluyendo la posibilidad de añadir un botón de WhatsApp sin instalar ningún plugin. Esta guía cubre tres métodos prácticos con PHP y HTML directo, además de cómo crear mensajes predefinidos dinámicos que incluyen el nombre del producto automáticamente.
Por qué los vendedores de WooCommerce necesitan WhatsApp
La tasa de respuesta media del email en e-commerce ronda el 20%. Las tasas de apertura de WhatsApp superan el 90%. Esa diferencia explica por qué cada vez más propietarios de tiendas WooCommerce añaden un canal de mensajería directo.
Los casos de uso son concretos:
- Recuperación de carritos abandonados: Un cliente que dejó artículos en el carrito pero te dio su número en un pedido anterior puede ser contactado por WhatsApp. Un breve "¿Sigues interesado en [producto]?" recupera carritos que los emails automatizados nunca alcanzan.
- Preguntas antes de comprar: Los compradores móviles no quieren rellenar un formulario y esperar 24 horas. Quieren una respuesta rápida sobre talla, compatibilidad o envío antes de decidirse. Un botón de WhatsApp reduce la fricción en el momento exacto de la decisión.
- Señal de confianza: El 40% de los compradores móviles prefieren preguntar por mensajería antes que por email antes de realizar una compra online. Mostrar un botón de WhatsApp indica a los compradores indecisos que hay una persona real detrás de la tienda.
Método 1: Añadir el botón mediante functions.php
Este es el enfoque más limpio para desarrolladores. Añades una pequeña función PHP al archivo functions.php de tu tema, la enganchas al hook de producto de WooCommerce y el botón aparece automáticamente en todas las páginas de producto.
Ve a WordPress Admin → Apariencia → Editor de temas (o usa el functions.php de un tema hijo). Pega lo siguiente al final del archivo:
add_action( 'woocommerce_single_product_summary', 'ilh_whatsapp_product_button', 35 );
function ilh_whatsapp_product_button() {
global $product;
// Reemplaza con tu número en formato internacional (sin + ni espacios)
$whatsapp_number = '34612345678';
$product_name = rawurlencode( $product->get_name() );
$message = rawurlencode( 'Hola, me interesa ' ) . $product_name . rawurlencode( ' — ¿me puedes ayudar?' );
$whatsapp_url = 'https://wa.me/' . $whatsapp_number . '?text=' . $message;
echo '<a href="' . esc_url( $whatsapp_url ) . '"
target="_blank" rel="noopener noreferrer"
class="button alt ilh-whatsapp-btn"
style="background:#25D366;color:#fff;border-color:#25D366;margin-top:10px;">
Preguntar en WhatsApp
</a>';
}
Sustituye 34612345678 por tu número real de WhatsApp en formato internacional (código de país primero, sin símbolo +, sin espacios). Guarda el archivo y visita cualquier página de producto — el botón verde aparecerá debajo de "Añadir al carrito".
Método 2: Botón en la descripción del producto
Si no quieres editar PHP, puedes añadir el botón directamente en la descripción del producto usando el editor de WordPress. Ideal para destacar WhatsApp en productos específicos sin tocar el tema.
En el editor de producto de WooCommerce, cambia a la pestaña HTML y pega:
<a href="https://wa.me/34612345678?text=Hola%2C%20me%20interesa%20este%20producto%20%E2%80%94%20%C2%BFme%20puedes%20ayudar%3F"
target="_blank" rel="noopener"
style="display:inline-flex;align-items:center;gap:8px;background:#25D366;
color:#fff;padding:12px 20px;border-radius:8px;
text-decoration:none;font-weight:600;">
Preguntar en WhatsApp
</a>
La limitación de este método es que el mensaje es estático — no puede insertar el nombre del producto dinámicamente. Para mensajes personalizados por producto, usa el Método 1 o edita manualmente el parámetro text= en cada producto.
Método 3: WhatsApp en la página de confirmación de pedido
Añadir WhatsApp a la página de agradecimiento de WooCommerce convierte un recibo pasivo en un punto de contacto de soporte activo. Añade esto a tu functions.php:
add_action( 'woocommerce_thankyou', 'ilh_whatsapp_thankyou', 10, 1 );
function ilh_whatsapp_thankyou( $order_id ) {
$whatsapp_number = '34612345678';
$message = rawurlencode( 'Hola, acabo de hacer el pedido #' . $order_id . ' y tengo una consulta rápida.' );
$url = 'https://wa.me/' . $whatsapp_number . '?text=' . $message;
echo '<div style="margin:24px 0;padding:20px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;">
<p style="margin:0 0 12px;font-weight:600;">¿Necesitas ayuda con tu pedido?</p>
<a href="' . esc_url( $url ) . '" target="_blank" rel="noopener"
style="display:inline-flex;align-items:center;gap:8px;background:#25D366;
color:#fff;padding:12px 20px;border-radius:8px;text-decoration:none;font-weight:600;">
Chatear en WhatsApp
</a>
</div>';
}
El número de pedido se inyecta automáticamente en el mensaje predefinido, lo que permite a tu equipo de atención al cliente identificar de inmediato de qué pedido trata la conversación.
El mensaje predefinido perfecto
El snippet de PHP del Método 1 construye el mensaje dinámicamente usando $product->get_name(). Si el producto se llama "Bufanda de Lana Merino Azul – Talla M", el cliente abre WhatsApp con:
Hola, me interesa Bufanda de Lana Merino Azul – Talla M — ¿me puedes ayudar?
Usa siempre rawurlencode() en PHP para codificar el mensaje. La función urlencode() codifica los espacios como +, que WhatsApp no interpreta correctamente en el parámetro text=. rawurlencode() usa %20, que funciona de forma fiable.
Seguimiento de clics de WhatsApp con UTM
Los enlaces de WhatsApp abren una app externa, por lo que no aparecerán en los datos de referencia de GA4. La forma más sencilla de rastrearlos es añadir un listener de eventos en JavaScript:
<script>
document.querySelectorAll('.ilh-whatsapp-btn').forEach(function(btn) {
btn.addEventListener('click', function() {
gtag('event', 'whatsapp_click', {
'event_category': 'engagement',
'event_label': document.title,
'utm_source': 'whatsapp',
'utm_medium': 'product_page'
});
});
});
</script>
También puedes usar el Constructor de UTM de InstantLinkHub para crear una URL etiquetada para una página de destino dedicada con utm_source=whatsapp&utm_medium=product_page.
Una vez que sepas qué canal genera más ingresos, usa Feexio para calcular tus ganancias netas por pedido después de las comisiones de PayPal, Stripe u otras pasarelas de pago.
Preguntas frecuentes
¿Añadir WhatsApp a WooCommerce requiere un plugin?
No. Los tres métodos de esta guía usan PHP añadido a functions.php o HTML directo en la descripción del producto. No se instala ni activa ningún plugin. El botón es un simple enlace que apunta a wa.me, el formato oficial de URL de WhatsApp para click-to-chat.
¿Puedo usar el mismo número de WhatsApp para todos los productos?
Sí, y eso es exactamente lo que hace el Método 1. La función PHP se engancha a todas las páginas de producto simultáneamente. Lo único que cambia por producto es el texto del mensaje dinámico, que incluye el nombre del producto automáticamente. Tu número de WhatsApp permanece igual en toda la tienda.
¿Cómo hago que el botón de WhatsApp aparezca solo en móvil?
Añade una clase CSS al botón (p. ej., class="ilh-whatsapp-btn") y añade esta regla a la hoja de estilos de tu tema o en el CSS adicional del Personalizador de WordPress:
@media (min-width: 768px) {
.ilh-whatsapp-btn {
display: none !important;
}
}
Esto oculta el botón en pantallas de 768px o más (normalmente escritorio y tablet), manteniéndolo visible en móvil, donde el uso de WhatsApp es más natural.
Genera tu enlace de WhatsApp
Crea el enlace con tu número y un mensaje predefinido personalizado, y luego pégalo en tu tema de WooCommerce con el código anterior.
Crear enlace de WhatsApp gratis