How to Display the Discount Percentage on the Sale Badge for Variable Products, Single Products, and Grouped Products in WooCommerce

In this tutorial, we will learn how to display the discount percentage on the sale badge for variable products, single products, and grouped products in WooCommerce. By implementing this code snippet, you can enhance your online store’s visual appeal and provide customers with valuable information about the discounts available on your products.

Step 1: Open Child Theme

Open your child theme functions.php file to write the below code.

Step 2: Adding the Code Snippet

Copy the following code snippet and paste it into your functions.php file:

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__( 'up to -', 'woocommerce' ) . ' '. $percentage . '</span>'; // If needed then change or remove "up to -" text
}

Step 3: Save and Activate

After adding the code snippet, save the changes to your functions.php file and upload it to your server if necessary. Make sure the file is located in the correct directory for your WooCommerce theme.

Step 4: Customizing the Display

If you want to customize the displayed text, you can modify the line in the code snippet that starts with return '<span class="onsale">. You can change the text within the single quotes to suit your preferences. For example, you can remove the

By following the steps outlined in this tutorial, you can now display the discount percentage on the sale badge for variable products, single products, and grouped products in your WooCommerce store. This enhancement will provide valuable information to your customers and make your products more visually appealing. Feel free to customize the displayed text to suit your specific needs.