Phân tích chi tiết các trường thanh toán tùy chỉnh trong WooCommerce: Hướng dẫn phát triển đầy đủ

Tổng quan về hệ thống các trường dùng để thanh toán trong WooCommerce

Trang thanh toán của WooCommerce là một điểm then chốt trong quy trình mua sắm trực tuyến, nơi thông tin khách hàng được thu thập. Sự linh hoạt và khả năng mở rộng của trang này phần lớn nhờ vào hệ thống trường được thiết kế theo nguyên lý mô-đun. Hệ thống này tổ chức tất cả các thông tin mà người dùng cần điền vào (tên, địa chỉ, thông tin liên lạc, v.v.) thành một mảng đa chiều có cấu trúc rõ ràng. Mảng này không chỉ xác định tên và loại của từng trường, mà còn kiểm soát thứ tự hiển thị, tính bắt buộc, quy tắc xác thực, cũng như các lớp CSS liên quan đến trình bày của chúng.

Trọng tâm của toàn bộ hệ thống là… class-wc-checkout.php Các tệp tin và những nội dung bên trong chúng WC_Checkout Các trường dữ liệu được phân loại thành một vài nhóm chính dựa trên mục đích sử dụng của chúng; nhóm được sử dụng phổ biến nhất là… billing(Các trường dữ liệu trong hóa đơn)shipping(Delivery fields) and order(Các trường như ghi chú đơn hàng, v.v.) Mỗi tập hợp trường (field set) thực chất là một mảng (array) chứa định nghĩa của nhiều trường khác nhau. Việc hiểu rõ cấu trúc phân cấp này là bước đầu tiên trong mọi thao tác tùy chỉnh, bởi vì mọi thay đổi đều được thực hiện trên toàn bộ mảng trường này. Các nhà phát triển không cần phải trực tiếp sửa đổi các tệp cốt lõi, mà có thể can thiệp vào quá trình thông qua một loạt các hành động được thiết kế cẩn thận và các hook (hook) liên quan đến bộ lọc (filter hooks). Điều này đảm bảo tính bền vững của các tính năng tùy chỉnh và khả năng tương thích với các phiên bản tương lai.

Sử dụng các hook tích hợp để thêm và chỉnh sửa các trường dữ liệu.

WooCommerce cung cấp một hệ thống các “hook” (khớp nối) mạnh mẽ và dễ sử dụng, giúp các nhà phát triển có thể an toàn thêm, xóa, sửa đổi hoặc kiểm tra các trường dữ liệu liên quan đến quá trình thanh toán. Đây là phương pháp tiêu chuẩn trong việc phát triển tùy chỉnh, giúp tránh những khó khăn về bảo trì phát sinh từ việc thay đổi trực tiếp các tệp mẫu cốt lõi của hệ thống.

Đọc thêm Hướng dẫn thực hành tối ưu hiệu suất website thương mại điện tử WooCommerce và phát triển plugin nâng cao。

Làm thế nào để thêm các trường mới vào biểu mẫu thanh toán?

