Khi xây dựng một cửa hàng trực tuyến, trải nghiệm của khách hàng trong quá trình thanh toán là yếu tố vô cùng quan trọng. Biểu mẫu thanh toán tiêu chuẩn của WooCommerce có thể không đáp ứng được tất cả các nhu cầu kinh doanh, chẳng hạn như việc thu thập thông tin địa chỉ người nhận hóa đơn, lời chúc mừng sinh nhật, hoặc các yêu cầu đặc biệt về phương thức giao hàng. Trong những trường hợp này, các trường thanh toán tùy chỉnh trở thành công cụ mở rộng mạnh mẽ. Chúng không chỉ giúp nâng cao mức độ cá nhân hóa trải nghiệm người dùng mà còn giúp doanh nghiệp thu thập được những dữ liệu kinh doanh quan trọng, từ đó tối ưu hóa dịch vụ và chiến lược tiếp thị.
Nhờ vào hệ thống hook của WordPress và API phong phú mà WooCommerce cung cấp, các nhà phát triển có thể tương đối dễ dàng thêm các loại trường dữ liệu khác nhau (như ô nhập văn bản, danh sách thả xuống, ô chọn, ô đánh dấu) vào nhiều vị trí trên trang thanh toán – sau các khu vực dành cho địa chỉ thanh toán và địa chỉ giao hàng, hoặc thậm chí tạo ra những khối nội dung mới. Quá trình này không chỉ đơn thuần là về việc hiển thị dữ liệu trên giao diện người dùng mà quan trọng hơn là về quy trình xử lý dữ liệu ở phía máy chủ: làm thế nào để đảm bảo rằng dữ liệu mà người dùng nhập vào được lưu trữ một cách chính xác và an toàn trong đơn hàng, đồng thời được hiển thị rõ ràng trên giao diện quản trị nền tảng, trang tài khoản người dùng và trong email thông báo đơn hàng.
Cách thực hiện các trường thanh toán tùy chỉnh
WooCommerce cung cấp hai loại hook chính để xử lý các trường dữ liệu liên quan đến quá trình thanh toán:woocommerce_checkout_fields 和 woocommerce_checkout_update_order_metaPhần đầu tiên được sử dụng để định nghĩa và hiển thị các trường dữ liệu, trong khi phần thứ hai được dùng để lưu trữ dữ liệu trong các trường đó.
Sử dụng các “hook” để thêm trường (fields)
Bước cốt lõi nhất là thông qua… woocommerce_checkout_fields Hook for the filter: adds custom fields to the array of checkout fields. This array has a clear structure, allowing you to organize the fields in a way that suits the “bill” (invoice) format.billing）、“Giao hàng”（shipping“Order Notes”orderCác phân vùng hiện có như vậy, và bạn thậm chí có thể tạo ra các phân vùng tùy chỉnh nữa.custom）。
Ví dụ mã nguồn dưới đây minh họa cách thêm một trường văn bản “Mã số thuế doanh nghiệp” và một ô chọn (“Có cần hóa đơn hay không”) ở phía dưới khu vực thông tin “Hóa đơn”.
/**
* 在结账页面添加自定义字段
*/
add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_fields' );
function custom_add_checkout_fields( $fields ) {
// 在“账单”字段组中添加一个“公司税号”文本字段
$fields['billing']['billing_vat_number'] = array(
'label' => __( '公司税号 / VAT Number', 'your-text-domain' ),
'placeholder' => _x( '请输入您的公司税号', 'placeholder', 'your-text-domain' ),
'required' => false, // 非必填
'class' => array( 'form-row-wide' ), // 宽度样式
'clear' => true, // 清除浮动
'priority' => 25, // 显示顺序，数字越小越靠前
);
// 在“账单”字段组中添加一个“是否需要发票”单选框
$fields['billing']['billing_invoice_needed'] = array(
'type' => 'radio',
'label' => __( '是否需要纸质发票？', 'your-text-domain' ),
'required' => true,
'class' => array( 'form-row-wide' ),
'clear' => true,
'priority' => 30,
'options' => array(
'yes' => __( '是，需要纸质发票', 'your-text-domain' ),
'no' => __( '否，不需要', 'your-text-domain' )
)
);
return $fields;
}Xác thực và lưu dữ liệu trong các trường (Verify and save field data)
Sau khi thêm các trường vào hệ thống, cần đảm bảo rằng dữ liệu mà người dùng nhập vào được lưu trữ đúng vào phần metadata của đơn hàng tương ứng. Điều này được thực hiện thông qua các quy trình xử lý dữ liệu chuyên biệt, bao gồm việc kiểm tra tính hợp lệ của dữ liệu, xác nhận thông tin từ người dùng, woocommerce_checkout_update_order_meta Điều này được thực hiện thông qua các “hook” (khớp nối chức năng). Khi người dùng gửi đơn hàng, WooCommerce sẽ kích hoạt các hook tương ứng, và chúng ta có thể tận dụng thời điểm này để lấy và lưu trữ giá trị của các trường tùy chỉnh.
/**
* 保存自定义结账字段的值到订单元数据
*/
add_action( 'woocommerce_checkout_update_order_meta', 'custom_save_checkout_fields' );
function custom_save_checkout_fields( $order_id ) {
if ( ! empty( $_POST['billing_vat_number'] ) ) {
// 使用 sanitize_text_field 进行清洁处理，防止恶意代码
update_post_meta( $order_id, '_billing_vat_number', sanitize_text_field( $_POST['billing_vat_number'] ) );
}
if ( ! empty( $_POST['billing_invoice_needed'] ) ) {
update_post_meta( $order_id, '_billing_invoice_needed', sanitize_text_field( $_POST['billing_invoice_needed'] ) );
}
}Hiển thị dữ liệu từ các trường trong phần backend và trong các email.
Chỉ lưu trữ dữ liệu là chưa đủ; các doanh nghiệp cần có thể xem thông tin đó khi quản lý đơn hàng ở phía sau hậu trường, và khách hàng cũng nên có thể nhìn thấy những thông tin mình đã điền vào trong email xác nhận đơn hàng cũng như trên trang “Tài khoản của tôi”.
Hiển thị trên trang chỉnh sửa đơn hàng ở phía sau hậu cần.
Có thể thực hiện được. woocommerce_admin_order_data_after_billing_address Giống như các công cụ khác, chức năng này sẽ hiển thị giá trị của các trường tùy chỉnh sau các mục “Địa chỉ thanh toán” hoặc “Địa chỉ giao hàng” trên trang chi tiết đơn hàng của hệ thống.
/**
* 在后台订单详情页显示自定义字段
*/
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_display_admin_order_meta', 10, 1 );
function custom_display_admin_order_meta( $order ) {
$vat_number = $order->get_meta( '_billing_vat_number' );
$invoice_needed = $order->get_meta( '_billing_invoice_needed' );
if ( $vat_number ) {
echo '<p><strong>' . __( '公司税号:', 'your-text-domain' ) . '</strong> '`. esc_html($vat_number)`.'</p>';
}
if ( $invoice_needed ) {
$display_text = ( $invoice_needed == 'yes' ) ? __( '是', 'your-text-domain' ) : __( '否', 'your-text-domain' );
echo '<p><strong>' . __( '需要纸质发票:', 'your-text-domain' ) . '</strong> '`. esc_html($display_text)`.'</p>';
}
}Hiển thị trong email xác nhận đơn hàng và trang cảm ơn khách hàng.
Để khách hàng cũng có thể nhìn thấy những thông tin này, chúng ta cần thêm chúng vào email xác nhận đơn hàng và trang xác nhận đơn hàng (lời cảm ơn). woocommerce_email_order_meta_keys Bộ lọc có thể tự động thêm các khóa metadata được chỉ định vào tất cả các email thông báo. Đồng thời, hãy sử dụng nó một cách hiệu quả. woocommerce_order_details_after_order_table Các hook hành động có thể được hiển thị trong chi tiết đơn hàng trên giao diện người dùng.
/**
* 将自定义字段添加到订单邮件中
*/
add_filter( 'woocommerce_email_order_meta_keys', 'custom_add_order_meta_to_email' );
function custom_add_order_meta_to_email( $keys ) {
$keys[] = '_billing_vat_number';
$keys[] = '_billing_invoice_needed'; // 邮件中会以键的格式显示，通常需要进一步美化
return $keys;
}
/**
* 在前台订单详情（感谢页面、我的账户-订单详情）中显示自定义字段
*/
add_action( 'woocommerce_order_details_after_order_table', 'custom_display_order_data_frontend', 10, 1 );
function custom_display_order_data_frontend( $order ) {
$vat_number = $order->get_meta( '_billing_vat_number' );
if ( $vat_number ) {
echo '<h2>' . __( '附加信息', 'your-text-domain' ) . '</h2>';
echo '<table class="shop_table shop_table_responsive additional_info">';
echo '<tr><th>' . __( '公司税号:', 'your-text-domain' ) . '</th><td>'`. esc_html($vat_number)`.'</td></tr>';
echo '</table>';
}
}Ứng dụng nâng cao và logic điều kiện trường (Advanced Applications and Field Condition Logic)
Ngoài việc thêm các trường cơ bản, những tính năng tương tác phức tạp hơn có thể nâng cao đáng kể trải nghiệm người dùng, chẳng hạn như việc hiển thị nội dung dựa trên điều kiện của các trường hoặc các thao tác xác thực dựa trên giá trị hiện có của chúng.
Thực hiện việc hiển thị các trường dữ liệu dựa trên các điều kiện nhất định.
Bằng cách sử dụng JavaScript/jQuery, bạn có thể hiển thị hoặc ẩn một trường khác dựa trên giá trị của một trường khác (chẳng hạn như quốc gia, tiểu bang, hoặc một tùy chọn đơn chọn). Ví dụ, chỉ khi người dùng chọn “Cần hóa đơn giấy” thì khu vực văn bản “Lưu ý khi gửi hóa đơn” mới được hiển thị.
Để triển khai chức năng này, bạn cần thêm mã lệnh vào tệp JavaScript của chủ đề (theme) hoặc sử dụng các công cụ/phương thức phù hợp để thực hiện nó. wp_enqueue_script Đưa script vào hàng đợi (queue), và theo dõi những thay đổi trên các trường dữ liệu trên trang thanh toán, để kiểm soát trạng thái hiển thị của các trường mục tiêu.
Thêm xác thực tùy chỉnh cho trường
Mặc dù WooCommerce đã tích hợp sẵn chức năng xác định các trường dữ liệu là “bắt buộc” (required),…required => true）验证，但有时你需要更复杂的验证规则，比如税号的特定格式。可以通过 woocommerce_checkout_process Sử dụng các “action hook” để thêm logic xác thực tùy chỉnh.
/**
* 在结账过程中验证自定义字段
*/
add_action( 'woocommerce_checkout_process', 'custom_validate_checkout_fields' );
function custom_validate_checkout_fields() {
// 如果“公司税号”字段不为空，则检查其格式（示例：假设是15位数字）
if ( ! empty( $_POST['billing_vat_number'] ) && ! preg_match( '/^d{15}$/', $_POST['billing_vat_number'] ) ) {
wc_add_notice( __( '错误：公司税号格式不正确，应为15位数字。', 'your-text-domain' ), 'error' );
}
}Tối ưu hóa hiệu suất và các thực hành tốt nhất
Việc thêm quá nhiều trường tùy chỉnh trên trang web hoặc xử lý chúng một cách không đúng cách có thể ảnh hưởng đến tốc độ tải trang thanh toán và trải nghiệm người dùng.
Đọc thêm Hướng dẫn phát triển nâng cao về trường tùy chỉnh WooCommerce: Từ tạo lập đến hiển thị。
Tối ưu hóa quá trình tải dữ liệu và hiển thị các trường (fields)
- Tải các script một cách có chọn lọc: Chỉ tải những script JavaScript cần thiết cho các trường được hiển thị dựa trên điều kiện vào trang thanh toán.
- Đặt ưu tiên một cách hợp lý: Hãy sử dụng công cụ này để quyết định thứ tự ưu tiên của các nhiệm vụ hoặc công việc cần thực hiện.
priorityHãy sắp xếp các tham số một cách hợp lý để đảm bảo thứ tự các trường được duy trì, nhằm tránh việc phải điều chỉnh lại bố cục một cách không cần thiết. - Tinh giản.
classArray: Chỉ thêm các lớp kiểu dáng (style classes) cần thiết.form-row-wide或form-row-first。
An toàn và dọn dẹp dữ liệu
- Luôn dọn dẹp và kiểm tra nội dung trước khi lưu:
update_post_metaVà hiển thị (Display)echoTrước khi sử dụng dữ liệu người dùng, hãy đảm bảo thực hiện các bước cần thiết để bảo vệ dữ liệu đó.sanitize_text_field(),esc_html(),wp_kses_post()Các hàm như vậy được sử dụng để xử lý dữ liệu, và đây chính là yếu tố then chốt trong việc ngăn chặn các cuộc tấn công từ chương trình khách truy cập từ xa (XSS – Cross-Site Scripting). - Hãy sử dụng đúng loại dữ liệu: Đối với các con số hoặc dữ liệu có định dạng cụ thể, hãy cân nhắc việc sử dụng các loại dữ liệu phù hợp.
sanitize_key()Hoặc sử dụng các biểu thức chính quy tùy chỉnh để thực hiện việc xác thực và làm sạch dữ liệu.
Tóm lại
Việc tùy chỉnh các trường thanh toán trong WooCommerce là một tính năng mạnh mẽ, giúp kết nối dữ liệu giữa doanh nghiệp và khách hàng tại các điểm then chốt trong quá trình giao dịch. woocommerce_checkout_fields Các “hook” (móc) được sử dụng để định nghĩa các trường dữ liệu ở phía trước (frontend), từ đó chúng có thể được sử dụng trong các ứng dụng hoặc quy trình khác. woocommerce_checkout_update_order_meta Các công cụ “hook” được sử dụng để lưu trữ dữ liệu một cách an toàn; sau đó, dữ liệu được truyền đến hệ thống quản lý, qua các bộ lọc email, và được hiển thị trên giao diện người dùng (trang web hoặc ứng dụng). Toàn bộ quá trình này tạo thành một vòng lặp xử lý dữ liệu hoàn chỉnh. Khi nắm vững những phương pháp cơ bản này, kết hợp với các kỹ thuật nâng cao như hiển thị dữ liệu dựa trên điều kiện và xác thực tùy chỉnh, các nhà phát triển có thể xây dựng các quy trình thanh toán mang tính cá nhân hóa cao, thân thiện với người dùng và đảm bảo an toàn dữ liệu. Điều này giúp đáp ứng nhu cầu đa dạng trong thương mại điện tử, nâng cao mức độ chuyên nghiệp của cửa hàng và sự hài lòng của khách hàng.
FAQ 常见问题
Dữ liệu từ các trường tùy chỉnh được lưu trữ ở đâu?
Dữ liệu từ các trường tùy chỉnh được lưu trữ dưới dạng “metadata của đơn hàng”. Khi được sử dụng… update_post_meta( $order_id, ‘_field_key’, $value ); Khi bạn lưu dữ liệu, chúng sẽ được lưu trữ trong hệ thống WordPress. wp_postmeta Trong bảng cơ sở dữ liệu, các thông tin liên quan đến đơn hàng (một loại bài viết tùy chỉnh) được kết nối với các bản ghi khác thông qua các mối quan hệ dữ liệu được định nghĩa trước. post_id Liên kết (Association). Tên khóa thường bắt đầu bằng dấu gạch dưới, điều này cho thấy rằng đó là dữ liệu siêu dữ liệu (metadata) được ẩn đi (không hiển thị trực tiếp).
Làm thế nào để các trường tùy chỉnh cũng được lưu vào tài khoản người dùng khi họ đăng ký?
Nếu bạn cho phép người dùng tạo tài khoản khi thanh toán và muốn lưu các thông tin như “Tên công ty” vào hồ sơ người dùng, bạn cần cập nhật dữ liệu người dùng đồng thời với việc lưu thông tin đặt hàng. Bạn có thể sử dụng các công cụ phù hợp để thực hiện điều này. update_user_meta( $customer_id, ‘billing_company’, $value );Lưu ý rằng thông tin này thường cần được lấy trong bối cảnh người dùng đăng ký hoặc đăng nhập để có được ID người dùng chính xác.
Tại sao các trường tùy chỉnh của tôi không được hiển thị đúng cách trong email?
Nếu giá trị của trường không được hiển thị trong email, lý do phổ biến nhất là do quên thực hiện thao tác cần thiết để hiển thị nó. woocommerce_email_order_meta_keys Bộ lọc sẽ thêm tên khóa (key name) của nó vào biến email. Ngoài ra, mẫu email có thể không chứa phần dùng để hiển thị các metadata tùy chỉnh. Hãy đảm bảo rằng tên khóa của các trường bạn sử dụng đã được thêm đúng vào mảng bộ lọc, và mẫu email (như…) email-order-details.phpHỗ trợ hiển thị các thông tin metadata chung (metadata).
Có thể thêm các khối trường (field blocks) ở những vị trí khác nhau trên trang thanh toán không?
Được. Ngoài những tùy chọn mặc định… billing、shipping、order Nhóm hóa, bạn có thể thực hiện điều đó… woocommerce_checkout_fields Trong bộ lọc, hãy tạo một nhóm hoàn toàn mới, ví dụ như… custom_sectionSau đó, hãy sử dụng… woocommerce_checkout_after_customer_details 或 woocommerce_before_order_notes Các hook hành động như vậy, khi được kết hợp với nhau… do_action(‘woocommerce_checkout_’ . $section); Hãy sử dụng các thông tin từ nhóm dữ liệu mới này để hiển thị chúng ở bất kỳ vị trí nào bạn muốn trên trang web. Điều này đòi hỏi bạn phải hiểu rõ cấu trúc của mẫu thanh toán (checkout template) trong WooCommerce.
Bước tiếp theo, chúng ta nên làm gì tiếp theo?
Đọc thêm và kiến thức thực tế
Những nội dung sau đây liên quan đến chủ đề của bài viết này, thích hợp để tiếp tục đọc sâu hơn. Ưu tiên bắt đầu với bài viết gần nhất với vấn đề hiện tại của bạn, rồi dần dần mở rộng sang các chủ đề xung quanh, hiệu quả thường sẽ tốt hơn.
- Phát triển plugin cho WordPress: Từ cơ bản đến chuyên nghiệp – Xây dựng plugin tùy chỉnh đầu tiên của bạn
- Làm chủ phát triển plugin WordPress từ đầu: Xây dựng chức năng độc quyền và tạo ra lợi nhuận hiệu quả
- Phát triển plugin WordPress là hành trình từ không đến có, dành cho hệ thống quản lý nội dung phổ biến nhất toàn cầu
- Hướng dẫn phát triển WooCommerce: Xây dựng trang web thương mại điện tử chuyên nghiệp từ con số không
- Bắt đầu từ con số 0 với phát triển plugin WordPress: Chi tiết về chức năng, quy chuẩn và thực hành tốt nhất
Tiếng Việt