隐藏产品可变价格，直到在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 {&nbsp; &nbsp; display: none;}The JS （jQuery）：jQuery(function($){&nbsp; &nbsp; // On selected variation event&nbsp; &nbsp; $('form.variations_form').on('show_variation', function(event, data){&nbsp; &nbsp; &nbsp; &nbsp; $('.woocommerce .price').hide('fast');&nbsp; &nbsp; &nbsp; &nbsp; console.log('Variation Id '+data.variation_id+' is selected | Hide price');&nbsp; &nbsp; });&nbsp; &nbsp; // On unselected (or not selected) variation event&nbsp; &nbsp; $('form.variations_form').on('hide_variation', function(){&nbsp; &nbsp; &nbsp; &nbsp; $('.woocommerce .price').show('fast');&nbsp; &nbsp; &nbsp; &nbsp; console.log('No variation is selected | Show price');&nbsp; &nbsp; });});经过测试并正常工作。IT可以在挂钩函数中实现（在某些情况下不起作用，具体取决于主题自定义）：add_action( 'woocommerce_single_product_summary', 'show_hide_product_variable_price', 8 );function show_hide_product_variable_price() {&nbsp; &nbsp; global $product;&nbsp; &nbsp; if( $product->is_type('variable') ) {&nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; <style> .woocommerce .price, .woocommerce-page .price { display: none; } </style>&nbsp; &nbsp; &nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; jQuery(function($){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // On selected variation event&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('form.variations_form').on('show_variation', function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.woocommerce .price').hide('fast');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Variation is selected | Hide price');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // On unselected (or not selected) variation event&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('form.variations_form').on('hide_variation', function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.woocommerce .price').show('fast');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('No variation is selected | Show price');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; }}代码进入函数.php活动子主题（或活动主题）的文件。经过测试并适用于店面主题。