WooCommerce default display for sale price did not catch my eye as there are no mention about how many percentage or how much you saved which is the main attraction for most of the potential customers.

I will share 2 code snippet below so that you can use to optimize the display of the sale price at WooCommerce overview and product page.

 

1. Show percentage(%) saved for the product sale 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 . '%' );
}


WooCommerce show percentage saved beside sale price

WooCommerce show percentage saved beside sale price

 

2. Show total amount saved for the product sale price

// Add save amount next to sale item prices.
add_filter( 'woocommerce_sale_price_html', 'woocommerce_custom_sales_price', 10, 2 );
function woocommerce_custom_sales_price( $price, $product ) {
$saved = wc_price( $product->regular_price - $product->sale_price );
return $price . sprintf( __(' Save %s', 'woocommerce' ), $saved );
}
WooCommerce show percentage saved beside sale price

WooCommerce show amount saved beside sale price