Display the discounted price and percentage on Woocommerce products

Question

On the image below, it shows the discounted price and percentage

I found no custom code searching that has this feature.

I am using the code below to display the discounted price, but the price is not formatted (the currency symbol and the decimals are missing):

add_filter( 'woocommerce_get_price_html', 'modify_woocommerce_get_price_html', 10, 2 );

function modify_woocommerce_get_price_html( $price, $product ) {
    if( $product->is_on_sale() && ! is_admin() )
        return $price . sprintf( __('<p class="saved-sale">Save: %s</p>', 'woocommerce' ), $product->regular_price - $product->sale_price );
    else
        return $price;
}

How can I display the correct formatted discounted price? How can I display also the discounted percentage?

Any help is apppreciated.

Answer 1

Your code is a bit outdated since woocommerce version 3 as Product object properties ca't be accessed directly. Instead you should use available WC_Product methods.

To format the prices you will use wc_price() dedicated formatting function.

Now you can have (3 possibilities):

1) The saving price:

add_filter( 'woocommerce_get_price_html', 'change_displayed_sale_price_html', 10, 2 );
function change_displayed_sale_price_html( $price, $product ) {
    // Only on sale products on frontend and excluding min/max price on variable products
    if( $product->is_on_sale() && ! is_admin() && ! $product->is_type('variable')){
        // Get product prices
        $regular_price = (float) $product->get_regular_price(); // Regular price
        $sale_price = (float) $product->get_price(); // Active price (the "Sale price" when on-sale)

        // "Saving price" calculation and formatting
        $saving_price = wc_price( $regular_price - $sale_price );

        // Append to the formated html price
        $price .= sprintf( __('<p class="saved-sale">Save: %s</p>', 'woocommerce' ), $saving_price );
    }
    return $price;
}

2) The saving percentage:

add_filter( 'woocommerce_get_price_html', 'change_displayed_sale_price_html', 10, 2 );
function change_displayed_sale_price_html( $price, $product ) {
    // Only on sale products on frontend and excluding min/max price on variable products
    if( $product->is_on_sale() && ! is_admin() && ! $product->is_type('variable')){
        // Get product prices
        $regular_price = (float) $product->get_regular_price(); // Regular price
        $sale_price = (float) $product->get_price(); // Active price (the "Sale price" when on-sale)

        // "Saving Percentage" calculation and formatting
        $precision = 1; // Max number of decimals
        $saving_percentage = round( 100 - ( $sale_price / $regular_price * 100 ), 1 ) . '%';

        // Append to the formated html price
        $price .= sprintf( __('<p class="saved-sale">Save: %s</p>', 'woocommerce' ), $saving_percentage );
    }
    return $price;
}

3 Both of them (the discounted price and percentage):

add_filter( 'woocommerce_get_price_html', 'change_displayed_sale_price_html', 10, 2 );
function change_displayed_sale_price_html( $price, $product ) {
    // Only on sale products on frontend and excluding min/max price on variable products
    if( $product->is_on_sale() && ! is_admin() && ! $product->is_type('variable')){
        // Get product prices
        $regular_price = (float) $product->get_regular_price(); // Regular price
        $sale_price = (float) $product->get_price(); // Active price (the "Sale price" when on-sale)

        // "Saving price" calculation and formatting
        $saving_price = wc_price( $regular_price - $sale_price );

        // "Saving Percentage" calculation and formatting
        $precision = 1; // Max number of decimals
        $saving_percentage = round( 100 - ( $sale_price / $regular_price * 100 ), 1 ) . '%';

        // Append to the formated html price
        $price .= sprintf( __('<p class="saved-sale">Save: %s <em>(%s)</em></p>', 'woocommerce' ), $saving_price, $saving_percentage );
    }
    return $price;
}

Code goes in function.php file of your active child theme (or active theme).

Tested and works.