✅ Pedido por WHATSAPP desde carrito de Woocommerce (Sin Plugins)

Saludos a todos los entusiastas del comercio electrónico. Hoy os traigo una solución que optimiza la experiencia de compra en tiendas WooCommerce: la incorporación de un botón de WhatsApp directamente en el carrito de compras. Este código inteligente ofrece una serie de beneficios que merecen ser destacados.

En primer lugar, la eficiencia. El código permite a los clientes realizar pedidos de manera directa y ágil, eliminando pasos innecesarios en el proceso de compra. La integración con WhatsApp simplifica la comunicación, ofreciendo una vía directa para consultas y transacciones.

Además, la implementación es elegante y liviana. Al prescindir de plugins adicionales, se evitan posibles complicaciones y se mantiene la integridad del sistema. Este enfoque minimalista no solo garantiza una ejecución más eficaz, sino que también reduce la carga de recursos.

En términos estéticos, el código ofrece una presentación visualmente atractiva al incorporar un icono de WhatsApp personalizable. La coherencia con la interfaz de usuario de WooCommerce asegura una experiencia de compra fluida y profesional.

En resumen, este código representa una solución inteligente y eficiente para mejorar la interacción del cliente y simplificar el proceso de compra, destacándose por su elegancia y ligereza al prescindir de plugins adicionales. Una herramienta esencial para optimizar la experiencia del usuario en el entorno de comercio electrónico.

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 productos en el carrito
function generar_mensaje_whatsapp() {
    // Obtener productos en el carrito
    $productos_carrito = WC()->cart->get_cart();

    // Inicializar el mensaje
    $mensaje = "¡Hola! Quiero realizar un pedido:\n\n";

    // 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";
    }

    return rawurlencode($mensaje);
}

// Agregar botón de WhatsApp en el carrito con JavaScript
function agregar_boton_whatsapp_carrito() {
    $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://hungry-hamster-gwrjo.instawp.xyz/wp-content/uploads/2023/12/icons8-whatsapp-50-1.png'; 

    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, " "));
            window.open("https://wa.me/" + numero + "?text=" + encodeURIComponent(mensajeDecodificado), "_blank");
        }
    </script>';
}

// Estilos CSS para ajustar el tamaño del icono
function agregar_estilos_css() {
    echo '<style>
        .whatsapp-icon {
            width: 25px; /* Ajusta el ancho según tus necesidades */
            height: auto; /* Ajusta la altura automáticamente según el ancho */
            margin-right: 5px; /* Espacio opcional a la derecha del icono */
        }
    </style>';
}

add_action('woocommerce_proceed_to_checkout', 'agregar_boton_whatsapp_carrito');
add_action('wp_head', 'agregar_estilos_css');

// Agrega una acción que se ejecutará cuando WordPress esté cargando
add_action('wp', 'ocultar_boton_finalizar_compra');

// La función que se ejecutará en el gancho 'wp'
function ocultar_boton_finalizar_compra() {
    // Verifica si la página actual es la página del carrito de WooCommerce
    if (is_cart()) {
        // Si estamos en la página del carrito, quita la acción que añade el botón "Finalizar compra"
        remove_action('woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout', 20);
    }
}
Lenguaje del código: PHP (php)

Entendiendo el Código

Función generar_mensaje_whatsapp()

Esta función desempeña un papel fundamental al generar el mensaje que se enviará a través de WhatsApp. Comienza obteniendo los productos en el carrito mediante la función WC()->cart->get_cart(). Luego, itera sobre cada producto, extrayendo información esencial como el nombre, la cantidad y la URL del producto. Esta información se formatea en un mensaje estructurado en Markdown, proporcionando detalles claros y concisos de los productos seleccionados. Finalmente, el mensaje se codifica utilizando rawurlencode() para asegurar su transmisión correcta a través de URLs.

Función agregar_boton_whatsapp_carrito()

Esta función se encarga de integrar un botón de WhatsApp en la interfaz del carrito. Comienza definiendo el número de WhatsApp y el mensaje utilizando la función anterior. A continuación, se establece la URL del icono de WhatsApp, que se incorpora al botón junto con la llamada a la función JavaScript abrirWhatsApp(). Este script, definido más adelante, prepara y abre una nueva ventana de WhatsApp con el número y el mensaje predefinidos.

Estilos CSS Personalizados

La función agregar_estilos_css() aporta estilos personalizados para mejorar la presentación del icono de WhatsApp. Estos estilos permiten ajustar el tamaño del icono y su espaciado, proporcionando una apariencia visualmente agradable y coherente con el diseño de la tienda.

Integración con WooCommerce

El código utiliza ganchos de acción de WooCommerce para insertar el botón de WhatsApp y los estilos CSS en momentos clave del proceso de compra. add_action('woocommerce_proceed_to_checkout', 'agregar_boton_whatsapp_carrito') añade el botón en la página de carrito, mientras que add_action('wp_head', 'agregar_estilos_css') inserta los estilos CSS en la sección <head> de la página.

Gestión de la Finalización de Compra

La función ocultar_boton_finalizar_compra() se ejecuta en el gancho woocommerce_proceed_to_checkout y evalúa si la página actual corresponde al carrito de WooCommerce mediante is_cart(). Si es así, elimina la acción que añade el botón «Finalizar compra». Esto asegura que los usuarios utilicen exclusivamente el botón de WhatsApp para realizar sus pedidos desde el carrito.

En conjunto, este código proporciona una solución integrada y eficiente para mejorar la experiencia de compra en tiendas WooCommerce al facilitar la realización de pedidos a través de WhatsApp directamente desde el carrito de compras.

Nos vemos en el siguiente tutorial.

Un saludo.