Cara Menambahkan Bidang Teks Kustom Woocommerce di Halaman Produk
Diterbitkan: 2020-09-21
Dalam posting ini, saya akan menunjukkan kepada Anda solusi yang sangat sederhana untuk menambahkan Bidang Teks Kustom WooCommerce di Halaman Produk. Bidang khusus ini juga disebut add-on produk dan mencakup bidang teks, bidang pilih, kotak centang, dan sebagainya. Alasan utama untuk menambahkan ini adalah untuk memungkinkan pelanggan memasukkan informasi tambahan yang dipersonalisasi tentang suatu produk dengan biaya tertentu.
WooCommerce adalah solusi eCommerce yang kuat untuk WordPress yang telah mendapatkan popularitas selama bertahun-tahun. Diperkirakan WooCommerce menguasai lebih dari 42% dari semua toko online yang tersedia.
Ini adalah persentase yang sangat besar dan jika Anda mencari toko online yang mudah diatur dan dikelola, maka WooCommerce adalah pilihan terbaik untuk Anda. Ini adalah solusi sumber terbuka dan gratis, yang telah berkembang menjadi solusi e-niaga yang sangat kompeten untuk situs web berbasis WordPress.
Bidang Teks Kustom Woocommerce di Halaman Produk
Jika Anda melakukan pencarian cepat di internet, banyak orang akan memberi Anda solusi kompleks yang sulit diterapkan. Dalam tutorial singkat ini, saya akan membagikan cuplikan kode PHP yang akan menambahkan fungsi ini ke halaman Produk Anda.
Di akhir tutorial ini, pengguna di toko online Anda akan dapat menambahkan catatan khusus untuk setiap produk. Jika bidang khusus tidak diisi, maka itu akan menimbulkan kesalahan.
Selain itu, jika Anda mencari cara yang lebih sederhana untuk menambahkan bidang khusus, maka Plugin Produk Ekstra untuk WooCommerce akan menjadi solusi terbaik untuk Anda. Namun, ini adalah plugin premium dan Anda harus membayar tarif tahunan sebesar $59. 
Mengapa Anda menambahkan Bidang Kustom pada Halaman Produk?
Alasan utama melakukan ini adalah untuk meningkatkan retensi pelanggan, yang kemungkinan akan meningkatkan penjualan, karena pelanggan dapat menambahkan catatan khusus pada pesanan.
Misalnya, pelanggan mungkin menginginkan pembungkus kado atau kartu ucapan yang dipersonalisasi pada produk dan dia dapat menambahkan catatan khusus pada produk.
Dengan semua yang ada di atas meja, mari kita lihat langkah-langkah yang perlu Anda ikuti untuk menambahkan bidang teks khusus pada halaman produk di toko WooCommerce Anda. Halaman produk default terlihat seperti ini: 
Langkah-langkah untuk Menambahkan Bidang Teks Kustom Woocommerce di Halaman Produk
Berikut adalah langkah-langkah yang perlu Anda ikuti:
- Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
- Dari menu Dashboard, klik pada Appearance Menu > Theme Editor Menu . Saat halaman Theme Editor terbuka, cari file theme functions dimana kita akan menambahkan fungsi yang akan Menambahkan Custom Field WooCommerce pada Halaman Produk .
- Tambahkan kode berikut ke file functions.php :
/**
* @snippet Tambahkan bidang masukan ke produk - WooCommerce
*/
//-----------------------------------------
// 1. Tampilkan kolom input khusus di atas Tambahkan ke Keranjang
add_action( 'woocommerce_before_add_to_cart_button', 'njengah_product_add_on', 9 );
function njengah_product_add_on() {
$nilai = isset( $_POST['custom_text_add_on'] ) ? sanitize_text_field( $_POST['_custom_text_add_on'] ) : '';
echo '<div><label>Pengaya Teks Khusus <abbr class="required" title="required"*</abbr></label><p><input name="custom_text_add_on" value="' . $nilai . '"></p></div>';
}
//-----------------------------------------
// 2. Lempar kesalahan jika bidang input khusus kosong
add_filter( 'woocommerce_add_to_cart_validation', ' njengah_product_add_on_validation', 10, 3 );
function njengah_product_add_on_validation( $lulus, $product_id, $qty ){
if( isset( $_POST['custom_text_add_on'] ) && sanitize_text_field( $_POST['custom_text_add_on'] ) == '' ) {
wc_add_notice( 'Add-On Teks Khusus adalah bidang yang wajib diisi', 'error' );
$lulus = salah;
}
kembali $lulus;
}
//-----------------------------------------
// 3. Simpan nilai bidang input khusus ke dalam data item keranjang
add_filter( 'woocommerce_add_cart_item_data', ' njengah_product_add_on_cart_item_data', 10, 2 );
function njengah_product_add_on_cart_item_data( $cart_item, $product_id ){
if( isset( $_POST['custom_text_add_on'] ) ) {
$cart_item['custom_text_add_on'] = sanitize_text_field( $_POST['custom_text_add_on'] );
}
kembalikan $keranjang_item;
}
//-----------------------------------------
// 4. Tampilkan nilai bidang masukan khusus @ Keranjang
add_filter( 'woocommerce_get_item_data', ' njengah_product_add_on_display_cart', 10, 2 );
function njengah_product_add_on_display_cart( $data, $cart_item ) {
if ( isset( $cart_item['custom_text_add_on'] ) ){
$data[] = larik(
'name' => 'Pengaya Teks Kustom',
'nilai' => sanitize_text_field( $cart_item['custom_text_add_on'] )
);
}
kembalikan $data;
}
//-----------------------------------------
// 5. Simpan nilai bidang input khusus ke dalam meta item pesanan
add_action( 'woocommerce_add_order_item_meta', ' njengah_product_add_on_order_item_meta', 10, 2 );
function njengah_product_add_on_order_item_meta( $item_id, $values ) {
if ( ! kosong( $nilai['custom_text_add_on'] ) ) {
wc_add_order_item_meta( $item_id, 'Add-On Teks Khusus', $values['custom_text_add_on'], true );
}
}
//-----------------------------------------
// 6. Menampilkan nilai bidang input khusus ke dalam tabel pesanan
add_filter( 'woocommerce_order_item_product', ' njengah_product_add_on_display_order', 10, 2 );
function njengah_product_add_on_display_order( $cart_item, $order_item ){
if( isset( $order_item['custom_text_add_on'] ) ){
$cart_item['custom_text_add_on'] = $order_item['custom_text_add_on'];
}
kembalikan $keranjang_item;
}
//-----------------------------------------
// 7. Menampilkan nilai bidang input khusus ke dalam email pesanan
add_filter( 'woocommerce_email_order_meta_fields', ' njengah_product_add_on_display_emails' );
function njengah_product_add_on_display_emails( $fields ) {
$fields['custom_text_add_on'] = 'Pengaya Teks Khusus';
kembalikan $bidang;
}- Untuk melihat hasilnya , cukup segarkan halaman produk dan Anda akan melihat ini:
Jika pengguna belum memasukkan detail, maka kesalahan akan ditampilkan hingga pengguna menambahkan teks khusus seperti yang ditunjukkan di bawah ini: 
Catatan khusus juga akan muncul pada detail Pesanan seperti yang ditunjukkan di sini: 
Cara Kerja Kode
Pertama, kode menunjukkan bidang input khusus di atas Tambahkan ke Keranjang, dan kemudian kesalahan ditambahkan jika bidang input khusus kosong. Kemudian nilai bidang input khusus disimpan dan ditampilkan di keranjang, item pesanan, tabel pesanan, dan di email pesanan.
Kesimpulan
Dalam posting ini, saya telah memberi Anda solusi yang lebih sederhana untuk pengguna yang tidak begitu paham teknologi yang melibatkan penggunaan plugin. Kemudian saya membagikan potongan kode PHP yang harus ditempatkan di file functions.php untuk menampilkan add-on pelanggan di keranjang, item pesanan, tabel pesanan, dan di email pesanan. Saya harap posting ini membantu Anda menambahkan bidang teks khusus WooCommerce di halaman produk.
Artikel Serupa
- Cara Mengatur Produk Terkait Kustom Di WooCommerce
- Cara menggunakan WordPress custom Hooks do_action & apply_filters Dengan Contoh
- Cara Menghapus Menu Unduhan Halaman Akun Saya WooCommerce
- Cara Mendapatkan Metode Pembayaran di WooCommerce »Contoh Kode
- Cara Menyembunyikan Produk Tanpa Gambar Di WooCommerce
- Cara Menghilangkan Efek Zoom pada Gambar Produk WooCommerce
- Cara Menambahkan Kategori ke Produk WooCommerce
- Cara Menghapus Bullets dari Unordered List di WordPress
- Cara Menambahkan Bidang Ekstra di Formulir Pembayaran WooCommerce
- Cara Mengubah Teks Lanjutkan Ke Checkout Di WooCommerce
- Cara Menambahkan Produk Woocommerce dari Frontend
- Cara Menghitung Item yang Ditambahkan ke Keranjang Kode Hitung Keranjang WooCommerce
- Cara Mengubah Teks Tombol Checkout di WooCommerce [Tempatkan Pesanan]
- 5 Cuplikan Kode Pagination WordPress dengan Contoh [Sederhana hingga Tingkat Lanjut]
- Cara Mengubah Stok Teks di WooCommerce
- Cara Mengarahkan Pengguna WooCommerce Setelah Registrasi berdasarkan Peran
- Cara Mendapatkan ID Pesanan Di Woocommerce
- Cara Menghapus Hash # dari URL WordPress dengan Trik Sederhana
- Cara Menambahkan Deskripsi setelah Harga di WooCommerce
- Cara Mengubah Pemberitahuan 'Ditambahkan ke Keranjang' WooCommerce