Show variation price on pricing area

by | Improve UX

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