✅Pedido por WHATSAPP desde CHECKOUT en Woocommerce (Sin Plugins)

En el ámbito del comercio electrónico, es crucial ofrecer a los clientes una experiencia de compra fluida y eficiente. El código proporcionado se centra en mejorar la interacción entre el vendedor y el cliente al facilitar la realización de pedidos a través de WhatsApp directamente desde la página de checkout de WooCommerce.

Funcionalidad Principal: El código crea un botón de WhatsApp personalizado en la página de checkout de WooCommerce. Cuando un cliente hace clic en este botón, se genera automáticamente un mensaje de WhatsApp prellenado con información detallada sobre los productos en su carrito y los datos de contacto asociados. Este mensaje se envía al vendedor a través de WhatsApp, lo que simplifica y agiliza el proceso de pedido.

Posibles Casos de Uso:

1. Facilitación del Proceso de Compra:
   • Escenario: Un cliente está a punto de realizar una compra, pero tiene preguntas específicas o desea realizar una personalización en su pedido.
   • Uso: Al hacer clic en el botón de WhatsApp, el cliente puede comunicarse directamente con el vendedor, proporcionando una vía rápida y directa para aclarar dudas y realizar ajustes.
2. Venta de Productos Personalizados:
   • Escenario: Un negocio que ofrece productos personalizados o servicios a medida.
   • Uso: El cliente puede utilizar el botón de WhatsApp para discutir detalles específicos de personalización antes de completar la compra, mejorando la comunicación y la satisfacción del cliente.
3. Fomento de Ventas Adicionales:
   • Escenario: Un cliente tiene productos en el carrito, pero podría estar interesado en productos complementarios.
   • Uso: El vendedor puede sugerir productos adicionales a través de WhatsApp, aprovechando la conversación directa para aumentar las ventas y ofrecer recomendaciones personalizadas.
4. Atención al Cliente Eficiente:
   • Escenario: Un cliente encuentra problemas durante el proceso de compra y necesita asistencia.
   • Uso: El botón de WhatsApp proporciona una vía inmediata para que el cliente se comunique con el servicio al cliente, permitiendo resolver problemas y ofrecer asistencia en tiempo real.

Beneficios Clave:

• Mejora la comunicación entre el vendedor y el cliente.
• Facilita la personalización de pedidos y la resolución de consultas.
• Agiliza el proceso de compra al ofrecer una alternativa a la finalización de la compra estándar.

En resumen, este código personalizado mejora la experiencia de compra al proporcionar una forma rápida y directa de interactuar con el vendedor a través de WhatsApp, lo que puede conducir a una mayor satisfacción del cliente y a oportunidades de venta adicionales.

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

<?php

// Función para generar el mensaje de WhatsApp con los productos en el carrito y datos del cliente
function generar_mensaje_whatsapp() {
    // Obtener productos en el carrito
    $productos_carrito = WC()->cart->get_cart();

    // Obtener datos de mi cuenta (checkout)
    $nombre_cliente = WC()->checkout()->get_value('billing_first_name');
    $apellidos_cliente = WC()->checkout()->get_value('billing_last_name');
    $email_cliente = WC()->checkout()->get_value('billing_email');
    $empresa_cliente = WC()->checkout()->get_value('billing_company'); // Nuevo campo

    $pais_cliente = WC()->checkout()->get_value('billing_country');
    $provincia_cliente = WC()->checkout()->get_value('billing_state');
    $ciudad_cliente = WC()->checkout()->get_value('billing_city');
    $direccion_cliente = WC()->checkout()->get_value('billing_address_1');
    $codigo_postal_cliente = WC()->checkout()->get_value('billing_postcode');

    // Combinar nombre y apellidos
    $nombre_completo_cliente = $nombre_cliente . ' ' . $apellidos_cliente;

    // Inicializar el mensaje
    $mensaje = "¡Hola! Quiero realizar un pedido:\n";
    $mensaje .= "Cliente: $nombre_completo_cliente\n";
    $mensaje .= "Correo electrónico: $email_cliente\n";
    $mensaje .= "Empresa: $empresa_cliente\n"; // Nuevo campo

    $mensaje .= "País: $pais_cliente\n";
    $mensaje .= "Provincia: $provincia_cliente\n";
    $mensaje .= "Ciudad: $ciudad_cliente\n";
    $mensaje .= "Dirección: $direccion_cliente\n";
    $mensaje .= "Código postal: $codigo_postal_cliente\n\n";

    // Verificar si el carrito tiene productos
    if (!empty($productos_carrito)) {
        // Recorrer productos en el carrito
        foreach ($productos_carrito as $producto) {
            $nombre_producto = strip_tags($producto['data']->get_name());
            $cantidad = $producto['quantity'];
            $url_producto = esc_url(get_permalink($producto['product_id']));

            // Agregar detalles del producto al mensaje con formato Markdown
            $mensaje .= "$cantidad x [$nombre_producto]($url_producto)\n";
        }
    } else {
        // Si el carrito está vacío, agregar un mensaje indicando esto
        $mensaje .= "Carrito vacío\n";
    }

    return rawurlencode($mensaje);
}

