本教程详细指导如何在 woocommerce 结账页面集成一个日期时间选择器，并根据用户选择的配送日期（当天或次日）动态计算并添加额外的“快速配送”费用。文章涵盖了自定义字段的添加、日期选择器的配置、费用的计算与移除、表单验证以及将配送日期保存至订单并显示在后台和邮件中的完整实现方案。
在电子商务运营中，为顾客提供灵活的配送选项并根据选择的紧迫性收取额外费用是一种常见的业务需求。本教程将详细介绍如何在 WooCommerce 结账页面实现一个功能，即用户在选择配送日期时，如果选择了当天或次日，系统将自动添加一笔“快速配送”费用。我们将使用 xdsoft datetimepicker 作为日期时间选择器，并通过 WooCommerce 的钩子机制实现费用的动态计算、表单验证以及订单信息的保存。
1. 添加配送日期选择字段
首先，我们需要在 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' );
2. 加载日期时间选择器库
为了使 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() ) { // 确保只在结账页加载 ?> 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'); } }); }); <?php }}add_action( 'woocommerce_after_checkout_form', 'initialize_datetimepicker_script', 20 );
注意事项：
onSelectDate 和 onSelectTime 事件是关键，它们会在用户选择日期或时间后触发 update_checkout 事件，从而通知 WooCommerce 重新计算购物车和费用。minDate: 0 表示最小可选日期是当前日期。minTime 和 allowTimes 可以根据业务需求进行调整。
3. 实现动态配送费用逻辑
核心功能是通过 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' );
关键点说明：
parse_str($_POST[‘post_data’], $post_data); 用于解析 AJAX 请求中传递的表单数据。strtotime() 用于将日期字符串转换为时间戳，便于计算日期差异。floor($datediff/(60*60*24)) 计算天数差异。WC()->cart->add_fee() 用于添加费用。true 表示费用是可税的，’standard’ 是税率类别。移除费用时，需要遍历现有费用并重新设置，因为 remove_fee 函数通常需要费用对象的引用。这里通过构建一个新的费用数组并使用 WC()->cart->set_fees() 来实现。
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. 保存并显示配送日期
为了在订单详情页和邮件中显示选择的配送日期，我们需要将其保存到订单元数据中，并在相应位置进行展示。
/** * 将配送日期保存到订单元数据 * * @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 '' . __( 'Delivery Date', 'your-text-domain' ) . ': ' . esc_html( $delivery_date ) . '
'; }}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 '' . __( 'Delivery Date', 'your-text-domain' ) . ': ' . esc_html( $delivery_date ) . '
'; }}add_action( 'woocommerce_email_after_order_table', 'show_delivery_date_field_emails', 20, 4 );
6. 完整代码示例
将上述所有代码片段合并到一个自定义插件文件（例如 your-plugin-name.php）或主题的 functions.php 文件中，即可实现完整的配送日期选择和动态费用功能。
'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() ) { ?> 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'); } }); }); 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 '' . __( 'Delivery Date', 'your-text-domain' ) . ': ' . esc_html( $delivery_date ) . '
'; }}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中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1329155.html
微信扫一扫 
支付宝扫一扫 
