// On-sale babel on shop page

add_action( 'woocommerce_before_shop_loop_item', 'woochamp_show_sale_percentage_shop_page', 8 );
  
function woochamp_show_sale_percentage_shop_page() {
   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 "<span class='sale-price-off'>" . round($max_percentage) . "% OFF</span>";
}

// On-sale babel on single product page

add_action( 'woocommerce_before_single_product_summary', 'woochamp_show_sale_percentage_single_page', 8 );
  
function woochamp_show_sale_percentage_single_page() {
   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 "<span class='sale-price-off'>" . round($max_percentage) . "% OFF</span>";
}




// CSS Code

.sale-price-off {
	font-size: 13px;
	color: #fff;
	position: absolute;
	z-index: 2;
	background-color: #E11500;
	clip-path: polygon(0% 0%, 100% 0, 98% 92%, 49% 100%, 0 92%);
	min-height: 45px;
	display: flex;
	align-items: center;
	text-align: center;
	width: 42px;
	line-height: 17px;
	font-weight: 600;
	border-top-left-radius: 8px;
}