Panduan Lengkap Pengembangan Field Pembayaran Khusus (Custom Checkout Fields) untuk WooCommerce: Dari Pemula hingga Penerapan Praktis

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

Halaman pembayaran default dari WooCommerce menyediakan field-field dasar seperti nama, alamat, dan email, namun untuk banyak skenario bisnis tertentu, field-field tersebut tidak cukup. Misalnya, toko yang menjual kue khusus mungkin perlu mengumpulkan informasi tentang ucapan selamat yang akan ditulis di atas kue, situs grosir B2B mungkin memerlukan nomor pajak perusahaan, sedangkan situs penjualan tiket acara mungkin memerlukan nomor identitas peserta untuk proses verifikasi. Dalam situasi-situasi seperti ini, pengembang perlu membuat field pembayaran khusus (custom payment fields) untuk memperluas fitur dan memenuhi kebutuhan pengumpulan data bisnis yang unik.

Filtur khusus (custom fields) tidak hanya dapat meningkatkan pengalaman pengguna dan membuat proses pembayaran lebih sesuai dengan kebutuhan bisnis, tetapi juga dapat menyediakan dukungan data yang penting untuk manajemen pelanggan, pemrosesan pesanan, serta kegiatan pemasaran di kemudian hari. Dengan menampilkan informasi dalam filter tersebut dengan benar di sisi server (backend) dan dalam pesan email, keutuhan informasi selama proses pembelian dapat terjamin.

Penjelasan Rinci tentang Metode Inti dan Hook

WooCommerce menyediakan sistem Hook yang kuat dan fleksibel, yang memungkinkan kita untuk melakukan penyesuaian mendalam pada halaman pembayaran tanpa perlu mengubah kode inti (core code). Proses penerapan field (kolom) khusus terdiri dari tiga langkah utama: menambahkan field, memverifikasi isi field, serta menyimpan dan menampilkan data dari field tersebut. Setiap langkah tersebut berkaitan dengan Hook aksi (action hook) atau Hook filter tertentu dalam WooCommerce.

Filter yang digunakan untuk menambahkan field

Penambahan bidang (field) umumnya dilakukan melalui… woocommerce_checkout_fields Filter ini digunakan untuk memungkinkan kita menambahkan kotak masukan baru, menu drop-down, atau kotak centang ke berbagai bagian dari formulir pembayaran, seperti area “Tagihan”, area “Pengiriman”, atau area “Informasi Tambahan Pesanan” yang dapat disesuaikan.

Para pengembang perlu menulis sebuah fungsi pemanggil kembali (callback function) yang menerima array dari field-field yang sudah ada, memodifikasinya, dan kemudian mengembalikan array baru. Di dalam fungsi tersebut, mereka dapat mendefinisikan secara rinci berbagai atribut untuk setiap field baru, seperti tipe data, label, placeholder, apakah field tersebut wajib diisi, prioritas (untuk pengurutan), serta kelas CSS yang akan diterapkan.

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

Hook yang digunakan untuk memverifikasi field

Ketika pengguna mengirim formulir pembayaran, kita harus memastikan bahwa data di bidang-bidang khusus (custom fields) memenuhi persyaratan yang ditentukan. Inilah saatnya menggunakan (tools atau prosedur tertentu) untuk memverifikasi data tersebut. woocommerce_checkout_process Action hook. Dalam fungsi pemanggil kembali (callback function) dari hook ini, kita dapat mengakses data yang telah diperoleh sebelumnya. $_POST Data yang dikirim oleh variabel global tersebut akan diverifikasi.

Sebagai contoh, kita dapat memeriksa apakah suatu bidang wajib kosong atau tidak, atau memverifikasi apakah format nomor telepon benar. Jika verifikasi gagal, kita dapat menggunakan… wc_add_notice() Fungsi tersebut menampilkan pesan kesalahan kepada pengguna, sehingga proses pembayaran tidak dapat dilanjutkan.

Hook yang digunakan untuk menyimpan dan menampilkan data

Setelah pengguna menyerahkan pesanan, data dari bidang kustom perlu disimpan dengan aman ke dalam metadata pesanan tersebut. Hal ini dilakukan dengan… woocommerce_checkout_update_order_meta Gunakan “action hook” untuk menyelesaikannya. Dalam fungsi panggilan balik (callback function) dari hook tersebut, kita dapat menggunakan… update_post_meta() Fungsi tersebut akan menyimpan nilai-nilai formulir yang telah diverifikasi ke dalam pesanan yang bersangkutan. wp_postmeta Di dalam tabel basis data.

Setelah data disimpan, kita biasanya perlu menampilkan data tersebut di tiga tempat: halaman detail pesanan di backend administrator, email konfirmasi pesanan yang diterima oleh pengguna, dan tampilan pesanan di akun pelanggan. Hal ini melibatkan penyesuaian pada antarmuka manajemen, template email, dan halaman akun di frontend.

