Cuando tienes un producto variable de WooCommerce puede mostrar los precios de las variaciones en 2 ubicaciones:
- En la parte superior está el rango de precios
- Al seleccionar una variación, encima del botón de añadir al carrito
Esto, que tiene todo el sentido cuando lo analizas, pues el primero es el rango de precios del producto variable, que son unas cantidades fijas, y el otro el precio de la variación que has elegido, en realidad es un problema.
Y es un problema porque lo es para el cliente, que no tiene que perder tiempo analizando o comprendiendo la lógica de la aplicación que usas para crear los productos, así que lo único que ve son 2 precios diferentes en una misma página para un mismo producto, y esto puede confundirle, despistarle, incluso enfadarle, y el resultado sería que termine no comprando el producto.
Pues buen, un modo de evitarlo es ocultar ese segundo precio que aparece al seleccionar la variación, y hacer que cambie el precio que primero vió tu cliente, el de la parte superior, así nunca sabrá que había la posibilidad de mostrar precios en 2 partes, pues el precio siempre está donde lo ha visto primero, ahí arriba, al lado del nombre del producto.
Solo necesitas aplicar este código:
/* Ocultar el precio mostrado al selecciona variacion y cambiamos el precio de la pagina del producto */
add_action( 'woocommerce_variable_add_to_cart', 'ayudawp_cambiar_precio_segun_variacion' );
function ayudawp_cambiar_precio_segun_variacion() {
global $product;
$price = $product->get_price_html();
wc_enqueue_js( "
$(document).on('found_variation', 'form.cart', function( event, variation ) {
if(variation.price_html) $('.summary > p.price').html(variation.price_html);
$('.woocommerce-variation-price').hide();
});
$(document).on('hide_variation', 'form.cart', function( event, variation ) {
$('.summary > p.price').html('" . $price . "');
});
" );
}Si no sabes cómo o dónde pegar el código revisa esta sencilla guía rápida de copiar y pegar códigos en WordPress.
Cuando guardes los cambios pasarán 2 cosas al seleccionar una variación, que es lo que queríamos:
- Ya no se mostrará el precio de la variación seleccionada sobre el botón de añadir al carrito.
- Se actualizará el precio de la página del producto al de la variación seleccionada.
Igual ves más claro lo que consigue en esta captura en vídeo…
Antes de probar este truco para WooCommerce pensaba que sería una bobada pero ahora, después de comprobar su funcionamiento, y poniéndome en la piel de un cliente, me parece que es el modo más lógico y sencillo de mostrar los cambios de precio al seleccionar variaciones, y que quizás debería ser el comportamiento por defecto de WooCommerce ¿tú qué opinas?
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Hola, Fernando
Sí, es cierto que queda confuso para el cliente y tu solución es buena pero puede ser conflictiva. Si pone de precio 24€ y al elegir una variación cambia a 36€ podría parecer publicidad engañosa. Yo ante este dilema opté por la opción de poner, en la parte superior, «precio desde 24€» y en la inferior cambia según la variación.
Lo cierto es que hay tiendas muy sencillas y otras extremadamente complicadas, con muchas variables además de las variaciones de precio, talla, color…
Te sigo desde hace mucho, eres un genio
Saludos cordiales
Hola Toni,
Me parece muy interesante la solución que planteas. ¿Serías tan amable de facilitarnos el código que has usado para hacerlo?
Muchas gracias de antemano
Hola Manuel,
Pues el mismo Fernando Tellado hizo un plugin para esto: https://es.wordpress.org/plugins/show-only-lowest-prices-in-woocommerce-variable-products/
Y yo tengo un código que he utilizado, no es mío, pero no recuerdo de dónde salió, es el siguiente:
add_filter( 'woocommerce_variable_sale_price_html', 'wc_custom_variation_price_format', 10, 2 ); add_filter( 'woocommerce_variable_price_html', 'wc_custom_variation_price_format', 10, 2 ); function wc_custom_variation_price_format( $price, $product ) { // Main Price $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) ); $price = $prices[0] !== $prices[1] ? sprintf( __( 'Desde: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] ); // Sale Price $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) ); sort( $prices ); $saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'Desde: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] ); if ( $price !== $saleprice ) { $price = '' . $saleprice . $product->get_price_suffix() . '' . $price . $product->get_price_suffix() . ''; } return $price; }Espero te sirva, saludos
Muchisimas gracias por la ayuda!
Finalmente he usado este otro código y me ha ido muy bien. Te lo iba a pasar pero no se como se pega código en estos comentarios si me dices como se hace lo paso por si lo quieres ver por si te interesa.
De nada, Manuel
Yo he pegado el código «a pelo» ya veo que algo no ha salido bien pero es fácil de rectificar, por si quieres enviarme el código que comentas. Me gusta investigar 🙂
O quizá por email
Saludos cordiales
[email protected]
Hola Fernando,
Para mi esta solución es buena y me sirve para mi tienda.
La solución ideal para mi sería que quede seleccionado la variación de precio más bajo y que cambie el precio de arriba cuando modificas la variación.
Muchas gracias
Un saludo
Carlos