Como mostrar el porcentaje de descuento en Woocommerce

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:

poner precio con el porcentaje-de-descuento en woocommerce

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:

Mostar lo que ahorras en productos de woocommerce

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:

mostrar el porcentaje de descuento como en amazon en wordpress

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:

que salga el porcentaje de dto en woocommerce

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:

mostrar porcentaje descuento woocommerce
Descuento en catálogo, el la ficha de producto se vería igual

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

¡Haz clic para puntuar esta entrada!
(Votos: 3 Promedio: 4.3)

Especialista en Comercio electrónico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en función de tu sector y público objetivo. Puedes encontrarme en Diegol.top

¿Necesitas ayuda con este tutorial? Mándame un correo y te resuelvo todas las dudas!


Ver servicios Contactar

También puedes suscribirte a mi newsletter para no perderte ninguna novedad

Reader Interactions

comentarios

  1. José Miguel Correa says

    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?

    • Diegol says

      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!

  2. Carlos says

    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

    • Diegol says

      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 🙂

    • Diegol says

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

  3. Aloma says

    Hola, tengo un producto con variaciones y es el único donde no me muestra el descuento en % . Sabría la solución? Muchas gracias!

  4. daniela says

    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

  5. carlos says

    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

  6. juan navas says

    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

  7. Nicolas Merchan says

    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

  8. Juan Antonio says

    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.

  9. Pachi Carrillo says

    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

    • Diegol says

      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!

      • Pachi Carrillo says

        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.

  10. Daniel says

    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!

Deja una respuesta

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