Home » WooCommerce: Replace Variable Price With Active Variation Price

WooCommerce: Replace Variable Price With Active Variation Price

by adminkys

Surprisingly enough, variable products with a price range display two prices: at the top right you find the “parent” product price, displayed as a range; but once you select a variation, a second price appear just above the variation add to cart. Somewhat confusing.

In today’s snippet, we’ll see once and for all how to replace the top right variable product price with the one of the current variation, while also hiding the variation price. Therefore, you’ll see a single price on the single product page for variable products! Enjoy!

Here’s the default display when a variable product has a price range: on top there is the “static” price for all variations;

PHP Snippet: Dynamically Update Variable Product Price With Current Variation Price (Plus: Hide Variation Price)

Note: the jQuery statements included in the snippet target specific CSS classes in order to replace the price HTML. If your theme uses customized HTML and different classes, the code won’t work. Make sure to test this code on a default theme, such as Storefront, to make sure it actually works; and only then try to adjust the jQuery to target the correct non-default classes.

/**
* @snippet       Replace Variable Price With Variation Price | WooCommerce
* @how-to        Get tutoraspire.com FREE
* @author        Tutor Aspire
* @testedwith    WooCommerce 6
* @donate $9     https://www.tutoraspire.com
*/

add_action( 'woocommerce_variable_add_to_cart', 'tutoraspire_update_price_with_variation_price' );
 
function tutoraspire_update_price_with_variation_price() {
global $product;
$price = $product->get_price_html();
wc_enqueue_js( "
$(document).on('found_variation', 'form.cart', function( event, variation ) {   
if(variation.price_html) $('.summary > p.price').html(variation.price_html);
$('.woocommerce-variation-price').hide();
});
$(document).on('hide_variation', 'form.cart', function( event, variation ) {   
$('.summary > p.price').html('" . $price . "');
});
   " );
}

Screenshot after the snippet is installed and a variation is selected:

Once the snippet above is active, there is only 1 price! If a variation is active, the variation price will show at the top – if no variation is found or after clicking the “clear” button, the price will go back to the one of the parent variable product

You may also like