Bagaimana untuk menyesuaikan bidang halaman pembayaran menggunakan plugin WooCommerce?

Memahami struktur bidang pembayaran di WooCommerce

Sebelum memulakan penyesuaian, adalah sangat penting untuk memahami dengan mendalam struktur dalaman bidang-bidang pembayaran. Halaman pembayaran di WooCommerce bukanlah sebuah templat yang statik, tetapi dijana secara dinamik oleh satu siri kumpulan logik dan array bidang yang boleh disaring. Reka bentuk ini memberikan pengembang kawalan yang menyeluruh, daripada aspek keseluruhan hingga butiran terperinci.

Bidang-bidang pembayaran (pembayaran) terutamanya disusun di bawah empat kumpulan utama: Bil (billing), Penghantaran (shipping), Akaun (account), dan Pesanan (order). Setiap kumpulan mempunyai pengait penapis (filter hook) yang khusus untuknya. woocommerce_billing_fields Digunakan khusus untuk menguruskan bidang-bidang dalam bil (bill fields), yang membolehkan pembangun melakukan operasi yang lebih terperinci tanpa perlu menyentuh keseluruhan array bidang tersebut.

Secara khusus untuk setiap medan (field), ia sendiri merupakan sebuah array berkaitan (associated array) yang mengandungi beberapa atribut (attributes). Atribut-atribut ini menentukan cara medan tersebut ditampilkan dan berkelakuan pada bahagian hadapan (frontend). Atribut-atribut yang penting termasuk… type(Menentukan jenis input, seperti text, select, checkbox)label(Label untuk paparan lajur)placeholder(Teks petunjuk dalam kotak masukan)required(Nilai boolean, menunjukkan sama ada sesuatu item adalah wajib diisi atau tidak)class(Mассив kelas CSS, digunakan untuk mengawal gaya susun atur, contohnya…) form-row-first (Jadikan ia mengambil separuh lebar bahagian kiri) serta priority(Nombor yang digunakan untuk mengawal susunan penampilan bidang dalam kumpulan yang sama; nilai yang lebih kecil akan dipaparkan lebih awal.) Memahami atribut-atribut ini merupakan asas penting untuk melakukan sebarang penyesuaian (customization) yang berkesan.

Diperoleh daripada WEB\nDisyorkan untuk membaca. WooCommerce Praktikal Panduan: Membina Laman Web E-dagang Profesional Dari Kosong。

Menggunakan penapis teras untuk menambah, menghapus, atau mengubah medan

Operasi kustom yang paling penting adalah dengan mengubah susunan array bidang (fields) melalui “filter hooks”. Hook-hook ini merupakan lanjutan daripada arkitektur plugin WordPress dan WooCommerce, yang membenarkan kod anda untuk mengintercept dan mengubah data sebelum ia digunakan.

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

Mengubah sifat (attributes) bagi medan (fields) yang sedia ada

Salah satu keperluan yang paling sering adalah untuk menyesuaikan tetapan bidang lalai, seperti mengubah label, penunjuk tempat (placeholder), atau mengubahnya daripada wajib (required) kepada tidak wajib (optional). Ini boleh dilakukan dengan mengakses atribut tertentu dalam array bidang dan menggantinya dengan nilai yang baru.

woocommerce_checkout_fields Ini adalah penapis utama yang digunakan untuk mengendalikan tugas ini. Contoh di bawah menunjukkan cara untuk mengubah bidang kod pos dan bidang ulasan 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;
}

Tambahkan bidang baru pada halaman pembayaran.