Để thêm một trường mới vào trang thanh toán, chẳng hạn như một ô chọn (radio) cho phép khách hàng lựa chọn “Loại tiêu đề hóa đơn”, bạn cần sử dụng công cụ phát triển web tương ứng. Cụ thể, bạn có thể sử dụng các ngôn ngữ lập trình như PHP, JavaScript, HTML, hoặc các công cụ phát triển web như WordPress, woocommerce_checkout_fields Bộ lọc. Bộ lọc này truyền mảng đầy đủ các trường thanh toán đến hàm của nhà phát triển, cho phép bạn sửa đổi hành vi của bất kỳ nhóm trường nào (ví dụ: billingThêm một mục mới vào (…)

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

function add_invoice_title_field( $checkout_fields ) {
    $checkout_fields['billing']['billing_invoice_type'] = array(
        'type' => 'select',
        'label' => '发票抬头',
        'required' => true,
        'options' => array(
            'personal' => '个人',
            'company' => '单位'
        ),
        'class' => array('form-row-wide'),
        'priority' => 21, // 紧跟在“公司名称”字段之后
    );
    return $checkout_fields;
}
add_filter( 'woocommerce_checkout_fields', 'add_invoice_title_field' );

Đoạn mã trên đã tạo ra một hộp thoại chọn (dropdown) trong khu vực các trường hóa đơn. Mỗi trường được định nghĩa dưới dạng một mảng liên kết (associated array), trong đó… type, label, required Các cặp khóa-giá trị quy định hành vi và giao diện của trường (field).priority Các tham số rất quan trọng; chúng quy định thứ tự hiển thị của trường đó trong biểu mẫu. Số càng nhỏ, vị trí của trường càng ở phía trước.

Sửa đổi hoặc xóa các thuộc tính của trường hiện có.

Các yêu cầu kinh doanh có thể đòi hỏi phải điều chỉnh các trường mặc định. Ví dụ, ở một số khu vực, trường “Mã bưu chính” có thể được đặt thành không bắt buộc, hoặc trường “Tiểu bang/Tỉnh” có thể được ẩn đi. Những thay đổi này cũng được thực hiện thông qua các thao tác tương woocommerce_checkout_fields Được thực hiện bằng cách sử dụng một mảng các bộ lọc (filters).

function adjust_default_fields( $fields ) {
    // 将账单邮编字段设为非必填
    $fields['billing']['billing_postcode']['required'] = false;

// 完全移除账单州/省字段
    unset( $fields['billing']['billing_state'] );

// 更改邮箱字段的占位符文本
    $fields['billing']['billing_email']['placeholder'] = '用于接收订单确认信';

return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'adjust_default_fields' );

Thông qua unset() Một hàm có thể xóa hoàn toàn một trường dữ liệu. Trong hầu hết các trường hợp khác, bạn thường sẽ thực hiện việc này bằng cách ghi đè giá trị của một thuộc tính trong mảng (array). required, label, class).

Xác thực trường và lưu trữ dữ liệu

Hiển thị trường ở giao diện người dùng chỉ là bước đầu tiên. Để đảm bảo chất lượng dữ liệu, cần xác thực đầu vào của người dùng và lưu trữ dữ liệu đã được xác thực một cách đáng tin cậy vào đơn hàng. Quá trình này được chia thành xác thực tức thời ở giao diện người dùng (tùy chọn nhưng cải thiện trải nghiệm người dùng) và xác thực khi gửi ở phía máy chủ (bắt buộc).

Đọc thêm Hướng dẫn tối ưu hiệu suất website WooCommerce toàn diện: Phân tích từ cấu hình đến bộ nhớ đệm。

Thực hiện logic xác thực ở phía máy chủ (phía sau).

Khi người dùng nhấp vào nút “Đặt hàng”, WooCommerce sẽ thực hiện quy trình xác thực để hoàn tất việc thanh toán. Các nhà phát triển có thể tận dụng điều này để tùy chỉnh hoặc mở rộng chức năng của hệ thống. woocommerce_checkout_process Sử dụng các “action hook” để chèn các quy tắc xác thực tùy chỉnh. Nếu việc xác thực thất bại, hãy gọi hàm tương ứng. wc_add_notice() Hàm hiển thị thông báo lỗi cho người dùng và ngăn việc tạo đơn hàng.

function validate_custom_fields_during_checkout() {
    // 检查自定义的“发票抬头”字段
    if ( isset( $_POST['billing_invoice_type'] ) && $_POST['billing_invoice_type'] == 'company' ) {
        // 如果选择了“单位”发票，则检查是否填写了公司名称
        if ( empty( $_POST['billing_company'] ) ) {
            wc_add_notice( '选择“单位”发票抬头时，必须填写公司名称。', 'error' );
        }
    }

// 验证一个自定义的文本字段，确保其格式
    if ( ! empty( $_POST['billing_custom_id'] ) && ! preg_match( '/^CUSTd{6}$/', $_POST['billing_custom_id'] ) ) {
        wc_add_notice( '客户编号格式错误，应为 CUST 后接6位数字。', 'error' );
    }
}
add_action( 'woocommerce_checkout_process', 'validate_custom_fields_during_checkout' );

