WooCommerce is an excellent plugin which made WordPress an wonderful E-Commerce platform, You can implement almost any kind of E-Commerce store using it and its super easy to manage than any other dedicated E-Commerce platform available today.

One good way to increase your sales is announcing a discount/offer on products, In WooCommerce you can easily set that by mentioning two different prices while creating the product page. If the discount is set WooCommerce by default displays a sale bubble on individual products page and in category pages. Usually the bubble sounds dumb it just says something like “Save!” or any other term which is surely boring.


Woocommerce with discount percentage

So what I have here is a code snippet to calculate individual product discount and display it in sale bubble. Replace all the codes in following files your theme folder/woocommerce/loop/sale-flash.php and  your theme folder/woocommerce/single-product/sale-flash.php with below code.

 * Product loop sale flash
 * @author 	Vivek R @ WPSTuffs.com
 * @package 	WooCommerce/Templates
 * @version     1.6.4

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

global $post, $product;
<?php if ($product->is_on_sale() && $product->product_type == 'variable') : ?>

	<div class="bubble">
            <div class="inside">
              <div class="inside-text">
			$available_variations = $product->get_available_variations();								
			$maximumper = 0;
			for ($i = 0; $i < count($available_variations); ++$i) {
				$variable_product1= new WC_Product_Variation( $variation_id );
				$regular_price = $variable_product1 ->regular_price;
				$sales_price = $variable_product1 ->sale_price;
				$percentage= round((( ( $regular_price - $sales_price ) / $regular_price ) * 100),1) ;
					if ($percentage > $maximumper) {
						$maximumper = $percentage;
				echo $price . sprintf( __('%s', 'woocommerce' ), $maximumper . '%' ); ?></div>
     </div><!-- end callout -->

<?php elseif($product->is_on_sale() && $product->product_type == 'simple') : ?>
	<div class="bubble">
	           <div class="inside">
	             <div class="inside-text">
				$percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
				echo $price . sprintf( __('%s', 'woocommerce' ), $percentage . '%' ); ?></div>
	    </div><!-- end bubble -->

<?php endif; ?>

Now lets style the bubble, Copy the following CSS codes to your theme’s style.css file

.bubble {
  left: 0px;
  position: absolute;
  text-transform: uppercase;
  top: 20px;
  z-index: 9;

.bubble .inside {
  background-color: #e74c3c;
  border-radius: 999px;
  display: table;
  height: 42px;
  position: relative;
  width: 42px;
  -webkit-border-radius: 999px;

.bubble .inside .inside-text {
  color: #fff;
  display: table-cell;
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
  vertical-align: middle;

Thats it you just added a cool feature which has potential to increase your sales.

The Advantage

Good thing about this code is even if your product is variant type (multiple type of single product) and has different percentage of offers for different variants then this code will take the best percentage out of the all variants and displays it. For example you have 3 product variant each has three different percentage 3%,4%,1% then it will display 4% in sales bubble.

Isn’t that cool ? Go on now.



  1. says

    hai, i added that code but simple product doesn’t work. It’s only works on variable product, i used on steezeltd.com, ples reply by email. Thanks

  2. Ashwini says

    Hello Vivek,

    I have copied the snippet of your code in both the mention path.folder\woocommerce\templates\loop\sale-flash.php and folder\woocommerce\templates\single-product\sale-flash.php. And copied and css code in themes\theme_name\style.css. Even after copy pasted the code, I could see the same “Sale!” text in the bubble. It would be great if you can help me with this issue.

    Thanks in Advance,

  3. says

    Hi Vivek, did you manage to find a solution for the code, regarding the sale bubble to appear in the product as well instead on the single products?
    Still not solution to that. Check link http://www.apoteko.se/
    It is still appearing the sale message instead of the bubble with %.


  4. ANDREA says

    Thanks, that’s what I was looking for! It ‘s all ok.

    I have a question: How can I get a triangle shape with one rounded corner?

    Thank you all!
    Sorry me for my english!

  5. Ondrey says

    Hi Dude, its works well, thank you, I have just a small issue with rounding, the percentages appears as eg. 47.6% etc. is there any way to round it up to solid numbers? thank you,

  6. Sujitha says

    I have used this code in my cart. Its working fine. I need to display products based on this percentage Descending order. How to list ? Means how can i add this in sorting combo.Need to populate default sorting based on percentage. Please help urgently

  7. Andre says


    thanks for this :-) Problem for me is it only works with “simple product” i need this with “External / Affiliate product” can you explain me how can I solve this?

    kind regards

    • David says


      I have the exact same problem! Working fine for “Simple Product”, but no luck for “Affiliate/External Products” ; (

      Has anyone found a fix for that?


    • David says

      Not sure, whether my last comment went through, so just in case:

      I am having the same problem as Andre. It doesn’t work on External Products. Any help would be much appreciated. I need that little bubble ;)


  8. says

    Nice work. The code however shows a sales badge of 0% on variations that do not have discount.

    Secondly for variations, it will be nice to show “Upto X%” instead of simply % discount, as the present way can confuse customers.

      • says

        Thanks for the reply Vivek. I am getting notices like:

        PHP Notice: Undefined variable: price in /wp-content/themes/theme-name/woocommerce/loop/sale-flash.php on line 32

        PHP Notice: Undefined variable: price in /wp-content/themes/theme-name/woocommerce/loop/sale-flash.php on line 43

        Any clue what might be wrong? I did everything as it is.

  9. Trond says

    Nice snippet!

    Can you please explaine how i can use an image (ex.: saleflash.jpg) insted of bubble with this code i will be greatfull!

  10. Nick says

    Hello Vivek, very good shortcode!
    I have two questions though:

    1. How do you hide the bubble when it is not discount (otherwise it appears 100% in the bubble)
    2. I installed the code but I get the following message inside the bubble for some products

    check in the link below:

    Do you have a solution for both questions maybe?

    • says

      Hi Nick,

      Thanks for pointing out the fault. The error was due to line 36, I have corrected the code. Try it now.

      Also make sure that if you post offer in any one or more variant then you also need to fill out the “Sale Price” field also.

      Lets see by an example…You have three variants and no variant have offer then you can leave all the “Sale Price” field empty and just fill out their regular price.

      Suppose you want to announce offer in one or more variants than you will be filling “sale price” for all the variants including the one which you dont want to give offer..just simple fill the sale price with the regular price.

      Product variant 1 – regular price = $200 and Sale price = $180 (with offer)
      Product variant 2 price = $500 and Sale price = $500 (without offer)

      I hope you get it.
      Vivek R recently posted…Switch Woocommerce order ID/Number to sequential from randomMy Profile

      • Nick says

        Excellent! The code worked just perfect! Thank you for your help Vivek.

        A suggestion in the future, it should be good to create an updated code to appear the discounts in the Products pages as well. You know when you see all the products, together with the price to see the bubble also in order to don’t have to click in the product to see the discount.

        Very good job though.
        Thanks again

          • Nick says

            Hello Vivek. I have placed the code in the done it but still it doesn’t appear in my products page (product category).
            Check the link below

            I have created as you said the two folders inside the woocommerce in my theme. The one is called loop and the other single-product. I have placed your code in both folders, a php file withe name sale-flash. But still it doesn’t appears in the products page, only when you click the product it self.
            Maybe I have done something wrong…

          • Alekhya says

            Thanks for the article.But I wanted to vary the percentage on bubble when I am selecting the variations in drop down. According to particular attribute my product percentage must vary on bubble dynamically.Please provide the solution for this .Thanks in advance….

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge