Javascript 隐藏产品可变价格，直到在电子商务中选择所有可变字段

我想在WooCommerce的产品页面上隐藏价格，直到客户选择了所有变量字段

我已经找到了一个使用CSS和Javascript的解决方案，但它不适合我，只要选择了其中一个选项，它就会显示价格

以下是我找到的代码：

CSS:

.woocommerce.price，
.商业版.价格{
显示：无；
}

JS:

（函数（$）{
$（文档）.ready（函数（）{
$（'.variations_form.cart select'）.change（函数（）{
$（'.woocommerce.price'）.css（'display'，'block'）；
console.log（'changed'）；
});
});
})（jQuery）；

资料来源：

还有另一个解决方案对我也不起作用

也许有人发现了错误或者有了另一个解决方案。因为“添加到购物车”按钮只有在选择了合适的选项时才被激活——为什么不能用价格来完成呢

---

非常感谢

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

下面我使用或jQuery函数使事情变得更加复杂，但是如果您愿意，可以使用jQuery

css（）

函数来代替

请尝试以下操作：

CSS：

.woocommerce.price，
.商业版.价格{
显示：无；
}

JS（jQuery）：

jQuery（函数（$）{
//关于选定的变异事件
$（'form.variations\u form'）。打开（'show\u variations'，函数（事件，数据）{
$（'.woocommerce.price'）.hide（'fast'）；
console.log（'Variation Id'+data.Variation_Id+'被选中|隐藏价格'）；
});
//在未选择（或未选择）的变化事件上
$（'form.variations\u form'）。在（'hide\u variations'，function（）上{
$（'.woocommerce.price'）.show（'fast'）；
console.log（'未选择任何变更|显示价格'）；
});
});

测试和工作

---

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

add_action（'woocommerce_single_product_summary'，'show_hide_product_variable_price'，8）；
函数显示\隐藏\产品\变量\价格（）{
全球$产品；
如果（$product->is_类型（'variable'））{
?>
.woocommerce.price.woocommerce页面.price{显示：无；}
jQuery（函数（$）{
//关于选定的变异事件
$（'form.variations\u form'）。在（'show\u variations'，function（）上{
$（'.woocommerce.price'）.hide（'fast'）；
console.log（'选择了变量|隐藏价格'）；
});
//在未选择（或未选择）的变化事件上
$（'form.variations\u form'）。在（'hide\u variations'，function（）上{
$（'.woocommerce.price'）.show（'fast'）；
console.log（'未选择任何变更|显示价格'）；
});
});
我对WooCommerce一无所知，但如果您想让HTML块仅在选择多个表单字段后显示，则需要更多的JavaScript来跟踪所选内容，然后再显示元素。您的代码告诉您，只要在
中选择
ode>元素已被修改。不幸的是，它在functions.php中对我不起作用，但如果我拆分代码并通过插件（自定义CSS&JS）插入它，它会起作用。我已将您的帖子标记为答案。谢谢。
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
    }
}