在 Woocommerce 中显示或隐藏两个结帐字段 [英] Show or Hide two checkout fields in Woocommerce
问题描述
在 Woocommerce 结帐表单中,我试图先隐藏 billing_city 和 billing_address_1 字段,然后在填写邮政编码和房屋号码字段后,其他字段(address_1 和城市)必须显示.
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
感谢任何帮助.
推荐答案
更新 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).
我在最后添加了一个添加计费housenumber"的函数;结帐字段(仅用于测试目的)...
I have added at the end a function that add the billing "housenumber" field in checkout (just for testing purpose)…
在下面的代码中,我使用了一些 CSS 内联样式来隐藏账单城市和 address_1 字段,并在它们具有额外的选择器类on"时显示它们.
In the code below 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
}
代码位于活动子主题(或活动主题)的 function.php 文件中.经测试有效.
Code goes in function.php file of your active child theme (or active theme). Tested and works.
此代码已使用此临时附加代码进行测试,生成结帐housenumber"文本字段(仅用于测试目的):
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;
}
代码位于活动子主题(或活动主题)的 function.php 文件中.
Code goes in function.php file of your active child theme (or active theme).
相关:在 Woocommerce 中显示或隐藏所选运输方式更改的 html 元素
这篇关于在 Woocommerce 中显示或隐藏两个结帐字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!