Display discount percentage after the selected variation sale price in WooCommerce

Question

I've this code below that shows the variation selected price after the user have selected the variation

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;
}

I need to calculate the discount percentage between the promotional price that will show and the regular price. BUT ONLY after the variation is selected, not before (because i will remove the price from showing before via css).

I think this answer come close but not there yet.

Answer 1

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+