Hướng dẫn thêm/xóa các fields trong trang Check-out của Woocommerce

(Thao Marky’s Productions) Woocommerce là 1 plugin hỗ trợ cho chúng ta trong việc tạo 1 website bán hàng với đầy đủ các tính năng cần thiết và nâng cao. Tuy nhiên có khá nhiều chức năng mà chúng ta không sử dụng đến.

Trong bài viết này Thao Marky hướng dẫn các bạn thêm/xóa các Fields trong trang check out sử dụng Woocommerce của WordPress

1. Xóa 1 Custom Fields bất kì

Mặc định trang Checkout của Woocommerce sẽ cho ta rất nhiều trường (mục) để khách hàng nhập vào khi Order sản phẩm như:

* Phần thông tin người mua

lựa chọn quốc gia
Họ tên
Tên công ty
Địa chỉ (2 dòng)
Thành phố
Mã Zip Code
Email
Số điện thoại

* Phần thông tin địa chỉ Ship hàng (nếu khác với địa chỉ người mua)

Phần này cũng giống phần ở trên nhưng bổ sung thêm 1 trường là Order Notes (ghi chú thêm của người mua hoặc sản phẩm)

Để giảm bớt số mục cần phải nhập của Khách hàng (những phần không cần dùng đến), chúng ta nên remove (xóa bỏ) đi trong Code. Ví dụ mình muốn xóa phần Order comments (thông tin thêm về đơn hàng).

Remove Order Notes in Checkout Woocommerce

Để thực hiện điều này bạn vào file functions.php và Paste đoạn code này vào

/*Remove Custom Fields in Checkout Woocommerce*/ // 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 ) { unset($fields[‘order’][‘order_comments’]); return $fields; }

Remove Custom Fields in Checkout Woocommerce

Để xóa các phần khác ta cũng làm tương tự, ví dụ mình muốn xóa dòng địa chỉ thứ 2 trong phần địa chỉ của cả mục Billing và Shipping ta thêm 2 dòng này vào dưới dòng

unset($fields[‘order’][‘order_comments’]);

unset($fields[‘billing’][‘billing_address_2’]); unset($fields[‘shipping’][‘shipping_address_2’]);

Lưu lại và ra trang checkout để xem kết quả.

2. Thêm 1 Custom Fields mới

Với mỗi website bán hàng thì người bán lại muốn có thêm các mục cần thu thập thông tin từ khách hàng để phục vụ cho việc giao hàng hoặc hậu mãi sau bán hàng. Để thêm 1 mục nào vào trang thanh toán thì ta mở file functions.php ra và làm như sau

/** * Add the field to the checkout **/ add_action(‘woocommerce_after_order_notes’, ‘my_custom_checkout_field’); function my_custom_checkout_field( $checkout ) { echo ‘<div id=”my_custom_checkout_field”><h3>’.__(‘Field Test’).'</h3>’; 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>’; } /** * Process the checkout **/ add_action(‘woocommerce_checkout_process’, ‘my_custom_checkout_field_process’); function my_custom_checkout_field_process() { global $woocommerce; // Check if set, if its not set add an error. if (!$_POST[‘my_field_name’]) $woocommerce->add_error( __(‘Please enter something into this new shiny field.’) ); } /** * 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 ($_POST[‘my_field_name’]) update_post_meta( $order_id, ‘Field Test’, esc_attr($_POST[‘my_field_name’])); }

Lưu lại và ra trang checkout xem kết quả, đã hiển thị 1 Field mới tên là Field Test rồi đúng ko nào?

Insert New Customs Fields in Checkout Woocommerce

Như vậy, các bạn có thể tạo thêm bất kì phần nào để phục vụ cho việc bán hàng của mình chỉ với vài dòng code như trên. Những chỗ bạn cần thay là những chỗ in đậm dưới đây.

echo ‘<div id=”my_custom_checkout_field”><h3>’.__(‘Field Test‘).'</h3>’; ‘label’ => __(‘Fill in this field‘), ‘placeholder’ => __(‘Enter something‘), if ($_POST[‘my_field_name’]) update_post_meta( $order_id, ‘Field Test‘, esc_attr($_POST[‘my_field_name’]));

Tìm trên Google