// Eliminar el botón "Realizar pedido" y agregar el botón de WhatsApp en el checkout
function agregar_boton_whatsapp_checkout() {
    $whatsapp_numero = '+34XXXXXXXXX'; // Reemplaza con tu número de WhatsApp, incluyendo el prefijo internacional
    $mensaje_whatsapp = generar_mensaje_whatsapp();

    // Ruta de la imagen del icono de WhatsApp (ajústala según la ubicación de tu archivo de imagen)
    $icono_whatsapp_url = 'https://fransalaspluginsweb.instawp.xyz/wp-content/uploads/2023/12/icons8-whatsapp-50.png';

    // Agregar botón de WhatsApp
    echo '<a href="#" onclick="abrirWhatsApp(\'' . $whatsapp_numero . '\', \'' . $mensaje_whatsapp . '\')" class="button boton-whatsapp">';
    echo '<img src="' . $icono_whatsapp_url . '" alt="WhatsApp Icono" class="whatsapp-icon">'; // Agrega la etiqueta de imagen
    echo 'Realizar pedido por WhatsApp</a>';

    // Agregar script JavaScript
    echo '<script>
        function abrirWhatsApp(numero, mensaje) {
            var mensajeDecodificado = decodeURIComponent(mensaje.replace(/%2F/g, "/").replace(/%0A/g, "\n").replace(/%20/g, " "));
            var urlWhatsApp = "https://api.whatsapp.com/send?phone=" + encodeURIComponent(numero) + "&text=" + encodeURIComponent(mensajeDecodificado);
            window.open(urlWhatsApp, "_blank");
        }
    </script>';
}

// Agregar el botón de WhatsApp en el checkout
add_action('woocommerce_review_order_before_submit', 'agregar_boton_whatsapp_checkout', 20);

// Ocultar el botón "Realizar pedido" con CSS
function ocultar_boton_place_order_css() {
    // Verifica si estás en la página de pago
    if (is_checkout()) {
        echo '<style>#place_order { display: none !important; }</style>';
    }
}

// Agrega el filtro para ejecutar la función en el hook de WooCommerce
add_action('wp_footer', 'ocultar_boton_place_order_css');

// Función para agregar estilos CSS en línea
function agregar_estilos_css() {
    ?>
    <style>
        .boton-whatsapp {
            display: flex;
            align-items: center;
        }

        .whatsapp-icon {
            margin-right: 5px; /* Ajusta el margen según sea necesario */
			width:20px;
			height:auto;
        }
    </style>
    <?php
}

// Agregar la función a través del hook wp_footer
add_action('wp_footer', 'agregar_estilos_css');

Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

1. generar_mensaje_whatsapp Function:

Esta función se encarga de construir el mensaje que se enviará a través de WhatsApp. Recopila información sobre los productos en el carrito y los datos del cliente durante el proceso de pago.

• Productos en el Carrito:
  • Utiliza la función WC()->cart->get_cart() para obtener los productos en el carrito.
  • Itera sobre los productos y obtiene información como el nombre, cantidad y URL del producto.
• Datos del Cliente (Checkout):
  • Utiliza funciones de WooCommerce para obtener información del cliente, como nombre, apellidos, correo electrónico, empresa (nuevo campo), país, provincia, ciudad, dirección y código postal.
  • Combina el nombre y apellidos en una variable.
• Construcción del Mensaje:
  • Inicia la construcción del mensaje con saludos y detalles del cliente.
  • Agrega información del cliente y detalles del pedido al mensaje.

2. agregar_boton_whatsapp_checkout Function:

Esta función agrega un botón de WhatsApp en la página de checkout.

• Configuración del Botón:
  • Define el número de WhatsApp al que se enviará el mensaje.
  • Llama a la función generar_mensaje_whatsapp para obtener el mensaje.
  • Especifica la URL de la imagen del icono de WhatsApp.
• Creación del Botón:
  • Genera un enlace con la clase boton-whatsapp y un evento onclick que llama a la función JavaScript abrirWhatsApp.
  • Muestra una imagen del icono de WhatsApp y un texto.
• Script JavaScript:
  • Define la función abrirWhatsApp, que codifica el mensaje y abre una nueva ventana del navegador con la URL de WhatsApp prellenada con el número y el mensaje.

3. Ocultar el botón «Realizar pedido» y Agregar Estilos CSS:

• Ocultar Botón «Realizar Pedido»:
  • La función ocultar_boton_place_order_css oculta el botón «Realizar pedido» en la página de pago utilizando CSS.
• Agregar Estilos CSS:
  • La función agregar_estilos_css añade estilos CSS en línea para dar formato al botón de WhatsApp, alineando elementos y estableciendo márgenes.

4. Hooks de WordPress y WooCommerce:

• add_action('woocommerce_review_order_before_submit', 'agregar_boton_whatsapp_checkout', 20);: Agrega el botón de WhatsApp antes del botón «Realizar pedido» en la página de revisión del pedido.
• add_action('wp_footer', 'ocultar_boton_place_order_css');: Oculta el botón «Realizar pedido» en la página de pago mediante un filtro en el pie de página de WordPress.
• add_action('wp_footer', 'agregar_estilos_css');: Agrega los estilos CSS en línea al pie de página de WordPress.

Este código crea una integración personalizada de WhatsApp en la página de checkout de WooCommerce, permitiendo a los clientes realizar pedidos a través de WhatsApp con información detallada sobre su carrito y detalles de contacto.

Si necesitas adaptar el código a las necesidades de tu proyecto o agregar una funcionalidad específica a tu página web no dudes en contactar conmigo.

Nos vemos en el siguiente tutorial.

Un saludo.