Penerapan Praktis: Menambahkan Kolom “Pesan Hadiah”

Di bawah ini, kita akan mendemonstrasikan cara menambahkan kotak teks “Pesan Hadiah” untuk toko bunga online melalui contoh yang lengkap. Kotak teks ini akan muncul di area informasi pesanan, merupakan kolom yang bersifat opsional, dan isinya akan disimpan serta ditampilkan di backend dan dalam email.

Langkah Satu: Tambahkan bidang-bidang tersebut ke halaman pembayaran.

Pertama-tama, kita perlu menggunakan… woocommerce_checkout_fields Kita perlu menggunakan filter untuk mendaftarkan bidang baru ini. Kita akan menambahkannya setelah bidang “Catatan Pesanan”. Berikut adalah kode yang perlu ditambahkan ke dalam sub-topik tersebut: functions.php Ditambahkan ke dalam file atau melalui plugin fitur kustom.

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

Kode ini membuat sebuah… textarea Untuk bidang bertipe data tertentu, label-nya ditetapkan sebagai “Pesan Ucapan Selamat Hadiah”, dan placeholder serta kelas CSS yang sesuai telah diatur.priority Parameter mengontrol posisi penampilannya.

Langkah Kedua: Simpan data bidang ke dalam pesanan.

Selanjutnya, kita perlu menyimpan pesan yang diisi oleh pengguna saat pembuatan pesanan. woocommerce_checkout_update_order_meta Dilakukan dengan menggunakan “hook” (pemanggil fungsi tertentu).

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' );
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'] Apakah ada nilai? Jika ada, maka gunakanlah nilai tersebut. sanitize_textarea_field() Setelah fungsi melakukan pembersihan keamanan, proses selanjutnya dapat dilanjutkan. update_post_meta() Simpanlah sebagai metadata pesanan, dengan nama kunci (meta key) sebagai… _gift_message。

Langkah Ketiga: Menampilkan data di backend dan dalam pesan email.

Setelah data disimpan, kita perlu membuatnya dapat dilihat oleh pengguna. Kode berikut menunjukkan cara untuk menampilkan field tersebut di halaman detail pesanan di backend administrator dan dalam email 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 menampilkan pesan komentar di bawah alamat pembayaran pesanan di bagian belakang (backend). Fungsi kedua akan menambahkan pesan komentar sebagai baris data baru ke dalam email konfirmasi pesanan yang dikirim oleh WooCommerce.

(Keterampilan Tingkat Lanjut dan Hal-Hal yang Perlu Diperhatikan)

Setelah memahami metode dasar, kita dapat mengeksplorasi skenario aplikasi yang lebih kompleks dan solusi optimisasi, sehingga membuat field kustom menjadi lebih kuat dan mudah digunakan.

Create conditions to display certain fields.

Terkadang, apakah sebuah bidang akan ditampilkan atau tidak tergantung pada nilai bidang lainnya. Misalnya, bidang “Nama Penerima Faktur” hanya akan ditampilkan jika pengguna memilih opsi “Perlu Faktur”. Hal ini memerlukan penggunaan JavaScript untuk mengimplementasikan interaksi di sisi pengguna (front end). Kita dapat menambahkan kode tertentu pada bidang yang memicu perubahan tersebut (seperti kotak centang/checkbox), sehingga ketika pengguna memilih opsi yang sesuai, bidang yang diinginkan akan otomatis ditampilkan. change Event listener digunakan untuk mendeteksi peristiwa tertentu, kemudian secara dinamis mengontrol apakah field target akan ditampilkan atau disembunyikan. Pada saat yang sama, proses verifikasi juga perlu dilakukan di sisi server.

Keamanan dan Pembersihan Data di Bidang (Field Data Security and Cleaning)

Keamanan sangat penting. Saat memproses masukan dari pengguna, verifikasi dan pembersihan harus selalu dilakukan. Untuk kotak teks (text boxes), gunakan… sanitize_text_field() 或 sanitize_textarea_field()Untuk alamat email, gunakan… sanitize_email()Saat mengirimkan data ke front end, pastikan untuk menggunakan… esc_html() 或 wp_kses_post() Fungsi-fungsi seperti ini digunakan untuk melakukan “escaping” (penggantian karakter khusus dengan karakter yang aman), guna mencegah serangan jenis Cross-Site Scripting (XSS).

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

Kemampuan kompatibilitas dengan plugin dan tema pihak ketiga

Saat menambahkan bidang kustom, ada kemungkinan terjadi konflik dengan gaya tampilan atau skrip dari beberapa tema atau plugin lainnya (terutama plugin yang berfungsi untuk mengoptimalkan proses pembayaran). Disarankan untuk selalu melakukan pengembangan di dalam sub-tema, dan tambahkan nama kelas CSS yang unik pada elemen yang digunakan untuk menampung bidang kustom tersebut. Sebelum melakukan penyebaran resmi, pastikan untuk menguji fitur ini dalam berbagai situasi, termasuk dengan tema yang berbeda dan plugin-plugin yang umum digunakan. Menggunakan alat pengembang browser untuk memeriksa kesalahan pada elemen dan skrip merupakan cara yang penting untuk menyelesaikan masalah kompatibilitas.

