Replace variable price range by chosen variation

If the product variants have different prices, WooCommerce will display the price range below the title and the selected price variant in another section near the add to cart button.

The custom script

To replace the price range with the current price variant and remove the independent price variant, paste the following PHP snippet in /wp-content/themes/goya-child/functions.php

add_action('woocommerce_before_add_to_cart_form', 'selected_variation_price_replace_variable_price_range');
function selected_variation_price_replace_variable_price_range(){
 global $product;

 if( $product->get_type() === 'variable' ): 
 // Remove the <style> tag to display the original variation price location
 ?>
<style> .woocommerce-variation-price {display:none;} </style>
 <script>
 jQuery(function($) {
  var $variationsCont = $('.summary form.variations_form'),
    p_regular = p_sale = percent = '';

  $variationsCont.each(function() {
   $price = $(this).closest('.summary').find('p.price').html();
   $percent = $(this).closest('.summary').find('.onsale-percent').html();

   $variationsCont.on('show_variation', function( event, data ) {
    if ( data.price_html ) {
     $(this).closest('.summary').find('p.price').html(data.price_html);

     p_regular = data.display_regular_price;
     p_sale = data.display_price;

     if (p_regular && p_regular != p_sale) {
      percent = Math.round( ( ( p_regular - p_sale ) / p_regular ) * 100 );
      $(this).closest('.summary').find('.onsale-percent').html(percent);
      $(this).closest('.summary').find('.onsale').show();
     } else {
      $(this).closest('.summary').find('.onsale').hide();
     }
    }

   }).on('hide_variation', function( event ) {
    $(this).closest('.summary').find('p.price').html($price);
    $(this).closest('.summary').find('.onsale-percent').html($percent);
    $(this).closest('.summary').find('.onsale').show();
   });
  });
 });
 </script>
 <?php
 endif;
}Code language: JavaScript (javascript)