Display The Percentage Saved On WooCommerce Sale Products

At some point in time either yourself or a client will be building a WooCommerce site any may want to display the total percentage saved on WooCommerce sale products. By default WooCommerce does not display the percentage the customer will save on a sale product but thanks to Gerhard Potgieter this is easily possible by using an a elegant little WooCommerce filter.

Below is a screenshot of how a standard unmodified WooCommerce on sale product displays, You will notice it’s recommended price has a strike through and the sales price is the visible one.

The screenshot below now shows the same product on the top left but this time after adding the filter to the site we now see the actual percentage saved on the recommended retail price appearing next to the prices.

The percentage saved also displays on single sale product too like this example below.

Add the PHP code below to your themes functions.php file to add the sales percentage total next to the price.

// Add save percent next to sale item prices.
add_filter( 'woocommerce_sale_price_html', 'woocommerce_custom_sales_price', 10, 2 );
function woocommerce_custom_sales_price( $price, $product ) {
	$percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
	return $price . sprintf( __(' Save %s', 'woocommerce' ), $percentage . '%' );
}

When adding to a theme you will still have to write a little CSS to suit the themes layout as this will only add the functionality to display the sales price but not style it to your theme in anyway.