Bagaimana cara menyesuaikan bidang halaman checkout melalui hook WooCommerce?

Memahami struktur bidang checkout WooCommerce.

Sebelum memulai kustomisasi, sangat penting untuk memahami arsitektur internal dari bidang checkout. Halaman checkout WooCommerce bukanlah template statis, tetapi dihasilkan secara dinamis oleh serangkaian kelompok logis dan array bidang yang dapat difilter. Desain ini memberi pengembang kontrol penuh dari tingkat global hingga detail.

Kolom checkout terutama diatur dalam empat kelompok inti: penagihan (billing), pengiriman (shipping), akun (account), dan pesanan (order). Setiap kelompok memiliki pengait filter khusus, seperti woocommerce_billing_fields Ini digunakan untuk menangani bidang faktur secara khusus, yang memungkinkan pengembang melakukan operasi yang lebih terperinci tanpa harus menyentuh seluruh array bidang.

Untuk setiap bidang secara spesifik, ini sendiri merupakan array asosiatif yang berisi beberapa atribut. Atribut-atribut ini menentukan tampilan dan perilaku bidang di front-end. Atribut-atribut kunci termasuk type(Definisikan tipe input, seperti teks, pilih, kotak centang),label(Label tampilan bidang),placeholder(Teks petunjuk di dalam kotak input),required(Nilai boolean, yang menentukan apakah itu wajib diisi),class(Array kelas CSS, mengontrol gaya tata letak, misalnya form-row-first (Membuatnya menempati setengah lebar bagian kiri) dan priority(Angka, mengontrol urutan tampilan bidang dalam kelompok yang sama; semakin kecil nilainya, semakin maju urutannya). Memahami atribut-atribut ini merupakan dasar untuk melakukan kustomisasi yang efektif.

推荐阅读 Panduan Praktis WooCommerce: Membangun Situs Web E-commerce Profesional dari Nol Hingga Satu.。

\nMenggunakan filter inti untuk menambah, menghapus, atau mengubah bidang.

Aksi kustomisasi inti adalah memodifikasi array bidang melalui hook filter. Hook-hook ini merupakan perpanjangan dari arsitektur plugin WordPress dan WooCommerce, yang memungkinkan kode Anda mencegat dan memodifikasi data sebelum digunakan.

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

\nMengubah atribut dari bidang yang sudah ada

Salah satu permintaan paling umum adalah menyesuaikan pengaturan bidang default, seperti mengubah label, penanda, atau mengubahnya dari wajib menjadi opsional. Hal ini dapat dilakukan dengan mengakses atribut tertentu dalam array bidang dan memberikan nilai ulang.

woocommerce_checkout_fields Ini adalah filter utama untuk menangani tugas ini. Contoh berikut menunjukkan cara mengubah bidang kode pos dan bidang catatan pesanan:

add_filter( 'woocommerce_checkout_fields', 'modify_default_checkout_fields' );
function modify_default_checkout_fields( $fields ) {
    // 将账单邮编字段改为非必填，并更新标签和占位符
    $fields['billing']['billing_postcode']['required'] = false;
    $fields['billing']['billing_postcode']['label'] = '邮政编码 / 邮编';
    $fields['billing']['billing_postcode']['placeholder'] = '可选填';

// 为订单备注字段添加更明确的提示
    $fields['order']['order_comments']['placeholder'] = '如需指定配送时间或包装要求，请在此注明。';

// 移除配送电话字段（如果不需要）
    unset( $fields['shipping']['shipping_phone'] );

return $fields;
}

Menambahkan bidang baru ke halaman checkout.

Selain pengeditan, menambahkan bidang bisnis baru (seperti “Nomor Pajak Perusahaan”, “Pesan Hadiah”) merupakan permintaan yang sering dilakukan. Sifat dari penambahan bidang ini adalah untuk menambahkan kolom ke grup yang ditentukan (seperti billingMemasukkan pasangan kunci-nilai baru ke dalam array (\n).

add_filter( 'woocommerce_checkout_fields', 'add_new_custom_field' );
function add_new_custom_field( $fields ) {
    // 在账单分组中添加一个“公司税号”字段
    $fields['billing']['billing_vat_number'] = array(
        'type' => 'text',
        'label' => __('公司税号 (VAT)', 'your-text-domain'),
        'placeholder' => __('请输入您的增值税号', 'your-text-domain'),
        'required' => true, // 根据业务需求设定
        'class' => array('form-row-wide'), // 占满整行
        'clear' => true, // 在该字段后换行
        'priority' => 35, // 调整显示位置，例如放在城市字段之后
    );

// 在订单分组中添加一个“礼品贺卡留言”字段
    $fields['order']['gift_card_message'] = array(
        'type' => 'textarea',
        'label' => __('礼品贺卡留言', 'your-text-domain'),
        'placeholder' => __('我们将把这段祝福写在贺卡上。', 'your-text-domain'),
        'required' => false,
        'class' => array('form-row-wide'),
        'priority' => 25,
    );

return $fields;
}

\nMengolah validasi dan penyimpanan data bidang.

Kolom yang ditambahkan di bagian depan harus terhubung dengan proses pemrosesan data di bagian belakang, jika tidak, informasi yang dimasukkan oleh pengguna akan hilang. Ini melibatkan dua langkah penting, yaitu validasi data dan penyimpanan permanen.

推荐阅读 Menganalisis WooCommerce secara mendalam: Membangun situs web e-commerce profesional Anda dari nol.。

Melakukan validasi bidang di sisi server.

Untuk memastikan validitas dan keamanan data, sangat penting untuk memvalidasi bidang kustom yang diajukan oleh pengguna di sisi server. WooCommerce menyediakan woocommerce_checkout_process Hook aksi, yang akan dipicu sebelum data diproses dalam proses checkout.

Di dalam fungsi panggilan balik dari hook ini, Anda dapat memeriksa $_POST Nilai bidang yang sesuai dalam variabel superglobal. Jika nilainya tidak memenuhi persyaratan (misalnya, bidang wajib kosong atau format yang salah), Anda dapat menggunakan wc_add_notice() Fungsi tersebut mengeluarkan pesan kesalahan kepada pengguna, sehingga mencegah pesanan masuk ke tahap pemrosesan selanjutnya.

add_action( 'woocommerce_checkout_process', 'validate_custom_checkout_field' );
function validate_custom_checkout_field() {
    // 验证“公司税号”字段是否已填写（假设其为必填）
    if ( ! empty( $_POST['billing_vat_number'] ) ) {
        // 可以在此添加更复杂的格式验证逻辑
        $vat_number = sanitize_text_field( $_POST['billing_vat_number'] );
        if ( strlen( $vat_number ) < 10 ) {
            wc_add_notice( __( '公司税号格式不正确，长度应不少于10位。', 'your-text-domain' ), 'error' );
        }
    } else {
        // 如果字段被标记为required但未填写，则报错
        // 注意：此处的逻辑应与前端字段的`required`属性设置保持一致
        // wc_add_notice( __( '请填写公司税号。', 'your-text-domain' ), 'error' );
    }
}

Menyimpan nilai bidang kustom ke pesanan.

Data yang terverifikasi perlu disimpan secara permanen. Hal ini biasanya dilakukan melalui woocommerce_checkout_update_order_meta Ini dilakukan dengan menggunakan hook aksi. Hook ini dipicu setelah pesanan dibuat, tetapi sebelum pembayaran, dan merupakan lokasi standar untuk menyimpan metadata tingkat pesanan (Custom Order Meta).

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

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field_to_order' );
function save_custom_checkout_field_to_order( $order_id ) {
    // 保存公司税号
    if ( isset( $_POST['billing_vat_number'] ) && ! empty( $_POST['billing_vat_number'] ) ) {
        // 清理数据后保存
        update_post_meta( $order_id, '_billing_vat_number', sanitize_text_field( $_POST['billing_vat_number'] ) );
    }

// 保存礼品留言
    if ( isset( $_POST['gift_card_message'] ) && ! empty( $_POST['gift_card_message'] ) ) {
        update_post_meta( $order_id, '_gift_card_message', sanitize_textarea_field( $_POST['gift_card_message'] ) );
    }
}

Setelah disimpan, data ini akan disimpan dalam database sebagai data elemen pesanan (Post Meta), dan Anda dapat mengaksesnya di halaman detail pesanan di backend, file ekspor pesanan, dan melalui panggilan API.

Aplikasi tingkat lanjut dan praktik terbaik.

Setelah menguasai operasi dasar, beberapa teknik lanjutan dan praktik terbaik dapat membantu Anda membangun solusi kustom yang lebih kuat, ramah pengguna, dan berkinerja tinggi.

Menampilkan logika kondisional untuk bidang

Dalam beberapa kasus, tampilan atau tidak tampilnya bidang tergantung pada nilai bidang lainnya. Misalnya, bidang “Nomor Pesanan Pembelian” hanya akan ditampilkan jika pengguna memilih “Pembelian Perusahaan”. Hal ini terutama bergantung pada JavaScript front-end (biasanya menggunakan jQuery) untuk memanipulasi DOM secara dinamis.

推荐阅读 Bagaimana cara menyesuaikan tema WordPress yang kuat dan indah?。

Anda perlu menulis skrip untuk mendengarkan peristiwa perubahan pada bidang sumber (seperti kotak pilihan), lalu menampilkan atau menyembunyikan elemen pembungkus bidang target berdasarkan nilainya. Selain itu, untuk memastikan konsistensi data, disarankan untuk menambahkan kondisi penilaian yang sesuai dalam logika validasi backend.

Menampilkan data di latar belakang dan dalam email administratif.

Untuk memungkinkan pemilik toko melihat data yang tersimpan, Anda perlu menampilkan bidang-bidang kustom ini di halaman detail pesanan di backend WordPress. Anda dapat menggunakan woocommerce_admin_order_data_after_billing_address 或 woocommerce_admin_order_data_after_shipping_address Menunggu hook aksi untuk mengeluarkan informasi.

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

add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_on_admin_order', 10, 1 );
function display_custom_field_on_admin_order( $order ) {
    $vat_number = $order->get_meta( '_billing_vat_number' );
    if ( $vat_number ) {
        echo '<p><strong>'\n' . __( 'Nomor Pajak Perusahaan:', 'your-text-domain' ) . '</strong> '`. esc_html($vat_number)`.'</p>';
    }
}

Demikian pula, Anda juga dapat melakukannya melalui hook filter seperti woocommerce_email_order_meta_fields\n, tambahkan bidang kustom ke email konfirmasi pesanan yang dikirim ke pelanggan atau administrator.

Saran untuk kinerja dan organisasi kode.

将所有的结账字段自定义代码集中管理，例如放在一个独立的PHP文件中，或者封装在一个类中，以提高可维护性。避免在钩子回调函数中执行重型数据库查询或远程API调用。对于需要条件判断的逻辑，尽量使用早期返回（early return）来减少不必要的处理。始终遵循安全准则：对输入进行清理（sanitization），对输出进行转义（escaping）。

Menyimpulkan.

Menyesuaikan bidang halaman checkout melalui sistem hook WooCommerce adalah proses lengkap yang dimulai dengan memahami arsitektur, kemudian menggunakan filter untuk memodifikasi data, dan terakhir memvalidasi dan menyimpan data melalui hook aksi. Metode ini menghindari memodifikasi file template inti secara langsung, memastikan kompatibilitas dan pemeliharaan kode saat diupgrade. Baik itu penyesuaian label sederhana atau penambahan bidang kondisional dan pemrosesan data yang kompleks, alur kerja berbasis hook ini menyediakan solusi yang kuat dan fleksibel. Dengan menguasai keterampilan ini, Anda akan dapat menciptakan pengalaman checkout yang sangat disesuaikan, lancar, dan aman untuk data di toko online apa pun, sehingga secara langsung meningkatkan efisiensi konversi bisnis dan kepuasan pelanggan.

FAQ - Pertanyaan yang Sering Diajukan.

Bagaimana cara menyesuaikan gaya bidang kustom?

Gaya dari bidang kustom (custom fields) terutama dikontrol melalui CSS. WooCommerce akan membuat pengemas HTML (wrapper) untuk setiap bidang yang memiliki kelas CSS tertentu. Anda dapat memanfaatkan kelas-kelas tersebut, misalnya kelas yang dihasilkan dari ID bidang tersebut. #billing_vat_number_field(...) ), kelas tata letak (seperti .form-row-wide(atau) atau mengonfirmasi kelas status (seperti .woocommerce-validatedDi sini, Anda dapat menulis aturan CSS di stylesheet tema front-end. Untuk kebutuhan styling yang lebih kompleks, Anda mungkin perlu menambahkan kelas CSS kustom ke bidang-bidang tersebut. class Di dalam array atribut.

Mengapa bidang kustomisasi saya tidak muncul di halaman checkout?

Silakan ikuti langkah-langkah berikut untuk menyelidiki: Pertama, pastikan kode PHP untuk menambahkan bidang telah digunakan dengan benar di tema aktif. functions.php File atau plugin kustom tersebut tidak mengandung kesalahan sintaks yang menyebabkan eksekusi PHP terhenti. Selanjutnya, periksa logika kode Anda untuk memastikan bahwa Anda sedang memodifikasi grup field yang benar. $fields[‘billing’]Dan pada akhirnya, itu kembali dengan benar. $fields Array. Kemudian, hapus semua cache yang mungkin ada, termasuk cache objek WordPress, cache halaman, dan cache browser. Terakhir, periksa apakah ada plugin atau kode tema lain yang mengesampingkan modifikasi Anda dengan prioritas lebih tinggi.

Bagaimana cara menampilkan nilai bidang kustom dalam tampilan pesanan akun pengguna?

Untuk menampilkan nilai bidang dalam detail pesanan di halaman “Akun Saya”, Anda perlu menggunakan woocommerce_order_details_after_order_table Hook aksi (untuk tampilan klien) atau woocommerce_order_item_meta_end Menunggu hook. Dalam fungsi panggilan balik, ambil objek pesanan saat ini, lalu gunakan get_meta() Metode ini mengambil data elemen pesanan yang tersimpan dan mengekspornya dengan aman.

add_action( 'woocommerce_order_details_after_order_table', 'display_custom_field_in_customer_view', 10, 1 );
function display_custom_field_in_customer_view( $order ) {
    $custom_value = $order->get_meta( '_your_field_key' );
    if ( $custom_value ) {
        echo '<section class="custom-field-display"><h2>Informasi kustomisasi.</h2><p>'`. esc_html($custom_value)`.'</p></section>';
    }
}

Bagaimana cara mengatur atribut `priority` dari bidang?

priority Atribut ini mengontrol urutan penataan vertikal bidang dalam kelompok yang sama. Secara default, prioritas bidang WooCommerce biasanya kelipatan 10. Anda dapat melihat nilai default dengan mengeluarkan array bidang, lalu mengatur nilai Anda sendiri sesuai kebutuhan. Misalnya, jika ingin menempatkan bidang di antara “Baris Alamat 1” dan “Baris Alamat 2”, Anda dapat mengatur prioritasnya ke angka di antara keduanya, seperti 55. Semakin kecil nilainya, semakin atas posisi bidang dalam formulir. Pengaturan yang tepat dapat mengoptimalkan alur logika pengisian formulir.