✅Pedido por WhatsApp desde Página de Tienda y Producto Individual en Woocommerce (Sin Plugins)

En el competitivo mundo del comercio electrónico, cada interacción con el cliente cuenta. La capacidad de responder rápidamente a las consultas de los clientes puede marcar la diferencia entre cerrar una venta o perderla. En este artículo, exploraremos cómo mejorar la comunicación con los clientes en tu tienda WooCommerce al integrar un botón de WhatsApp para permitir pedidos directos desde la tienda y desde las páginas de productos individuales.

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

<?php


// Agregar el botón de WhatsApp en el loop de productos de WooCommerce
add_action('woocommerce_after_shop_loop_item_title', 'agregar_boton_whatsapp_producto');
add_action('woocommerce_single_product_summary', 'agregar_boton_whatsapp_producto', 30);


function agregar_boton_whatsapp_producto() {
    global $product;

    // Número de WhatsApp fijo
    $numero_whatsapp = '+34000000000';

    // Generamos el enlace de WhatsApp con los detalles del producto
    $nombre_producto = $product->get_name();
    $precio_producto = $product->get_price() . '€'; // Agregamos el símbolo € al final del precio
    $mensaje = "¡Hola! Me gustaría obtener más información sobre el producto: *$nombre_producto*, Precio: *$precio_producto*.\n\n";
    $mensaje .= "[Más detalles](" . $product->get_permalink() . ")";

    // Mostramos el botón de WhatsApp con el icono de Font Awesome
    echo '<a href="https://wa.me/' . urlencode($numero_whatsapp) . '?text=' . urlencode($mensaje) . '" class="button" target="_blank"><i class="fab fa-whatsapp">&nbsp;</i> Pedir por WhatsApp</a>';
}



// Agregar Font Awesome
function enqueue_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');

// Ocultar boton añadir al carrito de tienda y producto individual
function custom_cart_styles() {
    echo '<style>
        .cart, .ct-woo-card-actions {
            display:none !important;
        }
    </style>';
}
add_action('wp_head', 'custom_cart_styles');


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

Entendiendo el Código

1. Definición de la Función agregar_boton_whatsapp_producto():
   • Esta función se define para agregar el botón de WhatsApp en las páginas de productos de WooCommerce.
   • Se engancha a dos acciones de WordPress: woocommerce_after_shop_loop_item_title y woocommerce_single_product_summary, lo que significa que se ejecutará después del título del producto en el loop de productos y en la página de producto individual, respectivamente.
2. Definición del Número de WhatsApp:
   • La variable $numero_whatsapp contiene el número de WhatsApp al que se enviarán los mensajes. Se recomienda utilizar un número de WhatsApp empresarial o dedicado para este propósito.
3. Creación del Mensaje de WhatsApp:
   • Se utiliza la información del producto, como su nombre y precio, para generar dinámicamente el mensaje que se enviará a través de WhatsApp.
   • El mensaje incluye un enlace a la página del producto para proporcionar más detalles al cliente.
4. Generación del Enlace de WhatsApp:
   • Se crea un enlace de WhatsApp utilizando el número de WhatsApp y el mensaje generado anteriormente.
   • El enlace se codifica utilizando la función urlencode() para asegurar que los caracteres especiales sean tratados correctamente en la URL.
5. Impresión del Botón de WhatsApp:
   • Utilizando la función echo, se imprime el código HTML para el botón de WhatsApp.
   • El botón se presenta como un enlace con clase «button» y se abre en una nueva ventana (target="_blank").
   • Se utiliza el icono de WhatsApp de Font Awesome para mejorar la apariencia del botón.
6. Función enqueue_font_awesome():
   • Esta función se utiliza para agregar el archivo CSS de Font Awesome a nuestro tema.
   • Se engancha a la acción wp_enqueue_scripts, lo que significa que se cargará en la cabecera de la página cuando se solicite.
7. Función custom_cart_styles():
   • Esta función se utiliza para ocultar los botones de «Añadir al carrito» en la tienda y en la página de producto individual.
   • Se imprime código CSS directamente en la etiqueta <head> de la página para lograr este efecto.

Conclusion: La integración de un botón de WhatsApp en tu tienda WooCommerce es una estrategia poderosa para mejorar la comunicación con tus clientes y aumentar las ventas. Este enfoque permite a los clientes realizar consultas y pedidos de manera rápida y conveniente, lo que puede resultar en una mejor experiencia de compra y una mayor satisfacción del cliente. Al seguir los pasos proporcionados y entender el código involucrado, puedes implementar esta funcionalidad con facilidad y mejorar significativamente la experiencia del cliente en tu tienda en línea. ¡No subestimes el poder de la comunicación directa y efectiva con tus clientes a través de WhatsApp!

Nos vemos en el siguiente tutorial.

Un saludo.