Trang chủ WordPressWoocommerce Tùy biến các trường dữ liệu trong WooCommerce Checkout Fields
Woocommerce

Tùy biến các trường dữ liệu trong WooCommerce Checkout Fields

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

Tuỳ biến các trường dữ liệu trong WooCommerce Checkout Fields – Đây là những bài sưu tầm và tập hợp để tuỳ biến trang thanh toán trong WooCommerce một cách hiệu quả hơn.

Loại bỏ các cổng thanh toán trong WooCommerce

Để loại bỏ và không muốn sử dụng mọi phương thức thanh toán, cách đơn giản là bạn sẽ thêm đoạn mã sau vào file functions.php của theme.

add_filter( ‘woocommerce_cart_needs_payment’, ‘__return_false’ );

Lúc này, Trang thanh toán giờ đây sẽ chỉ hiển thị nút “Place Order/Đặt hàng”.

Cấu trúc HTML của trang Thanh toán Checkout

<body class="woocommerce-checkout">
<div class="woocommerce">
<form class="woocommerce-checkout">
<div id="customer_details" class="col2-set">
<div class="woocommerce-billing-fields">
<p class="form-row">
<div class="woocommerce-shipping-fields">
<p class="form-row">
<div class="woocommerce-additional-fields">
<div id="order_review" class="woocommerce-checkout-review-order">
<table class="woocommerce-checkout-review-order-table">
<div id="payment">
<ul class="wc_payment_methods payment_methods methods">
<div class="form-row place-order">

Các trường dữ liệu trong Checkout Field

Bạn cần nắm được tên gọi của các trường dữ liệu để tùy biến:

  • Billing
    • billing_first_name
    • billing_last_name
    • billing_company
    • billing_address_1
    • billing_address_2
    • billing_city
    • billing_postcode
    • billing_country
    • billing_state
    • billing_email
    • billing_phone
  • Shipping
    • shipping_first_name
    • shipping_last_name
    • shipping_company
    • shipping_address_1
    • shipping_address_2
    • shipping_city
    • shipping_postcode
    • shipping_country
    • shipping_state
  • Account
    • account_username
    • account_password
    • account_password-2
  • Order
    • order_comments

Giá trị của các trường dữ liệu:

  • type – type of field (text, textarea, password, select)
  • label – label for the input field
  • placeholder – placeholder for the input
  • class – class for the input
  • required – true or false, whether or not the field is require
  • clear – true or false, applies a clear fix to the field/label
  • label_class – class for the label element
  • options – for select boxes, array of options (key => value pairs)

Trong trường hợp bạn muốn sử dụng woocommerce_default_address_fields filter. Filter này sẽ áp dụng cho cả billing và shipping:

  • country
  • first_name
  • last_name
  • company
  • address_1
  • address_2
  • city
  • state
  • postcode

Xóa 1 trường dữ liệu trong trang Thanh toán (Remove a checkout field)

Bạn chọn tên checkout field muốn unset (muốn ẩn, xóa). Checkout field muốn giữ thì bạn thêm dấu // phía trước hoặc xóa dòng code unset đó đi. Bạn xem code và nhớ đọc 1 lưu ý quan trọng ngay phía dưới.

 /**
 Remove all possible fields
 **/
function wc_remove_checkout_fields( $fields ) {

    // Billing fields
    unset( $fields['billing']['billing_company'] );
    unset( $fields['billing']['billing_email'] );
    unset( $fields['billing']['billing_phone'] );
    unset( $fields['billing']['billing_state'] );
    unset( $fields['billing']['billing_first_name'] );
    unset( $fields['billing']['billing_last_name'] );
    unset( $fields['billing']['billing_address_1'] );
    unset( $fields['billing']['billing_address_2'] );
    unset( $fields['billing']['billing_city'] );
    unset( $fields['billing']['billing_postcode'] );

    // Shipping fields
    unset( $fields['shipping']['shipping_company'] );
    unset( $fields['shipping']['shipping_phone'] );
    unset( $fields['shipping']['shipping_state'] );
    unset( $fields['shipping']['shipping_first_name'] );
    unset( $fields['shipping']['shipping_last_name'] );
    unset( $fields['shipping']['shipping_address_1'] );
    unset( $fields['shipping']['shipping_address_2'] );
    unset( $fields['shipping']['shipping_city'] );
    unset( $fields['shipping']['shipping_postcode'] );

    // Order fields
    unset( $fields['order']['order_comments'] );

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

Thay đổi trường dữ liệu từ bắt buộc sang Không Bắt Buộc (Make a required field not required)

Đoạn code dưới đây sẽ minh họa cho trường dữ liệu Billing Phone

add_filter( 'woocommerce_billing_fields', 'wc_unrequire_wc_phone_field');
function wc_unrequire_wc_phone_field( $fields ) {
$fields['billing_phone']['required'] = false;
return $fields;
}

Giá trị false là không bắt buộc, nếu bạn muốn chuyển sang bắt buộc thì sửa thành true.

Thay đổi tên gọi và chú thích của trường dữ liệu (Change input field labels and placeholders)

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');
function custom_override_checkout_fields($fields)
 {
 unset($fields['billing']['billing_address_2']);
 $fields['billing']['billing_company']['placeholder'] = 'Business Name';
 $fields['billing']['billing_company']['label'] = 'Business Name';
 $fields['billing']['billing_first_name']['placeholder'] = 'First Name'; 
 $fields['shipping']['shipping_first_name']['placeholder'] = 'First Name';
 $fields['shipping']['shipping_last_name']['placeholder'] = 'Last Name';
 $fields['shipping']['shipping_company']['placeholder'] = 'Company Name'; 
 $fields['billing']['billing_last_name']['placeholder'] = 'Last Name';
 $fields['billing']['billing_email']['placeholder'] = 'Email Address ';
 $fields['billing']['billing_phone']['placeholder'] = 'Phone ';
 return $fields;
 }

Thêm 1 trường dữ liệu trong Billing và Shipping (Adding Custom Shipping And Billing Fields)

Bạn sử dụng hook woocommerce_checkout_fields để viết filter. Phương pháp này khác với bài viết trên BusinessBloomer website.

Đoạn code minh họa phía dưới áp dụng cho trường dữ liệu shipping_phone

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function – $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
     $fields['shipping']['shipping_phone'] = array(
        'label'     => __('Phone', 'woocommerce'),
    'placeholder'   => _x('Phone', 'placeholder', 'woocommerce'),
    'required'  => false,
    'class'     => array('form-row-wide'),
    'clear'     => true
     );

     return $fields;
}

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

