本教程详细指导如何在woocommerce结账页面集成xdsoft datetimepicker，并根据用户选择的配送日期动态收取额外费用。文章涵盖了自定义日期字段的添加、日期选择器的配置、基于日期差异计算和应用费用的php逻辑，以及如何将配送日期保存并显示在订单详情和邮件中，确保结账流程的灵活性和业务规则的准确执行。
在WooCommerce商店中，有时需要根据客户选择的配送日期来调整订单费用，例如为当日或次日配送收取额外加急费。本教程将引导您完成在WooCommerce结账页面实现这一功能的完整步骤，包括添加自定义日期选择器、动态计算费用以及将选择的日期保存到订单信息中。
一、添加自定义配送日期选择器
首先，我们需要在WooCommerce结账页面添加一个用于选择配送日期的字段，并对其进行基础验证。
<?php
/**
* 在结账页“订单备注”下方添加自定义配送日期字段
*
* @param WC_Checkout $checkout WooCommerce 结账对象
*/
function custom_delivery_date_field( $checkout ) {
woocommerce_form_field( 'delivery_date', array(
'type' => 'text',
'class' => array('form-row-wide'),
'id' => 'datepicker', // 用于JS选择器
'required' => true,
'label' => __('Select Delivery Date', 'your-text-domain'),
'placeholder' => __('Click to select date', 'your-text-domain'),
));
}
add_action( 'woocommerce_after_order_notes', 'custom_delivery_date_field' );
/**
* 验证配送日期字段是否已选择
*/
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' );
?>代码说明：
- custom_delivery_date_field 函数通过 woocommerce_form_field 创建一个类型为 text 的输入字段，其 id 设置为 datepicker，方便后续JavaScript进行初始化。
- woocommerce_after_order_notes 钩子确保该字段显示在订单备注区域下方。
- validate_delivery_date_field 函数在结账处理时检查 delivery_date 字段是否为空，若为空则添加一个错误通知。
二、集成并配置xdsoft DateTimePicker
为了提供友好的日期选择体验，我们将集成 xdsoft DateTimePicker。此步骤包括引入必要的JavaScript库和初始化日期选择器，并配置其在日期或时间选择后触发WooCommerce结账页面的更新。
<?php
/**
* 引入xdsoft DateTimePicker库并初始化日期选择器
*/
function load_and_init_datetimepicker() {
// 仅在结账页面加载
if ( ! is_checkout() ) {
return;
}
?>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery.datetimepicker.setLocale('en'); // 设置语言环境
// 获取当前时间，并向上取整到最近的30分钟，确保可选时间从当前时间之后开始
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, // 禁用周末，如果需要可以启用
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结账页面的更新，以便重新计算费用
jQuery('body').trigger('update_checkout');
},
onSelectTime: function(ct, $i) {
// 当选择时间时，触发WooCommerce结账页面的更新
jQuery('body').trigger('update_checkout');
}
});
});
</script>
<?php
}
add_action( 'woocommerce_after_checkout_form', 'load_and_init_datetimepicker', 20 );
?>代码说明：
- load_and_init_datetimepicker 函数通过 woocommerce_after_checkout_form 钩子在结账表单底部加载JavaScript和CSS库。
- jQuery.datetimepicker.setLocale('en') 设置日期选择器的语言。
- minDate: 0 确保用户不能选择过去的日期。
- onSelectDate 和 onSelectTime 回调函数是关键，它们在用户选择日期或时间后，通过 jQuery('body').trigger('update_checkout') 触发WooCommerce结账页面的AJAX更新，从而实时重新计算订单费用。
三、实现基于配送日期的额外费用逻辑
这一部分是核心，我们将使用 woocommerce_cart_calculate_fees 钩子来检查用户选择的配送日期，并根据规则动态添加或移除额外费用。
<?php
/**
* 根据选择的配送日期动态添加额外费用
*/
function wc_add_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'] ) ) {
$selected_date_str = explode(' ', $post_data['delivery_date'])[0]; // 只取日期部分
$current_date_str = date("Y/m/d");
$selected_timestamp = strtotime( $selected_date_str );
$current_timestamp = strtotime( $current_date_str );
// 计算日期差异（天数）
$datediff = $selected_timestamp - $current_timestamp;
$difference_in_days = floor( $datediff / ( 60 * 60 * 24 ) );
$fee_amount = 5.00; // 定义加急费用金额
if ( $difference_in_days == 0 || $difference_in_days == 1 ) {
// 如果是今天或明天，添加加急费用
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->fees_api()->set_fees( $fees );
break; // 找到并移除后即可退出循环
}
}
}
} 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->fees_api()->set_fees( $fees );
break;
}
}
}
}
add_action( 'woocommerce_cart_calculate_fees','wc_add_delivery_surcharge' );
?>代码说明：
- wc_add_delivery_surcharge 函数挂载到 woocommerce_cart_calculate_fees 钩子，确保在购物车费用计算时执行。
- 通过 parse_str( $_POST['post_data'], $post_data ) 获取结账表单提交的数据，其中包含 delivery_date。
- 将选定日期和当前日期转换为时间戳，计算它们之间的天数差异。
- 如果差异为 0（今天）或 1（明天），则使用 WC()->cart->add_fee() 添加名为“Fast delivery charge”的额外费用。
- 关键的移除逻辑： 如果用户选择了非加急日期，或者没有选择日期，代码会遍历当前购物车中的所有费用，如果找到名为“Fast delivery charge”的费用，则将其移除。这确保了费用的动态性和准确性。
四、保存与显示配送日期信息
为了在订单管理和通知中查看配送日期，我们需要将其保存到订单元数据中，并在后台订单详情页和客户邮件中显示。
<?php
/**
* 将配送日期保存到订单元数据
*
* @param int $order_id 订单ID
*/
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后台订单详情页显示配送日期
*
* @param WC_Order $order 订单对象
*/
function display_delivery_date_in_admin_order( $order ) {
$delivery_date = $order->get_meta( '_delivery_date' );
if ( $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订单邮件中显示配送日期
*
* @param WC_Order $order 订单对象
* @param bool $sent_to_admin 是否发送给管理员
* @param bool $plain_text 是否为纯文本邮件
* @param WC_Email $email 邮件对象
*/
function display_delivery_date_in_emails( $order, $sent_to_admin, $plain_text, $email ) {
$delivery_date = $order->get_meta( '_delivery_date' );
if ( $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 );
?>代码说明：
- save_delivery_date_field_to_order_meta 函数使用 woocommerce_checkout_update_order_meta 钩子将 delivery_date 的值保存为订单的元数据（_delivery_date）。
- display_delivery_date_in_admin_order 函数使用 woocommerce_admin_order_data_after_billing_address 钩子在WooCommerce后台订单编辑页面的账单地址下方显示配送日期。
- display_delivery_date_in_emails 函数使用 woocommerce_email_after_order_table 钩子在所有WooCommerce订单邮件（包括客户和管理员邮件）的订单表格下方显示配送日期。
五、注意事项与总结
- 代码放置位置： 所有上述PHP代码应放置在您主题的 functions.php 文件中，或创建一个自定义插件来管理这些功能。推荐使用自定义插件，以确保主题更新不会覆盖您的定制代码。
- 文本域： 在代码中使用了 'your-text-domain' 作为文本域，请根据您的主题或插件实际使用的文本域进行替换，以便进行国际化。
- 费用金额与名称： wc_add_delivery_surcharge 函数中的 $fee_amount 和费用名称 'Fast delivery charge' 可以根据您的业务需求进行调整。
- 日期选择器配置： load_and_init_datetimepicker 函数中的 minDate、minTime、step 和 allowTimes 等选项可以根据您的配送策略进行灵活配置。例如，如果您不希望周末配送，可以启用 beforeShowDay: $.datepicker.noWeekends。
- AJAX更新： onSelectDate 和 onSelectTime 中触发 jQuery('body').trigger('update_checkout') 是实现费用动态计算的关键。这会向服务器发送AJAX请求，重新计算购物车总额和费用，并更新结账页面显示。
通过以上步骤，您已经成功地在WooCommerce结账页面实现了一个功能完善的配送日期选择器，并能够根据用户的选择动态地添加或移除额外费用，同时将配送日期保存并显示在订单的各个环节中。这不仅提升了用户体验，也为您的业务提供了更大的灵活性。
