Cómo Conectar WooCommerce y Elementor con WhatsApp Cloud API y n8n (Notificaciones y Chatbots)

Automatizar el envío de mensajes por WhatsApp Cloud API oficial de Meta cuando entra un nuevo pedido en WooCommerce o cuando un prospecto llena un formulario en Elementor Pro multiplica la tasa de contacto comercial y reduce los pedidos cancelados. Y lo mejor: hoy puedes construir todo este flujo con n8n o Make sin pagar costosas plataformas intermediarias por cada mensaje.

En esta guía técnica aprenderás la arquitectura completa para conectar WordPress (WooCommerce y Elementor) con la API oficial de WhatsApp Business usando Webhooks, n8n/Make y plantillas aprobadas por Meta.

Arquitectura de Integración: WordPress → Webhook (n8n / Make) → WhatsApp Cloud API

El flujo de datos en tiempo real consta de 3 pasos:

1. Disparador (Trigger) en WordPress: Un Webhook de WooCommerce (`order.created`, `order.updated`) o una acción Webhook al enviar un formulario de Elementor Pro.
2. Orquestador (n8n o Make): Recibe el payload JSON desde WordPress, limpia y formatea el número de teléfono con el indicativo internacional (por ejemplo, `57` para Colombia), valida los datos y construye la petición HTTP o el nodo oficial de WhatsApp Business Cloud.
3. Meta WhatsApp Cloud API: Envía la plantilla transaccional (confirmación de pedido, guía de despacho, recordatorio de pago pendiente o bienvenida a un lead) y, si el usuario responde, redirige la conversación a tu agente de IA en n8n o a tu equipo humano.

Paso 1: Configurar tu aplicación en Meta for Developers y WhatsApp Cloud API

Antes de conectar n8n o Make, necesitas crear una App de tipo Empresa (Business) en developers.facebook.com, vincular tu número de teléfono dedicado y generar un Token Permanente de Usuario del Sistema junto con tu `Phone Number ID`.

Si aún no has creado tu app en Meta o quieres ver cómo funcionan las plantillas y el webhook de verificación paso a paso, consulta primero nuestro tutorial completo: Cómo integrar la API oficial de WhatsApp con Make y enviar mensajes automáticos.

Paso 2: Enviar formularios de Elementor Pro hacia n8n y WhatsApp

1. En tu página de Elementor Pro, haz clic sobre el widget Formulario (Form).
2. En la pestaña Acciones después del envío (Actions After Submit), añade la acción Webhook.
3. En tu instancia de n8n, crea un nodo Webhook (POST), copia la URL de producción/prueba y pégala en el campo Webhook de Elementor (no olvides activar Advanced Data si deseas recibir los IDs exactos de cada campo).
4. Si necesitas validar los campos antes de que Elementor dispare el webhook o transformar los datos desde el navegador/servidor, apóyate en nuestras guías de código:
   • Cómo validar campos de un formulario de Elementor con JavaScript (perfecto para obligar a que el teléfono de WhatsApp tenga 10 dígitos).
   • Cómo manipular los datos del formulario de Elementor en PHP con el hook `elementor_pro/forms/new_record`.
   • Cómo hacer redirección condicional en formularios de Elementor Pro según la respuesta del usuario.

Paso 3: Enviar notificaciones de pedidos de WooCommerce por WhatsApp con n8n

1. En tu panel de WordPress, ve a WooCommerce → Ajustes → Avanzado → Webhooks y haz clic en Añadir webhook.
2. Configura el estado en Activo, el tema en Pedido creado (`order.created`) o Pedido actualizado (`order.updated`) y pega la URL del nodo Webhook de tu flujo en n8n.
3. En n8n, agrega un nodo Code (JavaScript) para normalizar el campo `billing.phone`: elimina espacios, guiones o el signo `+`, y si el número tiene 10 dígitos (ej. `3001234567` en Colombia), antepón `57`.
4. Conecta el nodo oficial WhatsApp Business Cloud → Send Template pasando como variables el nombre del cliente (`billing.first_name`), el número de pedido (`id`) y el total formateado.

Caso Avanzado: Confirmar pedidos Contraentrega (COD) por WhatsApp automáticamente

En Colombia y Latinoamérica, confirmar por WhatsApp los pedidos contraentrega antes de despacharlos reduce las devoluciones logísticas hasta en un 40%. Puedes capturar el pedido en segundos con nuestro Plugin Modal Cash On Delivery (COD) Checkout y disparar inmediatamente un mensaje interactivo de WhatsApp con dos botones («Confirmar mi pedido» / «Corregir dirección») conectado por API REST a WooCommerce para cambiar el estado del pedido automáticamente.