Lưu giá trị của trường vào metadata đơn hàng.

Sau khi việc xác thực thành công, bước tiếp theo là lưu trữ giá trị của các trường tùy chỉnh một cách vĩnh viễn khi tạo đơn hàng. Điều này được thực hiện bằng cách… woocommerce_checkout_update_order_meta Hàm hook “action hook” đã được thực hiện. Hàm này được kích hoạt sau khi đơn hàng được tạo ra, và nó truyền lại ID của đơn hàng đó. Bạn nên sử dụng tính năng này trong WordPress. update_post_meta() Hàm này dùng để lưu trữ dữ liệu từ biểu mẫu dưới dạng thông tin đơn hàng.

function save_custom_checkout_field_data( $order_id ) {
    // 保存发票类型
    if ( ! empty( $_POST['billing_invoice_type'] ) ) {
        update_post_meta( $order_id, '_billing_invoice_type', sanitize_text_field( $_POST['billing_invoice_type'] ) );
    }

// 保存客户编号
    if ( ! empty( $_POST['billing_custom_id'] ) ) {
        update_post_meta( $order_id, '_billing_custom_id', sanitize_text_field( $_POST['billing_custom_id'] ) );
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field_data' );

Khi lưu trữ dữ liệu, hãy sử dụng các tên khóa có tiền tố là dấu gạch dưới (như…) _billing_invoice_typeĐây là một quy ước nhằm ngăn chặn trường dữ liệu đó được hiển thị trong ô thông tin “Trường tùy chỉnh” trên trang chỉnh sửa đơn hàng ở phía sau hậu cần, từ đó tránh sai sót do người quản trị thực hiện. Hãy nhớ sử dụng quy ước này nhé. sanitize_text_field() Các hàm như vậy được sử dụng để làm sạch dữ liệu nhằm ngăn ngừa các rủi ro bảo mật.

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

Hiển thị dữ liệu tùy chỉnh trên giao diện liên quan đến đơn hàng.

Sau khi lưu dữ liệu, thông thường cần hiển thị lại ở nhiều nơi, bao gồm: 1) Giao diện quản lý đơn hàng trong WordPress Admin; 2) Trang chi tiết đơn hàng trong “Tài khoản của tôi” ở giao diện người dùng; 3) Email đơn hàng gửi cho khách hàng và quản trị viên. Điều này đảm bảo tính toàn vẹn và minh bạch của thông tin giao dịch.

Trên trang chi tiết đơn hàng ở phía sau hậu cần, hãy tích hợp các trường tùy chỉnh.

Để cho quản trị viên có thể dễ dàng xem thông tin mà khách hàng đã nhập vào, bạn cần xuất dữ liệu siêu dữ liệu (metadata) của đơn hàng đã lưu vào trang chỉnh sửa đơn hàng. Điều này có thể được thực hiện bằng cách sử dụng các công cụ phù hợp trong hệ thống quản lý đơn hàng. woocommerce_admin_order_data_after_billing_address 和 woocommerce_admin_order_data_after_shipping_address Những “câu lệnh chờ” (waiting hooks) này cho phép chèn nội dung vào sau thông tin hiện có.

