Display the discounted percentage near sale price in Single product pages for WC 3.0+

discount, hook-woocommerce, php, woocommerce, wordpress

Solution

Updated - 2019 (avoid rounding price issue) - 2017 (avoid `NAN%` percentage value)

`woocommerce_sale_price_html` hook has been replaced by a different hook in WooCommerce 3.0+, that has now 3 arguments (but not the `$product` argument anymore).

add_filter( 'woocommerce_format_sale_price', 'woocommerce_custom_sales_price', 10, 3 );
function woocommerce_custom_sales_price( $price, $regular_price, $sale_price ) {
    // Getting the clean numeric prices (without html and currency)
    $_reg_price = floatval( strip_tags($regular_price) );
    $_sale_price = floatval( strip_tags($sale_price) );

    // Percentage calculation and text
    $percentage = round( ( $_reg_price - $_sale_price ) / $_reg_price * 100 ).'%';
    $percentage_txt = ' ' . __(' Save ', 'woocommerce' ) . $percentage;

    $formatted_regular_price = is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price;
    $formatted_sale_price    = is_numeric( $sale_price )    ? wc_price( $sale_price )    : $sale_price;

    echo '<del>' . $formatted_regular_price . '</del> <ins>' . $formatted_sale_price . $percentage_txt . '</ins>';
}

This code goes in function.php file of your active child theme (or theme) or also in any plugin file. The code is tested and works. For WooCommerce version 3.0+ (thanks to @Mikebcn and @AsifRao)

For rounding the percentage you can use `round()`, `number_format()` or `number_format_i18n()`:

$percentage = number_format_i18n( ( $_reg_price - $_sale_price ) / $_reg_price * 100, 0 ).'%';

$percentage = number_format( ( $_reg_price - $_sale_price ) / $_reg_price * 100, 0 ).'%';

Original answer code: Here is that functional similar code:

// Only for WooCommerce version 3.0+
add_filter( 'woocommerce_format_sale_price', 'woocommerce_custom_sales_price', 10, 3 );
function woocommerce_custom_sales_price( $price, $regular_price, $sale_price ) {
    $percentage = round( ( $regular_price - $sale_price ) / $regular_price * 100 ).'%';
    $percentage_txt = ' ' . __(' Save ', 'woocommerce' ) . $percentage;
    $price = '<del>' . ( is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price ) . '</del> <ins>' . ( is_numeric( $sale_price ) ? wc_price( $sale_price ) . $percentage_txt : $sale_price . $percentage_txt ) . '</ins>';
    return $price;
}

This code goes in function.php file of your active child theme (or theme) or also in any plugin file. The code is tested and works. For WooCommerce version 3.0+.

Problem

I had this code in `function.php` of my theme to display the percentage after price and it was working fine in WooCommerce v2.6.14. But this snippet doesn't work anymore on WooCommerce version 3.0+. How can I fix that? Here is that code: ``` // 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 . '%' ); } ```

Original source