Hướng dẫn chỉnh sửa trang checkout Woocommerce – Thêm thời gian giao hàng

Trang checkout (tức trang thanh toán) của Woocommerce mặc định có thể có 1 số trường dữ liệu mà chúng ta không dùng tới, hay là có những trường dữ liệu ở đó nó không có mà chúng ta lại muốn sử dụng thì phải làm thế nào.

Trong bài viết này tôi sẽ hướng dẫn cho mọi người cách để có thể xóa đi các trường không sử dụng trong trang checkout mặc định của Woocommerce. Và sau đó tôi sẽ hướng dẫn cách thêm mới một hay nhiều custum field (trường dữ liệu) mà bạn muốn sử dụng vào trang checkout này. Cụ thể là thêm ngày giao hàng, giờ giao hàng. Thông điệp thêm ngoài ghi chú.

1. Xóa trường dữ liệu không sử dụng

Ở VD trên tôi muốn xóa các trường ko cần thiết đối với tôi như: Company , Country , City , state.

Để làm được điều đó ta cần viết đoạn code sau vào file function.php trong theme bạn đang dùng.

//bo cac truong trong thanh toan
add_filter( 'woocommerce_checkout_fields' , 'bbloomer_remove_billing_postcode_checkout' );
 
function bbloomer_remove_billing_postcode_checkout( $fields ) {
  unset($fields['billing']['billing_postcode']);
  unset($fields['billing']['billing_company']);
  unset($fields['billing']['billing_country']);
  unset($fields['billing']['billing_city']);

  
  unset($fields['shipping']['shipping_postcode']);
  unset($fields['shipping']['shipping_company']);
  unset($fields['shipping']['shipping_country']);
  unset($fields['shipping']['shipping_city']);
  return $fields;
}

Trong đó $fields[‘billing’] là trong phần thông tin của người thanh toán, $fields[‘shipping’] là thông tin người nhận hàng (đối với người dùn nhận hàng ko phải là người thanh toán).

Sau khi thực hiện ta sẽ được như sau:

2. Thêm trường chọn ngày giao hàng

Trước tiên để có thể sử dụng được chức năng datepicker này ta cần kích hoạt nó. Tất cả những đoạn code sau đây chúng ta điều làm việc trong file function.php ở theme mà mọi người đang sài.

// Register main datepicker jQuery plugin script
add_action( 'wp_enqueue_scripts', 'enabling_date_picker' );
function enabling_date_picker() {

    // Only on front-end and checkout page
    if( is_admin() || ! is_checkout() ) return;

    // Load the datepicker jQuery-ui plugin script
    wp_enqueue_script( 'jquery-ui-datepicker' );
}

Sau khi đăng ký sử dụng chức năng datepicker xong nó đã hoạt động và chúng ta cần thêm trường dữ liệu thời gian giao hàng vào bằng đoạn code sau:

// Call datepicker functionality in your custom text field
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field', 10, 1);
function my_custom_checkout_field( $checkout ) {

    date_default_timezone_set('America/Los_Angeles');
    $mydateoptions = array('' => __('Select PickupDate', 'woocommerce' ));

    echo '<div id="my_custom_checkout_field">
    <h3>'.__('Thời Gian Giao Hàng').'</h3>';

    // YOUR SCRIPT HERE BELOW 
    echo '
    <script>
        jQuery(function($){
            $("#datepicker").datepicker();
        });
    </script>';

   woocommerce_form_field( 'order_pickup_date', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'id'            => 'datepicker',
        'required'      => true,
        'label'         => __('Ngày Giao Hàng'),
        'placeholder'       => __('Chọn Ngày'),
        'options'     =>   $mydateoptions
        ),$checkout->get_value( 'order_pickup_date' ));

    echo '</div>';
}

Tiếp tục là khâu báo lỗi nếu phần này không được chọn (tức để trống), bởi vì ở trên ta khai báo required=true nên sẽ đòi khỏi khâu này, nếu ta thấy cái này ko thực sự cần thiết và ko ép người dùng phải chọn thì sửa thành required=false và bỏ qua bước xử lý lỗi này.

/**
 * Process the checkout
 */
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
    // Check if set, if its not set add an error.
    if ( ! $_POST['order_pickup_date'] )
        wc_add_notice( __( 'Vui lòng chọn thời gian cần giao hàng' ), 'error' );
}

Tiếp theo cần lưu lại những dữ liệu này vào đơn hàng sau khi người dùng đặt hàng

/**
 * Update the order meta with field value
 */
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );

function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['order_pickup_date'] ) ) {
        update_post_meta( $order_id, 'Ngày Giao', sanitize_text_field( $_POST['order_pickup_date'] ) );
    }
}

Hiển thị trên trang xem và sửa đơn hàng trong admin

/**
 * Display field value on the order edit page
 */
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

function my_custom_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('Ngày Giao').':</strong> ' . get_post_meta( $order->id, 'Ngày Giao', true ) . '</p>';
}

Hiển thị trên trang báo đơn hàng thành công cho khách hàng

// display in userfronend

add_action( 'woocommerce_order_details_after_order_table', 'custom_order_details_after_order_table', 10, 1 );
function custom_order_details_after_order_table( $order ) {
    ?>
	<h2><?php _e( 'Thời gian và thông điệp' ); ?></h2>
    <table class="shop_table shop_table_responsive additional_info">
        <tbody>
            <tr>
                <th><?php _e( 'Ngày Giao:' ); ?></th>
                <td><?php echo get_post_meta( $order->id, 'Ngày Giao', true ); ?></td>
            </tr>
            
        </tbody>
    </table>

    <?php 

}

Vâng với tất cả những gì hướng dẫn ở trên chúng ta đã xử lý được việc thêm mới trường chọn ngày giao hàng, mình thấy đây là một tính năng khá quan trọng trong bán hàng online bởi vì có nhiều khách hàng rất cần. Tiếp theo mình sẽ hướng dẫn việc thêm giờ giao hàng, tặng cho ai, nhân dịp gì (những trường này là dropdown field) và một trường thông điệp cần gửi (trường này là textarea field) giống như trang web mình làm cho khách hàng là Hoa thiên hương  đây là một trang web shop hoa tươi online chuyên phục vụ tất cả các loại hoa tươi giao hàng tận nơi rất tốt, các bạn hãy sử dụng nhân dịp lễ này nhé :), sẵn đó test chức năng này giúp mình, nhớ đặt xong phải lấy hàng nhà, không là chủ shop buồn lắm đó.

3. Thêm các trường Dropdown và texterea vào checkout

Cũng giống như trên tất cả đều làm trong file function.php hết nhé

3.1 Add 4 trường giờ giao, tặng cho ai, nhân dịp gì, thông điệp vào một lần

