Menguasai Field Pembayaran Khusus di WooCommerce: Panduan Lengkap Dari Penciptaan Hingga Verifikasi

Mengapa diperlukan bidang pembayaran (pembayaran) yang disesuaikan (dikustomisasi)?

Proses pembayaran standar di WooCommerce secara default mengumpulkan informasi yang bersifat dasar dan umum, seperti nama, alamat, nomor telepon, dan alamat email. Namun, ketika bisnis Anda memiliki kebutuhan khusus, informasi tersebut jelas tidak cukup. Dengan menambahkan bidang kustom (custom fields), Anda dapat memberikan pengalaman belanja yang lebih personal dan lebih akurat kepada pelanggan Anda.

Sebagai contoh, toko yang menjual kue khusus mungkin memerlukan informasi seperti ucapan selamat yang ingin ditulis di atas kue atau apakah pelanggan menginginkan lilin; bisnis B2B mungkin perlu mencatat nomor pajak perusahaan atau nomor pesanan pelanggan; sedangkan toko penjualan tiket acara mungkin perlu mengumpulkan informasi kartu identitas peserta untuk proses verifikasi. Field kustom memungkinkan Anda mengumpulkan data penting yang melampaui proses standar, yang dapat digunakan untuk pemrosesan pesanan, pengelompokan pelanggan, pemasaran personalisasi, hingga kepatuhan hukum.

Dari sudut pandang teknis, halaman pembayaran di WooCommerce merupakan sebuah formulir yang terdiri dari serangkaian bidang standar, dan strukturnya ditentukan oleh Action Hook (pemanggil fungsi aksi) dan Filter Hook (pemanggil fungsi filter). Artinya, kita dapat menggunakan fungsi-fungsi dalam plugin atau tema untuk “menyisipkan” kode tertentu ke dalam proses pembayaran, sehingga kita dapat menambahkan, menghapus, atau mengubah bidang-bidang tersebut. Memahami mekanisme dasar ini merupakan hal yang penting untuk melakukan setiap jenis modifikasi atau penyesuaian pada sistem pembayaran di WooCommerce.

推荐阅读 Panduan Lengkap Pengembangan Situs Web E-commerce dengan WooCommerce: Dari Pemulaan Hingga Implementasi Fitur Tingkat Lanjut。

Tiga cara untuk membuat bidang pembayaran khusus (custom checkout fields):

WooCommerce menyediakan cara yang fleksibel untuk menambahkan field kustom (kolom data tambahan). Anda dapat memilih metode yang paling sesuai dengan tingkat keahlian teknis dan kebutuhan Anda sendiri.

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

Menggunakan plugin untuk menambahkan fitur dengan cepat tanpa perlu menulis kode.

Bagi administrator situs web yang tidak terbiasa dengan kode pemrograman atau proyek yang perlu segera dijalankan, menggunakan plugin khusus merupakan cara yang paling praktis. Di pasaran, terdapat plugin-plugin berkualitas seperti “Checkout Field Editor for WooCommerce” atau “WooCommerce Checkout Manager”.

Plugin-plugin ini biasanya menyediakan antarmuka backend yang intuitif, yang memungkinkan Anda menambahkan field baru dengan cara mengklik dan memilih. Anda dapat mendefinisikan jenis field (seperti kotak teks, menu drop-down, kotak centang, tombol pilihan), label, placeholder, apakah field tersebut wajib diisi, serta posisi field tersebut di halaman pembayaran (di bagian tagihan atau bagian pengiriman). Anda tidak perlu menulis kode apa pun untuk menggunakan fitur-fitur dalam plugin ini, sehingga mengurangi hambatan teknis dan cocok untuk sebagian besar kebutuhan standar. Namun, perlu diingat bahwa penggunaan plugin dapat meningkatkan beban pada situs web, dan mungkin kurang fleksibel ketika logika kustom yang digunakan sangat kompleks.

Menambahkan field kustom melalui kode

