Menganalisis secara mendalam bidang checkout kustom WooCommerce: panduan pengembangan lengkap.

WooCommerce 结账字段系统概览

Halaman pembayaran di WooCommerce merupakan titik kritis dalam proses belanja online untuk mengumpulkan informasi pelanggan. Fleksibilitas dan skalabilitas halaman pembayaran ini sebagian besar berkat sistem bidang (fields) yang bersifat modular. Sistem tersebut mengorganisir semua item yang perlu diisi oleh pengguna, seperti nama, alamat, kontak, dan lainnya, menjadi sebuah array multidimensi yang terstruktur. Array ini tidak hanya mendefinisikan label dan jenis bidang tersebut, tetapi juga mengontrol urutan penampilannya, kewajiban pengisian (apakah bidang tersebut wajib diisi atau tidak), aturan validasi, serta kelas CSS yang digunakan untuk penampilan bidang-bidang tersebut.

Inti dari seluruh sistem adalah… class-wc-checkout.php File tersebut, beserta isinya… WC_Checkout Kelas tersebut. Semua field dibagi menjadi beberapa “kumpulan field” utama berdasarkan fungsinya, dan yang paling sering digunakan adalah… billing(Field names in the bill)shipping(Delivery Fields) dan order(Field such as order remarks, etc.) Setiap kumpulan bidang (field set) pada dasarnya merupakan sebuah array yang berisi definisi dari beberapa bidang. Memahami struktur hierarki ini merupakan langkah pertama dalam melakukan setiap operasi kustomisasi, karena semua modifikasi dilakukan terhadap array bidang tersebut secara keseluruhan. Para pengembang tidak perlu langsung mengubah file inti, melainkan dapat terlibat dalam proses ini melalui serangkaian tindakan dan hook filter yang dirancang dengan cermat. Hal ini memastikan bahwa fitur kustomisasi tersebut dapat dipertahankan dan kompatibel dengan versi versi mendatang dari sistem.

Menggunakan hook bawaan untuk menambahkan dan mengubah field

WooCommerce menyediakan sistem hook yang kuat dan mudah digunakan, yang memungkinkan pengembang untuk menambahkan, menghapus, mengubah, atau memeriksa field pembayaran dengan aman. Ini merupakan praktik standar dalam pengembangan kustom, yang menghindari masalah pemeliharaan yang timbul dari modifikasi langsung pada file template inti.

推荐阅读 Panduan Praktis untuk Optimisasi Kinerja Situs Web E-commerce WooCommerce dan Pengembangan Plugin Tingkat Lanjut。

Bagaimana cara menambahkan field baru ke formulir pembayaran?

Untuk menambahkan bidang baru ke halaman pembayaran, misalnya kotak pilihan (radio button) yang memungkinkan pelanggan memilih “tipe nama perusahaan pada faktur”, Anda perlu menggunakan: woocommerce_checkout_fields Filter. Filter ini mengirimkan array lengkap dari field pembayaran ke fungsi pengembang, sehingga Anda dapat menambahkan data ke setiap field yang diinginkan. billingTambahkan entri baru ke dalam (…)

UltaHost – Hosting untuk WordPress

Jaminan pengembalian uang dalam 30 hari, bandwidth dan basis data yang tidak terbatas, perlindungan DDoS gratis, diskon 50% untuk pembelian selama 3 tahun (dari harga normal: 50%).

halaman akses

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' );

Kode di atas membuat sebuah kotak pilihan drop-down di area kolom tagihan. Setiap definisi kolom merupakan sebuah array terkait, di mana… type, label, required Pasangan kunci-nilai (key-value pairs) menentukan perilaku dan tampilan sebuah bidang (field).priority Parameter tersebut sangat penting, karena ia mengontrol urutan penampilan bidang tersebut dalam formulir. Semakin kecil angka yang digunakan, semakin dekat posisinya di bagian awal formulir.

Mengubah atau menghapus atribut dari bidang yang sudah ada

Kebutuhan bisnis mungkin memerlukan penyesuaian pada bidang-bidang default. Misalnya, di beberapa wilayah, bidang “kode pos” dapat diatur menjadi tidak wajib diisi, atau bidang “negara bagian/provinsi” dapat disembunyikan. Hal ini juga dilakukan melalui proses operasi yang sesuai. woocommerce_checkout_fields Dilakukan dengan menggunakan array dari filter.

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' );

lulus (tagihan atau inspeksi, dll) unset() Fungsi dapat menghapus sebuah field secara menyeluruh. Dalam banyak kasus, Anda melakukan hal tersebut dengan menimpa (overwriting) nilai dari suatu properti dalam array. required, label, class) untuk mengubah perilaku bidang tersebut.

Validasi Field dan Pemertahanan Data (Field Validation and Data Persistence)

