How To Show Percentage Badge on Woocommerce Product Page.

Common issues that I faced. Now I am helping my buddies in this field.

This is a code snippet for a custom function in WooCommerce that displays the discount percentage on the sale badge for both variable products and single products.

The function uses the woocommerce_sale_flash filter to modify the HTML for the sale badge. The display_percentage_on_sale_badge function takes three parameters: $html, $post, and $product. $html is the existing HTML for the sale badge, $post is the product’s post object, and $product is the product’s WC_Product object.

The function checks if the product is of type variable or grouped. If it is a variable product, the function calculates the maximum discount percentage among all the variations on sale, and if it is a grouped product, the function calculates the maximum discount percentage among all the child products on sale. If the product is a single product, the function calculates the discount percentage between the regular price and the sale price.

Finally, the function returns the modified HTML for the sale badge, which includes the text “Sale -” and the discount percentage.

Overall, this function provides useful customization for WooCommerce store owners who want to display the discount percentage on the sale badge to help customers make informed purchase decisions.

Output Badge Sale – % 

/ Display the Woocommerce Discount Percentage on the Sale Badge for variable products and single products
add_filter( 'woocommerce_sale_flash', 'display_percentage_on_sale_badge', 20, 3 );
function display_percentage_on_sale_badge( $html, $post, $product ) {

  if( $product->is_type('variable')){
      $percentages = array();

      // This will get all the variation prices and loop throughout them
      $prices = $product->get_variation_prices();

      foreach( $prices['price'] as $key => $price ){
          // Only on sale variations
          if( $prices['regular_price'][$key] !== $price ){
              // Calculate and set in the array the percentage for each variation on sale
              $percentages[] = round( 100 - ( floatval($prices['sale_price'][$key]) / floatval($prices['regular_price'][$key]) * 100 ) );
          }
      }
      // Displays maximum discount value
      $percentage = max($percentages) . '%';

  } elseif( $product->is_type('grouped') ){
      $percentages = array();

       // This will get all the variation prices and loop throughout them
      $children_ids = $product->get_children();

      foreach( $children_ids as $child_id ){
          $child_product = wc_get_product($child_id);

          $regular_price = (float) $child_product->get_regular_price();
          $sale_price    = (float) $child_product->get_sale_price();

          if ( $sale_price != 0 || ! empty($sale_price) ) {
              // Calculate and set in the array the percentage for each child on sale
              $percentages[] = round(100 - ($sale_price / $regular_price * 100));
          }
      }
     // Displays maximum discount value
      $percentage = max($percentages) . '%';

  } else {
      $regular_price = (float) $product->get_regular_price();
      $sale_price    = (float) $product->get_sale_price();

      if ( $sale_price != 0 || ! empty($sale_price) ) {
          $percentage    = round(100 - ($sale_price / $regular_price * 100)) . '%';
      } else {
          return $html;
      }
  }
  return '<span class="onsale">' . esc_html__( 'Sale -', 'woocommerce' ) . ' '. $percentage . '</span>'; // If needed then change or remove "up to -" text
}