How to show percentage or saved amount for WooCommerce product sale price

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

 

17 thoughts on “How to show percentage or saved amount for WooCommerce product sale price”

  1. It doesn’t work for me either :(.

    I put the above code in functions.php of my child theme, entered a sold out price for a product and nothing to see on the front end. I mean, sold out price is showed correctly but no info as shown on the screens above.

    I have a woocommerce dynamic pricing plugin but added to it a code that turns off the global discount rule on a given product when sold out price is given, so I hoped it will work then, but nothing.

  2. Hi Terry,

    Somehow the word “Save” does not show on the Home page but only the product page. For example, Home page products show Price $ and % Amount right next to it, no spacing in between but the product page shows Price $ Save % Amount – correctly.

    How do I add the “Save” and leave a space in between the Price and Save %? Here is the site.

    http://www.zenorganichealth.com.au

    Thank you,
    Rose

  3. Hi Terry,
    I was using this snippet in Woocommerce 2.3 and it worked well but with the current version of Wooccommerce 2.5 it doesn´t any more. Have you tried it on the recent version of Woocommerce?
    Thanks in advance!!

  4. Hi Terry,

    Thanks for this tip. After adding your code total percentage discount is display on simple product page.

    But in Variable product percentage discount is not display. So please help me how to show percentage discount on Variable product page.

    I am waiting your replay.

    Thanks,
    Ketan.

  5. Hello. I want to add 3% in order total. Can you help me in this.
    function process_payment($order_id) {
    global $woocommerce;

    $order = new WC_Order($order_id);

    $totalamount = $order->calculate_totals();

    $website_url = home_url( ‘/’ );

    return array(
    ‘result’ => ‘success’,
    ‘redirect’ => ”.$website_url.’wc-api/WC_Gateway_Easypay?orderId=’.$order_id.’&amount=’.$totalamount
    );
    }

    Thanks.

  6. hi terry
    how can add class for this code :
    // 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 );
    }

    and only show in product page

    thank you

Leave a Comment

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