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

Posted 2023-05-09

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

【英文标题】：Hide product variable price until all variation fields are selected in WooCommerce

【发布时间】：2020-05-03 19:17:22

【问题描述】：

我想在 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/

还有另一种对我也不起作用的解决方案。

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

非常感谢！

【问题讨论】：

我对 WooCommerce 一无所知，但如果您希望在选择多个表单字段后才显示 html 块，您将需要更多 JavaScript 来跟踪已选择的内容在显示元素之前。您的代码告诉您在修改 .variations_form.cart 元素中的 select 后立即显示价格。

【参考方案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 文件中。经过测试并适用于店面主题。

【讨论】：

不幸的是，它在 functions.php 中对我不起作用，但如果我拆分代码并通过插件（自定义 CSS 和 JS）插入它，它就可以工作。我已将您的帖子标记为答案。谢谢。