以下是如何在 WooCommerce 结帐页面上添加“日历”字段，让人们决定交货日期，并将此值保存在订单中。
我花了很长时间才为客户实现这个（它要复杂得多，有可用的日期，基于不同运输区域的不同日历，每天的最大重量等）所以我想和你分享基本的片段！
/**
* @snippet Display Order Delivery Date @ WooCommerce Checkout
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 5
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
// ——————————-
// 1. Display Checkout Calendar if Shipping Selected
add_action( ‘woocommerce_review_order_before_payment’, ‘bbloomer_echo_acf_date_picker’ );
function bbloomer_echo_acf_date_picker( $checkout ) {
echo ‘<div id=”show-if-shipping” style=”display:none”><h3>Delivery Date</h3>’;
woocommerce_form_field( ‘delivery_date’, array(
‘type’ => ‘text’,
‘class’ => array( ‘form-row-wide’ ),
‘id’ => ‘datepicker’,
‘required’ => true,
‘label’ => ‘Select Delivery Date’,
‘placeholder’ => ‘Click to open calendar’,
));
echo ‘</div>’;
}
add_action( ‘woocommerce_after_checkout_form’, ‘bbloomer_show_hide_calendar’ );
function bbloomer_show_hide_calendar( $available_gateways ) {
wc_enqueue_js( “
function show_calendar( val ) {
if ( val.match(‘^flat_rate’) || val.match(‘^free_shipping’) ) {
jQuery(‘#show-if-shipping’).fadeIn();
} else {
jQuery(‘#show-if-shipping’).fadeOut();
}
}
jQuery(document).ajaxComplete(function() {
var val = jQuery(‘input[name^=\’shipping_method\’]:checked’).val();
show_calendar( val );
});
” );
}
add_action( ‘woocommerce_checkout_process’, ‘bbloomer_validate_new_checkout_fields’ );
function bbloomer_validate_new_checkout_fields() {
if ( isset( $_POST[ ‘delivery_date’ ] ) && empty( $_POST[ ‘delivery_date’ ] ) ) wc_add_notice( __( ‘Please select the Delivery Date’ ), ‘error’ );
}
// ——————————-
// 2. Load JQuery Datepicker
add_action( ‘woocommerce_after_checkout_form’, ‘bbloomer_enable_datepicker’, 10 );
function bbloomer_enable_datepicker() {
echo ‘<link rel=”stylesheet” href=”//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css”>’;
echo ‘<script src=”//code.jquery.com/ui/1.13.0/jquery-ui.js”></script>’;
}
// ——————————-
// 3. Load Calendar Dates
add_action( ‘woocommerce_after_checkout_form’, ‘bbloomer_load_calendar_dates’, 20 );
function bbloomer_load_calendar_dates( $available_gateways ) {
wc_enqueue_js( “
$(‘#datepicker’).click(function() {
$(‘#datepicker’).datepicker({
dateFormat: ‘dd-mm-yy’,
maxDate: “+2m”,
minDate: 1,
}).datepicker( “show” );
});
” );
}
// ——————————-
// 4. Save & show date as order meta
add_action( ‘woocommerce_checkout_update_order_meta’, ‘bbloomer_save_date_weight_order’ );
function bbloomer_save_date_weight_order( $order_id ) {
if ( $_POST[‘delivery_date’] ) update_post_meta( $order_id, ‘_delivery_date’, esc_attr( $_POST[‘delivery_date’] ) );
}
add_action( ‘woocommerce_admin_order_data_after_billing_address’, ‘bbloomer_delivery_weight_display_admin_order_meta’ );
function bbloomer_delivery_weight_display_admin_order_meta( $order ) {
echo ‘<p><strong>Delivery Date:</strong> ‘ . get_post_meta( $order->get_id(), ‘_delivery_date’, true ) . ‘</p>’;
}
评论0