✅Botón de WhatsApp en WooCommerce para Consultas de Pedidos

¿Te gustaría ofrecer una forma rápida y directa para que tus clientes te contacten sobre sus pedidos? Hoy te mostraré cómo puedes añadir un botón de WhatsApp en tu tienda WooCommerce. Este pequeño ajuste no solo mejorará la comunicación con tus compradores, sino que también hará que tu servicio al cliente sea más eficiente y personalizado.

Con este código, podrás crear un sistema que genera automáticamente un mensaje de WhatsApp con toda la información relevante de un pedido. Esto incluye el nombre del cliente, los productos comprados, el número de pedido, el total y mucho más. Tus clientes solo tendrán que hacer clic en el botón para enviarte sus dudas, sin preocuparse por escribir o recordar detalles. Tú, por tu parte, recibirás toda la información que necesitas para atender su consulta al instante.

Este truco es perfecto si quieres destacarte como un negocio que cuida a sus clientes. Podrás usarlo para responder dudas, gestionar cambios o devoluciones, y ofrecer soporte posventa de forma sencilla. Además, es súper fácil de personalizar: te enseñaré cómo puedes adaptar el diseño y el funcionamiento del botón para que se vea genial en tu tienda y conecte directamente con tu WhatsApp.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

// Función para generar el mensaje de WhatsApp con los detalles del pedido
function generar_mensaje_whatsapp_pedido($order) {
    // Verificar que el objeto $order sea una instancia válida de WC_Order
    if (!$order instanceof WC_Order) {
        return '';
    }

    // Obtener detalles del pedido
    $order_id = $order->get_id(); // ID del pedido
    $order_date = $order->get_date_created()->date('d-m-Y'); // Fecha de creación del pedido
    $order_total = number_format($order->get_total(), 2, ',', '.') . ' €'; // Total del pedido formateado

    // Inicializar la lista de productos comprados
    $productos = "";
    foreach ($order->get_items() as $item) {
        $nombre_producto = strip_tags($item->get_name()); // Nombre del producto sin etiquetas HTML
        $cantidad = $item->get_quantity(); // Cantidad de productos
        $productos .= "- " . $nombre_producto . " (Cantidad: " . $cantidad . ")%0A"; // Formatear cada producto con saltos de línea codificados
    }

    // Obtener datos del cliente
    $customer_name = $order->get_billing_first_name() . ' ' . $order->get_billing_last_name(); // Nombre completo
    $customer_email = $order->get_billing_email(); // Email del cliente

    // Construir el mensaje de WhatsApp codificado
    $mensaje = "Hola, tengo una consulta sobre mi pedido:%0A%0A";
    $mensaje .= "Nombre del Cliente: " . $customer_name . "%0A";
    $mensaje .= "Email del Cliente: " . $customer_email . "%0A%0A";
    $mensaje .= "Número de Pedido: " . $order_id . "%0A";
    $mensaje .= "Fecha del Pedido: " . $order_date . "%0A%0A";
    $mensaje .= "Productos Comprados:%0A" . $productos . "%0A";
    $mensaje .= "Total del Pedido: " . $order_total . "%0A%0A";
    $mensaje .= "Gracias.";

    return $mensaje; // Retorna el mensaje generado
}

// Función para mostrar el botón de WhatsApp en la página de detalles del pedido
add_action('woocommerce_order_details_after_order_table', 'mostrar_boton_contacto_whatsapp_en_pedido', 10, 1);
function mostrar_boton_contacto_whatsapp_en_pedido($order) {
    $whatsapp_number = '+34606911732'; // Número de WhatsApp para redirigir los mensajes
    $mensaje_whatsapp = generar_mensaje_whatsapp_pedido($order); // Generar el mensaje dinámico del pedido

    // Generar el HTML del botón
    echo '<div class="order-again">';
    echo '<a href="https://wa.me/' . $whatsapp_number . '?text=' . $mensaje_whatsapp . '" target="_blank" class="button">Contactar por WhatsApp</a>';
    echo '</div>';
}

