Trang chủ WordPressWoocommerce Thêm trường Datepicker trong thanh toán của Woocommerce

Thêm trường Datepicker trong thanh toán của Woocommerce

bởi Thắng ơi!
1,1K lượt xem

Trong phần thanh toán của Woocommerce, bạn muốn thêm một field về thời gian để đón khách hoặc thời gian để trả hàng cho khách thì hãy làm theo những bức này nhé!

1. Gọi jQuery UI Datepicker

/* Gọi jQuery UI Datepicker */
add_action( 'wp_enqueue_scripts', 'thangoi_datepicker' );
function thangoi_datepicker() {
    if( is_admin() || ! is_checkout() ) return;
    wp_enqueue_script( 'jquery-ui-datepicker' );
}

2. Gọi thư viện jQuery Datepicker

/* Gọi Thư Viện jQuery datepicker */
add_action( 'wp_head', 'thangoi_add_this_script_header' );
function thangoi_add_this_script_header(){
?>
    <script>
        //Add new datepicker
        jQuery(document).ready(function(){
            jQuery('.thangoi-datepicker input').datepicker({ dateFormat: 'dd/mm/yy' });
        });
    </script>
<?php
}

3. Làm mới dữ liệu Field

/* Làm dữ liệu Field mới */
add_action( 'woocommerce_checkout_update_order_meta', 'thangoi_custom_checkout_field_update_order_meta' );
function thangoi_custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['thangoi_my_date'] ) ) {
        update_post_meta( $order_id, 'thangoi_my_date', sanitize_text_field( $_POST['thangoi_my_date'] ) );
    }
}

4. Thêm Field DatePicker vào phần Billing trang thanh toán Woocommerce

/* Thêm 1 field datepicker vào phần billing trang thanh toán */
add_filter( 'woocommerce_checkout_fields' , 'thangoi_add_custom_checkout_field', 9999999 );
function thangoi_add_custom_checkout_field( $fields ) {
    //Tạo Field mới
    $fields['billing']['thangoi_my_date'] = array(
        'label'     => __('Ngày khởi hành', 'woocommerce'),
        'placeholder'   => date('d/m/Y'),
        'required'  => true, // Bắt buộc nhập hay không
        'class'     => array('form-row-last thangoi-datepicker'),
        'clear'     => true,
        'priority'  => 20    // Thứ tự field trong cùng 1 nhóm
      );
    return $fields;
}

5. Kiểm tra trường bắt buộc required

   /* Kiểm tra trường bắt buộc true, nếu false thì bỏ qua */
    add_action('woocommerce_checkout_process', 'thangoi_checkout_field_process_save');
    function thangoi_checkout_field_process_save() {
        if ( ! $_POST['thangoi_my_date'] )
            wc_add_notice( __( 'Vui lòng nhập nội dung trước khi nhấn thanh toán nhé.' ), 'error' );
    }

Bài viết được tập hợp và chỉnh sửa từ nhiều nguồn khác nhau. Cám ơn đã theo dõi!

Bài viết liên quan

Bình luận