How to Replace the Price Range with Chosen Variation Price in WooCommerce 3?

Replace the Variable Price Range with the Chosen Variation Price in WooCommerce 3

Problem:

On WooCommerce 3, the variable product page layout includes an unsightly price range below the product title. This can be confusing and uninformative, especially when it remains unchanged after selecting a variation.

Solution:

To replace the price range with the chosen variation price and ensure it updates accordingly:

1. Remove the Unwanted Price:

   remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

2. Insert the Variable Price without Range and Show the Lowest Price:

   add_action( 'woocommerce_single_product_summary', 'replace_variation_single_price', 10 );

3. Copy the Variable Price into a Hidden Container:

   echo '<div class="hidden-variable-price">' . $price . '</div>';

4. Hide the Chosen Variation Price and Availability:

   div.woocommerce-variation-price,
   div.woocommerce-variation-availability {
       height: 0px !important;
       overflow: hidden;
       line-height: 0px !important;
       font-size: 0% !important;
   }

5. Use jQuery to Update the Price:

   $('select').blur(function() {
       if ($('input.variation_id').val()) {
           $('p.availability').remove();
           $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">' + $('div.woocommerce-variation-availability').html() + '</p>');
       } else {
           $('p.price').html($('div.hidden-variable-price').html());
           if ($('p.availability')) {
               $('p.availability').remove();
           }
       }
   });

Additional Notes:

• This solution is tested and compatible with WooCommerce 3.2.x and earlier versions.
• You can optionally move the CSS code into your theme's styles.css file.
• Some plugins or themes may not be compatible with this code.

The above is the detailed content of How to Replace the Price Range with Chosen Variation Price in WooCommerce 3?. For more information, please follow other related articles on the PHP Chinese website!