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

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

Deja una respuesta

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