Ini adalah metode yang paling kuat dan fleksibel; caranya dengan mengedit tema (theme) yang digunakan. functions.php Anda dapat membuat file atau membuat plugin khusus untuk mengimplementasikannya. Intinya adalah dengan menggunakan… woocommerce_checkout_fields Filter hook.

Hook ini memungkinkan Anda untuk mengubah array field pembayaran (pembayaran). Misalnya, jika Anda ingin menambahkan field untuk memasukkan nama perusahaan di bagian “Informasi Tagihan”, Anda dapat menulis kode berikut:

推荐阅读 Bagaimana cara menambahkan bidang kustom dan metadata ke halaman produk WooCommerce?。

add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_field' );
function custom_add_checkout_field( $fields ) {
    $fields['billing']['billing_company_custom'] = array(
        'label'       => __('公司名称（自定义）', 'woocommerce'),
        'placeholder' => _x('请输入您的完整公司名', 'placeholder', 'woocommerce'),
        'required'    => true,
        'class'       => array('form-row-wide'),
        'clear'       => true,
        'priority'    => 25, // 控制显示顺序，数字越小越靠前
    );
    return $fields;
}

Kode ini menambahkan kotak teks wajib (required) ke dalam field tagihan. Yang penting adalah nama kunci dari array field tersebut (misalnya…). billing_company_custom) dan kumpulan bidang (field set) tempatnya berada.['billing'] 或 ['shipping']、['order']）。

Menggunakan fitur logika kondisional di WooCommerce

Terkadang Anda ingin suatu bidang hanya ditampilkan dalam kondisi tertentu. Misalnya, bidang “Pesan Ucapan Kartu Hadiah” hanya ditampilkan ketika pelanggan memilih layanan “Pembungkusan Hadiah”. Hal ini dapat dicapai dengan menggabungkan JavaScript atau menggunakan plugin yang mendukung logika kondisional.

Penerapan kode murni biasanya memerlukan bantuan dari… woocommerce_after_checkout_billing_form 或 woocommerce_after_checkout_shipping_form Gunakan “hook” untuk menghasilkan struktur HTML dari sebuah field, lalu tulis skrip jQuery untuk mendeteksi perubahan pada field lain (seperti kotak centang), sehingga dapat mengontrol apakah field target tersebut ditampilkan atau disembunyikan. Namun, metode ini memerlukan kemampuan tertentu dalam penggunaan JavaScript. Cara yang lebih sederhana adalah dengan menggunakan plugin manajemen field yang lebih canggih, yang menyediakan fitur untuk mengatur logika kondisi secara visual.

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

Verifikasi dan simpan data dari bidang kustom (custom fields).

Hanya menampilkan field di halaman saja tidak cukup; memastikan kevalidan data dan menyimpannya dengan aman ke dalam basis data merupakan langkah yang sangat penting.

Pemverifikasian data di sisi front-end dan back-end

Untuk mencegah pengiriman data yang tidak valid atau berbahaya, verifikasi harus dilakukan di sisi server (backend). Hal ini dilakukan dengan… woocommerce_checkout_process Dilaksanakan dengan menggunakan action hook (pengait aksi).

Mengikuti contoh sebelumnya, jika kita menambahkan… billing_company_custom Ini adalah kolom wajib, sehingga kami perlu memastikan bahwa pelanggan tidak meninggalkannya kosong.

推荐阅读 Praktik Pengembangan WooCommerce: Membangun Situs Toko Online Profesional Dari Nol。

add_action('woocommerce_checkout_process', 'custom_validate_checkout_field');
function custom_validate_checkout_field() {
    if ( isset($_POST['billing_company_custom']) && empty($_POST['billing_company_custom']) ) {
        wc_add_notice( __( '请填写“公司名称（自定义）”。', 'woocommerce' ), 'error' );
    }
}

wc_add_notice() Fungsi tersebut akan menampilkan pesan kesalahan di bagian atas halaman pembayaran, sehingga pengiriman pesanan tidak dapat dilakukan sampai pengguna memperbaiki kesalahan tersebut. Anda dapat mengimplementasikan logika verifikasi yang lebih kompleks di dalamnya, seperti memeriksa format email, rentang angka, atau pencocokan dengan pola reguler (regular expression).

