有条件地自定义WooCommerce结帐字段 [英] Conditionally customizing WooCommerce checkout fields
问题描述
我正在尝试修改WooCommerce检出字段.我想讲两点.
I am trying to modify WooCommerce check out fields. There are two points I want to reach.
-
条件字段
Conditional fields
我想在运输部分为不同的运输类型设置条件字段.为此，使用了Javascript.
I want to make conditional fields for different shipping type in shipping section. To reach this point, Javascript is used.
管理员可以按后端顺序编辑自定义字段
Administrator can edit the custom fields in the order on back-end
结果，我编写了如下代码.
As a result, I write the code as below.
但是，我遇到了一个问题.我的JavaScript无法在前端使用.
However, I met a problem. My javascript cannot work on the front-end.
有人可以帮助我吗?
//修改check out shipping field
add_action( 'woocommerce_before_checkout_shipping_form', 'add_shipping_type' );
function add_shipping_type( $checkout ) {
woocommerce_form_field( 'shipping_type', array(
'type' => 'radio',
'class' => array( 'form-row-wide' ),
'label' => '收件方式',
'options' => array(
'shipping_1' => '全家店到店',
'shipping_2' => '指定地址',
'shipping_3' => '自行取貨',
)
),$checkout->get_value( 'shipping_type' ));
}
add_filter( 'woocommerce_shipping_fields', 'custom_name_field_2' );
function custom_name_field_2($fields) {
$fields['shipping_first_name'] = array(
'label'=>"取件者 *",
'id' => 'shipping_first_name'
);
$fields['shipping_last_name'] = array(
'label'=>"手機號碼 *",
'id' => 'shipping_last_name'
);
$fields['shipping_company'] = array(
'label'=>"店名 *",
'id' => 'shipping_company'
);
$fields['shipping_city'] = array(
'label'=>"服務編號 *",
'id' => 'shipping_city'
);
$fields['shipping_address_1'] = array(
'label'=>"收件地址 *",
'id' => 'shipping_address_1'
);
$fields['shipping_address_2'] = array(
'label'=>"預計來訪時間 *",
'id' => 'shipping_address_2'
);
return $fields;
}
add_filter( 'woocommerce_shipping_fields', 'remove_shipping_company' );
function remove_shipping_company($fields){
unset($fields['shipping_country']);
unset($fields['shipping_state']);
return $fields;
}
add_filter("woocommerce_shipping_fields", "shipping_container");
function shipping_container(){
$output = '
<style>label.radio{display:inline-block;margin-right:1rem;}</style>
<script>
var $ = jQuery.noConflict();
$(document).ready(function(){
$("input[name=shipping_type]").on("change",function(){
if($("#shipping_type_shipping_1").is(":checked")) {
$("#shipping_first_name,#shipping_last_name,#shipping_city,#shipping_company").fadeIn();
} else {
$("#shipping_first_name,#shipping_last_name,#shipping_city,#shipping_company").fadeOut();
}
if($("#shipping_type_shipping_2").is(":checked")) {
$("#shipping_postcode,#shipping_address_1").fadeIn();
} else {
$("#shipping_postcode,#shipping_address_1").fadeOut();
}
if($("#shipping_type_shipping_3").is(":checked")) {
$("#shipping_address_2_field_2").fadeIn();
} else {
$("#shipping_address_2_field_2").fadeOut();
}
})
});
</script>
';
echo $output;
}
推荐答案
首先，当涉及到相同的钩子时，您可以合并一些函数……然后，对于jQuery脚本，最好像下面的代码(在您的jQuery脚本中也有很多小错误):
First you can merge some functions when the same hook is involved… Then for your jQuery script is better to set it like in the following code (there is also many little mistakes in your jQuery script):
// Customizing default checkout shipping fields
add_filter( 'woocommerce_shipping_fields', 'customizing_shipping_fields' );
function customizing_shipping_fields($fields){
# 1. Remove shipping fields
unset($fields['shipping_country']);
unset($fields['shipping_state']);
# 2. Customize shipping fields
$label_fields = array(
'first_name' => __('取件者 *'), 'last_name' => __('手機號碼 *'),
'company' => __('店名 *'), 'city' => __('服務編號 *'),
'address_1' => __('收件地址 *'), 'address_2' => __('預計來訪時間 *'),
);
foreach( $label_fields as $key => $value ){
$fields['shipping_'.$key]['label'] = $value;
$fields['shipping_'.$key]['id'] = 'shipping_'.$key;
}
# 3. Customize shipping fields required
$required_fields = array( 'first_name', 'last_name', 'company', 'city',
'address_1', 'address_2', 'postcode');
foreach( $required_fields as $key => $value )
$fields['shipping_'.$key]['required'] = false;
return $fields;
}
// Add a Custom radio field for shipping options
add_action( 'woocommerce_before_checkout_shipping_form', 'custom_shipping_radio_button', 10, 1 );
function custom_shipping_radio_button( $checkout ) {
# 1. CSS styling
?>
<style>label.radio{ display:inline-block; margin-right:1em; }</style>
<?php
# 2. Add a custom radio field
woocommerce_form_field( 'shipping_type', array(
'type' => 'radio',
'class' => array( 'form-row-wide' ),
'label' => __('收件方式'),
'options' => array(
'shipping_1' => __('全家店到店'),
'shipping_2' => __('指定地址'),
'shipping_3' => __('自行取貨'),
),
), $checkout->get_value( 'shipping_type' ) );
# 3. jQuery Script
?>
<script type="text/javascript">
jQuery(function($){
$("input[name=shipping_type]").on("change",function(){
if($("#shipping_type_shipping_1").is(":checked")) {
$("#shipping_first_name,#shipping_last_name,#shipping_city,#shipping_company").fadeIn();
} else {
$("#shipping_first_name,#shipping_last_name,#shipping_city,#shipping_company").fadeOut();
}
if($("#shipping_type_shipping_2").is(":checked")) {
$("#shipping_postcode,#shipping_address_1").fadeIn();
} else {
$("#shipping_postcode,#shipping_address_1").fadeOut();
}
if($("#shipping_type_shipping_3").is(":checked")) {
$("#shipping_address_2_field_2").fadeIn();
} else {
$("#shipping_address_2_field_2").fadeOut();
}
});
});
</script>
<?php
}
代码进入您的活动子主题(或活动主题)的function.php文件中.
经过测试，可以正常工作.
Tested and works.
现在，如果您想隐藏带有标签的字段，您的jQuery脚本将是:
Now if you want to hide fields with labels, your jQuery script will be:
<script type="text/javascript">
jQuery(function($){
$("input[name=shipping_type]").on("change",function(){
if($("#shipping_type_shipping_1").is(":checked")) {
$("#shipping_first_name_field,#shipping_last_name_field,#shipping_city_field,#shipping_company_field").fadeIn();
} else {
$("#shipping_first_name_field,#shipping_last_name_field,#shipping_city_field,#shipping_company_field").fadeOut();
}
if($("#shipping_type_shipping_2").is(":checked")) {
$("#shipping_postcode_field,#shipping_address_1_field").fadeIn();
} else {
$("#shipping_postcode_field,#shipping_address_1_field").fadeOut();
}
if($("#shipping_type_shipping_3").is(":checked")) {
$("#shipping_address_2_field_2").fadeIn();
} else {
$("#shipping_address_2_field_2").fadeOut();
}
});
});
</script>
经过测试，也可以使用...
Tested and works too…
但是您应该将字段设置为不需要，因为在提交数据时会遇到一些问题……这将迫使您进行一些其他更改以使某些功能生效.但这将是一个新问题 ...
But you should need to set the fields to be not required as you will face some problems when submitting data… This will oblige you to make some other changes in order to get something functional. But this will be a new question…
这篇关于有条件地自定义WooCommerce结帐字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
