Panduan Pembangunan Lengkap Bidang Pembayaran Diperibadikan untuk WooCommerce: Dari Permulaan Hingga Penggunaan Sebenar

Mengapa perlu menyesuaikan bidang pembayaran (customizing checkout fields)?

Halaman pembayaran lalai WooCommerce menyediakan medan asas seperti nama, alamat, dan emel, namun untuk banyak senario perniagaan tertentu, medan-medan ini tidak mencukupi. Sebagai contoh, kedai yang menjual kek khusus mungkin memerlukan maklumat seperti “ucapan selamat” yang terdapat pada kek tersebut, laman web borong B2B mungkin memerlukan “nombor cukai syarikat”, manakala laman web penjualan tiket acara mungkin memerlukan “nombor kad pengenalan peserta” untuk tujuan pengesahan. Dalam situasi-situasi seperti ini, pembangun perlu mengembangkan fungsi dengan menyesuaikan medan pembayaran untuk memenuhi keperluan pengumpulan data perniagaan yang unik.

Medan yang disesuaikan bukan sahaja dapat meningkatkan pengalaman pengguna dan menjadikan proses pembayaran lebih sesuai dengan keperluan perniagaan, tetapi juga menyediakan sokongan data yang penting untuk pengurusan pelanggan, pemprosesan pesanan, dan aktiviti pemasaran yang seterusnya. Dengan menampilkan medan-medan ini dengan betul pada bahagian belakang (backend) dan dalam e-mel, integriti maklumat sepanjang proses pesanan dapat dipastikan.

Penerangan Terperinci Mengenai Kaedah Utama dan Hook

WooCommerce menyediakan sistem Hook yang kuat dan fleksibel, yang membolehkan kita membuat penyesuaian mendalam pada halaman pembayaran tanpa perlu mengubah kod asas. Untuk mengimplementasikan medan khusus (custom fields), terdapat tiga langkah utama: menambah medan, mengesahkan data medan, dan menyimpan serta memaparkan data medan tersebut. Setiap langkah ini berkaitan dengan Hook tindakan (action hooks) atau Hook penapis (filter hooks) yang khusus dalam WooCommerce.

Filter untuk menambahkan bidang (fields)

Menambahkan bidang (fields) terutamanya dilakukan melalui… woocommerce_checkout_fields Ia dilaksanakan menggunakan penapis (filters). Penapis ini membenarkan kita untuk menambahkan kotak masuk baru, menu drop-down, atau kotak pilihan (checkboxes) ke pelbagai bahagian dalam borang pembayaran, seperti kawasan “Bil”, kawasan “Penghantaran”, atau kawasan “Maklumat Tambahan Pesanan” yang disesuaikan.

Pembangun perlu menulis sebuah fungsi panggilan balik (callback function) yang menerima array medan yang sedia ada, mengubahnya, dan kemudian mengembalikan array baru. Di dalam fungsi tersebut, mereka boleh mendefinisikan dengan terperinci jenis setiap medan baru, label, penunjuk tempat pengisian (placeholder), sama ada medan tersebut wajib diisi atau tidak, keutamaan (untuk pengurusan susunan), serta atribut seperti kelas CSS, dan lain-lain.

UltaHost – Penyedia Hosting untuk WordPress

Jaminan pemulangan wang dalam tempoh 30 hari, lebar jalur dan pangkalan data yang tidak terhad, perlindungan DDoS percuma, diskaun 50% untuk pembelian selama 3 tahun.

Lawati halaman

Hook yang digunakan untuk mengesahkan kawasan input (field)

Ketika pengguna menghantar borang pembayaran, kita mesti memastikan bahawa data dalam bidang khusus (custom fields) memenuhi syarat yang ditetapkan. Pada masa ini, kita perlu menggunakan… woocommerce_checkout_process Action hook. Dalam fungsi panggilan balik (callback function) untuk hook ini, kita boleh mengakses data yang telah dihantar. $_POST Data yang dihantar oleh variabel global akan disemak dan diperiksa kesahihannya.

Sebagai contoh, kita boleh memeriksa sama ada sesuatu bidang wajib diisi atau tidak, atau mengesahkan sama ada format nombor telefon adalah betul. Jika pengesahan gagal, kita boleh menggunakan… wc_add_notice() Fungsi tersebut menunjukkan mesej ralat kepada pengguna, menghalang proses pembayaran daripada diteruskan.

Hook yang digunakan untuk menyimpan dan menunjukkan data

Selepas pengguna menyerahkan pesanan, data daripada bidang khusus (custom fields) perlu disimpan dengan selamat dalam metadata pesanan tersebut. Ini dilakukan melalui… woocommerce_checkout_update_order_meta Gunakan “action hook” untuk menyelesaikannya. Dalam fungsi panggilan balik (callback function) bagi hook tersebut, kita boleh menggunakan… update_post_meta() Fungsi tersebut akan menyimpan nilai-nilai daripada borang yang telah disahkan ke dalam pesanan yang bersesuaian. wp_postmeta Dalam jadual pangkalan data.

Selepas menyimpan data tersebut, kita biasanya perlu menunjukkannya di tiga tempat: halaman butiran pesanan di latar belakang pentadbir, emel pengesahan pesanan yang dihantar kepada pengguna, dan paparan pesanan dalam akaun pelanggan. Ini melibatkan pengaturan antara muka pentadbiran, templat emel, dan halaman akaun pengguna pada bahagian hadapan (front end).

Pengalaman Praktikal: Menambahkan Medan “Ucapan Hadiah”

Berikut ini, kita akan menunjukkan cara untuk menambahkan kotak teks “Mesej Hadiah” untuk kedai bunga dalam talian melalui contoh yang lengkap. Kotak teks ini akan muncul di kawasan maklumat pesanan, merupakan medan pilihan (sukarela), dan kandungannya akan disimpan serta dipaparkan di belakang tabir dan dalam emel.

Langkah Satu: Tambahkan bidang-bidang ke halaman pembayaran

Pertama sekali, kita perlu menggunakan woocommerce_checkout_fields Kita perlu menggunakan penapis untuk mendaftarkan medan baru ini. Kita akan menambahkannya selepas medan “Catatan Pesanan”. Berikut adalah kod yang perlu dilaksanakan, dan ia harus ditambahkan ke dalam sub-topik yang berkaitan. functions.php Ditambahkan ke dalam fail atau melalui ciri tambahan (plugin) yang dibina khas.

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;
}

Kod ini membuat satu… textarea Medan jenis tersebut mempunyai label “Ucapan Selamat Hari Lahir Hadiah” (Gift Birthday Wishes), dan telah disediakan dengan placeholder yang sesuai serta kelas CSS yang berkaitan.priority Parameter mengawal kedudukan penampilannya.

Langkah Kedua: Simpan data bidang ke dalam pesanan

Seterusnya, kita perlu menyimpan mesej yang diisi oleh pengguna semasa proses pembuatan pesanan. woocommerce_checkout_update_order_meta Ia dilaksanakan menggunakan “hook” (pautan/kaitan tertentu dalam kod).

hosting.com Hosting Bersama

Prestasi tinggi, menampilkan CPU AMD EPYC, storan SSD NVMe dan LiteSpeed, dengan sokongan pakar dalaman 24/7, langkah keselamatan canggih termasuk SSL, perlindungan serangan paksa kata laluan, perisian hasad dan DDoS, menjimatkan sehingga 73%.

Lawati halaman

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

Di sini, kita akan memeriksa… $_POST['gift_message'] Adakah terdapat nilai? Jika ada, maka gunakannya. sanitize_textarea_field() Selepas fungsi melakukan pembersihan keselamatan, ia akan melanjutkan prosesnya. update_post_meta() Simpannya sebagai metadata pesanan, dengan nama kunci (meta key) sebagai… _gift_message。

