Display Product Discount/Offer Percentage WooCommerce

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.

<?php
/**
 * 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">
              	<?php 
			$available_variations = $product->get_available_variations();								
			$maximumper = 0;
			for ($i = 0; $i < count($available_variations); ++$i) {
				$variation_id=$available_variations[$i]['variation_id'];
				$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>
     </div><!-- end callout -->

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