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+