Move custom saved amount below the price in Woocommerce simple products

Question

I'm using the below code to show the saved amount with a percentage just below the price for simple as well as variable products in woocommerce. But it showing the correct format just below the price as in the picture. but on the sample product page, it shows just about the tile, I changed priority many times but did not achieve the desired result.

The URL is below for a sample product sample produt

The URL is below for the variable product varriable product

    // For simple products
add_action( 'woocommerce_single_product_summary', 'simple_product_saving_amount', 9 );
function simple_product_saving_amount() {
    global $product;

    if( $product->is_type('simple') && $product->is_on_sale() ) {
        $regular_price = (float) wc_get_price_to_display( $product, array('price' => $product->get_regular_price() ) );
        $active_price  = (float) wc_get_price_to_display( $product, array('price' => $product->get_sale_price() ) );

        $saved_amount  = $regular_price - $active_price;
        $percentage    = round( $saved_amount / $regular_price * 100 );

        echo '<p id="saving_total_price" style="
     font-size: 12px;
    text-align: center;
    width: 40%; 
    background: lightgoldenrodyellow;
    margin-bottom: 1em;
">'. __("You Save") .': ' . wc_price($saved_amount) . ' ('.$percentage.'%)</p>';
    }
}

// For product variations (on variable products)
add_filter( 'woocommerce_available_variation', 'variable_product_saving_amount', 12, 3 );
function variable_product_saving_amount( $data, $product, $variation ) {

    if( $variation->is_on_sale() ) {
        $saved_amount  = $data['display_regular_price'] - $data['display_price'];
        $percentage    = round( $saved_amount / $data['display_regular_price'] * 100 );

        $data['price_html'] .= '<p id="saving_total_price" style="
    font-size: 12px;
    text-align: center;
    width: 40%; 
    background: lightgoldenrodyellow;
    margin-bottom: 1em;
  ;
">'. __("You Save") .': ' . wc_price($saved_amount) . ' ('.$percentage.'%)</p>';

    }
    return $data;
}

Answer 1

Updated:

As you are using Astra theme, try the following revisited code:

// Inline CSS in the header for single product pages
add_action( 'wp_head', 'simple_product_saving_amount_css', 999 );
function simple_product_saving_amount_css() {
    if ( is_product() ) { ?>
    <style>#saving_total_price {font-size:12px;text-align:center;width:40%;background:lightgoldenrodyellow;margin-bottom:1em;}</style>
    <?php }
}

// For simple products
add_action( 'woocommerce_get_price_html', 'simple_product_saving_amount', 10, 2 );
function simple_product_saving_amount( $price_html, $product ) {
    global $woocommerce_loop;

    if( is_product() && isset($woocommerce_loop['name']) && empty($woocommerce_loop['name']) && $product->is_type('simple') && $product->is_on_sale() ) {
        $regular_price = (float) wc_get_price_to_display( $product, array('price' => $product->get_regular_price() ) );
        $active_price  = (float) wc_get_price_to_display( $product, array('price' => $product->get_sale_price() ) );

        $saved_amount  = $regular_price - $active_price;
        $percentage    = round( $saved_amount / $regular_price * 100 );

        $price_html .= sprintf('<p id="saving_total_price">%s: %s (%s)</p>', __("You Save"), wc_price($saved_amount), $percentage.'%' );
    }
    return $price_html;
}

// For product variations (on variable products)
add_filter( 'woocommerce_available_variation', 'variable_product_saving_amount', 10, 3 );
function variable_product_saving_amount( $data, $product, $variation ) {
    if( $variation->is_on_sale() ) {
        $saved_amount  = $data['display_regular_price'] - $data['display_price'];
        $percentage    = round( $saved_amount / $data['display_regular_price'] * 100 );

        $data['price_html'] .= sprintf('<p id="saving_total_price">%s: %s (%s)</p>', 
            __("You Save"), wc_price($saved_amount), $percentage.'%' );
    }
    return $data;
}

Tested and works.

You will get something like: