Display the Discounted Percentage Near Sale Price in Single Product Pages for Wc 3.0+

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

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+.

Display discount percentage after the selected variation sale price in WooCommerce

All The code below will work for variable products only on single product pages.

The 2nd code from the linked answer that I have made before, just works perfectly. I have made some little changes to target only variable products.

I have added an additional hooked function that will remove the displayed price under the title for variable products only.

Here is all the needed code:

// Always Display the selected variation price for variable products (already working)
add_filter( 'woocommerce_show_variation_price', 'filter_show_variation_price', 10, 3 );
function filter_show_variation_price( $condition, $product, $variation ){
    if( $variation->get_price() === "" ) return false;
    else return true;
}

// Remove the displayed price from variable products in single product pages only
add_action( 'woocommerce_single_product_summary', 'remove_the_displayed_price_from_variable_products', 9 );
function remove_the_displayed_price_from_variable_products() {
    global $product;

    // Just for variable products
    if( ! $product->is_type('variable') ) return;

    // Remove the displayed price from variable products
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
}

// Display the selected variation discounted price with the discounted percentage for variable products
add_filter( 'woocommerce_format_sale_price', 'woocommerce_custom_sales_price', 10, 3 );
function woocommerce_custom_sales_price( $price, $regular_price, $sale_price ) {
    global $product;

    // Just for variable products on single product pages
    if( $product->is_type('variable') && is_product() ) {
    
        // Getting the clean numeric prices (without html and currency)
        $regular_price = floatval( strip_tags($regular_price) );
        $sale_price = floatval( strip_tags($sale_price) );
    
        // Percentage calculation and text
        $percentage = round( ( $regular_price - $sale_price ) / $regular_price * 100 ).'%';
        $percentage_txt = __(' Save ', 'woocommerce' ).$percentage;
    
        return '<del>' . wc_price( $regular_price ) . '</del> <ins>' . wc_price( $sale_price ) . $percentage_txt . '</ins>';
    }
    return $price;
}

Code goes in functions.php file of your active child theme (or theme) or also in any plugin file.

This code is tested and mostly works only for WooCommerce version 3+

How to display the regular price and sale price in single product and loop pages?

The filter woocommerce_sale_price_html doesn't exist anymore use woocommerce_get_price_html instead. This will run for everything regardless of of the item being on sale so you'll need to check if the product is on sale in your code.

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>Save %s</p>', 'woocommerce' ), $product->regular_price - $product->sale_price );
    else
        return $price;
}

Display lowest variation price and discounted percentage in WooCommerce

This can be done changing a little bit the first function that will replace both hooked functions:

add_filter( 'woocommerce_get_price_html', 'custom_price_format', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'custom_price_format', 10, 2 );
function custom_price_format( $price, $product ) {

    // Main Price
    $regular_price = $product->is_type('variable') ? $product->get_variation_regular_price( 'min', true ) : $product->get_regular_price();
    $sale_price = $product->is_type('variable') ? $product->get_variation_sale_price( 'min', true ) : $product->get_sale_price();

    if ( $regular_price !== $sale_price && $product->is_on_sale()) {
        // Percentage calculation and text
        $percentage = round( ( $regular_price - $sale_price ) / $regular_price * 100 ).'%';
        $percentage_txt = __(' Save', 'woocommerce' ).' '.$percentage;

        $price = '<del>' . wc_price($regular_price) . '</del> <ins>' . wc_price($sale_price) . $percentage_txt . '</ins>';
    }
    return $price;
}

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

Tested and works with your customizations made in your previous questions/answer.

Display the discounted price and percentage on Woocommerce products

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.

How to add a CSS class for the displayed discounted percentage near sale price on single product pages in WooCommerce

Some additional information

HTML <del> Tag
HTML <ins> Tag
How TO - Add a Class

So you get

function woocommerce_custom_sales_price( $price, $regular_price, $sale_price ) {
    $percentage = round( ( $regular_price - $sale_price ) / $regular_price * 100 ).'%';
    $percentage_txt = '<span class="my-class">' . __('-', 'woocommerce' ) . $percentage . '</span>';
    $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;
}
add_filter( 'woocommerce_format_sale_price', 'woocommerce_custom_sales_price', 10, 3 );

Displaying price only when the variation is selected and discount in percentage relatively to the regular price

After some search, there this simple dedicated filter hook woocommerce_show_variation_price that will make exactly what you are expecting:

add_filter( 'woocommerce_show_variation_price', 'filter_show_variation_price', 10, 3 );
function filter_show_variation_price( $condition, $product, $variation ){
    if( $variation->get_price() === "" ) return false;
    else return true;
}

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

Tested and work… This will display the selected variation price even if all variations prices are the same…

Display the Discounted Percentage Near Sale Price in Single Product Pages for Wc 3.0+