WooCommerce: mostrar % de descuento en las páginas Shop & Loop

WooCommerce predeterminado muestra una insignia de "Venta" si el artículo está en oferta, pero ¿qué hay de mostrar también el porcentaje de venta exacto?

Implementé esto para uno de mis clientes independientes, ¡así que aquí tienes la solución fácil!

Mostrar porcentaje de descuento en el bucle de WooCommerce

Fragmento de WooCommerce: Mostrar porcentaje de descuento en páginas de bucle – WooCommerce

/**
 * @snippet       Display Discount Percentage @ Loop Pages - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=21997
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.4
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_action( 'woocommerce_before_shop_loop_item_title', 'bbloomer_show_sale_percentage_loop', 25 );
  
function bbloomer_show_sale_percentage_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='sale-perc'>-" . round($max_percentage) . "%</div>";
}

Y un poco de CSS:

.sale-perc {
background-color: #D9534F;
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
color: #fff;
text-align: center;
border-radius: .25em;
}

"No codifico, ¿hay un complemento confiable para eso?"

Como a muchos lectores les encantaría codificar pero no se sienten 100% seguros con él, decidí buscar un complemento confiable que logre el mismo (o incluso mejor) resultado.

En este caso, recomiendo el complemento YITH WooCommerce Badge Management . Además de mostrar insignias de texto personalizadas (versión gratuita), también puede crear CSS, imágenes e insignias avanzadas, asignar insignias de productos a productos y/o categorías específicos, elegir la posición de la insignia y mucho más.

Pero en caso de que desee codificar, siga leyendo

Deja una respuesta

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

Subir