隐藏产品可变价格，直到在 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() 函数...

请尝试以下方法：

CSS：

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

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
    }
}

代码在您的活动子主题（或活动主题）的functions.php 文件中。经过测试并适用于店面主题。