Oferta SiteGround Black Friday

Mostrar el precio de la variación seleccionada del producto en WooCommerce

Cuando tienes un producto variable de WooCommerce puede mostrar los precios de las variaciones en 2 ubicaciones:

  1. En la parte superior está el rango de precios
  2. 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:

  1. Ya no se mostrará el precio de la variación seleccionada sobre el botón de añadir al carrito.
  2. 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?

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 4.8 / 5. Total de votos: 8

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

6 comentarios en “Mostrar el precio de la variación seleccionada del producto en WooCommerce”

  1. 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

    1. 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

      1. 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

        1. 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.

          1. 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]

  2. 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

Deja un comentario

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

Información base sobre privacidad:
- Responsable: Fernando Tellado ([email protected])
- Fin del tratamiento: Moderación de comentarios para evitar spam
- Legitimación: Tu consentimiento
- Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
- Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba