Hide product variable price until all variation fields are selected in WooCommerce

Question

I would like to hide the price on the product page of WooCommerce until the customer has selected all fields of variations.

I have found a solution using CSS and Javascript, but it doesn't work for me, it shows the price as soon as one of the options is selected.

Here is the code I found:

CSS:

.woocommerce .price,
.woocommerce-page .price {
    display: none;
}

JS:

(function($){
  $(document).ready(function(){
    $('.variations_form.cart select').change(function(){
        $('.woocommerce .price').css('display', 'block');
        console.log('changed');
    });
  });
})(jQuery);

Source: https://theme.co/apex/forums/topic/hiding-woocommerce-price-until-all-attributes-selected/

There is another solution which does not work for me too.

Maybe someone finds the error or has another solution. Because the "Add to cart" button is only activated when a suitable option is selected - why can't it be done with the price?

Thanks a lot!

Answer 1

Updated - There is already dedicated some jQuery delegated events attached to the form, that you can use to show / hide the variable product price when a variation is selected or not…

Below I use show() or hide() jQuery functions that makes things smother, but you can use the jQuery css() function instead if you prefer...

Try the following instead:

The CSS:

.woocommerce .price,
.woocommerce-page .price {
    display: none;
}

The JS (jQuery):

jQuery(function($){

    // On selected variation event
    $('form.variations_form').on('show_variation', function(event, data){
        $('.woocommerce .price').hide('fast');
        console.log('Variation Id '+data.variation_id+' is selected | Hide price');
    });

    // On unselected (or not selected) variation event
    $('form.variations_form').on('hide_variation', function(){
        $('.woocommerce .price').show('fast');
        console.log('No variation is selected | Show price');
    });
});

Tested and works.

---

IT can be implemented in a hooked function (Will not work in some cases depending on the theme customizations):

add_action( 'woocommerce_single_product_summary', 'show_hide_product_variable_price', 8 );
function show_hide_product_variable_price() {
    global $product;

    if( $product->is_type('variable') ) {
        ?>
        <style> .woocommerce .price, .woocommerce-page .price { display: none; } </style>
        <script type="text/javascript">
        jQuery(function($){

            // On selected variation event
            $('form.variations_form').on('show_variation', function(){
                $('.woocommerce .price').hide('fast');
                console.log('Variation is selected | Hide price');
            });

            // On unselected (or not selected) variation event
            $('form.variations_form').on('hide_variation', function(){
                $('.woocommerce .price').show('fast');
                console.log('No variation is selected | Show price');
            });
        });
        </script>
        <?php
    }
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works on storefront theme.