Đây là code sẽ thêm lựa chọn radio điểm giao hàng (nhà phố, chung cư, công ty) và thêm thời gian giao hàng
Css
#delivery_option_field .woocommerce-input-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: 17px;
}
#delivery_option_field .woocommerce-input-wrapper input[type=radio] {
margin: 8px 0 !important;
padding: 0 !important;
width: 5%;
}
#delivery_option_field .woocommerce-input-wrapper label {
margin: 0;
padding: 0 !important;
width: 94%;
margin-left: 1%;
}
function
// Register main datetimepicker jQuery plugin script
add_action( 'wp_enqueue_scripts', 'enabling_date_time_picker' );
function enabling_date_time_picker() {
// Only on front-end and checkout page
if( is_checkout() && ! is_wc_endpoint_url() ) :
// Load the datetimepicker jQuery-ui plugin script
wp_enqueue_style('vdh_datetimepicker', get_theme_file_uri() . '/jquery.datetimepicker.min.css', array(), false, false);
wp_enqueue_script('vdh_datetimepicker', get_theme_file_uri() . '/jquery.datetimepicker.full.min.js', array('jquery'), false, false);
endif;
}
// Display custom checkout fields (+ datetime picker)
add_action('woocommerce_before_order_notes', 'display_custom_checkout_fields', 10, 1 );
function display_custom_checkout_fields( $checkout ) {
// Radio buttons field: Selected option
woocommerce_form_field( 'option_1', array(
'type' => 'radio',
'class' => array('my-field-class form-row-wide'),
'options' => array(
'nha_pho' => __('Nhà phố'),
'chung_cu' => __('Chung cư'),
'cong_ty' => __('Công ty'),
),
), 'nha_pho' );
// Define the time zone
date_default_timezone_set('Europe/Paris'); // <== Set the time zone (http://php.net/manual/en/timezones.php)
echo '<div id="my_custom_checkout_field">
<h3>'.__('Thời gian giao hàng').'</h3>';
// Hide datetimepicker container field
echo'<style> #datetimepicker_field.off,#datetimepicker_1_field.off { display:none; } </style>';
// Radio buttons field: Selected option
woocommerce_form_field( 'delivery_option', array(
'type' => 'radio',
'class' => array('my-field-class form-row-wide'),
'options' => array(
'giao_som_nhat' => __('Giao siêu tốc 60p'),
'giao_khung_gio' => __('Chọn ngày giờ'),
'dat_truoc' => __('Giao trong ngày'),
),
),'giao_som_nhat');
// DateTimePicker
woocommerce_form_field( 'delivery_giao_khung_gio', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide off'),
'id' => 'datetimepicker',
'required' => true,
'options' => array(
//Generated array goes here.
'' => __('Chọn khung giờ','woocommerce'),
)
),'');
woocommerce_form_field( 'delivery_dat_truoc', array(
'type' => 'select',
'class' => array('my-field-class form-row-wide off'),
'id' => 'datetimepicker_1',
'required' => true,
'options' => array(
//Generated array goes here.
'' => __('Chọn khung giờ','woocommerce'),
'10:00-14:00' => __('10:00 - 14:00 (Đặt trước 21h)', 'woocommerce' ),
'14:00-17:00' => __('14:00 - 17:00 (Đặt trước 10h)', 'woocommerce' ),
'17:00-20:00' => __('17:00 - 20:00 (Đặt trước 14h)', 'woocommerce' ),
)
),'');
echo '</div>';
}
// The jQuery script
add_action( 'wp_footer', 'checkout_delivery_jquery_script');
function checkout_delivery_jquery_script() {
// Only on front-end and checkout page
if( is_checkout() && ! is_wc_endpoint_url() ) :
?>
<script>
jQuery(function($){
var d = '#datetimepicker',
f = d+'_field',
r = 'input[name="delivery_option"]';
$(f).hide();
var a = '#datetimepicker_1',
b = a+'_field',
c = 'input[name="delivery_option"]';
$(b).hide();
// On radio button change
$(r).change(function(){
if( $(this).val() == 'giao_khung_gio' ){
$(f).show();
} else {
$(f).hide();
}
if( $(this).val() == 'dat_truoc' ){
$(b).show();
} else {
$(b).hide();
}
});
// Enable the datetime picker field
$(d).datetimepicker({
});
});
</script>
<?php
endif;
}
// Check that the delivery date is not empty when it's selected
add_action( 'woocommerce_checkout_process', 'check_datetimepicker_field' );
function check_datetimepicker_field() {
if ( isset($_POST['delivery_option']) && $_POST['delivery_option'] === 'giao_khung_gio'
&& isset($_POST['delivery_giao_khung_gio']) && empty($_POST['delivery_giao_khung_gio']) ) {
wc_add_notice( __( 'Lỗi: Bạn chưa chọn thời gian giao hàng', 'woocommerce' ), 'error' );
}
if ( isset($_POST['delivery_option']) && $_POST['delivery_option'] === 'dat_truoc'
&& isset($_POST['delivery_dat_truoc']) && empty($_POST['delivery_dat_truoc']) ) {
wc_add_notice( __( 'Lỗi: Bạn chưa chọn khung giờ giao hàng', 'woocommerce' ), 'error' );
}
}
// Check that the delivery date is not empty when it's selected
add_action( 'woocommerce_checkout_create_order', 'save_order_delivery_data', 10, 2 );
function save_order_delivery_data( $order, $data ) {
if ( isset($_POST['delivery_option']) && $_POST['delivery_option'] == 'giao_khung_gio' && ! empty($_POST['delivery_giao_khung_gio']) ) {
$order->update_meta_data( '_delivery_datetime', sanitize_text_field( $_POST['delivery_giao_khung_gio'] ) );
}
if( isset($_POST['delivery_option']) ) {
$order->update_meta_data( '_delivery_option', esc_attr( $_POST['delivery_option'] ) );
}
if( isset($_POST['option_1']) ) {
$order->update_meta_data( '_option_1', esc_attr( $_POST['option_1'] ) );
}
if ( isset($_POST['delivery_option']) && $_POST['delivery_option'] == 'dat_truoc' && ! empty($_POST['delivery_dat_truoc']) ) {
$order->update_meta_data( '_delivery_datetime', sanitize_text_field( $_POST['delivery_dat_truoc'] ) );
}
if( isset($_POST['delivery_option']) ) {
$order->update_meta_data( '_delivery_option', esc_attr( $_POST['delivery_option'] ) );
}
}
// Display the chosen delivery information
add_filter( 'woocommerce_get_order_item_totals', 'chosen_delivery_item_order_totals', 10, 3 );
function chosen_delivery_item_order_totals( $total_rows, $order, $tax_display ) {;
$new_total_rows = [];
// Loop through Order total lines
foreach($total_rows as $key => $total ){
// Get the chosen delivery values
$option_1 = $order->get_meta('_option_1');
$delivery_option = $order->get_meta('_delivery_option');
$delivery_datetime = $order->get_meta('_delivery_datetime');
// Display delivery information before payment method
if( ! empty($delivery_option) && 'payment_method' === $key ){
$label = empty($delivery_datetime) ? __('Giao hàng') : __('Giờ giao hàng:');
$value = empty($delivery_datetime) ? __('Giao ngay', $domain) : $delivery_datetime;
// Display 'Delivery method' line
$new_total_rows['chosen_delivery'] = array( 'label' => $label,'value' => $value );
}
$new_total_rows[$key] = $total;
}
return $new_total_rows;
}
// View fields in Edit Order Page
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_fields_value_admin_order', 10, 1 );
function display_custom_fields_value_admin_order( $order ){
// Display the delivery date
if( $option_1 = $order->get_meta('_option_1') )
echo '<p><strong>'.__('Địa điểm cụ thể').':</strong> ' . $option_1 . '</p>';
// Display the delivery option
if( $delivery_option = $order->get_meta('_delivery_option') )
echo '<p><strong>'.__('Loại giao hàng').':</strong> ' . $delivery_option . '</p>';
// Display the delivery date
if( $delivery_datetime = $order->get_meta('_delivery_datetime') )
echo '<p><strong>'.__('Thời gian giao hàng').':</strong> ' . $delivery_datetime . '</p>';
}