根据选择的运输有条件地隐藏 WooCommerce 中的结帐字段

Posted

技术标签:

【中文标题】根据选择的运输有条件地隐藏 WooCommerce 中的结帐字段【英文标题】:Conditionally hide a Checkout field in WooCommerce based on chosen shipping 【发布时间】:2018-05-24 02:38:54 【问题描述】:

in WooCommerce, I am trying to hide the company name field whenever "delivery to home" is selected.我尝试了很多不同的东西。

这是我最后一次尝试:

add_filter('woocommerce_checkout_fields', 'xa_remove_billing_checkout_fields');

function xa_remove_billing_checkout_fields($fields) 
    $shipping_method ='pakkelabels_shipping_gls1'; // Set the desired shipping method to hide the checkout field(s).
    global $woocommerce;
    $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
    $chosen_shipping = $chosen_methods[0];

    if ($chosen_shipping == $shipping_method) 
        unset($fields['billing']['billing_company']); // Add/change filed name to be hide

    return $fields;

但它所做的只是将航运公司从第一个字段移到最后一个字段。

如何根据选择的送货方式有条件地隐藏特定的结帐字段?

【问题讨论】:

【参考方案1】:

因为它是一个现场活动,你需要使用 javascript/jQuery 来使它工作。账单公司必须是不需要,就像在默认的 WooCommerce 结帐页面中一样。

The following code will hide the "Billing company" field, when "Home delivery" shipping is chosen:

// Conditional Show hide checkout fields based on chosen shipping methods
add_action( 'wp_footer', 'conditionally_hidding_billing_company' );
function conditionally_hidding_billing_company()
    // Only on checkout page
    if( ! ( is_checkout() && ! is_wc_endpoint_url() ) ) return;

    // HERE your shipping methods rate ID "Home delivery"
    $home_delivery = 'pakkelabels_shipping_gls1';
    ?>
    <script>
        jQuery(function($)
            // Choosen shipping method selectors slug
            var shipMethod = 'input[name^="shipping_method"]',
                shipMethodChecked = shipMethod+':checked';

            // Function that shows or hide imput select fields
            function showHide( actionToDo='show', selector='' )
                if( actionToDo == 'show' )
                    $(selector).show( 200, function()
                        $(this).addClass("validate-required");
                    );
                else
                    $(selector).hide( 200, function()
                        $(this).removeClass("validate-required");
                    );
                $(selector).removeClass("woocommerce-validated");
                $(selector).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            

            // Initialising: Hide if choosen shipping method is "Home delivery"
            if( $(shipMethodChecked).val() == '<?php echo $home_delivery; ?>' )
                showHide('hide','#billing_company_field' );

            // Live event (When shipping method is changed)
            $( 'form.checkout' ).on( 'change', shipMethod, function() 
                if( $(shipMethodChecked).val() == '<?php echo $home_delivery; ?>' )
                    showHide('hide','#billing_company_field');
                else
                    showHide('show','#billing_company_field');
            );
        );
    </script>
    <?php

代码进入您的活动子主题(或主题)的 function.php 文件或任何插件文件中。

经过测试并且有效。

【讨论】:

你太棒了。只有最后一件事。上面的代码完成了它应该做的一切,但是我们有三种交付类型,所以我需要它来处理另一种类型的交付。你有没有机会让我知道如何添加它?我将您的答案标记为解决问题。 1. 到礼品店(你在那里使用的那个) 2. 到家庭地址 flat_rate3 3. 到公司地址。我们需要上面的代码来隐藏 value = flat_rate:3 / label = shipping_method_0_flate_rate3 上的公司字段 我们如何将它添加到 pakkelabels_shipping_gls1 旁边,这是礼品店之一。 或者如果不是 flat_rate:2 隐藏计费公司字段可能更容易说?统一费率 2 = 我们交付给公司,另外两个不需要该字段。 @eMikkelsen 将 php $home_delivery 变量值更改为 flat_rate:2 并在 if 语句的 jQuery 代码中(出现 2 次)将 if( $(shipMethodChecked).val() == 替换为 @ 987654326@ (所以你将== 替换为!= 2 次)……它应该可以工作。

以上是关于根据选择的运输有条件地隐藏 WooCommerce 中的结帐字段的主要内容,如果未能解决你的问题,请参考以下文章

根据 WooCommerce 结帐字段值显示/隐藏运输方式

根据 WooCommerce 结帐字段值显示/隐藏运输方式

根据 Woocommerce 3 中的运输方式显示或隐藏结帐字段

在 WooCommerce 中隐藏运输和付款方式

WooCommerce:根据运输方式自动完成已付款订单

根据 Woocommerce 中选择的付款方式禁用运输方式