Menyimpulkan.

Melalui panduan ini, kita memulai dengan memahami kebutuhan pelanggan, lalu secara bertahap mempelajari proses pengembangan bidang pembayaran khusus (custom checkout fields) di WooCommerce. Kita juga belajar bagaimana cara memanfaatkan fitur-fitur yang tersedia di platform tersebut untuk menciptakan pengalaman pembelian yang lebih baik bagi pengguna. woocommerce_checkout_fields、woocommerce_checkout_process 和 woocommerce_checkout_update_order_meta Tiga hook inti ini digunakan untuk menambahkan, memverifikasi, dan menyimpan data di bidang (field) tertentu. Melalui kasus praktis “Pesan Hadiah” (Gift Message), proses lengkap dari pembuatan bidang hingga penampilan data dijelaskan secara menyeluruh. Di akhir, topik-topik tingkat lanjut seperti bidang berbasis kondisi (conditional fields), pengolahan keamanan data, dan kompatibilitas juga dibahas.

Dengan menguasai keterampilan-keterampilan ini, Anda akan mampu menanggapi dengan fleksibel berbagai kebutuhan pengumpulan data yang unik dalam bisnis e-commerce, serta menciptakan toko WooCommerce yang lebih profesional dan lebih personalisasi. Hal ini akan meningkatkan tingkat konversi dan kepuasan pelanggan.

FAQ - Pertanyaan yang Sering Diajukan.

Di mana data dari bidang kustom (custom fields) disimpan?

Data dari bidang kustom biasanya disimpan sebagai “metadata pesanan” dalam basis data WordPress. wp_postmeta Di dalam tabel tersebut, setiap entri data mencakup ID pesanan yang sesuai.post_id), metakunci yang Anda definisikan (seperti _gift_messageAnda dapat mengakses atribut dan nilai meta melalui metode-metode yang tersedia pada objek pesanan (order) dalam WooCommerce. $order->get_meta(‘_gift_message’) Atau fungsi WordPress get_post_meta() Untuk mendapatkan data tersebut.

Bagaimana cara menambahkan validasi front-end (seperti validasi format) untuk field kustom?

Selain menggunakan… woocommerce_checkout_process Selain menggunakan “hook” untuk melakukan validasi di sisi server, Anda juga dapat menambahkan atribut asli HTML5 ke dalam field untuk melakukan validasi dasar. Misalnya, atribut `required` dapat digunakan untuk memastikan bahwa sebuah field wajib diisi, sementara atribut `pattern` dapat digunakan untuk memverifikasi format data yang dimasukkan. pattern Digunakan untuk ekspresi reguler.type=”email” Digunakan untuk format email. Untuk verifikasi real-time yang lebih kompleks, diperlukan kode JavaScript/jQuery untuk mendengarkan (mengawasi) perubahan pada nilai di bidang-bidang tertentu. blur 或 input Event: Periksa apakah nilai tersebut sesuai dengan aturan yang berlaku, dan berikan umpan balik secara langsung.

Bisakah bidang kustom ditambahkan ke halaman pendaftaran pengguna?

Tentu saja bisa, tetapi prosesnya sedikit berbeda. Hook untuk bidang pembayaran di WooCommerce dirancang khusus untuk halaman pembayaran. Jika Anda ingin menambahkan bidang pada halaman pendaftaran “Akun Saya”, Anda perlu menggunakan hook lain yang disediakan oleh WordPress dan WooCommerce. woocommerce_register_form Untuk menambahkan field (kolom data), silakan ikuti langkah-langkah berikut:woocommerce_created_customer Fungsi ini digunakan untuk menyimpan data dari field tertentu ke dalam metadata pengguna. Prinsipnya mirip dengan proses penyelesaian pembayaran (penyelesaian transaksi), namun tujuan penggunaan fitur ini dan lokasi penyimpanan data (metadata pengguna) berbeda.

Mengapa bidang kustom saya tidak ditampilkan?

Pertama-tama, periksa apakah kode Anda telah ditambahkan dengan benar ke dalam sistem. functions.php Dan tidak ada kesalahan tata bahasa. Selanjutnya, pastikan apakah kunci dari array field tersebut benar, misalnya apakah Anda telah menambahkannya dengan benar ke dalam struktur data yang ditentukan. $fields[‘order’] Atau $fields[‘billing’] Sebagian dari masalah tersebut mungkin disebabkan oleh kode dari plugin atau tema lain yang menimpa (overwriting) atau menghapus field-field yang Anda gunakan. Periksa lagi apakah ada hal tersebut. Selain itu, cobalah membersihkan cache dari situs web dan browser Anda, karena file CSS/JS yang lama dapat mempengaruhi proses rendering (penampilan halaman web).