This is a good trick for a better user experience. Normally, WooCommerce shows variation prices in different areas. It can confuse customers. Our snippet fixes this problem quickly.
Simply, the snippet moves variation total price to under the title. You will have a product page like this after the snippet:

For this feature, you should only copy and paste the below snippet to your function.php.
// Woofocus - show variation price on pricing area snippet starts here add_action( 'woocommerce_before_single_product', 'wf_move_variations_single_price', 1 ); function wf_move_variations_single_price(){ global $product, $post; if ( $product->is_type( 'variable' ) ) { add_action( 'woocommerce_single_product_summary', 'wf_replace_variation_single_price', 10 ); } } function wf_replace_variation_single_price() { ?> <style> .woocommerce-variation-price { display: none; } </style> <script> jQuery(document).ready(function($) { var priceselector = '.product p.price'; var originalprice = $(priceselector).html(); $( document ).on('show_variation', function() { $(priceselector).html($('.single_variation .woocommerce-variation-price').html()); }); $( document ).on('hide_variation', function() { $(priceselector).html(originalprice); }); }); </script> <?php } // Woofocus - show variation price on pricing area snippet ends here
Thatβs it!
You can find more WooCommerce Tutorials & Tricks on WooFocus.com