Ticker

6/recent/ticker-posts

Ad Code

Responsive Advertisement

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?

La entrada Mostrar el precio de la variación seleccionada del producto en WooCommerce la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Enregistrer un commentaire

0 Commentaires