function my_custom_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('Phone From Checkout Form').':</strong> ' . get_post_meta( $order->get_id(), '_shipping_phone', true ) . '</p>';
}

Thêm 1 trường dữ liệu lớn (Adding a Custom Special Field)

/* Add the field to the checkout */
add_action( 'woocommerce_after_order_notes', 'thangoi_my_custom_checkout_field' );

function thangoi_my_custom_checkout_field( $checkout ) {

    echo '<div id="thangoi_my_custom_checkout_field"><h2>' . __('My Field') . '</h2>';

    woocommerce_form_field( 'my_field_name', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Fill in this field'),
        'placeholder'   => __('Enter something'),
        ), $checkout->get_value( 'my_field_name' ));

    echo '</div>';

}

Tiếp theo, bạn cần xác thực trường khi biểu mẫu thanh toán được đăng. Đối với ví dụ này, trường là bắt buộc và không phải là tùy chọn:

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

function thangoi_my_custom_checkout_field_process() {
    // Check if set, if its not set add an error.
    if ( ! $_POST['my_field_name'] )
        wc_add_notice( __( 'Vui lòng nhập nội dung vào ô. Không nên để trống' ), 'error' );
}

Sửa tiêu đề Field (Label)

Để sửa tiêu đề hay còn gọi là label bạn có dùng đoạn code dưới đây

add_filter( 'woocommerce_checkout_fields' , 'thangoi_wc_checkout_field_change_label', 9999999 );
function thangoi_wc_checkout_field_change_label( $fields ) {
    //Tìm và thay đổi giá trị của label như bên dưới
    $fields['billing']['billing_first_name']['label'] = 'Tên khách hàng';   
    
    return $fields;
}

Thay đổi vị trí và thứ tự của các Field (Prioriry)

Bạn hoàn toàn có thể điều khiển thứ tự các trường lại theo ý muốn của mình. Trước khi làm điều đó tôi muốn cho các bạn biết thứ tự mặc định hay còn gọi là Priority mà WooCommerce qui định.

  • First name – 10
  • Last name – 20
  • Company name – 30
  • Country – 40
  • Street address – 50
  • Apartment, suite, unit etc. (optional) – 60
  • Town / City – 70
  • State – 80
  • Postcode / ZIP – 90
  • Phone – 100
  • Email – 110

Sử dụng đoạn code sau để thay đổi thứ tự của các field

add_filter( 'woocommerce_checkout_fields' , 'thangoi_sort_checkout_fields', 9999999 );
function thangoi_sort_checkout_fields( $fields ) {
    $fields['billing']['billing_email']['priority'] = 22;
    $fields['billing']['billing_phone']['priority'] = 23;
    return $fields;
}

Xoá hoặc ẩn một trường Field

add_filter( 'woocommerce_checkout_fields' , 'thangoi_required_checkout_fields', 9999999 );
function thangoi_required_checkout_fields( $fields ) {
    $fields['billing_phone']['required'] = false; // true nếu muốn bắt buộc nhập
    //Làm tương tự cho các trường khác//
    return $fields;
}

Bài viết sưu tầm phục vụ cho mục đích cá nhân. Thanks!

Là một người đam mê mọi thứ nhưng thứ gì cũng không ra thứ gì.

Bài viết liên quan

Hướng dẫn chuyển 0đ thành chữ “Liên hệ”...

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

Di chuyển Order Notes trên trang thanh toán...

Thay đổi nút Add to cart trong Woocommerce

Thay đổi kích thước ảnh sản phẩm Woocommerce...

Điều chỉnh lại Trang thanh toán trong WooComerce

Custom CSS Checkout Woocommerce Thành 2 Column

Tổng hợp các hàm hiển thị dữ liệu...

Bình luận

Save my name, email, and website in this browser for the next time I comment.