fbpx

Mostrar el ahorro en porcentaje en WooCommerce

Hoy vemos cómo puedes mostrar el porcentaje de ahorro en WooCommerce, cuando tienes productos en oferta, con este sencillo tutorial.

Si en tu tienda online, realizas ofertas en tus productos, a veces puede ser bueno mostrar al usuario el porcentaje que se puede ahorrar en comparación con el importe en euros.

Eso sí, para comprobar la funcionalidad del tutorial de hoy, asegúrate de que tienes un producto en oferta dentro de tu tienda online.

¿Cómo mostrar el ahorro en porcentaje en WooCommerce?

Para mostrar el ahorro en porcentaje en el loop de tu instalación de WooCommerce, sólo tienes que añadir el siguiente código en tu plugin de funciones:

// Calcula el porcentaje de ahorro y lo muestra en el loop de WooCommerce

add_action( 'woocommerce_after_shop_loop_item_title', 'mk_agrega_porcentaje_ahorro_loop', 10 );
  
function mk_agrega_porcentaje_ahorro_loop() {
   global $product;
   if ( ! $product->is_on_sale() ) return;
   if ( $product->is_type( 'simple' ) ) {
      $max_percentage = ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100;
   } elseif ( $product->is_type( 'variable' ) ) {
      $max_percentage = 0;
      foreach ( $product->get_children() as $child_id ) {
         $variation = wc_get_product( $child_id );
         $price = $variation->get_regular_price();
         $sale = $variation->get_sale_price();
         if ( $price != 0 && ! empty( $sale ) ) $percentage = ( $price - $sale ) / $price * 100;
         if ( $percentage > $max_percentage ) {
            $max_percentage = $percentage;
         }
      }
   }
   if ( $max_percentage > 0 ) echo "<div class='porcentaje-ahorro'>-" . round($max_percentage) . "%</div>"; 
}
Antes y después de aplicar el código anterior al loop de WooCommerce.

Dentro de function mk_agrega_porcentaje_ahorro_loop indicamos a WooCommerce que calcule el porcentaje de ahorro, tanto para los productos simples, como los productos variables. En el caso de estos últimos, se muestra el porcentaje de ahorro de la variación que tiene mayor descuento.

A continuación, si también quieres añadir este porcentaje de ahorro en las fichas de tus productos en oferta, sólo tienes el siguiente código en tu plugin de funciones.

// Calcula el porcentaje de ahorro y lo muestra en las fichas de producto de WooCommerce

add_action( 'woocommerce_before_single_product_summary', 'mk_agrega_porcentaje_ahorro_ficha_producto', 20 );
  
function mk_agrega_porcentaje_ahorro_ficha_producto() {
   global $product;
   if ( ! $product->is_on_sale() ) return;
   if ( $product->is_type( 'simple' ) ) {
      $max_percentage = ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100;
   } elseif ( $product->is_type( 'variable' ) ) {
      $max_percentage = 0;
      foreach ( $product->get_children() as $child_id ) {
         $variation = wc_get_product( $child_id );
         $price = $variation->get_regular_price();
         $sale = $variation->get_sale_price();
         if ( $price != 0 && ! empty( $sale ) ) $percentage = ( $price - $sale ) / $price * 100;
         if ( $percentage > $max_percentage ) {
            $max_percentage = $percentage;
         }
      }
   }
   if ( $max_percentage > 0 ) echo "<div class='porcentaje-ahorro'>-" . round($max_percentage) . "%</div>"; 
}
Porcentaje de descuento aplicado a la ficha de producto de WooCommerce.

Cómo ves, en function mk_agrega_porcentaje_ahorro_ficha_producto le indicamos a WooCommerce que calcule y muestre el mismo porcentaje de ahorro que antes, pero cambiando el hook en el que se muestra.

Por último, solo tienes que añadir el siguiente fragmento en el archivo style.css de tu theme para darle un poco de formato al porcentaje de descuento

.porcentaje-ahorro {
	background-color: red;
	border-radius: 3px;
	font-weight: bold;
	display: inline;
	padding: 4px;
	margin-left: 5px;
	color: #fff;
	text-align: center;
}

Como ves, no es necesario instalar ningún plugin para mostrar el porcentaje de ahorro del que se beneficiarán tus usuarios. Sólo necesitas unas pocas líneas de código en tu plugin de funciones para resolverlo de forma fácil y rápida. Además, haciéndolo así, cada vez aprenderás más sobre WooCommerce y la instalación de tu tienda online.

Si te ha gustado este tutorial, recuerda que si te suscribes, tendrás acceso a todo el contenido premium.

Y como siempre, si tienes cualquier problema, no dudes en contactar conmigo. Nos vemos en la próxima entrega, con un nuevo tutorial. 😉

Author avatar
Ángel Martín
Ayudo a emprendedores y empresas a digitalizar su negocio y sus procesos optimizando sus costes.