Langkah Tiga: Menunjukkan data di bahagian belakang (backend) dan dalam emel.

Setelah data disimpan, kita perlu memastikannya boleh dilihat oleh pengguna. Kod di bawah ini menunjukkan cara untuk memaparkan medan tersebut pada halaman butiran pesanan di latar belakang pentadbir dan dalam e-mel pelanggan.

// 在管理员订单详情页显示
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;
}

Fungsi pertama akan memaparkan mesej ulasan di bawah alamat bil untuk pesanan di latar belakang. Fungsi kedua akan menambahkan mesej ulasan sebagai baris data baru ke dalam e-mel pengesahan pesanan yang dihantar oleh WooCommerce.

Teknik Tinggi dan Perkara yang Perlu Diperhatikan

Setelah menguasai kaedah asas, kita boleh meneroka senario aplikasi yang lebih kompleks dan penyelesaian pengoptimuman, menjadikan bidang kustom lebih berkuasa dan mudah digunakan.

Create conditions to display certain fields.

Kadang-kadang, sama ada sesuatu medan dipaparkan atau tidak bergantung pada nilai medan lain. Sebagai contoh, medan “Alamat Penerima Invois” hanya akan dipaparkan apabila pengguna memilih pilihan “Perlu Invois”. Ini memerlukan penggunaan JavaScript untuk mengurus interaksi pada bahagian hadapan (front end) aplikasi. Kita boleh menambahkan kod JavaScript pada medan yang bertindak sebagai pemacu (seperti kotak pilihan) untuk mengawal pengaturan ini. change Pengendali acara (event listener) digunakan untuk mengawal secara dinamik sama ada bidang sasaran perlu dipaparkan atau disembunyikan. Pada masa yang sama, proses pengesahan logik juga perlu dilakukan di pihak server.

Keselamatan dan pembersihan data dalam bidang (field data)

Keselamatan adalah sangat penting. Semasa memproses input pengguna, pengesahan dan pembersihan harus selalu dilakukan. Untuk kotak teks, gunakan… sanitize_text_field() 或 sanitize_textarea_field()Untuk alamat e-mel, gunakan sanitize_email()Ketika menghantar data ke bahagian hadapan (frontend), pastikan anda menggunakan… esc_html() 或 wp_kses_post() Fungsi-fungsi seperti ini digunakan untuk melakukan “escape” terhadap kandungan, bagi mencegah serangan skrip merentas tapak (XSS – Cross-Site Scripting).

Hosting Bersama InterServer

Hosting kongsi: 1TB/bulan pada $2.50 USD, bulan pertama pada $0.10 USD dengan kod promo tryinterserver. 461 skrip aplikasi awan tersedia untuk pemasangan satu klik.

Lawati halaman

Keserasian dengan plugin dan tema pihak ketiga

Semasa menambahkan bidang khusus (custom fields), ia mungkin akan bertentangan dengan gaya atau skrip tertentu dalam tema atau plugin lain (terutamanya plugin yang dioptimumkan untuk proses pembayaran). Adalah disyorkan untuk sentiasa melakukan pembangunan dalam sub-tema (sub-theme), dan menambahkan nama kelas CSS yang unik kepada elemen yang menempatkan bidang khusus tersebut. Sebelum melaksanakan secara rasmi, pastikan untuk menguji dalam pelbagai senario, termasuk dengan tema yang berbeza dan dengan plugin yang sering digunakan. Menggunakan alat pembangun pelayar (browser developer tools) untuk memeriksa ralat pada elemen dan skrip merupakan cara yang penting untuk menyelesaikan masalah keserasian (compatibility issues).

RINGKASAN

