隐藏产品可变价格，直到在WooCommerce中选择所有变体字段

Question

我想在WooCommerce的产品页面上隐藏价格，直到客户选择了所有变体字段。我已经找到了一个使用CSS和Javascript的解决方案，但它对我不起作用，一旦选择了其中一个选项，它就会显示价格。这是我找到的代码：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);资料来源：https://theme.co/apex/forums/topic/hiding-woocommerce-price-until-all-attributes-selected/还有另一种解决方案也不适合我。也许有人发现了错误或有其他解决方案。因为“添加到购物车”按钮仅在选择合适的选项时激活 - 为什么不能用价格完成？

Answer 1

已更新 - 已经有一些专用的jQuery委托事件附加到表单，您可以使用它们在选择或不选择变体时显示/隐藏可变产品价格...

下面我使用show（）或hide（）jQuery函数，使事情窒息，但如果你愿意，你可以使用jQuery函数来代替...css()

请尝试以下操作：

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');

    });

});

经过测试并正常工作。

IT可以在挂钩函数中实现（在某些情况下不起作用，具体取决于主题自定义）：

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

    }

}

代码进入函数.php活动子主题（或活动主题）的文件。经过测试并适用于店面主题。