// Función para aplicar estilos CSS y alinear botones en la página de detalles del pedido
add_action('wp_head', 'alinear_botones_order_again');
function alinear_botones_order_again() {
    echo '<style>
        /* Alinear los elementos con clase "order-again" en línea */
        .woocommerce-order-details .order-again {
            display: inline-block; /* Mostrar los botones uno al lado del otro */
            margin-right: 10px; /* Espaciado horizontal entre botones */
        }

        /* Eliminar el margen derecho del último botón */
        .woocommerce-order-details .order-again:last-child {
            margin-right: 0;
        }

        /* Contenedor principal de detalles del pedido */
        .woocommerce-order-details {
            display: flex; /* Usar flexbox para alineación */
            flex-wrap: wrap; /* Permitir que los botones se ajusten si no hay espacio suficiente */
            gap: 10px; /* Espaciado uniforme entre botones */
            justify-content: flex-start; /* Alinear botones al inicio del contenedor */
        }
    </style>';
}

Lenguaje del código: PHP (php)

Entendiendo el Código

1. Función generar_mensaje_whatsapp_pedido

• Propósito: Genera un mensaje dinámico con todos los detalles del pedido, listo para enviarse por WhatsApp.
• Qué hace:
  1. Verificación del pedido: Comprueba si $order es una instancia válida de WC_Order. Si no lo es, retorna una cadena vacía.
  2. Obtención de detalles del pedido: Extrae el ID, fecha de creación, y total del pedido. El total se formatea con dos decimales y se acompaña de la moneda.
  3. Listado de productos: Itera sobre los productos del pedido, obteniendo el nombre y la cantidad de cada uno. Los formatea en una lista para ser incluidos en el mensaje.
  4. Datos del cliente: Obtiene el nombre completo y el correo electrónico del cliente.
  5. Construcción del mensaje: Ensambla todos los datos en un mensaje codificado para ser compatible con la URL de WhatsApp.
• Salida: Retorna el mensaje listo para integrarse en un enlace de WhatsApp.

2. Función mostrar_boton_contacto_whatsapp_en_pedido

• Propósito: Muestra un botón de contacto de WhatsApp en la página de detalles del pedido.
• Qué hace:
  1. Definición del número de WhatsApp: Define el número al que se enviarán los mensajes. Esto puede personalizarse para cada tienda.
  2. Generación del mensaje dinámico: Llama a generar_mensaje_whatsapp_pedido para crear el texto del mensaje a partir del pedido actual.
  3. Generación del HTML: Crea un botón HTML que incluye un enlace directo a WhatsApp con el número y el mensaje prellenado.
  4. Salida: Imprime el botón en la página de detalles del pedido bajo el contenedor correspondiente.

3. Función alinear_botones_order_again

• Propósito: Aplica estilos CSS para mejorar la presentación de los botones en la página de detalles del pedido.
• Qué hace:
  1. Usa el gancho wp_head para inyectar un bloque <style> con las reglas CSS en el encabezado de la página.
  2. Estilos aplicados:
     • Botones con la clase .order-again se alinean horizontalmente (inline-block).
     • Se agrega un espacio entre botones (margin-right).
     • Se asegura de que los botones se ajusten al tamaño del contenedor si no hay suficiente espacio disponible (flex-wrap y gap).
• Resultado: Los botones se presentan de forma ordenada y profesional, adaptándose al diseño de la tienda.

En conclusión, implementar un botón de WhatsApp en tu tienda WooCommerce no solo mejora la experiencia del cliente, sino que también optimiza la comunicación posventa, permitiéndote gestionar consultas de manera rápida y efectiva. Con el código que te he presentado, puedes crear un sistema funcional y adaptable que genera mensajes automáticos con todos los detalles del pedido, facilitando el proceso tanto para ti como para tus clientes. Además, con los estilos personalizados, tu tienda mantendrá una apariencia profesional y coherente.

Si necesitas ayuda para personalizar este código o quieres implementar funcionalidades similares en tu tienda online, no dudes en contactarme. Puedo ayudarte a adaptar este código a tus necesidades específicas o incluso desarrollar nuevas soluciones personalizadas para tu negocio. Puedes escribirme directamente por WhatsApp haciendo clic en el siguiente enlace: Contactar por WhatsApp.

Nos vemos en el siguiente tutorial.

Un saludo.