Display the discounted price and percentage on Woocommerce products

Here is the method for show Discounted Price, Discounted Percentage or both in the place of product price in product loop or product detail page with CSS

1. Discounted 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. Discounted 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. Discounted Percentage & Price

add_filter( 'woocommerce_get_price_html', 'change_displayed_sale_price_html', 10, 2 );
function change_displayed_sale_price_html( $price, $product ) {
	global $woocommerce_loop;
    // Only on sale products on frontend and excluding min/max price on variable products
    if(is_product() && $woocommerce_loop['name'] != 'related' ){

        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)
            $currency = get_woocommerce_currency_symbol();
        // "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 ) . '%';
        $saving_percentage = round( 100 - ( $sale_price / $regular_price * 100 ) ) . '%';

        // Append to the formated html price
        $price = sprintf( __('<span class="pro-mrp-price">M.R.P.: <span class="line-through">%s</span></span><span class="pro-offer-price">Offer price: %s</span><span class="saved-sale">You Save: %s.00 (%s OFF) <span class="pro-inclusive-tax">inclusive of all taxes</span></span>', 'woocommerce' ), $currency.$product->get_regular_price(), $currency.$product->get_price(), $saving_price, $saving_percentage );
        }
        return $price;    
    }else{
        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 ) . '%';
        $saving_percentage = round( 100 - ( $sale_price / $regular_price * 100 ) ) . '%';

        // Append to the formated html price
        $price .= sprintf( __('<span class="saved-sale">(%s OFF)</span><p class="inclusive-taxes">inclusive of all taxes</p>', 'woocommerce' ), $saving_percentage );
        }else{
          $price .= sprintf( __('<p class="inclusive-taxes">inclusive of all taxes</p>', 'woocommerce' ) );
        }    
        return $price;
    }
}

In above code there is a conditions for loop or detail page if(is_product() && $woocommerce_loop[‘name’] != ‘related’ ){ Here the code for product detail page price. }else{ Code for product loop price }.

4. CSS

.woocommerce div.product p.price, .woocommerce div.product span.price {
    color: #77a464;
    font-size: 1.25em;
}
.pro-mrp-price, .saved-sale, .pro-offer-price {
    line-height: 1;
    display: block;
    font-size: 16px;
}
.pro-mrp-price {
    color: #afafaf !important;
}
.pro-offer-price {
    font-size: 22px;
    line-height: 30px;
    color: #3b6438;
}
 .price .saved-sale{
    color: #92c638;
}
form.variations_form table, .inclusive-taxes, .saved-sale .pro-inclusive-tax {
    font-size: 12px;
    color: #afafaf;
}

//For product loop price 
.woocommerce ul.products li.product .price {
    font-size: 18px;
    margin: 10px 0;
    display: inline-flex;
    white-space: nowrap;
color: #3b6438;
}
.woocommerce ul.products li.product .price ins{
       margin-left: 5px;

       text-decoration: none;
}
.woocommerce ul.products li.product .price span.saved-sale {
    font-size: 14px;
    margin-left: 3px;
    font-weight: 600;
    display: inline-block;
    margin-top: 6px;
    color: #92c638;
}
.woocommerce ul.products li.product .price .inclusive-taxes{
    display: none;
}

Thanks for visiting.