function display_custom_order_meta_in_admin( $order ) {
    $invoice_type = get_post_meta( $order->get_id(), '_billing_invoice_type', true );
    if ( $invoice_type ) {
        $display_type = ( $invoice_type == 'company' ) ? '单位' : '个人';
        echo '<p><strong>Loại người nhận hóa đơn:</strong> '`. esc_html($display_type)`.'</p>';
    }

$custom_id = get_post_meta( $order-&gt;get_id(), '_billing_custom_id', true );
    if ( $custom_id ) {
        echo '<p><strong>Mã khách hàng:</strong> '`. esc_html($custom_id)`.'</p>';
    }
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_order_meta_in_admin' );

Hiển thị dữ liệu trên giao diện người dùng (frontend) và trong email.

Để khách hàng cũng có thể nhìn thấy thông tin mà họ cung cấp, bạn cần phải sửa đổi mẫu giao diện hiển thị đơn hàng trên trang web và nội dung email. Đối với trang chi tiết đơn hàng, bạn có thể sử dụng… woocommerce_order_details_after_order_table “Hook.” Đối với email, bạn cần sử dụng nó. woocommerce_email_order_meta_keys Bộ lọc sẽ thông báo các khóa metadata tùy chỉnh cho hệ thống email, giúp chúng được tự động bao gồm trong nội dung email.

Đọc thêm Nắm vững kỹ năng phát triển plugin cho WordPress: Xây dựng các mô-đun tùy chỉnh hiệu quả từ con số không。

// 在前台“查看订单”页面显示
function display_custom_data_in_order_view( $order ) {
    $custom_id = get_post_meta( $order->get_id(), '_billing_custom_id', true );
    if ( $custom_id ) {
        echo '<h2>Thông tin bổ sung</h2><table class="shop_table custom-info"><tbody><tr><th>Mã khách hàng:</th><td>'`. esc_html($custom_id)`.'</td></tr></tbody></table>';
    }
}
add_action( 'woocommerce_order_details_after_order_table', 'display_custom_data_in_order_view' );

// 将自定义字段加入订单邮件
function add_custom_field_to_emails( $keys ) {
    $keys[] = '_billing_custom_id'; // 这个键对应的值会被加入到邮件中
    $keys[] = '_billing_invoice_type';
    return $keys;
}
add_filter( 'woocommerce_email_order_meta_keys', 'add_custom_field_to_emails' );

Tóm lại

Việc tùy chỉnh các trường thanh toán trong WooCommerce là một quá trình phát triển hoàn chỉnh, bao gồm từ việc hiển thị chúng trên giao diện người dùng đến việc lưu trữ dữ liệu. Trọng tâm của việc này nằm ở việc hiểu rõ và sử dụng một cách linh hoạt hệ thống các hook (các điểm kết nối) mà WooCommerce cung cấp. woocommerce_checkout_fields Các bộ lọc được sử dụng để định nghĩa và thay đổi cấu trúc của các trường dữ liệu; thông qua chúng, người dùng có thể kiểm soát cách dữ liệu được hiển thị và xử lý. woocommerce_checkout_process Thực hiện các logic xác thực cần thiết khi thực hiện hành động; với sự hỗ trợ của… woocommerce_checkout_update_order_meta Các thao tác này sẽ giúp lưu trữ dữ liệu hữu ích một cách lâu dài; cuối cùng, sẽ sử dụng các công cụ (hook) liên quan đến việc hiển thị dữ liệu để hiển thị kết quả. woocommerce_admin_order_data_after_billing_address 和 woocommerce_email_order_meta_keysDữ liệu được hiển thị ở cả phía sau hậu trường (backend), phía trước màn hình người dùng (frontend) và trong các email. Bằng cách tuân theo mô hình này, các nhà phát triển có thể xây dựng một trải nghiệm thanh toán mạnh mẽ, ổn định và phù hợp chặt chẽ với nhu cầu kinh doanh, đồng thời đảm bảo tính dễ bảo trì và an toàn khi nâ

FAQ 常见问题

Các trường tùy chỉnh có thể được cấu hình với các quy tắc xác thực, chẳng hạn như chỉ cho phép nhập số?

Được, như đã được đề cập trong phần “Kiểm tra dữ liệu và Lưu trữ Dữ liệu” của bài viết này, bạn có thể thực hiện điều đó. woocommerce_checkout_process Bạn có thể viết bất kỳ logic xác thực nào bằng PHP bên trong hàm gọi lại (callback function) của hook đó. Ví dụ, bạn có thể sử dụng các công cụ xác thực có sẵn trong PHP để kiểm tra dữ liệu được truyền vào. is_numeric() Hàm hoặc biểu thức chính quy (Regular Expression) preg_match() Kiểm tra xem giá trị của trường có phải là số nguyên không. Nếu việc xác thực thất bại, hãy gọi hàm tương ứng. wc_add_notice() Chỉ cần hiển thị thông báo lỗi là đủ.

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

Làm thế nào để một trường tùy chỉnh chỉ hiển thị cho các phương thức giao hàng cụ thể?

Điều này đòi hỏi phải kết hợp với logic phân tích các điều kiện. Bạn có thể kiểm tra phương thức giao hàng hiện tại trong giỏ hàng hoặc phiên người dùng (session) trong hàm được sử dụng để thêm hoặc chỉnh sửa các trường dữ liệu. Ví dụ, bạn có thể sử dụng các điều kiện như sau: WC()->session->get('chosen_shipping_methods') Lấy mã định danh phương thức giao hàng được chọn. Nếu không đáp ứng các điều kiện yêu cầu, bạn có thể sử dụng một phương thức khác thay thế. unset() Hãy loại bỏ trường đó khỏi mảng các trường, hoặc thêm một lớp CSS cụ thể (ví dụ: `.remove-field`) để thực hiện điều này. hiddenĐược sử dụng kết hợp với JavaScript để hiển thị/hid đi nội dung một cách động.

Tôi đã thay đổi các trường dữ liệu, nhưng trang thanh toán vẫn không thay đổi. Có thể có những lý do gì?

Trước hết, hãy đảm bảo rằng đoạn mã tùy chỉnh của bạn được thực thi đúng cách (ví dụ: các thay đổi liên quan đến giao diện của chủ đề được áp dụng đúng vào nơi cần thiết). functions.php (Tập tin không chứa lỗi ngữ pháp.) Tiếp theo, hãy kiểm tra logic của đoạn mã và xác nhận rằng bạn đã sửa đổi đúng tên khóa của mảng các trường cần thay đổi (ví dụ: billing hay shippingSau đó, hãy xóa tất cả các bộ nhớ đệm (cache) có thể tồn tại, bao gồm bộ nhớ đệm đối tượng (object cache), bộ nhớ đệm trang (page cache) và bộ nhớ đệm của trình duyệt (browser cache). Cuối cùng, hãy thử chuyển sang chủ đề mặc định (chẳng hạn như Storefront) và vô hiệu hóa các tiện ích bổ sung (plugin) khác để loại trừ khả năng xảy ra xung đột.

Dữ liệu từ các trường tùy chỉnh đã được lưu có thể được sử dụng cho việc tìm kiếm đơn hàng sau này hoặc phân tích báo cáo không?

Có thể, nhưng có thể cần thêm một số bước nữa. Vì dữ liệu được lưu trữ dưới dạng Post Meta của các đơn hàng, bạn có thể truy xuất thông tin đơn hàng thông qua các chức năng truy vấn meta data của WordPress. Để tìm kiếm trong danh sách đơn hàng trên nền tảng WooCommerce, bạn có thể sử dụng các plugin hỗ trợ tìm kiếm các trường tùy chỉnh, hoặc tự viết mã để mở rộng chức năng tìm kiếm mặc định. Đối với việc tạo báo cáo, các plugin báo cáo nâng cao thường cung cấp tùy chọn để bao gồm meta data của đơn hàng vào các tiêu chí lọc và hiển thị. Việc xuất dữ liệu các trường thành định dạng CSV cũng phụ thuộc vào công cụ xuất dữ liệu có hỗ trợ chọn các cột meta data tùy chỉnh hay không.