Selain daripada membuat pengubahsuaian, menambahkan bidang perniagaan yang baru (seperti “Nombor Cukai Syarikat”, “Mesej Hadiah”) merupakan keperluan yang sering berlaku. Esensi penambahan bidang tersebut adalah untuk menyediakan maklumat tambahan kepada kumpulan tertentu (seperti… billingMasukkan sepasang kunci-nilai baru ke dalam array tersebut.

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

Mengendalikan pengesahan dan penyimpanan data dalam bidang (fields)

Medan yang ditambahkan pada bahagian hadapan (front end) mesti disambungkan dengan proses pemprosesan data pada bahagian belakang (back end); jika tidak, maklumat yang dimasukkan oleh pengguna akan hilang. Ini melibatkan dua langkah kritikal, iaitu pengesahan data (data validation) dan penyimpanan data secara kekal (persistent storage).

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menganalisis WooCommerce secara mendalam: Membina laman web e-dagang profesional anda daripada awal.。

Melaksanakan pengesahan medan pada pihak server

Untuk memastikan keberkesanan dan keselamatan data, pengesahan terhadap bidang khusus (custom fields) yang dihantar oleh pengguna perlu dilakukan di pihak server. WooCommerce menyediakan kemudahan untuk melakukan pengesahan tersebut. woocommerce_checkout_process Action Hook – Ia akan diaktifkan sebelum proses pembayaran mengendalikan data.

Dalam fungsi panggilan balik (callback function) untuk hook ini, anda boleh melakukan pemeriksaan. $_POST Nilai dalam bidang yang sepadan dalam variabel superglobal. Jika nilai tersebut tidak memenuhi syarat (contohnya, bidang wajib kosong atau mempunyai format yang salah), anda boleh menggunakan… wc_add_notice() Fungsi tersebut mengeluarkan mesej ralat kepada pengguna, dengan itu menghalang pesanan daripada melanjutkan ke proses seterusnya.

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

Simpan nilai bidang khusus ke dalam pesanan.

Data yang telah disahkan perlu disimpan secara kekal. Ini biasanya dilakukan melalui… woocommerce_checkout_update_order_meta Action hook digunakan untuk menyelesaikan tugas tertentu. Hook ini akan diaktifkan selepas pesanan dibuat dan sebelum pembayaran dilakukan, dan merupakan tempat yang standard untuk menyimpan metadata peringkat pesanan (Custom Order Meta).

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_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 tersebut akan disimpan dalam pangkalan data sebagai metadata pesanan (Post Meta). Anda boleh mengaksesnya pada halaman butiran pesanan di bahagian belakang, dalam fail eksport pesanan, atau melalui panggilan API.

Aplikasi Lanjutan dan Amalan Terbaik

Setelah menguasai operasi asas, beberapa kemahiran lanjutan dan amalan terbaik dapat membantu anda membina penyelesaian yang lebih kukuh, mesra pengguna, dan berprestasi tinggi.

Melaksanakan logik syarat untuk menunjukkan nilai dalam bidang (field)

Dalam sesetengah kes, sama ada sesuatu medan dipaparkan atau tidak bergantung pada nilai medan lain. Sebagai contoh, medan “Nombor Pesanan Pembelian” hanya akan dipaparkan apabila pengguna memilih pilihan “Pembelian Korporat”. Ini kebanyakannya dilakukan menggunakan JavaScript pada bahagian hadapan (front end), biasanya dengan jQuery, untuk mengoperasi DOM secara dinamik.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Bagaimana untuk menyesuaikan tema WordPress yang berkuasa dan menarik dari segi reka bentuk?。

Anda perlu menulis skrip untuk mendengar acara perubahan pada bidang sumber (seperti kotak pilihan), kemudian menunjukkan atau menyembunyikan elemen pembungkus bidang sasaran berdasarkan nilai yang dipilih. Selain itu, untuk memastikan konsistensi data, adalah disyorkan untuk menambahkan pengesahan logik yang sesuai pada bahagian pelayan (backend).

Menunjukkan data di latar belakang dan semasa mengurus e-mel

Untuk membolehkan pemilik kedai melihat data yang disimpan, anda perlu menunjukkan medan-medan khusus (custom fields) tersebut pada halaman butiran pesanan di bahagian belakang (backend) WordPress. Anda boleh menggunakan ciri-ciri yang disediakan oleh WordPress untuk mencapai ini. woocommerce_admin_order_data_after_billing_address 或 woocommerce_admin_order_data_after_shipping_address Gunakan pengait tindakan (action hooks) untuk mengeluarkan maklumat.

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

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>' . __( '公司税号:', 'your-text-domain' ) . '</strong> '`. esc_html($vat_number)`.'</p>';
    }
}

Begitu juga, anda boleh menggunakan pengait penapis (filter hooks) untuk melakukan perkara yang sama. woocommerce_email_order_meta_fieldsTambahkan bidang khusus (custom fields) ke dalam emel pengesahan pesanan yang dihantar kepada pelanggan atau pentadbir.

Cadangan untuk Prestasi dan Organisasi Kod

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

RINGKASAN

