Sắp xếp lại các trường trang thanh toán WooCommerce giúp tối ưu theo mục đích doanh nghiệp và nâng cao trải nghiệm mua hàng
Ở bài trước ad đã hướng dẫn cách Tùy biến trang thanh toán WooCommerce, bài viết này ad sẽ hướng dẫn các bạn sử dụng mã code mà không sử dụng plugin tránh gây nặng nề cho website, giúp di chuyển các trường bên trong phần thanh toán và vận chuyển theo ý mình
Sắp xếp lại các trường trang thanh toán WooCommerce
Để sắp xếp lại các trường trên trang thanh toán (Checkout) trong WooCommerce, bạn có thể sử dụng bộ lọc woocommerce_checkout_fields. Đây là cách thực hiện:
Đoạn mã để sắp xếp lại các trường thanh toán:
Thêm đoạn mã sau vào file functions.php của theme hoặc child theme đang sử dụng:
add_filter('woocommerce_checkout_fields', 'reorder_checkout_fields');
function reorder_checkout_fields($fields) {
// Sắp xếp lại các trường trong phần billing (thanh toán)
$fields['billing'] = array(
'billing_first_name' => $fields['billing']['billing_first_name'], // Họ
'billing_last_name' => $fields['billing']['billing_last_name'], // Tên
'billing_company' => $fields['billing']['billing_company'], // Công ty
'billing_address_1' => $fields['billing']['billing_address_1'], // Địa chỉ 1
'billing_address_2' => $fields['billing']['billing_address_2'], // Địa chỉ 2
'billing_city' => $fields['billing']['billing_city'], // Thành phố
'billing_state' => $fields['billing']['billing_state'], // Bang/Tỉnh
'billing_postcode' => $fields['billing']['billing_postcode'], // Mã bưu chính
'billing_country' => $fields['billing']['billing_country'], // Quốc gia
'billing_email' => $fields['billing']['billing_email'], // Email
'billing_phone' => $fields['billing']['billing_phone'], // Số điện thoại
);
// Sắp xếp các trường khác nếu cần (shipping, account, order, v.v.)
return $fields;
}
Đoạn mã trên sẽ hoạt động:
1.Sắp xếp trường theo thứ tự mong muốn:
Các trường được sắp xếp lại theo thứ tự mà bạn định nghĩa trong mảng billing.
Đây là đoạn code chung ==> bạn chỉ sử dụng những trường nào đang có trên website của bạn nhé
2.Giữ lại các trường khác không thay đổi:
Những trường không được định nghĩa sẽ giữ nguyên thứ tự mặc định.
Đoạn mã để sắp xếp lại các trường Shipping (Giao hàng):
Tương tự như billing, bạn sử dụng đoạn mã này để có thể sắp xếp các trường giao hàng:
add_filter('woocommerce_checkout_fields', 'reorder_shipping_fields');
function reorder_shipping_fields($fields) {
$fields['shipping'] = array(
'shipping_first_name' => $fields['shipping']['shipping_first_name'], // Họ
'shipping_last_name' => $fields['shipping']['shipping_last_name'], // Tên
'shipping_company' => $fields['shipping']['shipping_company'], // Công ty
'shipping_address_1' => $fields['shipping']['shipping_address_1'], // Địa chỉ 1
'shipping_address_2' => $fields['shipping']['shipping_address_2'], // Địa chỉ 2
'shipping_city' => $fields['shipping']['shipping_city'], // Thành phố
'shipping_postcode' => $fields['shipping']['shipping_postcode'], // Mã bưu chính
'shipping_country' => $fields['shipping']['shipping_country'], // Quốc gia
'shipping_state' => $fields['shipping']['shipping_state'], // Bang/Tỉnh
);
return $fields;
}
Tùy chỉnh chi tiết hơn cho riêng website của bạn:
Thay đổi vị trí của một trường cụ thể:
Nếu chỉ cần di chuyển một hoặc hai trường, bạn có thể sử dụng thuộc tính priority:
add_filter('woocommerce_checkout_fields', 'customize_field_priority');
function customize_field_priority($fields) {
$fields['billing']['billing_email']['priority'] = 1; // Hiển thị Email ở vị trí đầu tiên
$fields['billing']['billing_phone']['priority'] = 2; // Hiển thị sdt ở vị trí đầu tiên
return $fields;
}
Nếu bạn muốn tùy chỉnh nâng cao hơn và bạn không am hiểu về code, hãy cân nhắc sử dụng plugin như Checkout Field Editor.
Chúc bạn thành công! 😊
