WooCommerce结账页：根据配送日期动态添加额外费用（含日期选择器集成）
本教程详细指导如何在woocommerce结账页面集成xdsoft datetimepicker，并根据用户选择的配送日期动态收取额外费用。文章涵盖了自定义日期字段的添加、日期选择器的配置、基于日期差异计算和应用费用的php逻辑，以及如何将配送日期保存并显示在订单详情和邮件中，确保结账流程的灵活性和业务规则的准确执行。
在WooCommerce商店中，有时需要根据客户选择的配送日期来调整订单费用，例如为当日或次日配送收取额外加急费。本教程将引导您完成在WooCommerce结账页面实现这一功能的完整步骤，包括添加自定义日期选择器、动态计算费用以及将选择的日期保存到订单信息中。
一、添加自定义配送日期选择器
首先，我们需要在WooCommerce结账页面添加一个用于选择配送日期的字段，并对其进行基础验证。
'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结账页面的更新。
代码说明：
- 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 钩子来检查用户选择的配送日期，并根据规则动态添加或移除额外费用。
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' );
?>
=== __( '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”的费用，则将其移除。这确保了费用的动态性和准确性。
四、保存与显示配送日期信息
为了在订单管理和通知中查看配送日期，我们需要将其保存到订单元数据中，并在后台订单详情页和客户邮件中显示。
get_meta( '_delivery_date' );
if ( $delivery_date ) {
echo '' . __( 'Delivery Date', 'your-text-domain' ) . ': ' . esc_html( $delivery_date ) . '
';
}
}
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 '' . __( 'Delivery Date', 'your-text-domain' ) . ': ' . esc_html( $delivery_date ) . '
';
}
}
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结账页面实现了一个功能完善的配送日期选择器，并能够根据用户的选择动态地添加或移除额外费用，同时将配送日期保存并显示在订单的各个环节中。这不仅提升了用户体验，也为您的业务提供了更大的灵活性。