Menggunakan sistem hook dalam WooCommerce untuk menyesuaikan bidang halaman pembayaran adalah proses yang lengkap, bermula dengan memahami struktur aplikasi, kemudian menggunakan penapis untuk mengubah data, dan seterusnya menggunakan hook tindakan untuk mengesahkan dan menyimpan data tersebut. Kaedah ini mengelakkan daripada membuat perubahan langsung pada fail templat asas, yang memastikan keserasian dan kemudahan penyelenggaraan kod. Sama ada untuk penyesuaian label yang mudah atau penambahan bidang berdasarkan syarat-syarat tertentu serta pemprosesan data yang kompleks, aliran kerja berdasarkan hook ini menyediakan penyelesaian yang kuat dan fleksibel. Dengan menguasai kemahiran-kemahiran ini, anda akan dapat mencipta pengalaman pembayaran yang sangat disesuaikan, lancar, dan selamat untuk mana-mana kedai dalam talian, seterusnya meningkatkan kecekapan penukaran perniagaan dan kepuasan pelanggan.

FAQ - Soalan Lazim

Bagaimanakah untuk menyesuaikan gaya (style) bagi bidang khusus (custom fields)?

Gaya untuk bidang khusus (custom fields) dikawal terutamanya melalui CSS. WooCommerce akan menjana pengapit HTML (wrapper) untuk setiap bidang yang mengandungi kelas CSS yang khusus. Anda boleh menggunakan kelas-kelas ini, seperti kelas yang dihasilkan berdasarkan ID bidang tersebut. #billing_vat_number_field), kelas reka letak (seperti .form-row-wide) atau kelas status pengesahan (seperti .woocommerce-validatedAnda perlu menulis peraturan CSS dalam fail gaya tema bahagian depan (frontend theme). Untuk keperluan gaya yang lebih kompleks, anda mungkin perlu menambah kelas CSS yang diperibadikan ke dalam bidang-bidang tertentu. class Dalam array atribut.

Mengapa bidang khusus yang saya buat sendiri tidak dipaparkan pada halaman pembayaran?

Silakan ikuti langkah-langkah berikut untuk melakukan pemeriksaan: Pertama, pastikan bahawa kod PHP yang digunakan untuk menambahkan bidang tersebut telah dipasang dengan betul pada tema acara yang berkaitan. functions.php Fail atau plugin yang dibina sendiri tersebut tidak mengandungi ralat sintaks yang menyebabkan pelaksanaan PHP terhenti. Selain itu, periksa logik kod untuk memastikan anda sedang memodifikasi kumpulan medan yang betul. $fields[‘billing’]), dan akhirnya mengembalikan jawapan yang betul. $fields Array. Kemudian, bersihkan semua cache yang mungkin wujud, termasuk cache objek WordPress, cache halaman, dan cache pelayar. Akhir sekali, periksa sama ada terdapat plugin atau kod tema lain yang telah mengatasi perubahan yang anda buat dengan keutamaan yang lebih tinggi.

Bagaimana untuk menunjukkan nilai daripada bidang khusus (custom fields) dalam pandangan pesanan akaun pengguna?

Untuk menampilkan nilai bidang dalam butiran pesanan pada halaman “Akaun Saya”, anda perlu menggunakan… woocommerce_order_details_after_order_table Action Hook (untuk pandangan pelanggan) atau woocommerce_order_item_meta_end Tunggu sehingga fungsi penangkap (hook function) dijalankan. Dalam fungsi penangkap tersebut, dapatkan objek pesanan semasa, kemudian gunakannya. get_meta() Cara untuk mengambil metadata pesanan yang disimpan dan mengeluarkannya dengan selamat.

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>Maklumat yang diperibadikan</h2><p>'`. esc_html($custom_value)`.'</p></section>';
    }
}

Bagaimanakah sifat `priority` untuk medan (field) harus diatur?

priority Atribut digunakan untuk mengawal susunan menegak bidang-bidang dalam satu kumpulan yang sama. Dalam WooCommerce, keutamaan (priority) bidang secara lalunya adalah kelipatan daripada 10. Anda boleh melihat nilai laluan dengan mengeluarkan array bidang, dan kemudian menetapkan nilai keutamaan yang diinginkan mengikut keperluan. Sebagai contoh, jika anda ingin meletakkan sebuah bidang di antara “Baris Alamat 1” dan “Baris Alamat 2”, anda boleh menetapkan keutamaannya sebagai nombor di antara keduanya, seperti 55. Semakin kecil nilai keutamaan, semakin tinggi kedudukan bidang tersebut dalam borang. Penetapan yang sesuai dapat mengoptimumkan aliran logik pengisian borang.