
本教程将指导您如何在woocommerce结账页集成xdsoft jquery datetimepicker,允许客户选择配送日期,并根据选择的日期(如当日或次日)动态计算并添加加急配送费用。同时,文章还将涵盖如何将此日期信息保存至订单并显示在管理后台及邮件中,以实现完整的配送日期管理功能。
在电子商务运营中,为客户提供灵活的配送日期选择,并对加急配送服务收取额外费用,是提升用户体验和管理物流成本的常见需求。本教程将详细介绍如何在WooCommerce结账流程中实现这一功能,包括自定义字段的添加、日期时间选择器的集成、动态费用计算以及订单信息的持久化与展示。
首先,我们需要在WooCommerce结账页添加一个用于选择配送日期的文本输入框。这个输入框将通过WordPress和WooCommerce的钩子函数进行注册和渲染。
/**
* 在结账页“订单备注”下方添加自定义配送日期字段
* 使用 woocommerce_after_order_notes 钩子
*/
function custom_delivery_date_field( $checkout ) {
woocommerce_form_field( 'delivery_date', array(
'type' => 'text',
'class' => array('form-row-wide'), // 字段宽度
'id' => 'datepicker', // 用于JS选择器的ID
'required' => true, // 设为必填
'label' => __('Select Delivery Date', 'your-text-domain'), // 字段标签
'placeholder' => __('Click to select date', 'your-text-domain'), // 占位符
), $checkout->get_value( 'delivery_date' )); // 保持字段值
}
add_action( 'woocommerce_after_order_notes', 'custom_delivery_date_field' );
/**
* 验证自定义配送日期字段
* 使用 woocommerce_checkout_process 钩子
*/
function validate_delivery_date_field() {
if ( isset( $_POST['delivery_date'] ) && empty( $_POST['delivery_date'] ) ) {
wc_add_notice( __( 'Please select the Delivery Date', 'your-text-domain' ), 'error' );
}
}
add_action( 'woocommerce_checkout_process', 'validate_delivery_date_field' );代码说明:
为了提供友好的日期选择界面,我们将使用xdsoft jQuery DateTimePicker库。这需要引入其JavaScript和CSS文件,并初始化日期时间选择器。
/**
* 引入xdsoft jQuery DateTimePicker所需的JS和CSS
* 使用 woocommerce_after_checkout_form 钩子
*/
function enqueue_datetimepicker_scripts() {
// 引入jQuery UI,xdsoft datetimepicker可能依赖它,或者xdsoft自带了大部分功能
// 根据xdsoft文档,通常只需要xdsoft库本身
// wp_enqueue_script( 'jquery-ui-datepicker' ); // 如果需要jQuery UI Datepicker的额外功能
// xdsoft jQuery DateTimePicker CSS
wp_enqueue_style( 'jquery-datetimepicker-css', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css', array(), '2.5.20' );
// xdsoft jQuery DateTimePicker JS
wp_enqueue_script( 'jquery-datetimepicker-js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js', array('jquery'), '2.5.20', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_datetimepicker_scripts' ); // 在前端正确引入
/**
* 初始化xdsoft jQuery DateTimePicker并配置选项
* 使用 woocommerce_after_checkout_form 钩子
*/
function initialize_datetimepicker() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery.datetimepicker.setLocale('en'); // 设置语言环境
// 获取当前时间,并向上取整到最近的半小时
var currentDate = new Date();
var minutes = currentDate.getMinutes();
var m = (Math.ceil(minutes/30) * 30) % 60;
currentDate.setMinutes(m);
jQuery('#datepicker').datetimepicker({
// beforeShowDay: $.datepicker.noWeekends, // 如果需要禁用周末,xdsoft有自己的方式
format: 'Y/m/d H:i:s', // 日期时间格式
minDate: 0, // 最小可选日期为今天
minTime: '8:00', // 最小可选时间
step: 30, // 时间步长为30分钟
allowTimes:[ // 允许选择的时间段
'09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30',
'13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00'
],
onSelectDate:function(ct,$i){
// 当选择日期时,触发WooCommerce的结账更新事件
$( 'body' ).trigger( 'update_checkout' );
},
onSelectTime:function(ct,$i){
// 当选择时间时,触发WooCommerce的结账更新事件
$( 'body' ).trigger( 'update_checkout' );
}
});
});
</script>
<?php
}
add_action( 'woocommerce_after_checkout_form', 'initialize_datetimepicker', 20 );代码说明:
现在,我们将实现根据用户选择的配送日期动态添加或移除加急配送费用的逻辑。这通过 woocommerce_cart_calculate_fees 钩子完成。
/**
* 根据选择的配送日期动态添加加急配送费
* 使用 woocommerce_cart_calculate_fees 钩子
*/
function add_express_delivery_surcharge() {
// 确保只在前端、非管理员请求且非AJAX请求时执行
if ( is_admin() && ! defined( 'DOING_AJAX' ) ) {
return;
}
// 解析POST数据以获取 delivery_date 字段
parse_str($_POST['post_data'], $post_data);
if ( isset( $post_data['delivery_date'] ) && ! empty( $post_data['delivery_date'] ) ) {
$current_date_obj = new DateTime(); // 当前日期对象
$delivery_date_str = explode(' ', $post_data['delivery_date'])[0]; // 只取日期部分,忽略时间
$delivery_date_obj = DateTime::createFromFormat('Y/m/d', $delivery_date_str); // 配送日期对象
if ( $delivery_date_obj ) {
// 计算日期差异(天数)
$interval = $current_date_obj->diff($delivery_date_obj);
$difference_days = (int)$interval->format('%r%a'); // %r 表示符号 (+/-), %a 表示总天数
$fee_amount = 5.00; // 定义加急费用金额
// 如果选择的日期是今天 (0) 或明天 (1)
if ( $difference_days == 0 || $difference_days == 1 ) {
// 检查是否已经添加了该费用,避免重复添加
$has_fee = false;
foreach ( WC()->cart->get_fees() as $fee ) {
if ( $fee->name === __( 'Fast delivery charge', 'your-text-domain' ) ) {
$has_fee = true;
break;
}
}
if ( ! $has_fee ) {
WC()->cart->add_fee( __( 'Fast delivery charge', 'your-text-domain' ), $fee_amount, true, 'standard' );
}
} else {
// 如果选择的不是今天或明天,则移除加急费用(如果已存在)
$fees = WC()->cart->get_fees();
foreach ( $fees as $key => $fee ) {
if ( $fee->name === __( 'Fast delivery charge', 'your-text-domain' ) ) {
unset( $fees[$key] ); // 移除费用
WC()->cart->set_fees( $fees ); // 更新费用列表
break; // 假设只有一项这样的费用,移除后即可退出
}
}
}
}
} else {
// 如果 delivery_date 未设置或为空,确保移除加急费用
$fees = WC()->cart->get_fees();
foreach ( $fees as $key => $fee ) {
if ( $fee->name === __( 'Fast delivery charge', 'your-text-domain' ) ) {
unset( $fees[$key] );
WC()->cart->set_fees( $fees );
break;
}
}
}
}
add_action( 'woocommerce_cart_calculate_fees','add_express_delivery_surcharge' );代码说明:
为了在订单管理后台和客户收到的邮件中显示配送日期,我们需要将该信息保存到订单元数据中。
/**
* 将配送日期保存到订单元数据
* 使用 woocommerce_checkout_update_order_meta 钩子
*/
function save_delivery_date_field_to_order_meta( $order_id ) {
if ( isset( $_POST['delivery_date'] ) && ! empty( $_POST['delivery_date'] ) ) {
update_post_meta( $order_id, 'delivery_date', sanitize_text_field( $_POST['delivery_date'] ) );
}
}
add_action( 'woocommerce_checkout_update_order_meta', 'save_delivery_date_field_to_order_meta' );
/**
* 在WooCommerce管理订单编辑页显示配送日期
* 使用 woocommerce_admin_order_data_after_billing_address 钩子
*/
function display_delivery_date_in_admin_order( $order ) {
$delivery_date = $order->get_meta( 'delivery_date', true ); // 从订单元数据获取
if ( ! empty( $delivery_date ) ) {
echo '<p><strong>' . __( 'Delivery Date', 'your-text-domain' ) . ':</strong> ' . esc_html( $delivery_date ) . '</p>';
}
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_delivery_date_in_admin_order', 10, 1 );
/**
* 在WooCommerce订单邮件中显示配送日期
* 使用 woocommerce_email_after_order_table 钩子
*/
function display_delivery_date_in_emails( $order, $sent_to_admin, $plain_text, $email ) {
$delivery_date = $order->get_meta( 'delivery_date', true );
if ( ! empty( $delivery_date ) ) {
echo '<p><strong>' . __( 'Delivery Date', 'your-text-domain' ) . ':</strong> ' . esc_html( $delivery_date ) . '</p>';
}
}
add_action( 'woocommerce_email_after_order_table', 'display_delivery_date_in_emails', 20, 4 );代码说明:
通过以上步骤,您已经成功地为WooCommerce结账页添加了一个功能完善的配送日期选择器,并实现了根据日期紧急程度动态收取加急配送费用的功能,同时确保了这些关键信息在整个订单管理流程中的可见性。
以上就是WooCommerce结账页自定义配送日期并实现加急配送费用的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号