Menyimpan data bidang ke dalam pesanan.

Setelah verifikasi berhasil, kami perlu menyimpan nilai dari field kustom tersebut ke dalam metadata pesanan (Order Meta), agar dapat dilihat nanti di bagian backend dan dalam email. Untuk melakukan ini, kami memerlukan… woocommerce_checkout_update_order_meta Action Hook.

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_checkout_update_order_meta', 'custom_save_checkout_field');
function custom_save_checkout_field( $order_id ) {
    if ( ! empty($_POST['billing_company_custom']) ) {
        update_post_meta( $order_id, '_billing_company_custom', sanitize_text_field($_POST['billing_company_custom']) );
    }
}

update_post_meta() Fungsi tersebut menyimpan nilai field yang telah dibersihkan dalam bentuk pasangan kunci-nilai (key-value pairs). wp_postmeta Dalam tabel, nama kunci biasanya diawali dengan tanda garis bawah (misalnya…). _billing_company_customHal ini membantu memperlakukannya sebagai metadata yang “tersembunyi” di beberapa antarmuka backend.

Menampilkan data bidang di frontend dan backend

Setelah data disimpan, Anda perlu memastikan bahwa data tersebut dapat dilihat dan dikelola di berbagai posisi penting (atau titik kritis).

Tampilkan dalam detail pesanan dan email.

Agar pemilik toko dan pelanggan dapat melihat informasi yang telah disimpan, kita perlu menampilkan informasi tersebut di halaman detail pesanan di backend administrasi, serta mengirimkannya melalui email pesanan ke pelanggan dan administrator.

Untuk memodifikasi detail pesanan di backend administrasi, Anda dapat menggunakan fitur yang tersedia. woocommerce_admin_order_data_after_billing_address Hook:

add_action('woocommerce_admin_order_data_after_billing_address', 'custom_display_field_in_admin', 10, 1);
function custom_display_field_in_admin($order){
    $company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
    if ( $company_custom ) {
        echo '<p><strong>'.__('自定义公司名').':</strong> '. $company_custom '.'</p>';
    }
}

Dengan cara yang serupa, gunakan… woocommerce_email_order_meta_fields Filter tersebut dapat digunakan untuk menambahkan informasi dari bidang tersebut ke dalam isi email pesanan.

Tampilkan di bagian “Pengaturan Akun” dalam tampilan pesanan.

Ketika pelanggan melihat detail pesanan historis di halaman akun mereka, mereka juga seharusnya dapat melihat informasi yang mereka masukkan pada saat itu. Hal ini dicapai dengan… woocommerce_order_details_after_order_table Implementasi Hook Aksi (Action Hook):

add_action('woocommerce_order_details_after_order_table', 'custom_display_field_in_order_view', 10, 1);
function custom_display_field_in_order_view( $order ) {
    $company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
    if ( $company_custom ) {
        echo '<h2>'.__('额外信息').'</h2>';
        echo '<table class="woocommerce-table shop_table extra_info"><tbody>';
        echo '<tr><th>'.__('自定义公司名').':</th><td>'. $company_custom '.'</td></tr>';
        echo '</tbody></table>';
    }
}

Menyimpulkan.

Menambahkan bidang khusus (custom fields) ke proses pembayaran di WooCommerce merupakan sebuah proses yang melibatkan analisis kebutuhan, pengembangan, hingga pengelolaan data. Inti dari proses ini adalah memahami dan memanfaatkan sistem hook (hook system) yang tersedia di WooCommerce. woocommerce_checkout_fields Menambahkan field ke dalam filter, dan memanfaatkannya. woocommerce_checkout_process Aksi telah diverifikasi, dan hasilnya positif (lulus). woocommerce_checkout_update_order_meta Data disimpan melalui tindakan tertentu, dan kemudian ditampilkan di backend, melalui email, serta di antarmuka pengguna menggunakan berbagai alat bantu (display hooks). Bagi pemula, Anda dapat memulai dengan menggunakan plugin yang terpercaya; sedangkan bagi pengembang yang menginginkan tingkat kustomisasi dan kinerja yang tinggi, menulis kode sendiri merupakan pilihan terbaik. Apa pun metodenya, desain aliran data yang jelas dan proses verifikasi yang ketat merupakan kunci untuk memastikan kestabilan fungsi serta meningkatkan pengalaman pengguna.

