Ẩn trường thông tin trong trang thanh toán của WooCommerce là một trong những yêu cầu phổ biến nhất khi tùy chỉnh shop online. Mặc định WooCommerce hiển thị khá nhiều trường thông tin như Họ, Tên, Công ty, Địa chỉ 1, Địa chỉ 2, Thành phố, Tỉnh/Thành, Mã bưu điện, Quốc gia. Tuy nhiên không phải shop nào cũng cần tất cả các trường này, đặc biệt là các shop bán hàng nội địa chỉ cần giao trong một thành phố. Trong bài viết này, mình sẽ hướng dẫn bạn cách ẩn các trường không cần thiết trên trang checkout WooCommerce bằng cả code lẫn plugin.
Hiểu về cấu trúc Checkout Fields trong WooCommerce
Trước khi ẩn các trường, bạn cần hiểu cấu trúc của checkout fields trong WooCommerce. Các trường thanh toán được chia thành 3 nhóm chính:
Billing fields ($fields['billing']): Các trường thông tin hóa đơn bao gồm first_name, last_name, company, country, address_1, address_2, city, state, postcode, phone, email. Đây là nhóm thường được ẩn nhiều nhất.
Shipping fields ($fields['shipping']): Các trường thông tin giao hàng, cấu trúc tương tự billing nhưng dùng cho địa chỉ nhận hàng.
Account fields ($fields['account']): Các trường liên quan đến tài khoản khách hàng như username, password. Thường hiển thị khi khách chọn đăng ký tài khoản mới ở trang checkout.
Order fields ($fields['order']): Các trường bổ sung cho đơn hàng như order_comments (ghi chú đơn hàng).
WooCommerce cho phép bạn tùy chỉnh tất cả các nhóm này thông qua filter woocommerce_checkout_fields.
Cách 1: Ẩn bằng code (Khuyên dùng)
Cách nhanh nhất và tiết kiệm chi phí nhất là thêm code trực tiếp vào file functions.php. Dưới đây là đoạn code mình hay dùng, bạn có thể thêm hoặc bớt các dòng unset tùy theo nhu cầu:
/**
* Ẩn các trường checkout không cần thiết
* Thêm vào file functions.php của child theme
*/
add_filter( 'woocommerce_checkout_fields', 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
// Ẩn các trường Billing (thông tin hóa đơn)
unset($fields['billing']['billing_last_name']); // Ẩn họ
unset($fields['billing']['billing_postcode']); // Ẩn mã bưu điện
unset($fields['billing']['billing_state']); // Ẩn tỉnh/thành
unset($fields['billing']['billing_city']); // Ẩn thành phố
unset($fields['billing']['billing_address_2']); // Ẩn địa chỉ dòng 2
unset($fields['billing']['billing_company']); // Ẩn tên công ty
unset($fields['billing']['billing_country']); // Ẩn quốc gia
// Ẩn các trường Shipping (thông tin giao hàng)
unset($fields['shipping']['shipping_postcode']); // Ẩn mã bưu điện
unset($fields['shipping']['shipping_country']); // Ẩn quốc gia
return $fields;
}Giải thích code: Hàm custom_override_checkout_fields nhận mảng $fields chứa tất cả các trường checkout. Mỗi dòng unset() sẽ xóa một trường cụ thể khỏi mảng. Bạn có thể comment out (thêm // trước dòng) các trường muốn giữ lại thay vì ẩn.
Danh sách đầy đủ các trường có thể ẩn
Ngoài các trường trong đoạn code trên, bạn còn có thể ẩn thêm các trường sau nếu cần:
// Các trường Billing bổ sung có thể ẩn
unset($fields['billing']['billing_first_name']); // Tên
unset($fields['billing']['billing_phone']); // Số điện thoại
unset($fields['billing']['billing_email']); // Email
unset($fields['billing']['billing_address_1']); // Địa chỉ dòng 1
// Các trường Shipping bổ sung có thể ẩn
unset($fields['shipping']['shipping_first_name']); // Tên
unset($fields['shipping']['shipping_last_name']); // Họ
unset($fields['shipping']['shipping_company']); // Công ty
unset($fields['shipping']['shipping_address_1']); // Địa chỉ dòng 1
unset($fields['shipping']['shipping_address_2']); // Địa chỉ dòng 2
unset($fields['shipping']['shipping_city']); // Thành phố
unset($fields['shipping']['shipping_state']); // Tỉnh/Thành
// Ẩn trường ghi chú đơn hàng
unset($fields['order']['order_comments']);Đổi nhãn (label) thay vì ẩn hoàn toàn
Nếu bạn không muốn ẩn trường mà chỉ muốn đổi nhãn hiển thị, bạn có thể dùng code sau:
/**
* Đổi nhãn các trường checkout
*/
add_filter( 'woocommerce_checkout_fields', 'custom_label_checkout_fields' );
function custom_label_checkout_fields( $fields ) {
// Đổi nhãn Tỉnh/Thành
$fields['billing']['billing_state']['label'] = 'Khu vực';
// Đổi nhãn placeholder
$fields['billing']['billing_city']['placeholder'] = 'Chọn thành phố của bạn';
return $fields;
}Đặt trường là Required hoặc Optional
Bạn cũng có thể thay đổi thuộc tính required của một trường mà không cần ẩn nó:
/**
* Thay đổi required của trường checkout
*/
add_filter( 'woocommerce_checkout_fields', 'custom_required_checkout_fields' );
function custom_required_checkout_fields( $fields ) {
// Đặt Company thành không bắt buộc
$fields['billing']['billing_company']['required'] = false;
// Đặt Phone thành bắt buộc
$fields['billing']['billing_phone']['required'] = true;
return $fields;
}Cách 2: Ẩn bằng plugin (Dành cho người không rành code)
Nếu bạn không muốn can thiệp vào code, có thể dùng plugin để quản lý checkout fields thông qua giao diện trực quan. Dưới đây là các plugin phổ biến:
1. WooCommerce Checkout Field Editor Pro: Đây là plugin chính thức từ WooCommerce (plugin này có phí). Nó cho phép bạn ẩn, thêm, sắp xếp lại thứ tự, đổi nhãn và thêm validation cho tất cả các trường checkout thông qua giao diện drag-and-drop. Nếu khách hàng của bạn cần thay đổi checkout fields thường xuyên và sẵn sàng trả phí, đây là lựa chọn tốt nhất.
2. Checkout Manager for WooCommerce (Miễn phí): Plugin miễn phí trên WordPress.org cho phép ẩn, thêm, đổi tên các trường checkout. Phiên bản Pro có thêm nhiều tính năng như conditional logic, field types, v.v.
3. WooCommerce Checkout Add-ons: Plugin chính thức khác từ WooCommerce, cho phép thêm các trường bổ sung và phí tùy chỉnh vào trang checkout.
Cách 3: Ẩn bằng CSS (Nhanh nhất nhưng không triệt để)
Nếu bạn chỉ muốn ẩn trường khỏi giao diện mà không muốn xóa nó khỏi form (ví dụ: trường vẫn được submit nhưng không hiển thị), bạn có thể dùng CSS:
/* Ẩn trường bằng CSS - Thêm vào Additional CSS */
.woocommerce form .form-row.billing_last_name {
display: none;
}
.woocommerce form .form-row.billing_company {
display: none;
}
.woocommerce form .form-row.billing_state {
display: none;
}Lưu ý quan trọng: Ẩn bằng CSS chỉ ẩn trường khỏi giao diện, nhưng trường vẫn nằm trong DOM HTML và có thể được submit. Nếu trường đó có thuộc tính required, trình duyệt vẫn có thể báo lỗi validation. Do đó, CSS chỉ phù hợp cho các trường đã được set thành không bắt buộc. Cách dùng unset() bằng PHP là phương pháp triệt để và đúng chuẩn nhất.
Thêm custom fields vào trang Checkout
Besides hiding fields, bạn cũng có thể thêm trường custom vào trang checkout. Ví dụ thêm trường ghi chú giao hàng:
/**
* Thêm custom field vào trang checkout
*/
add_action( 'woocommerce_after_checkout_billing_form', 'custom_checkout_field' );
function custom_checkout_field( $checkout ) {
echo '';
woocommerce_form_field(
'delivery_time',
array(
'type' => 'select',
'class' => array('form-row-wide'),
'label' => __('Thời gian giao hàng mong muốn', 'woocommerce'),
'options' => array(
'' => 'Chọn thời gian...',
'morning' => 'Sáng (8h - 12h)',
'afternoon' => 'Chiều (13h - 17h)',
'evening' => 'Tối (18h - 21h)',
),
'required' => true,
),
$checkout->get_value('delivery_time')
);
echo '';
}Troubleshooting: Các lỗi thường gặp
1. Code không hoạt động: Đảm bảo bạn thêm code vào đúng file functions.php của child theme. Nếu dùng plugin Code Snippets, hãy kiểm tra xem snippet đã được bật chưa. Ngoài ra, nhớ xóa cache website sau khi thêm code.
2. Lỗi khi đặt hàng sau khi ẩn trường: Nếu bạn ẩn trường mà WooCommerce vẫn yêu cầu (ví dụ: email, phone), đơn hàng có thể không được đặt thành công. Hãy đảm bảo các trường bắt buộc như email và phone không bị unset, hoặc đặt required = false trước khi unset.
3. Plugin xung đột: Một số plugin quản lý đơn hàng, CRM, hoặc shipping có thể phụ thuộc vào các trường checkout mặc định. Nếu bạn ẩn trường mà plugin khác cần, có thể gây lỗi. Hãy test kỹ trên môi trường staging trước khi áp dụng lên production.
Best practices
Chỉ ẩn trường thực sự không cần thiết: Đừng ẩn quá nhiều trường vì nó có thể ảnh hưởng đến việc xác nhận đơn hàng, vận chuyển và xuất hóa đơn. Tốt nhất là giữ lại các trường cơ bản như: tên, số điện thoại, email, địa chỉ.
Dùng child theme hoặc Code Snippets: Không bao giờ thêm code trực tiếp vào parent theme. Hãy dùng child theme hoặc plugin Code Snippets để code không bị mất khi update.
Test trên nhiều thiết bị: Sau khi ẩn trường, hãy test trang checkout trên cả desktop và mobile để đảm bảo form không bị lỗi layout.
Tổng kết
Ẩn trường thông tin trên trang checkout WooCommerce là việc làm quan trọng để tối ưu trải nghiệm mua hàng cho khách. Bạn có thể dùng code PHP với filter woocommerce_checkout_fields (cách triệt để nhất), dùng plugin giao diện trực quan (dễ dùng nhất), hoặc dùng CSS (nhanh nhất nhưng không triệt để). Tùy vào trình độ kỹ thuật và nhu cầu cụ thể, hãy chọn phương pháp phù hợp. Tham khảo thêm tài liệu chính thức tại WooCommerce Docs.
