Display % Discount on Shop and Loop Pages

If an item is on sale, Default WooCommerce displays a “Sale” symbol, but what about displaying the precise sale percentage? You just need to add this Following Snippet on your functions.php.

add_action( 'woocommerce_before_shop_loop_item_title', 'codeithub_show_sale_percentage_loop', 25 );
  
function codeithub_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>"; 
}

CSS Snippet:

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

Before:

See also  Service Page Using CSS Hover Effect
Shop Page

After:

Percentage on shop page

Leave a Reply

Your email address will not be published. Required fields are marked *