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

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

VALORA ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Al dejar una valoración se recopila la IP para evitar fraudes
Cargando…

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 serviciosContactar

Interacciones del lector

Deja un comentario

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