在Woocommerce中显示或隐藏两个结帐字段 [英] Show or Hide two checkout fields in Woocommerce

问题描述

在Woocommerce结帐表单中，我首先尝试隐藏billing_city和billing_address_1字段，然后在我填写字段后填写其他字段（address_1和city）必须显示的邮政编码和住宅号码。

<这是脚本，但我工作不正常，我不知道自己做错了什么：

 ？> 
< 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 
  

感谢任何帮助。

解决方案

更新2

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

我在最后添加了一个功能，在结帐中添加结算housenumber字段（仅用于测试目的） ...

在下面的代码中，我使用一些CSS内联样式来隐藏结算城市和address_1字段，并在他们有另外的选择器类时显示它们 on。

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

  add_action（'wp_footer'，'custom_checkout_script'）; 
函数custom_checkout_script（）{
 //只有结账页面
 if（！（is_checkout（）&&！is_wc_endpoint_url（）））return; 
 
 // CSS样式（Hidding字段）
？> 
< 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 type =text / javascript> 
 jQuery（函数（$）{
 var a ='input＃billing_housenumber'，
b ='input＃billing_postcode'，
c ='＃billing_city_field，＃billing_address_1_field'; 
 
 //开始时
 if（$（a）.val（）！=''&& $（b）.val（）！=''&&！$ （c）.hasClass（'on'））{
 $（c）.css（'display'，'none！important'）。addClass（'on'）。show（）; 
 console .log（'start'）; 
} 
 
 //更改：如果填写了housenumber和postcode字段，我们会显示其他隐藏字段
 $（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（' '）。css（'display'，'block'）
}）; 
 console.log（'更改'）; 
} 
}）; 
}）; 
< / script> 
<？php 
} 
  

代码进入function.php文件您的活动子主题（或活动主题）。测试和工作。

---

此代码已使用此临时附加代码进行测试，生成结帐housenumber文本字段（仅用于测试目的）：

  //添加自定义结帐字段
 add_action（'woocommerce_billing_fields'，'my_custom_checkout_field' ）; 
函数my_custom_checkout_field（$ fields）{
 
 $ fields ['billing_housenumber'] =数组（
'class'=>数组（'form-row-wide'）， 
'label'=> __（'Housenumber？'），
'required'=> false，
'clear'=> true 
）; 
 
返回$ fields; 
} 
  

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

---

相关：在Woocommerce中显示或隐藏所选送货方式更改的html元素

In Woocommerce checkout form im trying to hide billing_city and billing_address_1 fields first and after I fill the fields postcode and housenumber the other fields (address_1 and city) has to show.

This is the script, but I does not work well and I dont know what I do wrong:

?>
<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

Any help is appreciated.

解决方案

Update 2

There is some errors, mistakes and missing things in your code. Also you should hooked it in a function (or register it as an external file).

I have added at the end a function that add the billing "housenumber" field in checkout (just for testing purpose)…

In the code bellow I am using some CSS inline styles to hide the billing city and address_1 fields and to show them when they have an additional selector class "on".

Here is a hooked function that will enable this code in checkout only:

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
}

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

---

This code has been tested with this temporary additional code, that generates the checkout "housenumber" text field (just for testing purpose):

// 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;
}

Code goes in function.php file of your active child theme (or active theme).

---

Related: Show or hide html element on chosen shipping method change in Woocommerce

这篇关于在Woocommerce中显示或隐藏两个结帐字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！