WhatsApp UI - WooCommerce

Pedidos WC

En línea

¡Hola! Aquí aparecerán tus nuevos pedidos de WooCommerce 10:30

¿Te gustaría recibir los pedidos o reservas que hacen tus clientes directamente en tu WhatsApp?

Si administras una tienda online con WooCommerce, esta guía te mostrará dos formas muy efectivas para lograrlo:

✅ Una opción rápida y sencilla, sin necesidad de programación, ideal para MVPs o negocios locales.
🚀 Una opción más profesional y automatizada, pensada para negocios en crecimiento o con más demanda.

✅ Método 1: Enviar pedidos por WhatsApp con enlace wa.me (rápido y sin complicaciones)

Este método es perfecto si buscas una solución directa y funcional sin necesidad de APIs ni configuraciones complejas.

🛠️ ¿Cómo funciona?

Creamos un enlace personalizado de WhatsApp que se muestra automáticamente cuando un cliente finaliza su compra. Al hacer clic, se abre WhatsApp con el mensaje del pedido ya escrito, listo para enviar.

📦 Código para tu tienda (copiar y pegar en tu functions.php):

				
					add_action('woocommerce_thankyou', 'enviar_pedido_por_whatsapp', 10, 1);
function enviar_pedido_por_whatsapp($order_id) {
    $order = wc_get_order($order_id);
    $nombre = $order->get_billing_first_name();
    $telefono = '34XXXXXXXXX'; // Reemplaza con tu número de WhatsApp

    $items = '';
    foreach ($order->get_items() as $item) {
        $items .= $item->get_name() . ' x ' . $item->get_quantity() . ', ';
    }

    $mensaje = "Nueva orden de $nombre. Pedido: $items";
    $url = "https://wa.me/$telefono?text=" . urlencode($mensaje);

    echo "<p><a href='$url' class='button' target='_blank'>📲 Enviar pedido por WhatsApp</a></p>";
}

				
			

🟢 Ventajas:

  • ✅ Muy fácil de implementar.

  • ✅ No necesitas cuenta de empresa ni validación externa.

  • ✅ Ideal para tiendas locales, restaurantes o pequeños negocios.

🔴 Desventajas:

  • ⚠️ El mensaje no se envía automáticamente, el administrador debe hacer clic.

  • ⚠️ No se puede rastrear el estado del pedido desde WhatsApp.

🚀 Método 2: Usar la API de WhatsApp Business con Twilio (automatizado)

Si tu negocio ha crecido y necesitas una solución más robusta, puedes automatizar el envío de pedidos usando la API oficial de WhatsApp a través de Twilio.

📋 ¿Qué necesitas?

  1. Crear una cuenta en Twilio.

  2. Obtener un número de WhatsApp de prueba (o usar uno verificado).

  3. Instalar la librería oficial de Twilio en tu servidor (vía Composer).

				
					composer require twilio/sdk

				
			

💻 Código en PHP para enviar el mensaje automáticamente:

				
					require __DIR__ . '/vendor/autoload.php';
use Twilio\Rest\Client;

$sid = 'TU_SID';
$token = 'TU_TOKEN';
$client = new Client($sid, $token);

$client->messages->create(
    'whatsapp:+34612345678', // Número del administrador
    [
        'from' => 'whatsapp:+14155238886', // Número de Twilio
        'body' => 'Nueva reserva: Juan Pérez para el 5 de abril a las 20:00'
    ]
);

				
			

🧠 Consejo técnico:

Puedes usar este código junto al hook woocommerce_order_status_completed para que el envío se realice de forma automática al completar un pedido.


⚖️ ¿Cuál método deberías elegir?

Método Ideal para Requiere programación Envío automático
wa.me manual Tiendas pequeñas, MVPs No No
API Twilio SaaS, negocios en crecimiento Sí (PHP + SDK)
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

🔍 Analiza tu web con Inteligencia Artificial – Gratis y al instante

¿Tu sitio está optimizado? Con esta herramienta puedes descubrir en segundos cómo mejorar la UX de tu web gracias a la inteligencia artificial.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Checklist de UX para Desarrolladores

¿Cuántos errores de experiencia de usuario tiene tu web y aún no lo sabes? Este checklist UX te los revela todos.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Cómo enviar pedidos o reservas de WooCommerce a WhatsApp (con o sin API)

Pedidos de WooCommerce directamente en tu WhatsApp con dos métodos: un método simple sin programación y otro con la API de WhatsApp
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Integrar la Síntesis de Voz de ElevenLabs en tu Proyecto Web

Añade un Agente entrenado con reconocimiento de voz
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Canvas Web Component

Como desarrollador full stack, notarás que se aprovechan técnicas modernas (como shadow DOM, ResizeObserver y custom elements) para lograr un componente reutilizable y de alto rendimiento.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Cómo combinar el Widget HTML de Elementor con código personalizado

Este artículo proporciona una guía técnica detallada, ideal para desarrolladores que buscan aprovechar al máximo Elementor mediante la personalización avanzada.