隐藏产品可变价格，直到在 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 委托事件，您可以使用它们在选择或未选择变体时显示/隐藏可变产品价格\xe2\x80\xa6

\n

下面我使用show()或jQuery 函数让事情变得更简单，但是如果你愿意的话，hide()你可以使用 jQuery函数......css()

\n

请尝试以下方法：

\n

CSS：

\n

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

\n

JS （jQuery）：

\n

jQuery(function($){\n\n    // On selected variation event\n    $(\'form.variations_form\').on(\'show_variation\', function(event, data){\n        $(\'.woocommerce .price\').hide(\'fast\');\n        console.log(\'Variation Id \'+data.variation_id+\' is selected | Hide price\');\n    });\n\n    // On unselected (or not selected) variation event\n    $(\'form.variations_form\').on(\'hide_variation\', function(){\n        $(\'.woocommerce .price\').show(\'fast\');\n        console.log(\'No variation is selected | Show price\');\n    });\n});\n

\n

经过测试并有效。

\n\n

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

\n

add_action( \'woocommerce_single_product_summary\', \'show_hide_product_variable_price\', 8 );\nfunction show_hide_product_variable_price() {\n    global $product;\n\n    if( $product->is_type(\'variable\') ) {\n        ?>\n        <style> .woocommerce .price, .woocommerce-page .price { display: none; } </style>\n        <script type="text/javascript">\n        jQuery(function($){\n\n            // On selected variation event\n            $(\'form.variations_form\').on(\'show_variation\', function(){\n                $(\'.woocommerce .price\').hide(\'fast\');\n                console.log(\'Variation is selected | Hide price\');\n            });\n\n            // On unselected (or not selected) variation event\n            $(\'form.variations_form\').on(\'hide_variation\', function(){\n                $(\'.woocommerce .price\').show(\'fast\');\n                console.log(\'No variation is selected | Show price\');\n            });\n        });\n        </script>\n        <?php\n    }\n}\n

\n

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

\n