Cómo Reemplazar el Botón ‘Añadir al Carrito’ por ‘Consultar en WhatsApp’ para Productos con Etiqueta en WooCommerce (con Código PHP y JS)

Ficha de producto sin precio con botón para consultar por WhatsApp

Si estás buscando una forma de ofrecer una atención más personalizada en tu tienda online, te voy a mostrar cómo podés reemplazar el botón «Añadir al Carrito» por un enlace que permita a tus clientes contactarte directamente por WhatsApp. Esto es especialmente útil si tenés productos que preferís no vender de forma directa en la tienda, sino que querés que los clientes consulten el precio antes de cerrar el trato.

A veces, cuando tenés muchos productos en venta, puede que decidas que algunos de ellos no estén disponibles para la compra directa, pero sí querés que los clientes puedan consultarte el precio. Este ejemplo que te voy a mostrar está pensado justamente para esos casos.

Ocultar el Precio para una Etiqueta Específica
Primero, necesitamos asegurarnos de que el precio no sea visible en los productos que querés manejar de esta manera. En este caso, vamos a trabajar con productos etiquetados como «verano». Si tenés otra etiqueta, simplemente la cambiás en el código.

// ocultar precio etiqueta verano
add_filter( 'woocommerce_get_price_html', 'hide_price_for_specific_tag', 10, 2 );

function hide_price_for_specific_tag( $price, $product ) {
    // Nombre de la etiqueta para ocultar el precio
    $tag_to_hide_price = 'verano';

    // Verifica si el producto tiene la etiqueta especificada
    if ( has_term( $tag_to_hide_price, 'product_tag', $product->get_id() ) ) {
        $price = '';
    }
    return $price;
}

Con este código, los productos que tengan la etiqueta «verano» no mostrarán el precio en el catálogo de productos (la tienda).

Cambiar el Botón «Añadir al Carrito» por «Consultar Precio» en el Catálogo de Productos

Ahora, vamos a reemplazar el botón «Añadir al Carrito» por uno que diga «Consultar precio» en el catálogo de productos. Este enlace llevará al cliente a la página del producto, donde podrá ver más detalles. Desde esa página, el cliente encontrará otro botón que lo redirigirá a WhatsApp con un mensaje preconfigurado que contiene el nombre del producto.

// boton reemplazado de añadir al carro en el catalogo de productos por consultar precio solo a la etiqueta verano y redireccionar al producto
add_filter('woocommerce_loop_add_to_cart_link', 'custom_add_to_cart_link_for_verano', 10, 2);

function custom_add_to_cart_link_for_verano($link, $product) {
    // Verifica si el producto tiene la etiqueta "verano"
    if (has_term('verano', 'product_tag', $product->get_id())) {
        // Agregar la clase "button" al enlace
        $link = '' . esc_html__('Consultar precio', 'woocommerce') . '';
    }
    return $link;
}

En el ejemplo, antes de ocultar el precio y reemplazar el texto del botón.

 

Ahora, con el código que oculta el precio y reemplaza el texto del botón, así como la redirección a la página del producto.

 

Enlazar el Botón a WhatsApp desde la Página del Producto

Finalmente, vamos a crear un script en JavaScript para que, cuando el cliente haga clic en «Consultar precio» desde la página del producto, se abra WhatsApp y  envíe un mensaje con la información del producto. Asegurate de tener bien configurado tu número de WhatsApp.

// enlazar boton whats
document.addEventListener('DOMContentLoaded', function() {
    var whatsappButtons = document.querySelectorAll('.whatsapp-button');
    whatsappButtons.forEach(function(button) {
        button.addEventListener('click', function(event) {
            event.preventDefault(); // Evita que el enlace se abra
            var productTitle = document.querySelector('.product-title').textContent.trim(); // Obtener el título del producto
            var whatsappURL = 'https://api.whatsapp.com/send?phone=5492455555555&text=' + encodeURIComponent('¡Hola! Me interesa el producto ' + productTitle + ' en tu tienda.'); // Construir la URL de WhatsApp
            window.open(whatsappURL, '_blank'); // Abrir la URL en una nueva ventana
        });
    });
});

Antes, sin ocultar el precio y reemplazar el botón.

 

Despues, con la función en el código agregado.

 

Y listo, con estos simples pasos podés transformar la experiencia de compra en tu tienda WooCommerce. Esta funcionalidad te permite interactuar directamente con tus clientes antes de cerrar una venta, ideal para productos que requieren una atención más personalizada o negociaciones especiales. Si tenés alguna duda o necesitas más ayuda, dejame un mensaje. ¡A programar y vender!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *