Hướng dẫn toàn diện về phát triển trường thanh toán tùy chỉnh WooCommerce: Từ cơ bản đến thực chiến

Tại sao cần phải tự định các trường thanh toán?

Trang thanh toán mặc định của WooCommerce cung cấp các trường thông tin cơ bản như tên, địa chỉ, email, v.v. Tuy nhiên, đối với nhiều scénario kinh doanh cụ thể, những trường này là chưa đủ. Ví dụ, một cửa hàng bán bánh kem theo yêu cầu có thể cần thu thập thông tin về lời chúc trên bánh kem; một trang web bán buôn B2B có thể cần số mã thuế của công ty; trong khi đó, một trang web bán vé sự kiện có thể cần số chứng minh thư của người tham gia để xác minh thông tin. Trong những trường hợp này, các nhà phát triển cần phải tự định nghĩa thêm các trường thanh toán để mở rộng chức năng của hệ thống, nhằm đáp ứng nhu cầu thu thập dữ liệu đặc thù của từng loại hình kinh doanh.

Các trường tùy chỉnh không chỉ giúp cải thiện trải nghiệm người dùng, làm cho quy trình thanh toán phù hợp hơn với nhu cầu kinh doanh, mà còn cung cấp dữ liệu quan trọng cho các hoạt động quản lý khách hàng, xử lý đơn hàng và tiếp thị sau này. Việc hiển thị chính xác các trường này ở phía máy chủ (backend) và trong các email sẽ đảm bảo tính toàn vẹn của thông tin trong toàn bộ quá trình xử lý đơn hàng.

Phương pháp cốt lõi và chi tiết về Hook

WooCommerce cung cấp một hệ thống hook mạnh mẽ và linh hoạt, cho phép chúng ta tùy chỉnh trang thanh toán một cách sâu rộng mà không cần phải thay đổi mã nguồn gốc. Việc triển khai các trường tùy chỉnh chủ yếu bao gồm ba bước cơ bản: thêm trường, xác thực dữ liệu trong trường, và lưu trữ cũng như hiển thị dữ liệu đó. Mỗi bước tương ứng với một hook hành động (action hook) hoặc hook lọc (filter hook) cụ thể của WooCommerce.

Filter used for adding fields

Thêm trường chủ yếu thông qua woocommerce_checkout_fields Việc này được thực hiện bằng cách sử dụng các bộ lọc (filters). Những bộ lọc này cho phép chúng ta thêm các ô nhập dữ liệu mới, menu thả xuống, hoặc ô chọn vào các phần khác nhau của biểu mẫu thanh toán – chẳng hạn như phần “Hóa đơn”, phần “Giao hàng”, hoặc phần “Thông tin bổ sung đơn hàng” tùy chỉnh.

Các nhà phát triển cần viết một hàm gọi lại (callback function) để nhận một mảng các trường hiện có, thực hiện các thay đổi cần thiết, và sau đó trả về một mảng mới. Bên trong hàm, người ta có thể xác định chi tiết các thuộc tính của từng trường mới như kiểu dữ liệu, tiêu đề trường (label), giá trị mặc định (placeholder), yêu cầu nhập liệu (bắt buộc hay không), thứ tự ưu tiên (dùng để sắp xếp), cũng như các lớp CSS (CSS classes), v.v.

UltaHost – Nhà cung cấp dịch vụ máy chủ WordPress chuyên nghiệp

Bảo đảm hoàn tiền trong 30 ngày, băng thông và cơ sở dữ liệu không giới hạn, bảo vệ DDoS miễn phí, mua 3 năm ưu đãi 50%

Truy cập trang

Hook used for validating fields

Khi người dùng gửi biểu mẫu thanh toán, chúng ta phải đảm bảo rằng dữ liệu trong các trường tùy chỉnh đáp ứng đúng yêu cầu. Lúc này, chúng ta cần sử dụng các quy trình kiểm tra và xử lý dữ liệu phù hợp. woocommerce_checkout_process Action hook. Trong hàm gọi lại (callback function) của hook này, chúng ta có thể truy cập vào các dữ liệu được truyền vào. $_POST Dữ liệu được gửi đi từ các biến toàn cục (global variables) sẽ được xác thực (verified) trước khi được xử lý.

Ví dụ, bạn có thể kiểm tra xem một trường bắt buộc có trống không, hoặc xác minh xem định dạng số điện thoại có đúng không. Nếu việc xác minh thất bại, bạn có thể sử dụng các biện pháp phù hợp để xử lý tình huống đó. wc_add_notice() Hàm hiển thị một thông báo lỗi cho người dùng, ngăn quá trình thanh toán tiếp tục diễn ra.

Các hook được sử dụng để lưu trữ và hiển thị dữ liệu.

Sau khi người dùng gửi đơn hàng, dữ liệu từ các trường tùy chỉnh cần được lưu trữ một cách an toàn trong phần metadata của đơn hàng. Điều này được thực hiện thông qua các quy trình bảo mật nghiêm ngặt để đảm bảo dữ liệu không bị truy cập trái phép hoặc bị sửa đổi. woocommerce_checkout_update_order_meta Chúng ta sử dụng các “action hooks” để thực hiện các tác vụ cần thiết. Trong hàm gọi lại (callback function) của hook đó, chúng ta có thể thực hiện các thao tác mong muốn. update_post_meta() Hàm này sẽ lưu các giá trị từ biểu mẫu đã được xác thực vào đơn hàng tương ứng. wp_postmeta Trong bảng cơ sở dữ liệu.

Sau khi lưu dữ liệu, chúng ta thường cần hiển thị chúng ở ba nơi: trang chi tiết đơn hàng trên giao diện quản trị viên, email xác nhận đơn hàng được gửi đến người dùng, và mục đơn hàng trong tài khoản khách hàng. Điều này đòi hỏi việc tùy chỉnh giao diện quản lý, mẫu email, và trang tài khoản ở phía người dùng.

Thực hành: Thêm trường “Lời nhắn quà tặng”

Dưới đây, chúng ta sẽ trình bày cách thêm một ô văn bản “Lời nhắn quà tặng” cho cửa hàng hoa trực tuyến thông qua một ví dụ hoàn chỉnh. Ô này sẽ xuất hiện trong phần thông tin đơn hàng, là một trường tùy chọn; nội dung trong ô sẽ được lưu trữ và hiển thị cả ở phía sau hậu trường lẫn trong email gửi cho khách hàng.

Bước 1: Thêm các trường (fields) vào trang thanh toán (checkout page).

Trước hết, chúng ta cần sử dụng… woocommerce_checkout_fields Chúng ta sẽ sử dụng các bộ lọc (filters) để đăng ký trường dữ liệu mới này. Chúng ta sẽ thêm nó sau trường “Ghi chú đơn hàng” (Order Remarks). Dưới đây là đoạn mã cần thực hiện, nên được thêm vào phần mã nguồn của tiểu chủ đề (sub-topic) tương ứng. functions.php Có thể được thêm vào tệp tin hoặc thông qua các tiện ích mở rộng (plugin) tùy chỉnh.

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );
function add_custom_checkout_field( $fields ) {
    $fields['order']['gift_message'] = array(
        'type'        => 'textarea',
        'class'       => array('form-row-wide'),
        'label'       => __('礼品祝福留言', 'your-text-domain'),
        'placeholder' => __('请输入您想写在贺卡上的祝福语（可选）', 'your-text-domain'),
        'required'    => false,
        'priority'    => 25, // 显示在订单备注（priority 21）之后
    );
    return $fields;
}

Đoạn mã này tạo ra một… (The code creates a…) textarea Đây là một trường dữ liệu thuộc loại “type”, có nhãn là “Lời chúc quà tặng” (Gift Blessing Message), và đã được thiết lập các tham số thay thế (placeholders) cũng như lớp CSS (CSS classes) tương ứng.priority Các tham số được sử dụng để kiểm soát vị trí hiển thị của chúng.

Bước 2: Lưu dữ liệu các trường vào đơn hàng

Tiếp theo, chúng ta cần lưu trữ những thông điệp mà người dùng nhập vào khi tạo đơn hàng. Hãy sử dụng công cụ phù hợp để thực hiện điều này. woocommerce_checkout_update_order_meta Sử dụng các “hook” (các thành phần lập trình được thiết kế để thực hiện một nhiệm vụ cụ thể) để thực hiện điều đó.

Hosting.com - lưu trữ chia sẻ

Hiệu năng cao, được trang bị CPU AMD EPYC, lưu trữ SSD NVMe và LiteSpeed, hỗ trợ chuyên gia nội bộ 24 giờ/ngày, các biện pháp bảo mật tiên tiến bao gồm SSL, chống brute force, phần mềm độc hại và bảo vệ DDoS, tiết kiệm tới 73%.

Truy cập trang

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['gift_message'] ) ) {
        update_post_meta( $order_id, '_gift_message', sanitize_textarea_field( $_POST['gift_message'] ) );
    }
}

Ở đây, chúng ta sẽ tiến hành kiểm tra. $_POST['gift_message'] Nếu có giá trị, hãy sử dụng nó. sanitize_textarea_field() Sau khi thực hiện các thao tác làm sạch an toàn, hàm sẽ được triển khai (hoặc hoạt động) tiếp theo. update_post_meta() Hãy lưu nó dưới dạng dữ liệu metadate của đơn hàng, với tên khóa là… _gift_message。

Bước 3: Hiển thị dữ liệu trên nền tảng backend và trong email.

Sau khi dữ liệu được lưu trữ, chúng ta cần phải làm cho chúng trở nên khả hiện (tức là có thể được xem được). Đoạn mã dưới đây minh họa cách hiển thị trường dữ liệu đó trên trang chi tiết đơn hàng trong giao diện quản trị viên và trong email gửi cho khách hàng.

// 在管理员订单详情页显示
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_admin' );
function display_custom_field_admin( $order ) {
    $gift_message = get_post_meta( $order->get_id(), '_gift_message', true );
    if ( $gift_message ) {
        echo '<p><strong>' . __( '礼品留言:', 'your-text-domain' ) . '</strong><br />'`. esc_html($gift_message)`.'</p>';
    }
}

// 在订单确认邮件中显示
add_filter( 'woocommerce_email_order_meta_fields', 'display_custom_field_in_email', 10, 3 );
function display_custom_field_in_email( $fields, $sent_to_admin, $order ) {
    $gift_message = get_post_meta( $order-&gt;get_id(), '_gift_message', true );
    if ( $gift_message ) {
        $fields['gift_message'] = array(
            'label' =&gt; __( '礼品留言', 'your-text-domain' ),
            'value' =&gt; wptexturize( $gift_message ),
        );
    }
    return $fields;
}

Hàm đầu tiên sẽ hiển thị thông điệp nhận xét dưới địa chỉ thanh toán của đơn hàng ở phía sau hệ thống. Hàm thứ hai sẽ thêm thông điệp nhận xét đó thành một dòng dữ liệu mới vào email xác nhận đơn hàng được gửi bởi WooCommerce.

Kỹ thuật nâng cao và những lưu ý cần biết

Sau khi nắm vững các phương pháp cơ bản, chúng ta có thể khám phá các trường hợp sử dụng phức tạp hơn và các giải pháp tối ưu hóa, nhằm làm cho các trường tùy chỉnh trở nên mạnh mẽ và dễ sử dụng hơn.

Tạo điều kiện để hiển thị trường (Create conditions to display fields)

Đôi khi, việc một trường có được hiển thị hay không phụ thuộc vào giá trị của một trường khác. Ví dụ, trường “Tiêu đề hóa đơn” chỉ được hiển thị khi người dùng chọn tùy chọn “Cần hóa đơn”. Điều này đòi hỏi sự kết hợp giữa JavaScript để thực hiện các tương tác trên phía trình duyệt (frontend). Chúng ta có thể thêm một phần mã vào trường kích hoạt (chẳng hạn như một ô chọn – checkbox) để xác định điều kiện hiển thị trường đó. change Bộ lọc sự kiện (event listener) được sử dụng để kiểm soát việc hiển thị hoặc ẩn các trường mục tiêu một cách động. Đồng thời, các xử lý tương ứng cũng cần được thực hiện trong logic xác thực ở phía máy chủ.

Bảo mật và làm sạch dữ liệu trong các trường (Field Data Security and Cleaning)

An toàn là điều vô cùng quan trọng. Khi xử lý dữ liệu do người dùng nhập vào, việc kiểm tra và làm sạch dữ liệu là bắt buộc phải thực hiện mọi lúc. Đối với các ô văn bản (text boxes), hãy sử dụng các biện pháp bảo mật phù hợp để đảm bảo dữ liệu được xử lý một cách sanitize_text_field() 或 sanitize_textarea_field()Đối với email, hãy sử dụng… sanitize_email()Khi truyền dữ liệu đến phía trước (frontend), hãy nhớ sử dụng định dạng phù hợp và các quy ước chuẩn để đảm bảo dữ liệu được hiển thị một cách chính xác và dễ hiểu. esc_html() 或 wp_kses_post() các hàm như để thoát, nhằm ngăn chặn tấn công Cross-Site Scripting (XSS).

Máy chủ chia sẻ của InterServer

Lưu trữ chia sẻ với mức phí $2,50 USD mỗi tháng, giảm giá $0,1 USD trong tháng đầu tiên, mã giảm giá tryinterserver, với 461 ứng dụng đám mây và cài đặt chỉ bằng một cú nhấp chuột.

Truy cập trang

Tính tương thích với các tiện ích mở rộng (plugins) và giao diện (themes) của bên thứ ba

Khi thêm các trường tùy chỉnh, chúng có thể xảy ra xung đột với phong cách thiết kế hoặc các đoạn mã của một số chủ đề hoặc plugin khác (đặc biệt là các plugin tối ưu hóa quá trình thanh toán). Đề nghị luôn thực hiện việc phát triển trong các chủ đề con (sub-themes), và thêm các tên lớp CSS độc đáo cho các phần tử chứa các trường tùy chỉnh đó. Trước khi triển khai chính thức, hãy kiểm thử kỹ lưỡng trong nhiều tình huống khác nhau, bao gồm các chủ đề khác nhau và các plugin phổ biến đã được kích hoạt. Sử dụng công cụ phát triển trình duyệt để kiểm tra lỗi trong các phần tử và đoạn mã là một cách quan trọng để giải quyết các vấn đề liên quan đến tính tương thích.

Tóm lại

Thông qua hướng dẫn trong bài viết này, chúng ta đã bắt đầu từ việc hiểu rõ nhu cầu của khách hàng, sau đó từng bước tìm hiểu sâu hơn về quy trình phát triển các trường thanh toán tùy chỉnh trên nền tảng WooCommerce. Chúng ta đã học cách sử dụng các công cụ và tính năng có sẵn để tạo ra nhữ woocommerce_checkout_fields、woocommerce_checkout_process 和 woocommerce_checkout_update_order_meta Ba công cụ cốt lõi này được sử dụng để thêm, kiểm tra và lưu trữ các trường dữ liệu. Thông qua trường hợp thực tế về việc ghi nhận lời nhắn kèm quà tặng, toàn bộ quy trình từ việc tạo các trường dữ liệu đến việc hiển thị dữ liệu đã được minh họa một cách chi tiết. Cuối cùng, các chủ đề nâng cao như trường dữ liệu có điều kiện, xử lý bảo mật và tính tương thích cũng được thảo luận.

Bằng cách nắm vững những kỹ năng này, bạn sẽ có thể linh hoạt đáp ứng các yêu cầu thu thập dữ liệu đặc thù trong các hoạt động thương mại điện tử, xây dựng cửa hàng WooCommerce chuyên nghiệp và cá nhân hóa hơn, từ đó nâng cao tỷ lệ chuyển đổi và mức độ 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 thường được lưu trữ dưới dạng “metadata của đơn hàng” (order metadata) trong cơ sở dữ liệu của WordPress. wp_postmeta Trong bảng, mỗi dữ liệu đều chứa mã đơn hàng (order ID) tương ứng.post_idCác khóa meta mà bạn đã định nghĩa (ví dụ:…) _gift_messageBạn có thể truy cập các thuộc tính và giá trị của đơn hàng thông qua các phương thức liên quan đến đối tượng đơn hàng trong WooCommerce. $order->get_meta(‘_gift_message’) Hoặc các hàm của WordPress get_post_meta() Hãy lấy dữ liệu này.

Làm thế nào để thêm các bước xác thực phía trước (như kiểm tra định dạng) cho các trường tùy chỉnh?

Ngoài việc sử dụng… woocommerce_checkout_process Ngoài việc sử dụng các “hook” để thực hiện xác thực phía máy chủ, bạn cũng có thể thêm các thuộc tính nguyên bản của HTML5 vào các trường dữ liệu để thực hiện các kiểm tra cơ bản. Ví dụ: pattern Dùng cho các biểu thức chính quy (regular expressions).type=”email” Dùng để định dạng email. Đối với các phương thức xác thực thời gian thực phức tạp hơn, bạn cần viết mã JavaScript/jQuery để theo dõi các trường dữ liệu. blur 或 input Sự kiện: Kiểm tra xem giá trị có phù hợp với quy tắc hay không, và cung cấp phản hồi ngay lập tức.

Có thể thêm các trường tùy chỉnh vào trang đăng ký người dùng không?

Được, nhưng quy trình sẽ hơi khác một chút. Các hook liên quan đến các trường thanh toán trong WooCommerce chỉ được thiết kế dành riêng cho trang thanh toán. Nếu bạn muốn thêm các trường vào trang đăng ký “Tài khoản của tôi”, bạn sẽ cần sử dụng các hook khác mà WordPress và WooCommerce cung cấp. woocommerce_register_form Hãy thêm các trường (fields) vào đây.woocommerce_created_customer Chức năng này dùng để lưu trữ dữ liệu từ các trường vào metadata của người dùng. Nguyên lý hoạt động tương tự như các trường liên quan đến quá trình thanh toán, nhưng điểm khác biệt nằm ở các điểm kết nối (hooks) được sử dụng và vị trí lưu trữ dữ liệu (metadata của người dùng).

Tại sao các trường tùy chỉnh của tôi không được hiển thị?

Trước hết, hãy kiểm tra xem mã của bạn đã được thêm vào đúng chỗ chưa. functions.php Và không có lỗi ngữ pháp nào cả. Tiếp theo, hãy kiểm tra xem các khóa trong mảng trường có chính xác không; ví dụ, bạn đã thêm chúng vào đúng vị trí chưa… $fields[‘order’] hay $fields[‘billing’] Một số trường hợp, hãy kiểm tra lại xem có bất kỳ plugin hay theme nào khác đã gây ảnh hưởng đến các trường dữ liệu của bạn (bằng cách thay đổi mã nguồn hoặc xóa chúng đi) hay không. Cuối cùng, hãy thử xóa bộ nhớ đệm (cache) của trang web và trình duyệt; các tệp CSS/JS cũ có thể là nguyên nhân gây ra sự cố trong việc hiển thị nội dung trang