显示或隐藏其他 Checkout 自定义字段的自定义下拉选择器 [英] Custom dropdown selector showing or hiding other Checkout custom fields
问题描述
我使用此代码创建自定义结帐字段和重新排序字段:
I use this code to create custom checkout fields and reorder fields:
add_filter( 'woocommerce_checkout_fields', 'custom_checkout_billing_fields' );
function custom_checkout_billing_fields( $fields ) {
// 1. Creating the additional custom billing fields
// The "status" selector
$fields['billing']['billing_status']['type'] = 'select';
$fields['billing']['billing_status']['class'] = array('form-row-wide, status-select');
$fields['billing']['billing_status']['required'] = true;
$fields['billing']['billing_status']['label'] = __('User status', 'my_theme_slug');
$fields['billing']['billing_status']['placeholder'] = __('Chose an option', 'my_theme_slug');
$fields['billing']['billing_status']['options'] = array(
'' => 'Chose an option',
'1' => 'Legal entity',
'2' => 'Individual'
);
// The "Serial ID" text field
$fields['billing']['billing_number_id']['type'] = 'text';
$fields['billing']['billing_number_id']['class'] = array('form-row-wide', 'status-group1');
$fields['billing']['billing_number_id']['required'] = true;
$fields['billing']['billing_number_id']['label'] = __('Serial ID', 'my_theme_slug');
$fields['billing']['billing_number_id']['placeholder'] = __('Enter your Serial ID', 'my_theme_slug');
// Customizing 'billing_company' field ['required']
$fields['billing']['billing_company']['required'] = false;
// The "Serial ID" text field
$fields['billing']['billing_serial']['type'] = 'text';
$fields['billing']['billing_serial']['class'] = array('form-row-wide', 'status-group1');
$fields['billing']['billing_serial']['required'] = false;
$fields['billing']['billing_serial']['label'] = __('Serial ID', 'my_theme_slug');
$fields['billing']['billing_serial']['placeholder'] = __('Enter your Serial ID', 'my_theme_slug');
// 2. Customizing 'billing_email' and 'billing_phone' fields ['class']
$fields['billing']['billing_email']['class'] = array('form-row-first', 'status-group1');
$fields['billing']['billing_phone']['class'] = array('form-row-last', 'status-group1');
// 3. Ordering the billing fields
$fields_order = array(
'billing_first_name', 'billing_last_name', 'billing_email',
'billing_phone', 'billing_address_1', 'billing_address_2',
'billing_postcode', 'billing_city', 'billing_country',
'billing_status',
'billing_company', 'billing_number_id', 'billing_serial'
);
foreach($fields_order as $field) $ordered_fields[$field] = $fields['billing'][$field];
$fields['billing'] = $ordered_fields;
// Returning Checkout customized billing fields
return $fields;
}
条件机制:
- 默认情况下,
billing_status
下拉选择器将位于Individual
选项值上,并且将仅显示billing_serial代码>
自定义字段. - 当
billing_status
下拉选择器切换到"Company"
** option value 时,会出现另外 2 个字段:billing_company
现有字段(billing_serial
之前)billing_number_id
自定义字段(在最后)
- By default, the
billing_status
dropdown selector will be onIndividual
option value and will show onlybilling_serial
custom field. - When the
billing_status
dropdown selector will switched to"Company"
** option value , 2 more fields will appear:billing_company
existing field (beforebilling_serial
)billing_number_id
custom fields (at the end)
我怎样才能做到这一点?
How can I achieve this?
谢谢
参考:WooCommerce - 结帐条件字段针对不同人的自定义状态
推荐答案
For WooCommerce 3+ (update):
由于 WooCommerce 3.0 结帐字段发生了一些变化,因此无法像以前一样对字段重新排序.
Since WooCommerce 3.0 checkout fields have changed a little bit so is not possible to reorder fields as before.
有一个新的 'priority' 参数处理字段顺序,用于结帐字段和我的帐户字段.
There is a new 'priority' argument that handle fields order, for checkout fields and my account fields as well.
下面我只是更新与订购字段相关的部分:
Below I am just updating the part related to ordering fields:
## 3. Ordering the billing fields
// Set the order of the fields
$billing_fields_new_order = array(
'billing_first_name', 'billing_last_name', 'billing_email',
'billing_phone', 'billing_address_1', 'billing_address_2',
'billing_postcode', 'billing_city', 'billing_country',
'billing_status',
'billing_company', 'billing_number_id', 'billing_ser_id'
);
$count = 0;
$priority = 10;
// Updating the 'priority' argument
foreach($billing_fields_new_order as $field_name){
$count++;
$fields['billing'][$field_name]['priority'] = $count * $priority;
}
// END: returning the customized checkout fields
return $fields;
原答案:
这是一个带有 jQuery/JS 脚本的解决方案,它可以使条件机制如您所愿...... php 代码完成了一些必要的功能......
Here is a solution with a jQuery/JS script to make working the conditional mechanism just as you expect… The php code is completed with some necessaries functions…
PHP 代码(在 function.php 中):
PHP code (goes in function.php):
// Registering external jQuery/JS file
function cfields_scripts() {
/* IMPORTANT NOTE: For a child theme replace get_template_directory_uri() by get_stylesheet_directory_uri()
The external cfields.js file goes in a subfolder "js" of your active child theme or theme.*/
wp_enqueue_script( 'checkout_script', get_template_directory_uri().'/js/cfields.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'cfields_scripts' );
add_filter( 'woocommerce_checkout_fields', 'custom_checkout_billing_fields' );
function custom_checkout_billing_fields( $fields ) {
// 1. Creating the additional custom billing fields
// The "status" selector
$fields['billing']['billing_status']['type'] = 'select';
$fields['billing']['billing_status']['class'] = array('form-row-wide, status-select');
$fields['billing']['billing_status']['required'] = true;
$fields['billing']['billing_status']['label'] = __('User status', 'my_theme_slug');
$fields['billing']['billing_status']['placeholder'] = __('Chose an option', 'my_theme_slug');
$fields['billing']['billing_status']['options'] = array(
'1' => __( 'Individual', '' ),
'2' => __( 'Company', '' )
);
// Customizing 'billing_company' field ['required']
$fields['billing']['billing_company']['required'] = false;
$fields['billing']['billing_company']['class'] = array('form-row-wide', 'status-group2');
// The "Number ID" text field
$fields['billing']['billing_number_id']['type'] = 'text';
$fields['billing']['billing_number_id']['class'] = array('form-row-wide');
$fields['billing']['billing_number_id']['required'] = true;
$fields['billing']['billing_number_id']['label'] = __('Number ID', 'my_theme_slug');
$fields['billing']['billing_number_id']['placeholder'] = __('Enter your Number ID', 'my_theme_slug');
// The "Serial identification" text field
$fields['billing']['billing_ser_id']['type'] = 'text';
$fields['billing']['billing_ser_id']['class'] = array('form-row-wide', 'status-group2');
$fields['billing']['billing_ser_id']['required'] = false;
$fields['billing']['billing_ser_id']['label'] = __('Serial identification', 'my_theme_slug');
$fields['billing']['billing_ser_id']['placeholder'] = __('Enter your Serial identification', 'my_theme_slug');
// 3. Ordering the billing fields
$fields_order = array(
'billing_first_name', 'billing_last_name', 'billing_email',
'billing_phone', 'billing_address_1', 'billing_address_2',
'billing_postcode', 'billing_city', 'billing_country',
'billing_status',
'billing_company', 'billing_number_id', 'billing_ser_id'
);
foreach($fields_order as $field) $ordered_fields[$field] = $fields['billing'][$field];
$fields['billing'] = $ordered_fields;
// Returning Checkout customized billing fields
return $fields;
}
// Process the checkout
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function custom_checkout_field_process() {
// Check if set, if its not set add an error.
if ( ! $_POST['billing_number_id'] )
wc_add_notice( __( 'Please enter your Number ID.', 'my_theme_slug' ), 'error' );
if ( ! $_POST['billing_ser_id'] )
wc_add_notice( __( 'Please enter your Serial id.' , 'my_theme_slug' ), 'error' );
}
// Update the order meta with field value
add_action( 'woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta' );
function custom_checkout_field_update_order_meta( $order_id ) {
if ( ! empty( $_POST['billing_number_id'] ) )
update_post_meta( $order_id, 'billing_number_id', sanitize_text_field( $_POST['billing_number_id'] ) );
if ( ! empty( $_POST['billing_ser_id'] ) )
update_post_meta( $order_id, 'billing_ser_id', sanitize_text_field( $_POST['billing_ser_id'] ) );
}
// Display field value on the order edit page
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_checkout_field_display_admin_order_meta', 10, 1 );
function custom_checkout_field_display_admin_order_meta($order){
echo '<p><strong>'.__('My number ID').':</strong> ' . get_post_meta( $order->id, 'billing_number_id', true ) . '</p>';
echo '<p><strong>'.__('My serial identification').':</strong> ' . get_post_meta( $order->id, 'billing_ser_id', true ) . '</p>';
}
Javascript cfields.js
代码(外部文件):
Javascript cfields.js
code (external file):
// This file named "cfields.js" goes in a subfolder "js" of your active child theme or theme
jQuery(document).ready(function($){
$('#billing_company_field').hide(function(){
$(this).removeClass("validate-required");
});
$('#billing_ser_id_field').hide(function(){
$(this).removeClass("validate-required");
});
$("#billing_number_id_field").addClass("validate-required");
$("#billing_status").change(function(){
if($("#billing_status option:selected").val() == "2"){
$('#billing_company_field').show(function(){
$(this).addClass("validate-required");
});
$('#billing_ser_id_field').show(function(){
$(this).addClass("validate-required");
});
} else if($("#billing_status option:selected").val() == "1"){
$('#billing_company_field').hide(function(){
$(this).removeClass("validate-required");
});
$('#billing_ser_id_field').hide(function(){
$(this).removeClass("validate-required");
});
}
});
});
所有这些代码都已经过测试并且可以运行
这篇关于显示或隐藏其他 Checkout 自定义字段的自定义下拉选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!