本教程详细指导如何在 woocommerce 结账页面集成一个日期时间选择器，并根据用户选择的配送日期（当天或次日）动态计算并添加额外的“快速配送”费用。文章涵盖了自定义字段的添加、日期选择器的配置、费用的计算与移除、表单验证以及将配送日期保存至订单并显示在后台和邮件中的完整实现方案。
在电子商务运营中，为顾客提供灵活的配送选项并根据选择的紧迫性收取额外费用是一种常见的业务需求。本教程将详细介绍如何在 WooCommerce 结账页面实现一个功能，即用户在选择配送日期时，如果选择了当天或次日，系统将自动添加一笔“快速配送”费用。我们将使用 xdsoft datetimepicker 作为日期时间选择器，并通过 WooCommerce 的钩子机制实现费用的动态计算、表单验证以及订单信息的保存。
首先，我们需要在 WooCommerce 结账页面添加一个自定义的配送日期选择字段。这可以通过 woocommerce_form_field 函数结合 woocommerce_after_order_notes 钩子实现。
/**
* 在结账页面添加配送日期字段
*
* @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', // 对应前端日期选择器ID
'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' );为了使 datepicker 字段具备日期时间选择功能，我们需要引入 xdsoft datetimepicker 相关的 JavaScript 和 CSS 库。建议将这些脚本和样式通过 wp_enqueue_script 和 wp_enqueue_style 正确加载，而不是直接在 woocommerce_after_checkout_form 中输出。但为了演示简洁，这里沿用直接输出的方式。
/**
* 加载日期时间选择器所需的JS/CSS库
*/
function enqueue_datetimepicker_assets() {
// 注册并加载 jQuery UI (xdsoft datetimepicker可能依赖)
wp_enqueue_script( 'jquery-ui-datepicker' );
wp_enqueue_style( 'jquery-ui-css', '//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css' );
// 加载 xdsoft datetimepicker 库
wp_enqueue_script( 'xdsoft-datetimepicker', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js', array('jquery'), '2.5.20', true );
wp_enqueue_style( 'xdsoft-datetimepicker-css', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css', array(), '2.5.20' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_datetimepicker_assets' ); // 最佳实践是使用wp_enqueue_scripts
/**
* 初始化日期时间选择器并绑定事件
*/
function initialize_datetimepicker_script() {
if ( is_checkout() ) { // 确保只在结账页加载
?>
<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, // 如果需要禁用周末
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) {
// 当选择日期时，触发结账页面更新，以便重新计算费用
$('body').trigger('update_checkout');
},
onSelectTime: function(ct, $i) {
// 当选择时间时，触发结账页面更新
$('body').trigger('update_checkout');
}
});
});
</script>
<?php
}
}
add_action( 'woocommerce_after_checkout_form', 'initialize_datetimepicker_script', 20 );注意事项：
核心功能是通过 woocommerce_cart_calculate_fees 钩子来动态添加或移除费用。当用户选择的配送日期是当天或次日时，我们将添加一笔“快速配送”费用。
/**
* 根据选择的配送日期添加或移除费用
*/
function wc_add_delivery_surcharge() {
// 确保只在非管理后台且非AJAX请求时执行，防止不必要的计算
if ( is_admin() && ! defined( 'DOING_AJAX' ) ) {
return;
}
// 解析POST数据，获取配送日期
parse_str( $_POST['post_data'], $post_data );
if ( isset( $post_data['delivery_date'] ) && ! empty( $post_data['delivery_date'] ) ) {
$selected_delivery_date_str = $post_data['delivery_date'];
// 将当前日期和选择的配送日期转换为时间戳，并只比较日期部分
$current_date_timestamp = strtotime( date( "Y-m-d" ) );
$selected_date_timestamp = strtotime( date( "Y-m-d", strtotime( $selected_delivery_date_str ) ) );
// 计算日期差异（天数）
$datediff = $selected_date_timestamp - $current_date_timestamp;
$difference_in_days = floor( $datediff / ( 60 * 60 * 24 ) );
$fee_name = __( 'Fast delivery charge', 'your-text-domain' );
$fast_delivery_fee = 5.00; // 快速配送费用金额
// 检查购物车中是否已存在快速配送费用
$existing_fees = WC()->cart->get_fees();
$fee_exists = false;
foreach ( $existing_fees as $fee ) {
if ( $fee->name === $fee_name ) {
$fee_exists = true;
break;
}
}
// 如果差异是0（今天）或1（明天），则添加费用
if ( $difference_in_days == 0 || $difference_in_days == 1 ) {
if ( ! $fee_exists ) { // 如果费用不存在，则添加
WC()->cart->add_fee( $fee_name, $fast_delivery_fee, true, 'standard' );
}
} else {
// 如果日期不是今天或明天，且费用存在，则移除费用
if ( $fee_exists ) {
$updated_fees = array();
foreach ( $existing_fees as $fee ) {
if ( $fee->name !== $fee_name ) {
$updated_fees[] = $fee;
}
}
WC()->cart->set_fees( $updated_fees ); // 使用 set_fees 方法更新费用列表
}
}
} else {
// 如果配送日期未设置或为空，确保移除快速配送费用
$fee_name = __( 'Fast delivery charge', 'your-text-domain' );
$existing_fees = WC()->cart->get_fees();
$updated_fees = array();
foreach ( $existing_fees as $fee ) {
if ( $fee->name !== $fee_name ) {
$updated_fees[] = $fee;
}
}
WC()->cart->set_fees( $updated_fees );
}
}
add_action( 'woocommerce_cart_calculate_fees', 'wc_add_delivery_surcharge' );关键点说明：
为了确保用户必须选择配送日期，我们需要在结账处理阶段添加验证。
/**
* 验证配送日期字段是否已选择
*/
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' );为了在订单详情页和邮件中显示选择的配送日期，我们需要将其保存到订单元数据中，并在相应位置进行展示。
/**
* 将配送日期保存到订单元数据
*
* @param int $order_id 订单ID
*/
function save_delivery_date_field( $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' );
/**
* 在后台订单详情页显示配送日期
*
* @param WC_Order $order 订单对象
*/
function show_delivery_date_field_order( $order ) {
$delivery_date = $order->get_meta( 'delivery_date', true );
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', 'show_delivery_date_field_order', 10, 1 );
/**
* 在订单邮件中显示配送日期
*
* @param WC_Order $order 订单对象
* @param bool $sent_to_admin 是否发送给管理员
* @param bool $plain_text 是否为纯文本邮件
* @param WC_Email $email 邮件对象
*/
function show_delivery_date_field_emails( $order, $sent_to_admin, $plain_text, $email ) {
$delivery_date = $order->get_meta( 'delivery_date', true );
if ( $delivery_date ) {
echo '<p><strong>' . __( 'Delivery Date', 'your-text-domain' ) . ':</strong> ' . esc_html( $delivery_date ) . '</p>';
}
}
add_action( 'woocommerce_email_after_order_table', 'show_delivery_date_field_emails', 20, 4 );将上述所有代码片段合并到一个自定义插件文件（例如 your-plugin-name.php）或主题的 functions.php 文件中，即可实现完整的配送日期选择和动态费用功能。
<?php
/**
* Plugin Name: WooCommerce Custom Delivery Date Fee
* Description: Adds a delivery date picker to checkout and applies a fee for same-day/next-day delivery.
* Version: 1.0
* Author: Your Name
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
/**
* 1. 在结账页面添加配送日期字段
*/
function custom_delivery_date_field( $checkout ) {
woocommerce_form_field( 'delivery_date', array(
'type' => 'text',
'class' => array('form-row-wide'),
'id' => 'datepicker',
'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' );
/**
* 2. 加载日期时间选择器所需的JS/CSS库
*/
function enqueue_datetimepicker_assets() {
if ( is_checkout() ) {
// 注册并加载 jQuery UI (xdsoft datetimepicker可能依赖)
wp_enqueue_script( 'jquery-ui-datepicker' );
wp_enqueue_style( 'jquery-ui-css', '//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css' );
// 加载 xdsoft datetimepicker 库
wp_enqueue_script( 'xdsoft-datetimepicker', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js', array('jquery'), '2.5.20', true );
wp_enqueue_style( 'xdsoft-datetimepicker-css', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css', array(), '2.5.20' );
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_datetimepicker_assets' );
/**
* 2.1 初始化日期时间选择器并绑定事件
*/
function initialize_datetimepicker_script() {
if ( is_checkout() ) {
?>
<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,
format: 'Y/m/d H:i:s',
minDate: 0,
minTime: '8:00',
step: 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) {
$('body').trigger('update_checkout');
},
onSelectTime: function(ct, $i) {
$('body').trigger('update_checkout');
}
});
});
</script>
<?php
}
}
add_action( 'woocommerce_after_checkout_form', 'initialize_datetimepicker_script', 20 );
/**
* 3. 根据选择的配送日期添加或移除费用
*/
function wc_add_delivery_surcharge() {
if ( is_admin() && ! defined( 'DOING_AJAX' ) ) {
return;
}
parse_str( $_POST['post_data'], $post_data );
$fee_name = __( 'Fast delivery charge', 'your-text-domain' );
$fast_delivery_fee = 5.00; // 快速配送费用金额
// 获取当前购物车中的费用
$existing_fees = WC()->cart->get_fees();
$fee_to_add_or_remove = false;
// 检查是否已存在快速配送费用
foreach ( $existing_fees as $key => $fee ) {
if ( $fee->name === $fee_name ) {
$fee_to_add_or_remove = $fee;
unset( $existing_fees[$key] ); // 暂时移除，以便后续重新添加或完全移除
break;
}
}
if ( isset( $post_data['delivery_date'] ) && ! empty( $post_data['delivery_date'] ) ) {
$selected_delivery_date_str = $post_data['delivery_date'];
$current_date_timestamp = strtotime( date( "Y-m-d" ) );
$selected_date_timestamp = strtotime( date( "Y-m-d", strtotime( $selected_delivery_date_str ) ) );
$datediff = $selected_date_timestamp - $current_date_timestamp;
$difference_in_days = floor( $datediff / ( 60 * 60 * 24 ) );
if ( $difference_in_days == 0 || $difference_in_days == 1 ) {
// 如果是今天或明天，添加费用
WC()->cart->add_fee( $fee_name, $fast_delivery_fee, true, 'standard' );
} else {
// 如果不是今天或明天，且之前有费用，则不添加，等于移除
// 费用已经在上面unset了，这里不需要额外操作
}
} else {
// 如果配送日期未设置或为空，确保不添加费用
}
// WC()->cart->set_fees() 在 add_fee() 之后不需要手动调用，add_fee 会自动处理
}
add_action( 'woocommerce_cart_calculate_fees', 'wc_add_delivery_surcharge' );
/**
* 4. 验证配送日期字段是否已选择
*/
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' );
/**
* 5. 将配送日期保存到订单元数据
*/
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' );
/**
* 5.1 在后台订单详情页显示配送日期
*/
function show_delivery_date_field_order( $order ) {
$delivery_date = $order->get_meta( 'delivery_date', true );
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', 'show_delivery_date_field_order', 10, 1 );
/**
* 5.2 在订单邮件中显示配送日期
*/
function show_delivery_date_field_emails( $order, $sent_to_admin, $plain_text, $email ) {
$delivery_date = $order->get_meta( 'delivery以上就是WooCommerce 结账页根据选择的配送日期动态添加配送费用教程的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
277
收藏