// Add giờ giao
function cloudways_custom_checkout_fields($fields){
    $fields['cloudways_extra_fields'] = array(
            'cloudways_dropdown' => array(
                'type' => 'select',
                'options' => array( '' => __( 'Vui lòng chọn' ), '7h' => __( '7h' ), '8h' => __( '8h' ), '9h' => __( '9h' ),'10h' => __( '10h' ),'11h' => __( '11h' ),'12h' => __( '12h' ),'13h' => __( '13h' ),'14h' => __( '14h' ),'15h' => __( '15h' ),'16h' => __( '16h' ),'17h' => __( '17h' ),'18h' => __( '18h' ),'19h' => __( '19h' ),'20h' => __( '20h' ) ),
                'required'      => true,
                'label' => __( 'Giờ Giao' )
                ),
            'cloudways_dropdown_1' => array(
                'type' => 'select',
                'options' => array( '' => __( 'Vui lòng chọn' ), 'Bạn Bè' => __( 'Bạn Bè' ), 'Người Yêu' => __( 'Người Yêu' ), 'Vợ' => __( 'Vợ' ),'Chồng' => __( 'Chồng' ),'Đồng Nghiệp' => __( 'Đồng Nghiệp' ), 'Ba, Mẹ' => __( 'Ba, Mẹ' ),'Đối Tác, Khách Hàng' => __( 'Đối Tác, Khách Hàng' ),'Anh, Chị, Em' => __( 'Anh, Chị, Em' ),'Đối tượng khác' => __( 'Đối tượng khác' ) ),
                'required'      => true,
                'label' => __( 'Tặng cho' )
                ),
            'cloudways_dropdown_2' => array(
                'type' => 'select',
                'options' => array( '' => __( 'Vui lòng chọn' ), 'Sinh nhật' => __( 'Sinh nhật' ), 'Ngày kỉ niệm' => __( 'Ngày kỉ niệm' ), 'Làm quen' => __( 'Làm quen' ),'Khai trương' => __( 'Khai trương' ),'Chúc mừng' => __( 'Chúc mừng' ), 'Chia buồn' => __( 'Chia buồn' ),'Cảm ơn' => __( 'Cảm ơn' ),'Ngày lễ' => __( 'Ngày lễ' ),'Mừng thọ' => __( 'Mừng thọ' ),'Xin lỗi' => __( 'Xin lỗi' ),'Dịp khác' => __( 'Dịp khác' ) ),
                'required'      => true,
                'label' => __( 'Nhân dịp' )
                ),
            'cloudways_text_field' => array(
                'type' => 'textarea',
                'required'      => false,
                'label' => __( 'Nội Dung Thiệp - Banner' )
                )
            );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'cloudways_custom_checkout_fields' );

function cloudways_extra_checkout_fields(){

    $checkout = WC()->checkout(); ?>

    <div class="extra-fields">

    <?php
       foreach ( $checkout->checkout_fields['cloudways_extra_fields'] as $key => $field ) : ?>

            <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

        <?php endforeach; ?>
    </div>

<?php }
add_action( 'woocommerce_checkout_after_customer_details' ,'cloudways_extra_checkout_fields' );

Ở phần 2 mình chỉ hướng dẫn thêm 1 trường 1 lần, trong phần này là nhiều trường 1 lần, các bạn cứ làm như trên, thay bằng các trường mình cần dùng, có thể thêm hoặc xóa bớt tùy ý, theo đúng cú pháp trên là được. Mỗi trường sẽ nằm trong 1 mảng. Thêm thì thêm mảng, xóa thì xóa mảng…

3.2 Lưu lại dữ liệu

