Adding the discount percentage to single products page and sale page

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.Set Regular price and sale price of product page in admin side.

Replace all the codes in following files your active child theme (or theme)/woocommerce/loop/sale-flash.php and your active child theme (or theme)/woocommerce/single-product/sale-flash.php with below code.If you don’t have these directories in your active child theme (or theme) than create them.

is_on_sale() && $product->product_type == 'variable') : ?>

	

            

              

              	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 . '%' ); ?>
            
     


is_on_sale() && $product->product_type == 'simple') : ?>
	
	

	           

	             

	             	regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
				echo $price . sprintf( __('%s', 'woocommerce' ), $percentage . '%' ); ?>
	           
	    

Set style of bubble using css.

Here is what you are going to get on single product page and shop page.