Display the discount percentage on the sale badge

If you have a Woocommerce site, Woocommerce’s default setting shows a discount price instead of a discount percentage on your products. You may want to change this. The format that users especially like is the discount percentage. Follow the instructions below to show the discount percentages for your products.

Display the discount percentage on the sale badge - woocommerce

Display the discount percentage on the sale badge (Woocommerce)

  1. Go to your functions.php (wp-content/themes/your-child-theme/functions.php)
  2. Open the functions.php with n++ or other editors.
  3. Add the following code to the end. This code allows you to show a discount percentage on the products listed.
    add_action( 'woocommerce_after_shop_loop_item_title', 'show_sale_percentage_loop', 25 );
    function 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) . " İNDİRİM</div>";
    }
  4. Now let’s show discount percentage on single product page. Add the following code to the end.
    add_action( 'woocommerce_single_product_summary', 'show_Psale_percentage_loop', 10 );
    function show_Psale_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) . " İNDİRİM</div>";
    }
  5. Thus, we added a discount percentage to both the listed products and the single product page.
  6. I used Custom Sale Badge in my own code. To do this, I added the “sale_perc” class to my CSS file and set it as I like. Don’t forget to include it.

woocommerce display discount percentage on the sale badge

If you have a question, please comment! I always want to help.

That’s All!

2 comments on “Display the discount percentage on the sale badge

  • daniellevdtang says:

    Hi,
    This code works great thanks! but the discount is not shown in the sale badge? and can you explain number 6?

    Reply
  • Hello. I would like to thank you for the above code (“Display the discount percentage on the sale badge”). It really helped me. I could not find any plugin that does this, and the code you made worked fantastically. Thank you for the contribution to the community!

    Sincerely
    Behruz

    Reply

Leave a Reply