// Lưu dữ liệu
function cloudways_save_extra_checkout_fields( $order_id, $posted ){
    // don't forget appropriate sanitization if you are using a different field type
    if( isset( $posted['cloudways_text_field'] ) ) {
        update_post_meta( $order_id, '_cloudways_text_field', sanitize_text_field( $posted['cloudways_text_field'] ) );
    }
    if( isset( $posted['cloudways_dropdown'] ) && in_array( $posted['cloudways_dropdown'], array( '7h', '8h', '9h','10h','11h','12h','13h','14h','15h','16h','17h','18h','19h','20h') ) ) {
        update_post_meta( $order_id, '_cloudways_dropdown', $posted['cloudways_dropdown'] );
    }
    if( isset( $posted['cloudways_dropdown_1'] ) && in_array( $posted['cloudways_dropdown_1'], array( 'Bạn Bè', 'Người Yêu', 'Vợ','Chồng','Đồng Nghiệp', 'Ba, Mẹ','Đối Tác, Khách Hàng' ,'Anh, Chị, Em','Đối tượng khác') ) ) {
        update_post_meta( $order_id, '_cloudways_dropdown_1', $posted['cloudways_dropdown_1'] );
    }
    if( isset( $posted['cloudways_dropdown_2'] ) && in_array( $posted['cloudways_dropdown_2'], array( 'Sinh nhật', 'Ngày kỉ niệm', 'Làm quen','Khai trương','Chúc mừng', 'Chia buồn','Cảm ơn','Ngày lễ','Mừng thọ','Xin lỗi','Dịp khác') ) ) {
        update_post_meta( $order_id, '_cloudways_dropdown_2', $posted['cloudways_dropdown_2'] );
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'cloudways_save_extra_checkout_fields', 10, 2 );

3.3 Hiển thị trong admin phần đơn hàng

// hiển thị trong admin
function cloudways_display_order_data_in_admin( $order ){  ?>
        <p>....</p>

        
        <div class="address">
        <?php
            echo '<p><strong>' . __( 'Nội dung thiệp' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_text_field', true ) . '</p>';
            echo '<p><strong>' . __( 'Giờ giao' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_dropdown', true ) . '</p>';

            echo '<p><strong>' . __( 'Tặng cho' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_dropdown_1', true ) . '</p>';
            echo '<p><strong>' . __( 'Nhân dịp' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_dropdown_2', true ) . '</p>';
             ?>

        </div>
        
    
<?php }
add_action( 'woocommerce_admin_order_data_after_order_details', 'cloudways_display_order_data_in_admin' );

3.4 Hiển thị ra user front-end trang báo thành công

// hiển thị dữ liệu ra page checkout
function cloudways_display_order_data( $order_id ){  ?>
    <table class="shop_table shop_table_responsive additional_info">
        <tbody>
            <tr>
                <th style="width:30%"><?php _e( 'Giờ giao hàng:' ); ?></th>
                <td><?php echo get_post_meta( $order_id, '_cloudways_dropdown', true ); ?></td>
            </tr>
            <tr>
                <th><?php _e( 'Tặng cho:' ); ?></th>
                <td><?php echo get_post_meta( $order_id, '_cloudways_dropdown_1', true ); ?></td>
            </tr>
            <tr>
                <th><?php _e( 'Nhân dịp:' ); ?></th>
                <td><?php echo get_post_meta( $order_id, '_cloudways_dropdown_2', true ); ?></td>
            </tr>
            <tr>
                <th><?php _e( 'Thông điệp:' ); ?></th>
                <td><?php echo get_post_meta( $order_id, '_cloudways_text_field', true ); ?></td>
            </tr>
            
            
        </tbody>
    </table>
<?php }
add_action( 'woocommerce_thankyou', 'cloudways_display_order_data', 20 );
add_action( 'woocommerce_view_order', 'cloudways_display_order_data', 20 );

3.5 Thêm tất cả các trường trên vào email gửi cho khách và cho quản trị

Một phần nữa khá quan trọng đó là phải thêm tất cả các trường trên để gửi email cho khách và quản trị viên để xem đơn hàng.

// gửi mail
function cloudways_email_order_meta_fields( $fields, $sent_to_admin, $order ) {
    $fields['thiep'] = array(
                'label' => __( 'Nội dung thiệp' ),
                'value' => get_post_meta( $order->id, '_cloudways_text_field', true ),
            );
    $fields['giogiao'] = array(
                'label' => __( 'Giờ giao' ),
                'value' => get_post_meta( $order->id, '_cloudways_dropdown', true ),
            );
    $fields['ngaygiao'] = array(
                'label' => __( 'Ngày giao' ),
                'value' => get_post_meta( $order->id, 'Ngày Giao', true ),
            );
    $fields['tangcho'] = array(
                'label' => __( 'Tặng cho' ),
                'value' => get_post_meta( $order->id, '_cloudways_dropdown_1', true ),
            );
    $fields['nhandip'] = array(
                'label' => __( 'Nhân dịp' ),
                'value' => get_post_meta( $order->id, '_cloudways_dropdown_2', true ),
            );
    return $fields;
}
add_filter('woocommerce_email_order_meta_fields', 'cloudways_email_order_meta_fields', 10, 3 );

Bài hướng dẫn đến đây là kết thúc, nếu thấy hay hãy share cho mọi người cùng xem để mình có tinh thần viết tiếp nhé. Cảm ơn nhiều.