Display the price of the selected variation of the product in WooCommerce.

When you have a variable product WooCommerce can display the prices of the variations in 2 locations:

1. At the top is the price range.
2. When you select a variation, above the add to cart button.

This, which makes perfect sense when you analyze it, as the first is the price range of the variable product, which are some fixed amounts, and the other the price of the variation you have chosen, is actually a problem.

And it is a problem because it is for the customer, who does not have to waste time analyzing or understanding the logic of the application you use to create the products, so the only thing he sees are 2 different prices on the same page for the same product, and this can confuse him, mislead him, even anger him, and the result can be that he ends up not buying the product.

Well, a way to avoid this is to hide that second price that appears when selecting the variation, and make it change the price that your customer first saw, the one at the top, so he will never know that there was the possibility of showing prices in 2 parts, because the price is always where he has seen it first, up there, next to the product name.

You just need to apply this code:

/* New variation price display */
add_action( 'woocommerce_variable_add_to_cart', 'wphelp_change_price_with_variations' );
function wphelp_change_price_with_variations() {
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 . "');
});
" );
}Code language: PHP (php)

If you don’t know how or where to paste the code check out this simple quick guide to copy and paste code in WordPress.

When you save the changes 2 things will happen when you select a variation:

1. The price of the selected variation will no longer be displayed above the add to cart button.
2. The price on the product page will be updated to the price of the selected variation.