FAQ - Pertanyaan yang Sering Diajukan.

Mengapa bidang kustom yang telah ditambahkan tidak muncul di halaman pembayaran?

Silakan ikuti langkah-langkah berikut untuk melakukan pemeriksaan: Pertama, pastikan bahwa kode Anda telah ditambahkan dengan benar ke dalam tema yang dimaksud. functions.php File atau plugin kustom tersebut tidak mengandung kesalahan sintaks. Selanjutnya, periksa apakah kunci dari array field tersebut terstruktur dengan benar (dengan nested structure yang tepat). $fields['billing']、$fields['shipping'] 或 $fields['order'] 之中。然后，查看浏览器控制台是否有 JavaScript 错误，这可能与字段的 class 或优先级设置冲突。最后，清空网站和浏览器的缓存后再次尝试。

Bagaimana cara menjadikan bidang kustom sebagai opsi yang dapat diisi (opsional) atau wajib diisi (wajib)?

Saat menambahkan field melalui kode, Anda dapat mengaturnya dalam array field tersebut. 'required' => true 或 'required' => falseJika suatu bidang sudah diwajibkan (required) namun Anda ingin mengubahnya menjadi opsional (optional), cukup ubah pengaturannya di bagian yang sesuai. woocommerce_checkout_fields Dalam fungsi filter, bidang tersebut… required Cukup ubah parameter tersebut menjadi `false`. Harap perhatikan bahwa setelah perubahan dilakukan, Anda juga perlu menyesuaikan atau menghapus elemen-elemen yang terkait sesuai kebutuhan. woocommerce_checkout_process Verifikasi logika di dalamnya.

Di mana data dari field kustom disimpan di dalam basis data?

Nilai dari bidang kustom (custom fields) tersebut terutama disimpan di dalam basis data WordPress. wp_postmeta Dalam tabel basis data (prefix kolom mungkin berbeda), setiap entri (rekaman) diidentifikasi melalui… post_id(Sesuai dengan ID pesanan) dan wp_posts Catatan pesanan dalam tabel tersebut terkait satu sama lain. meta_key(Yaitu nama kunci yang Anda gunakan saat menyimpan, seperti…) _billing_company_custom) untuk menandainya.meta_value Maka, nilai sebenarnya dari kolom penyimpanan tersebut akan disimpan. Anda dapat mengaksesnya melalui alat manajemen basis data atau fitur yang tersedia di WordPress. get_post_meta() Fungsi tersebut digunakan untuk memeriksa (mengambil/mencari) data-data tersebut.

Bisakah bidang kustom yang berbeda ditampilkan tergantung pada produk yang berbeda?

Bisa, tetapi ini memerlukan logika yang lebih kompleks. Salah satu metode yang umum digunakan adalah: pertama-tama, tambahkan kategori khusus atau field metadata untuk produk tersebut guna menandai jenisnya. Setelah itu, pada halaman pembayaran, gunakan informasi tersebut untuk memproses transaksi dengan benar. woocommerce_after_checkout_form Keluarkan semua bidang kustom yang mungkin dalam format HTML menggunakan metode seperti “hook” atau cara serupa, tetapi sembunyikan mereka secara default menggunakan CSS. Selanjutnya, tulis skrip JavaScript untuk mendengarkan perubahan isi keranjang belanja atau pemilihan produk tertentu, dan tampilkan atau sembunyikan kelompok bidang yang sesuai secara dinamis berdasarkan jenis produk yang ada di keranjang belanja saat ini. Akhirnya, saat melakukan validasi dan penyimpanan data di sisi server, juga perlu memproses data bidang-bidang tersebut secara kondisional berdasarkan jenis produknya.