Melalui panduan dalam artikel ini, kita bermula dengan memahami keperluan pelanggan, dan kemudian secara beransur-ansur memahami proses pembangunan bidang pembayaran khusus (custom checkout fields) dalam platform WooCommerce. Kita telah belajar bagaimana untuk menggunakan… woocommerce_checkout_fields、woocommerce_checkout_process 和 woocommerce_checkout_update_order_meta Tiga fungsi utama ini digunakan untuk menambah, mengesahkan, dan menyimpan data dalam bidang (fields). Melalui kes praktikal “Mesej Hadiah” (Gift Message), proses penuh dari penciptaan bidang hingga paparan data telah ditunjukkan secara lengkap. Akhirnya, topik-topik lanjutan seperti bidang bersyarat (conditional fields), pengurusan keselamatan data (data security), dan keserasian (compatibility) telah dibincangkan.

Dengan menguasai kemahiran-kemahiran ini, anda akan dapat menangani keperluan pengumpulan data yang unik dalam pelbagai perniagaan e-dagang dengan fleksibiliti, dan membina kedai WooCommerce yang lebih profesional serta diperibadikan. Ini seterusnya akan meningkatkan kadar penukaran dan kepuasan pelanggan.

FAQ - Soalan Lazim

Di mana data disimpan untuk bidang khusus (custom fields)?

Data daripada bidang khusus (custom fields) biasanya disimpan sebagai “metadata pesanan” dalam pangkalan data WordPress. wp_postmeta Dalam jadual tersebut, setiap entri data mengandungi ID pesanan yang bersesuaian.post_id), metakunci yang anda definisikan (seperti _gift_messageAnda boleh mengakses maklumat seperti item yang dipesan dan nilai meta melalui kaedah yang disediakan oleh objek pesanan dalam WooCommerce. $order->get_meta(‘_gift_message’) atau fungsi WordPress get_post_meta() Untuk mendapatkan data ini.

Bagaimana untuk menambah pengesahan bahagian depan (front-end validation) untuk bidang khusus (custom fields), seperti pengesahan format?

Selain daripada menggunakan woocommerce_checkout_process Selain menggunakan “hook” untuk pengesahan pada pihak server, anda juga boleh menambahkan atribut asli HTML5 pada bidang-bidang tertentu untuk melakukan pengesahan asas. Contohnya: pattern Untuk penggunaan dalam ekspresi reguler.type=”email” Untuk format emel. Untuk pengesahan masa nyata yang lebih kompleks, diperlukan untuk menulis kod JavaScript/jQuery untuk memantau perubahan pada bidang-bidang yang berkaitan. blur 或 input Acara tersebut memeriksa sama ada nilai tersebut mematuhi peraturan, dan memberikan maklum balas secara segera.

Bolehkah medan khusus (custom fields) ditambahkan ke halaman pendaftaran pengguna?

Boleh, tetapi prosesnya sedikit berbeza. Hook untuk bidang pembayaran di WooCommerce adalah khusus untuk halaman pembayaran. Jika anda ingin menambahkan bidang pada halaman pendaftaran “Akaun Saya”, anda perlu menggunakan hook lain yang disediakan oleh WordPress dan WooCommerce. woocommerce_register_form Untuk menambahkan bidang (fields),woocommerce_created_customer Ia digunakan untuk menyimpan data bidang ke dalam metadata pengguna. Prinsipnya serupa dengan bidang pembayaran, tetapi lokasi penyimpanan data (metadata pengguna) dan mekanisme pengaitan (hook) yang digunakan berbeza.

Mengapa bidang kustom saya tidak dipaparkan?

Pertama sekali, periksa sama ada kod anda telah ditambahkan dengan betul ke dalam sistem. functions.php Dan tiada ralat tatabahasa. Selanjutnya, pastikan kunci dalam array bidang adalah betul; sebagai contoh, adakah anda telah menambahkannya dengan betul ke dalam sistem? $fields[‘order’] Atau $fields[‘billing’] Sebahagiannya. Sekali lagi, periksa sama ada terdapat kod daripada plugin atau tema lain yang menutupi atau menghapuskan medan-medan yang anda gunakan. Akhir sekali, cuba bersihkan cache laman web dan pelayar anda, kerana fail CSS/JS yang lama mungkin mempengaruhi proses rendering.