Menampilkan bidang data di bagian frontend hanyalah langkah pertama. Untuk memastikan kualitas data, diperlukan verifikasi terhadap input yang dikirimkan oleh pengguna, serta penyimpanan data yang telah diverifikasi dengan cara yang dapat diandalkan ke dalam sistem pesanan. Proses ini terdiri dari verifikasi seketika di bagian frontend (opsional, tetapi meningkatkan pengalaman pengguna) dan verifikasi saat pengiriman data ke server (wajib dilakukan).

推荐阅读 Panduan Akhir untuk Mengoptimalkan Kinerja Situs Web E-commerce WooCommerce: Analisis Lengkap dari Konfigurasi hingga Penggunaan Cache。

Menerapkan logika validasi di sisi backend

Setelah pengguna mengklik tombol “Pesan”, WooCommerce akan menjalankan proses verifikasi untuk menyelesaikan pembayaran. Pengembang dapat memanfaatkan fitur ini untuk memastikan bahwa proses pembelian berjalan dengan lancar. woocommerce_checkout_process Gunakan “action hook” untuk memasukkan aturan validasi yang disesuaikan. Jika validasi gagal, maka fungsi yang terkait perlu dipanggil. wc_add_notice() Fungsi tersebut menampilkan pesan kesalahan kepada pengguna dan mencegah proses pembuatan pesanan.

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' );

Simpan nilai bidang ke dalam metadata pesanan.

Setelah verifikasi berhasil, langkah selanjutnya adalah menyimpan nilai dari field kustom tersebut secara permanen saat proses pembuatan pesanan. Hal ini dilakukan dengan… woocommerce_checkout_update_order_meta Aksi pengaitan (action hook) telah selesai dijalankan. Pengaitan ini diaktifkan setelah pesanan dibuat, dan ID pesanan akan diteruskan. Anda sebaiknya menggunakan fitur yang tersedia di WordPress untuk mengelola proses ini. update_post_meta() Fungsi tersebut digunakan untuk menyimpan data formulir sebagai data pesanan.

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' );

Gunakan nama kunci dengan awalan garis bawah saat menyimpan (misalnya: _billing_invoice_typeIni merupakan sebuah kesepakatan (konvensi) yang bertujuan untuk mencegah bidang tersebut ditampilkan dalam kotak metadata “Bidang Khusus” (Custom Fields) pada halaman edit pesanan di backend, sehingga menghindari kesalahan operasi oleh administrator. Pastikan untuk menggunakannya. sanitize_text_field() Fungsi-fungsi seperti ini digunakan untuk membersihkan data, guna mencegah risiko keamanan.

hosting.com hosting bersama

Kinerja tinggi, dilengkapi dengan CPU AMD EPYC, penyimpanan SSD NVMe, dan LiteSpeed, dukungan internal ahli 24 jam sehari, langkah-langkah keamanan canggih termasuk SSL, brute force, malware, dan perlindungan DDoS, menghemat hingga 731 TB/bulan.

halaman akses

Menampilkan data khusus (custom data) di antarmuka yang terkait dengan pesanan.

保存数据后，通常需要在多个地方将其重新显示出来，包括：1) WordPress 后台订单管理界面；2) 前台用户“我的账户”中的订单详情页；3) 发送给客户和管理员的订单邮件。这确保了交易信息的完整性和透明度。

Mengintegrasikan field kustom di halaman detail pesanan di backend

Agar administrator dapat dengan mudah melihat informasi yang diisi oleh pelanggan di bagian belakang (backend), Anda perlu menampilkan metadata pesanan yang telah disimpan ke halaman edit pesanan. Untuk melakukannya, gunakan… woocommerce_admin_order_data_after_billing_address 和 woocommerce_admin_order_data_after_shipping_address Hook yang tersedia memungkinkan Anda untuk menyisipkan konten di belakang informasi yang sudah ada.

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>Jenis Penerima Faktur:</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>Nomor Pelanggan:</strong> '`. esc_html($custom_id)`.'</p>';
    }
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_order_meta_in_admin' );

Menampilkan data di frontend dan dalam pesan email.

Untuk memungkinkan pelanggan juga melihat informasi yang mereka sediakan, Anda perlu memodifikasi template tampilan pesanan di frontend dan isi email. Untuk halaman detail pesanan, Anda dapat menggunakan… woocommerce_order_details_after_order_table “Hook.” Untuk email, hal tersebut perlu digunakan. woocommerce_email_order_meta_keys Filter tersebut memberitahu sistem email tentang kunci metadata yang telah disesuaikan, sehingga metadata tersebut secara otomatis dimasukkan ke dalam isi email.

推荐阅读 Menguasai pengembangan plugin WordPress: Membangun modul fungsional khusus yang efisien dari nol。

// 在前台“查看订单”页面显示
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>Informasi tambahan</h2><table class="shop_table custom-info"><tbody><tr><th>Nomor Pelanggan:</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' );

Menyimpulkan.

Mengatur ulang bidang pembayaran (checkout fields) pada WooCommerce merupakan proses pengembangan yang melibatkan siklus lengkap, mulai dari tampilan di antarmuka pengguna hingga penyimpanan data di basis data. Inti dari proses ini adalah memahami dan memanfaatkan dengan fleksibel sistem hook (pautan/penyambungan fungsi) yang disediakan oleh WooCommerce. woocommerce_checkout_fields Filter digunakan untuk mendefinisikan dan memodifikasi struktur field; melalui… woocommerce_checkout_process Pelaksanaan tindakan tersebut memerlukan logika verifikasi yang diperlukan; dengan bantuan… woocommerce_checkout_update_order_meta Aksi tersebut akan mempertahankan data yang valid secara permanen; pada akhirnya, berbagai hook yang terkait dengan tampilan akan digunakan (seperti…) woocommerce_admin_order_data_after_billing_address 和 woocommerce_email_order_meta_keysData ditampilkan di backend, frontend, dan dalam email. Dengan mengikuti pola ini, para pengembang dapat membuat pengalaman pembayaran yang kuat, stabil, dan sesuai dengan kebutuhan bisnis, sekaligus memastikan bahwa kode yang digunakan mudah diperawat dan aman saat ditingkatkan.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah dapat menambahkan aturan verifikasi untuk bidang kustom, misalnya hanya mengizinkan masukan angka?

Baik, seperti yang dijelaskan dalam bagian “Pemverifikasian Bidang dan Pemertahanan Data” dari artikel ini, Anda dapat… woocommerce_checkout_process Anda dapat menulis logika verifikasi PHP di dalam fungsi panggilan kembali (callback function) dari hook tersebut. Misalnya, gunakan kode berikut: is_numeric() fungsi atau ekspresi reguler preg_match() Periksa apakah nilai bidang tersebut merupakan angka murni. Jika verifikasi gagal, panggil fungsi yang sesuai. wc_add_notice() Cukup tampilkan pesan kesalahannya saja.

Hosting bersama InterServer.

Hosting bersama seharga $2,50 USD per bulan, diskon $0,1 USD untuk bulan pertama dengan kode promo tryinterserver, serta 461 skrip aplikasi cloud yang dapat diinstal dengan sekali klik.

halaman akses

Bagaimana cara membuat suatu bidang kustom hanya ditampilkan untuk metode pengiriman tertentu?

Ini memerlukan kombinasi logika penilaian kondisi. Anda dapat memeriksa metode pengiriman yang ada di keranjang belanja atau sesi pengguna saat menambahkan atau memodifikasi field tertentu. Misalnya, dengan menggunakan… WC()->session->get('chosen_shipping_methods') Mendapatkan ID metode pengiriman yang telah dipilih. Jika tidak memenuhi syarat, maka dapat digunakan metode pengiriman lainnya. unset() Hapus bidang tersebut dari array bidang, atau tambahkan kelas CSS tertentu (misalnya: hiddenDitampilkan/dihidupkan/dihapus secara dinamis dengan bantuan JavaScript.

Saya telah mengubah isi beberapa bidang (field), namun halaman pembayaran (checkout page) tidak berubah. Apa yang mungkin menjadi penyebabnya?

Pertama-tama, pastikan bahwa kode kustom Anda dieksekusi dengan benar (misalnya, kode yang terkait dengan tema yang Anda gunakan). functions.php File tersebut tidak mengandung kesalahan tata bahasa (tidak ada error syntax). Selanjutnya, periksa logika kode Anda untuk memastikan bahwa Anda telah mengubah nama kunci array field yang benar (misalnya…). billing Atau shippingKemudian, bersihkan semua cache yang mungkin ada, termasuk cache objek, cache halaman, dan cache browser. Akhirnya, cobalah beralih ke tema default (misalnya Storefront) dan nonaktifkan plugin lainnya untuk menghilangkan kemungkinan adanya konflik.

Apakah data dari bidang kustom yang telah disimpan dapat digunakan untuk pencarian pesanan selanjutnya atau analisis laporan?

Bisa, tetapi mungkin diperlukan langkah-langkah tambahan. Karena data disimpan sebagai Post Meta dari pesanan, Anda dapat mengambilnya kembali menggunakan fitur pencarian metadata di WordPress. Untuk melakukan pencarian di daftar pesanan di backend WooCommerce, Anda mungkin perlu menggunakan plugin yang mendukung pencarian pada field kustom, atau menulis kode untuk memperluas fungsi pencarian bawaan. Untuk membuat laporan, plugin laporan tingkat lanjut biasanya menyediakan opsi untuk memasukkan metadata pesanan ke dalam kriteria penyaringan dan penampilan. Ekspor data field ke format CSV juga bergantung pada apakah alat ekspor tersebut mendukung pemilihan kolom metadata kustom.