WooCommerce: Display % Discount @ Shop & Loop Pages

Default WooCommerce shows a “Sale” badge if the item is on sale – but what about showing the exact sale percentage as well?

I implemented this for one of my freelance clients so here you go with the easy-peasy solution!

Show discount percentage on the WooCommerce loop

WooCommerce Snippet: Display Discount Percentage @ Loop Pages – WooCommerce


/**
 * @snippet       Display Discount Percentage @ Loop Pages - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=21997
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.4
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */ 

add_action( 'woocommerce_before_shop_loop_item_title', 'bbloomer_show_sale_percentage_loop', 25 );
 
function bbloomer_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) . "%</div>"; 
}

And a bit of CSS:


.sale-perc {
background-color: #D9534F;
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
color: #fff;
text-align: center;
border-radius: .25em;
}

“I don’t code – is there a reliable plugin for that?”

As many readers would love to code but don’t feel 100% confident with it, I decided to look for a reliable plugin that achieves the same (or even better) result.

In this case, I recommend the YITH WooCommerce Badge ManagementΒ plugin. On top of displaying custom text badges (free version), you can also create CSS, image and advanced badges, assign product badges to specific products and/or categories, pick the badge position and much more.

But in case you wish to code, keep reading πŸ™‚

Where to add this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

Does this snippet (still) work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7+.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce Customization?

Check out these free video tutorials. You can start learning how to customize WooCommerce without unnecessary plugins. Watch me code and learn by example!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

35 thoughts on “WooCommerce: Display % Discount @ Shop & Loop Pages

  1. Thanks for the code snippet! It works in my shop but the CSS is not working. Plus can you tell me how to show the discount below the price with some text? Just like this https://prnt.sc/r2ehol

    1. Hi Purkait, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. Hello
    If you are using a plugin to make discounts and the snippet doesnt work just replace get_sale_price() with get_price();
    $sale = $variation->get_price();
    get_sale_price() will get you the price from sale price field from each variation (in my case it was empty because i use some discount plugin for that)
    get_price will get you the active price of the product

    1. Nice!

  3. I was looking for this solution to show a percentage discount. They work great. Thanks man!

    1. Great!

  4. Amazing and just what i was looking for, thankyou

    Just one quick question, how do i add the words “off” after the discount amount so it would read 10% off for example

    1. Hi Ashley, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  5. https://www.dropbox.com/s/tz5c6bvjtzq3jva/Screenshot%202019-06-07%2011.30.59.png?dl=0

    https://www.dropbox.com/s/m3umnzd2dpiwks5/Screenshot%202019-06-07%2011.31.15.png?dl=0

    Should this work for variations or is our plugin stopping it? Has the correct base percentage but other options only have 10% off.

    1. This only works on the Shop page – does that help?

  6. Rodolfo thanks for the code, I don’t know why but it gave me error Optimum Nutrition my log:

    “PHP Warning: Division by zero in …”

    So I went to my functions.php file and the only code that had a math division on it was this one.

    Do you think I am doing something wrong?

    1. Snippet fixed, let me know πŸ™‚

  7. It worked on WordPress 5.0.3 / WooCommerce 3.5.4 / Jupiter 6 Theme with a little adjustment. Removed display:inline and changed padding to 10px.

    Would like to use it on Product page in top right corner. Any ideas?

    1. Nice, thanks Ryan! Unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  8. Thank you very much. It works for me on WC 3.3

  9. This worked like a charm. Thanks
    This saved my time

    1. Thank you Faisal! πŸ™‚

  10. After add this code in my DIVI theme function.php, i can’t upload images from my admin panel and i also can’t see any images in media library

    1. Hey Ankit, thanks for your comment! You should add this to your child theme functions.php

  11. Thank you again for another great snippet!

  12. Thank you! This is very helpful!

  13. Hi Rodolfo,

    For some reason, today I now get the following errors with this code:

    Notice: Undefined variable: highest_percentage

    Notice: WC_Product::get_child is deprecated since version 3.0! Use wc_get_product instead. in /wp-includes/functions.php on line 3831

    Is there a fix for WC 3+?

    1. John, thank you so much! I’ve updated the post with Woo 3.0 compatibility and also removed a couple of bugs πŸ™‚ Let me know!

  14. Hi Rodolfo,

    Excellent post! Please help me how can i make the percentage on the product of sale price.
    I want this; http://prntscr.com/f3jzzz

    Could you help?

    1. Toggy, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

  15. Awesome , It works.

    How can I have the same on product detail page ?

    1. Excellent Yash, thanks for your feedback! I suggest to check the single product page hooks (https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/), so that you can find the exact position where you can show such discount πŸ™‚ Let me know!

      1. Thanks I can get on product page.

        I have one more question, how do I show on related products section where upsells are shown , and also show on featured product section in the project?

        Plz guide

      2. Is there any way to show the % discount on Feature product, related products section?

        1. Hello Yash, thanks for your comment! I’m afraid I can’t help this time – this is custom work and unfortunately I can’t provide premium support to free subscribers. Hope this is ok πŸ™‚

          For your interest, I just launched https://businessbloomer.com/bloomer-armada/, and you might find a suitable plan to cover your requests. Thanks a lot for your understanding!

  16. amazing!
    thank you a lot.
    why can’t i move it with margin inside css?
    it’s stuck in the center no matter what i do.
    could you help?

    1. Awesome Menelaos, thanks for your comment! Just remove the display: inline from the CSS πŸ™‚

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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