隐藏产品可变价格，直到在WooCommerce中选择了所有变体字段 [英] Hide product variable price until all variation fields are selected in WooCommerce

问题描述

在客户选择所有变体字段之前，我想在WooCommerce的产品页面上隐藏价格.

I would like to hide the price on the product page of WooCommerce until the customer has selected all fields of variations.

我找到了使用CSS和Javascript的解决方案，但对我来说不起作用，一旦选择了其中一个选项，它就会显示价格.

I have found a solution using CSS and Javascript, but it doesn't work for me, it shows the price as soon as one of the options is selected.

这是我找到的代码:

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/

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

There is another solution which does not work for me too.

也许有人发现了错误或有其他解决方案.因为只有在选择了合适的选项后，添加到购物车"按钮才被激活-为什么不能用价格来做到这一点?

Maybe someone finds the error or has another solution. Because the "Add to cart" button is only activated when a suitable option is selected - why can't it be done with the price?

非常感谢！

推荐答案

已更新-表单上已经存在一些专用于jQuery的委托事件，您可以使用它们显示/隐藏变量产品是否选择变体的价格…

Updated - There is already dedicated some jQuery delegated events attached to the form, that you can use to show / hide the variable product price when a variation is selected or not…

下面，我使用 show() 或

Below I use show() or hide() jQuery functions that makes things smother, but you can use the jQuery css() function instead if you prefer...

请尝试以下操作:

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');
    });
});

经过测试，可以正常工作.

Tested and works.

IT可以在挂钩函数中实现(在某些情况下，取决于主题自定义项将无法使用):

IT can be implemented in a hooked function (Will not work in some cases depending on the theme customizations):

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文件中.经过测试并适用于店面主题.

Code goes in functions.php file of your active child theme (or active theme). Tested and works on storefront theme.

这篇关于隐藏产品可变价格，直到在WooCommerce中选择了所有变体字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！