在 Woocommerce 中显示或隐藏两个结帐字段

Posted 2023-05-08

【中文标题】在 Woocommerce 中显示或隐藏两个结帐字段

【英文标题】：Show or Hide two checkout fields in Woocommerce

【发布时间】：2019-01-21 15:28:51

【问题描述】：

在 Woocommerce 结帐表单中，我首先尝试隐藏 billing_city 和 billing_address_1 字段，在填写完邮政编码和门牌号字段后，其他字段（address_1 和城市）必须显示。

这是脚本，但是我做的不好，不知道自己做错了什么：

?>
<script type="text/javascript">
    jQuery('input#billing_housenumber').change(function()

        if (this.checked) 
            jQuery('#billing_city').fadeIn();
            jQuery('#billing_city input').val('');           
         else 
            jQuery('#billing_city').fadeOut();
        

    );
</script>
<?php

感谢任何帮助。

【参考方案1】：

更新 2

您的代码中有一些错误、错误和遗漏的东西。你也应该把它挂在一个函数中（或将它注册为一个外部文件）。

我在最后添加了一个功能，在结帐时添加帐单“门牌号”字段（仅用于测试目的）...

在下面的代码中，我使用了一些 CSS 内联样式来隐藏 billing city 和 address_1 字段，并在它们有一个额外的选择器类“on”时显示它们。

这是一个钩子函数，它将仅在结帐时启用此代码：

add_action( 'wp_footer', 'custom_checkout_script' );
function custom_checkout_script() 
    // Only checkout page
    if( ! ( is_checkout() && ! is_wc_endpoint_url() ) ) return;

    // CSS Styles (Hidding fields)
    ?>
    <style>
        #billing_city_field, #billing_address_1_field  display:none !important;
        #billing_city_field.on ,#billing_address_1_field.on  display:block!important;
    </style>
    <?php 
    // Jquery script
    ?>
    <script type="text/javascript">
    jQuery( function($)
        var a = 'input#billing_housenumber',
            b = 'input#billing_postcode',
            c = '#billing_city_field,#billing_address_1_field';

        // On start
        if( $(a).val() != '' && $(b).val() != '' && ! $(c).hasClass('on') )
            $(c).css('display','none !important').addClass('on').show();
            console.log('start');
        

        // On change: If housenumber and postcode fields are filled, we display other hidden fields
        $(a+','+b).on( 'change', function()
            if ( $(a).val() != '' && $(b).val() != '' && ! $(c).hasClass('on') ) 
                $(c).css('display','none !important').addClass('on').show( 500 );
                console.log('change - in');
             else if( ( $(a).val() == '' || $(b).val() == '' ) && $(c).hasClass('on') ) 
                $(c).hide( 200, function()
                    $(c).removeClass('on').css('display','block')
                );
                console.log('change - out');
            
        );
    );
    </script>
    <?php

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

---

此代码已使用此临时附加代码进行了测试，该代码生成结帐“门牌号”文本字段（仅用于测试目的）：

// Add custom checkout field
add_action( 'woocommerce_billing_fields', 'my_custom_checkout_field' );
function my_custom_checkout_field( $fields ) 

     $fields['billing_housenumber'] = array(
        'class'     => array('form-row-wide'),
        'label'     => __('Housenumber ?'),
        'required'  => false,
        'clear'     => true
     );

     return $fields;

代码进入您的活动子主题（或活动主题）的 function.php 文件中。

---

相关：Show or hide html element on chosen shipping method change in Woocommerce

【讨论】：

有一个问题。我没有看到门牌号码（客户购买产品后）。因此，您不会在邮件或 quatation 中看到门牌号码。

@EminCelen 没有问题……因为需要额外的代码，您应该提出一个新问题。

哪里可以在另一个页面中提出新问题？还是将此页面作为新问题”？

@EminCelen 在右上角，您有一个蓝色按钮：“提出问题”……点击它……这样它将打开一个全新的问题（空）。

【参考方案2】：

还有一步。我没有看到门牌号码（客户购买产品后）。因此，您不会在邮件或发票中看到门牌号码。

这是在电子邮件中，但我没有看到更多详细地址：

/**
  * @hooked WC_Emails::customer_details() Shows customer details
  * @hooked WC_Emails::email_address() Shows email address
  */
 do_action( 'woocommerce_email_customer_details', $order, $sent_to_admin, $plain_text, $email );