Por defecto Woocommerce cuando quieres poner un producto con descuento sale el precio tachado con el nuevo, pero no sale ni el porcentaje de descuento que se ahorra ni el precio como se muestra en la siguiente imagen:
Un sesgo psicológico que se usa mucho en los precios es mostrar el porcentaje de descuento que se ahorran o el valor monetario en euros. La teoría dice que si el precio es inferior a 100€ debería mostrarse el porcentaje que se ahorra, ya que al ser precios pequeños el porcentaje será mayor, en el anterior ejemplo el cliente se ahorra un 12,4%. Mientras que si es superior a 100€ mostrar lo que se ahorran en dinero, por ejemplo un descuento de una tele que valía 300€ a valer 250€, el cliente se ahorra 50€!
Esta estrategia la suele usar mucho Amazon y las tiendas grandes, así que si la usan ¿será por algo no? Como siempre en la zona de snippets vamos a hacer esto sin ningún plugin solo con un código para implemetarlo en tu tienda online y que se te quede como Amazon:
Índice
Cómo mostrar el descuento en valor absoluto y relativo
Primero insertaremos este código en nuestro functions.php o en nuestro plugin de utilidades como explico aquí.
// Añadir dto y porcentaje de dto en Woocommerce
add_filter( 'woocommerce_get_price_html', 'change_displayed_sale_price_html', 10, 2 );
function change_displayed_sale_price_html( $price, $product )
{ if( $product->is_on_sale() && ! is_admin() && ! $product->is_type('variable')){ $regular_price = (float) $product->get_regular_price(); $sale_price = (float) $product->get_price(); $saving_price = wc_price( $regular_price - $sale_price ); $precision = 1; $saving_percentage = round( 100 - ( $sale_price / $regular_price * 100 ), 1 ) . '%'; $price .= sprintf( __('<br><small><span class="snippet-dto-ahorro">Ahorras:</span> <span class="snippet-dto-precio">%s</span> <span class="snippet-dto-porcentaje">(%s)</span></small>', 'woocommerce' ), $saving_price, $saving_percentage ); } return $price; }Una vez añadido esto, sería conveniente mejorar un poco la visibilidad así que en vuestro fichero style.css o bien en Apariencia > Personalizar > Css Adicional tenéis que pegar el siguiente código:
/* snippet dto precio */
span.snippet-dto-porcentaje {
color: #ff0d0d;
}
span.snippet-dto-ahorro {
color: #3c3c3c;
}
span.snippet-dto-precio {
color: #ff0d0d;
}Una vez modificado esto nos queda este resultado:
El tamaño y los colores se pueden modificar por CSS ya que están añadidas las clases.
Poner el dto al lado del precio
Lo añado a este apartado porque es algo que me lo han pedido en contactar así que vosotros mandáis! Cómo antes inserta este código en tu functions.php
add_filter( 'woocommerce_get_price_html', 'change_displayed_sale_price_html', 10, 2 ); function change_displayed_sale_price_html( $price, $product ) { if( $product->is_on_sale() && ! is_admin() && ! $product->is_type('variable')){ $regular_price = (float) $product->get_regular_price(); $sale_price = (float) $product->get_price(); $precision = 1; $saving_percentage = round( 100 - ( $sale_price / $regular_price * 100 ), 1 ) . '%'; $price .= sprintf( __('<span class="snippet-dto-porcentaje">(-%s)</span>', 'woocommerce' ), $saving_percentage ); } return $price; } Añadimos también el css como antes:
span.snippet-dto-porcentaje {
color: #ff0d0d;
}Con este código obtenemos el siguiente resultado:
Mostrar el descuento mediante etiqueta en la imagen
Muchas veces para ahorrar espacio en la ficha de producto es mejor mostrarla en un cartel en la imagen, aquí tienes para hacerlo con un plugin. Pero en vez de poner ¡oferta! como ponía en la foto de ejemplo esta vez el porcentaje. Vale también para productos variables:
add_filter( 'woocommerce_sale_flash', 'anadir_etiqueta_de_porcentaje_producto', 20, 3 );
function anadir_etiqueta_de_porcentaje_producto( $html, $post, $product ) {
if( $product->is_type('variable')){
$percentages = array();
// Coge los precios variables
$prices = $product->get_variation_prices();
// Muestra el descuento en productos variables
foreach( $prices['price'] as $key => $price ){
// Solo en ventas variables
if( $prices['regular_price'][$key] !== $price ){
// Calculamos el porcentaje en función de la variación
$percentages[] = round(100 - ($prices['sale_price'][$key] / $prices['regular_price'][$key] * 100));
}
}
$percentage = max($percentages) . '%';
} else {
$regular_price = (float) $product->get_regular_price();
$sale_price = (float) $product->get_sale_price();
$percentage = round(100 - ($sale_price / $regular_price * 100)) . '%';
}
return '<span class="onsale">' . esc_html__( 'Ahorras un', 'woocommerce' ) . ' ' . $percentage . '</span>';
}Con esto conseguiríamos el siguiente resultado en el catálogo:
Por otro lado si queréis saber como hacer descuentos en masa en WooCommerce os dejo este tutorial.
Eso es todo cualquier duda ya sabéis dónde estoy, si necesitáis cambios así en vuestra tienda online tengo mi servicio de mantenimiento de tiendas online en Woocommerce o bien tener un TPV físico en WooCommerce
Saludos Diego, me ha funcionado muy bien este artículo, ya puedo visualizar los descuentos en el producto, quería hacerte una pregunta, ¿como hago para mostrarlos tambien en el carrito?
Buenas José Miguel, la función solo vale para la ficha de producto y el catálogo. Tendría que hacer otro para el carrito, de todas formas no lo recomiendo porque es información que ya sabe el cliente porque ya lo ha añadido y cuantas menos cosas se metan en la página del carrito mejor.
Espero haberte ayudado y gracias por comentar!
Si, pienso lo mismo. Pero en este momento para el cliente es vital esa info, porque asi lo maneja la competencia, y bueno ya te imaginas jeje gracias Diegol
Hola Diegol,
Antes que nada muchas gracias por el tutorial. He pegado el código y genial. Pero cuando estoy en una categoría, y me aparecen todos los productos de la misma, no me aperece el precio normal tachado, sólo el precio rebajado. ¿Cómo podría solucionarlo?
Muchas gracias de antemano, y te adjunto captura de lo que te intento explicar.
https://i.ibb.co/ZHFqZqT/Captura.png
Saludos
Esta genial, pero yo casi todos los productos que tengo son con precios variables. ¿Como se haria en este caso?
Buenas Carlos,
Con el código de mostrar el valor en euros se sobrecargaría con ese código. He creado una nueva sección para variables y mostrar el porcentaje: Mostrar el descuento mediante etiqueta en la imagen
Espero que te sirva 🙂
Hola:
Mil gracias por tu tutorial… es muy efectivo, pero solo una pregunta. ¿Cual de los 3 plugins de los que aparecen en el enlace hay que instalar?
Hola Juan Antonio,
Solo uno, dependiendo si solo quieres mostrar(desde fuera) porcentaje o procentaje y euros ahorrados. Luego el último es para mostrar unas etiquetas desde fuera si lo quieres hacer así.
Muchas gracias por tu aporte, de verdad me ayudo. 😀
Hola, tengo un producto con variaciones y es el único donde no me muestra el descuento en % . Sabría la solución? Muchas gracias!
Hola Aloma
En las variaciones no lo muestra 🙁
Tengo que actualizarlo para que se muestren sorry.
Un saludo!
Hola!
Muchas gracias, es realmente muuuy util!!! Quisiera hacer algo similar, mostrar el valor del producto dividido 3 y en todos los productos, no solo los que esten en oferta. Podrias ayudarme?
Gracias
para quien le haya pasado no se si cuando hizo Diego el post funcionaba bien pero en el momento ese codigo hace que en los listados se vea tambien de esa forma el precio lo cual lo hace ver mal la solucion es añadir al if este codigo
&&($product->id==get_queried_object_id())
para saber si el id de la pagina actual es igual del producto del loop y asi mostrar el precio solo cuando este cargado el producto no antes
hola excelente aporte, solamente que no logro darle el estilo a la etiqueta como lo tienes tu, el mio es un ovalo rojo bien feo, supongo que es del tema y justo a ese no le agregaste css jaja, de todas maneras muchas gracias por todos tus aportes
Hola Juan,
Muchas gracias. El CSS ya cuestión de cada uno, ya que el diseño de cada tienda es un mundo jeje
Un saludo!
Saludos Señor Diego me ayudo mucho tu aporte en mi trabajo que me desempeño actualmente estoy aprendiendo aun y este codigo me ayudo mucho, muchas gracias por compartirlo
Hola:
Está genial pero me pasa que si el precio base y el precio de la oferta es siempre el mismo en todas las variaciones no lo muestra. Solo lo muestra si hay distintos precios:
Por ejemplo: Tengo un zapato verde y otro azul, tallas 32, 34 y 36. Si los precios son siempre los mismos para todo (Precio base y el de la oferta) no muestra el porcentaje. En el momento que, por ejemplo, el zapato verde de la talla 36 varíe su precio si que lo muestra.
Muchas gracias por el tutorial me ha venido de perlas.
Una cosa, me gustaría controlar el stock de los productos como hace Amazon que en la ficha del producto te pone algo así como «Quedan 2 unidades. Cómpralas antes de que se agoten» o algo parecido.
Se puede hacer con código pegado en un snippet en vez de con un plugin???
Un saludo
Hola Pachi,
Esto que comentas viene ya por defecto en WooCommerce. tu puedes decididir si mostrar las unidades que quedan o a partir de cierto número. Este ajuste se realiza desde WooCommerce > Ajustes > Productos > Inventario. Una vez aquí configuras el umbral de pocas existencias(es decir a partir de que uds quieres mostrarlo) y en formato de visualización del inventario: Solo mostrar la cantidad restante de inventario cuando quedan…
Una vez configurado esto, en todos los productos que queden menos de esas unidades te saldrá el mensaje. Igualmente me lo guardaré para hace un tutorial porque es poco conocido. Muchas gracias por tus palabras.
Un saludo!
Si pero la forma es muy simple y busco algo más contundente como hace Amazon el poder poner «Quedan X unidades. Cómpralo antes de que se agoten» le da al que esta viendo el producto un carácter de «urgencia»… o lo compras ahora o te quedas sin él.
Espero con ganas ese tutorial que comentas.
Un saludo.
Buenas noches Diego, la verdad que es sumamente útil este artículo, para todos los que nos la rebuscamos con nuestras tiendas.
Quería consultarte lo siguiente: estoy usando el plugin «WPC Product Bundles para WooCommerce», y abajo del precio de cada pack de productos quisiera añadir «Ahorro de $xxx.xx». Habrá alguna manera de adaptar tu código a ese caso? Estuve tratando durante un par de horas y no doy con la tecla. Desde ya, muchas gracias por cualquier sugerencia!
Hola Diego el código es para porducots simples , y para productos variables cual sería el código?
excelente la página , gracias por la ayuda
gracias por compartir me funcionó el código, pero como haría si quiero generar un shortcode de ese código para poner el descuento en una posición en particular
cree un shortcode de la siguiente manera add_shortcode(‘descuento’,’change_displayed_sale_price_html’); y lo llame [descuento] pero me esta dando error, no se como puedo hacer en ese caso
Hola Diego.
Muy agradecida por las aportaciones que realizas en tu blog.
He introducido el código para los descuentos y es magnífico, funciona perfectamente.
Solo quería preguntarte, a ver si me puedes echar una mano, en el css ¿cómo podría dar una separación a la cifra tachada y a la cifra descontada?, es que me salen muy juntas….
Muchas gracias
Muchas gracias, estaba buscando tener esta opción precisamente en mi web. He utilizado el primer código (descuento en valor absoluto y relativo) y su respectivo CSS. Me ha funcionado en algunos productos variables, pero no en todos…. Por ejemplo, si el precio regular y el precio de oferta es igual en todas las variaciones no me marca el descuento, solo lo muestra cuando hay diferentes variaciones en los precios.
Por ejemplo. Tengo una camiseta S/M/L a $10 precio regular y $9 en oferta y la XL en $11 precio regular y $10 en oferta, teniendo esas variaciones si me refleja el porcentaje de descuento y el ahorro. Pero si yo dejo las camisetas S/M/L/XL en $10 precio regular y $9 en oferta (Es decir, sin variación en el precio en ninguna talla) no me refleja el porcentaje de descuento y ahorro.
Podrías indicarme que código o que variables habría que agregar o como sería la modificación del if para que si lea productos variables de igual precio regular y de oferta? Te estaría muy agradecido.
Hola, enhorabuena por el tutorial y los códigos. Muy buenos, sin embargo no funcionan cuando un producto es variable, ya que me muestra un mensaje que dice «Ahorras un %» y no me indica qué porcentaje es el que se ahorra. ¿Habría alguna manera de corregir esto?
Gracias