En el siguiente artículo, os exponemos cómo podemos modificar el precio de las fichas de producto de WooCommerce en el front de la web. Te exponemos cuál fue nuestro caso:
- El cliente final de una tienda virtual quería que apareciese un botón de contactar por WhatsApp en los productos cuyo precio fuera 0 o que no tuviesen precio.
Este código de WordPress utiliza el filtro woocommerce_get_price_html para personalizar el precio de los productos en WooCommerce. El filtro toma dos argumentos: $price (el precio original del producto) y $product (el objeto del producto). Para que funcione, debes añadirlo en el fichero functions.php de tu tema hijo. También funcionará en el fichero functions.php del template si no tienes un tema hijo, pero en cuanto actualices el tema, todos estos cambios se perderán.
Cómo cambiar los precios de los productos con precio 0 por un botón de WhatsApp en WooCommerce sin plugins
En este caso, el código comprueba si el precio del producto es cero o está vacío. Si es así, se realiza una serie de reemplazos de caracteres en el título del producto para limpiarlo y luego se crea un enlace de WhatsApp que abre una conversación donde aparece el título del producto en el que está interesado el comprador en el propio mensaje. Si el precio no es cero o está vacío, se devuelve el precio original.
/* AÑADE LA FUNCIÓN CUANDO SE EJECUTA EL PRECIO EN PANTALLA */
add_filter( 'woocommerce_get_price_html', 'custom_price_html', 10, 2 );
/* FUNCIÓN QUE CAMBIA EL PRECIO POR UN ENLACE DE WHATSAPP */
function custom_price_html( $price, $product ) {
if( $product->get_price() == 0 || $product->get_price() == '') {
$titulo = get_the_title();
$titulo = str_replace("/", "-", $titulo);
$titulo = str_replace('"', "-", $titulo);
$titulo = str_replace("'", "-", $titulo);
$titulo = str_replace("&", "-", $titulo);
$titulo = str_replace("?", "-", $titulo);
$titulo = str_replace("¿", "-", $titulo);
$titulo = str_replace("$", "-", $titulo);
$custom_text = '<a target="_blank" href="https://api.whatsapp.com/send?phone=34999999999&text=Hola! He visto la web y me gustaría conseguir el mejor precio para el producto: '.$titulo.'">Consulta Whatsapp <img src="URL_IMAGEN_LOGO_WHATSAPP" /> </a>';
} else {
$custom_text = $price;
}
return $custom_text;
}
En este código, también filtramos el nombre utilizando str_replace() con el fin de que cuando le pasemos el título al mensaje automático precargado en WhatsApp, no genere ningún error. Recuerda que deberás ajustar el código css para una vista que quede en armonía con el diseño de tu tienda virtual, si decides copiar nuestro código.
Puedes modificar el código para que, en lugar de ser un link con una imagen, tenga un icono de font-awesome por ejemplo, empleando las etiquetas <i class="claseIcono"></i> entre otros casos, como modificar el texto del enlace. En el caso de que el precio fuera superior a 0, el botón de WhatsApp no saldría.
Cómo cambiar los precios de todos los productos en WooCommerce por un botón de WhatsApp
Si por el contrario lo que quieres es cambiar todos los precios de las fichas de producto de WooCommerce por un botón de WhatsApp, bastaría con utilizar el siguiente código:
add_filter( 'woocommerce_get_price_html', 'custom_price_html', 10, 2 );
function custom_price_html( $price, $product ) {
$titulo = get_the_title();
$titulo = str_replace("/", "-", $titulo);
$titulo = str_replace('"', "-", $titulo);
$titulo = str_replace("'", "-", $titulo);
$titulo = str_replace("&", "-", $titulo);
$titulo = str_replace("?", "-", $titulo);
$titulo = str_replace("¿", "-", $titulo);
$titulo = str_replace("$", "-", $titulo);
$custom_text = '<a target="_blank" href="https://api.whatsapp.com/send?phone=34999999999&text=Hola! He visto la web y me gustaría conseguir el mejor precio para el producto: '.$titulo.'">Consulta Whatsapp <img src="URL_IMAGEN_LOGO_WHATSAPP" /> </a>';
return $custom_text;
}
De esta manera, cambiaríamos todos los precios por un link que abre una conversación de WhatsApp. En móviles, abrirá la aplicación, mientras que en un equipo de sobremesa o portátil, abrirá la extensión de WhatsApp Web. Es importante realizar los replace del título para que el enlace no de problemas ante caracteres especiales que se puedan presentar en el título del producto.
Ajustes para evitar la compra de los artículos con precio 0 en WooCommerce
No es lo mismo que un producto tenga precio 0 a que tenga el precio vacío. En el caso de que el producto tenga un precio = 0 y se encuentre disponible, este se podrá comprar y añadir al carrito si solo añadimos esos fragmentos de código. Cuando añadamos el código, veremos como aparece el botón de WhatsApp en el espacio donde debería estar el precio, pero las opciones de añadir al carrito seguirán existiendo. Esto puede provocar situaciones en las que el cliente final de la web pueda añadir el producto a la cesta con importe de 0€. La mayoría de gente normal no lo haría y no realizaría una reclamación porque hizo una compra de un producto que no tenía precio, pero hay gente tan especial en el mundo que nunca se sabe…
Para evitar posibles problemas, lo ideal es dejar este producto como «Agotado» en el Inventario, de forma que no se permita la opción comprar. Podemos hacer esto desde la edición rápida del producto:
O bien activar la gestión inventario desde la edición del producto en «Datos del Producto» – «Inventario»:
Cómo eliminar el aviso de Agotado en los productos de WooCommerce
Es posible que nos aparezca un aviso de «AGOTADO» en la ficha del producto muy llamativo, lo cual puede llevar a confusión al cliente. Puedes eliminarlo, generalmente utilizando el siguiente código CSS:
.woocommerce div.product .out-of-stock {
display:none;
}
Ten en cuenta que al emplear este CSS todos los productos que estén marcados como «agotados» no mostrarán el aviso de «AGOTADO».
¿Por qué cambiar el formato del precio de un producto de WooCommerce sin plugins desde functions.php?
Desde ayudainternet.com os recomendamos no modificar los ficheros del template que estás utilizando, a no ser que sea estrictamente necesario, y por supuesto no hacerlo bajo ningún concepto si no trabajamos con un child template o tema hijo. Realizar las modificaciones de WordPress y WooCommerce desde el fichero functions.php es lo más óptimo cuando las mismas se pueden realizar desde aquí utilizando funciones nativas del sistema. Esto nos garantizará que las actualizaciones tanto de WordPress, como de WooCommerce como del template sean aprovechadas al máximo.
Utilizar la función woocommerce_get_price_html nos da una versatilidad mucho mayor a la hora de modificar el precio que modificando el fichero de la plantilla. Encontramos soluciones que pasaban por utilizar plugins, como Custom Price for WooCommerce sin embargo, no era suficiente para cubrir las necesidades que teníamos y conseguir el resultado específico que queríamos. Cuanto más cargues tu web de plugins, más tardará en cargar y más elementos tendrás por actualizar, por no decir que en cualquier momento, un plugin puede quedar obsoleto o ser una auténtica molestia en el futuro. Cualquier cosa que podamos hacer sin plugins utilizando las funciones nativas de WordPress y WooCommerce, nos ayudará a ser más eficientes y a garantizar un correcto funcionamiento con el paso de los años.
Sé eficiente, optimiza y nunca te olvides de que realizar un trabajo sin plugins mediante funciones nativas es la mejor manera para seguir teniendo un sitio web estable el día de mañana.
Dejar una Respuesta