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 display the discount percentage on the sale badge.

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!

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

    • Sorry for the late response. Unfortunately I don’t know about the plugins. You can use codes. Plugins slow down your website. Where exactly did you run into problems?

      Reply
  • Hello the code looks very good but when I try to implement it in my website using snippit it doesn’t work.
    Is there any way it imlement it using a plugin or something because I can seem to find a plugin that does what your code does.

    Reply
    • Sorry for the late response. Unfortunately I don’t know about the plugins. You can use codes. Plugins slow down your website. Where exactly did you run into problems?

      Reply
  • I did find your code useful for computing the discount percentage, but it really ought to be improved the following way:
    1) You should use the ‘woocommerce_sale_flash’ filter instead of the two actions for the category and single product pages as it overrides the current sales badge in both places. Otherwise, each product on sale will have two sales badges instead of just one. Is that really what you want?
    2) Assuming you do want two badges on each sales item, your show_sale_percentage_loop() and show_Psale_percentage_loop() functions are identical except for their names and really ought to be combined into just one function. It’s bad practice to repeat code, especially when you can easily avoid it.

    Reply
  • Since I don’t know anything about code. Can you come and help me implement it in my system?

    Waiting to hear from you soon.

    Regards.

    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
  • 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

Leave a Reply to Miqi180 Cancel reply

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