Cara menambahkan bidang bersyarat ke checkout WooCommerce

Apakah Anda ingin membuat logika kondisional untuk toko Anda? Anda telah datang ke tempat yang tepat. Dalam panduan ini, Anda akan mempelajari cara menambahkan bidang bersyarat ke checkout WooCommerce .

Checkout adalah salah satu halaman paling penting untuk setiap toko eCommerce. Ada jutaan situs di luar sana yang bersaing untuk mendapatkan pengguna yang sama. Jadi untuk menjadi yang terdepan dari pesaing Anda, Anda harus menyesuaikan dan mengoptimalkan checkout Anda sebanyak mungkin. Salah satu opsi paling menarik untuk melakukan ini adalah menambahkan bidang bersyarat ke checkout WooCommerce Anda .

Kolom ini memungkinkan Anda membuat logika kondisional dan hanya menampilkan kolom yang harus diisi pelanggan di halaman checkout untuk mempercepat proses pembelian. Jadi, mari kita lebih memahami apa itu bidang bersyarat dan bagaimana bidang itu dapat membantu Anda membawa toko Anda ke tingkat berikutnya.

Apa itu bidang bersyarat?

Bidang bersyarat adalah bidang yang memiliki logika bersyarat sehingga ketika kondisi terpenuhi bidang lain muncul atau disembunyikan. Untuk membuat logika bersyarat, Anda memerlukan setidaknya satu bidang induk dan satu atau beberapa bidang turunan yang bergantung pada nilai yang diambil bidang induk . Misalnya, jika Anda menawarkan pelanggan Anda kemungkinan untuk membayar dengan PayPal atau kartu kredit, Anda mungkin ingin menampilkan bidang detail kartu kredit hanya jika pengguna memilih opsi Kartu Kredit . Jika mereka ingin membayar dengan PayPal, bidang tersebut tidak akan muncul. Dengan cara ini, Anda meningkatkan pengalaman pengguna di situs Anda dan meningkatkan tingkat konversi Anda.

Apa itu logika kondisional?

Anda harus memiliki gagasan yang jelas tentang apa itu logika kondisional sebelum kita mulai, jadi mari kita gali lebih dalam. Saat Anda membuat logika kondisional, Anda ingin bidang kondisional melakukan X jika kondisi terpenuhi atau benar, tetapi lakukan Y jika kondisi salah atau tidak terpenuhi .

Mengikuti contoh kartu kredit kami, kami hanya ingin bidang detail kartu kredit muncul jika pelanggan memilih opsi pembayaran kartu kredit. Contoh ini cukup mudah tetapi logika kondisional dapat mencapai tingkat kerumitan yang lebih tinggi saat Anda bekerja dengan beberapa jenis bidang dan/atau menambahkan beberapa kondisi dan tindakan.

Di halaman checkout WooCommerce, Anda dapat mengatur kondisi untuk satu bidang. Nilai yang dimasukkan pelanggan di bidang itu akan diperiksa terhadap pengaturan dan jika kondisinya terpenuhi, tindakannya adalah menampilkan bidang tersebut.

Untuk membuat logika kondisional pada halaman checkout, Anda harus menggunakan setidaknya dua bidang. Orang tua dan anaknya. Bidang tempat nilai diperiksa disebut bidang induk . Dan yang di mana Anda membuat logika kondisional untuk membuatnya muncul atau tidak hanya jika kondisinya benar adalah bidang anak . Seperti yang akan kita lihat dalam panduan ini, bidang induk dapat memiliki beberapa bidang anak dan beberapa persyaratan diterapkan padanya.

Cara menambahkan bidang bersyarat ke checkout WooCommerce

Di bagian ini, kita akan melihat cara menggunakan dan menambahkan logika kondisional dan kolom kondisional ke checkout di WooCommerce. Membuat logika kondisional yang berguna secara terprogram membutuhkan banyak pengkodean, jadi kami sarankan Anda menggunakan plugin. Untuk demonstrasi ini, kami akan menggunakan Manajer Checkout.

Plugin ini memungkinkan Anda untuk menambahkan, menyesuaikan, dan menghapus berbagai jenis bidang di halaman checkout. Selain itu, Anda dapat menerapkan validasi bersyarat tanpa batas menggunakan beberapa bidang khusus di halaman checkout WooCommerce. Dengan lebih dari 80.000 unduhan aktif , ini adalah salah satu plugin checkout terbaik di luar sana. Ini memiliki versi gratis dengan fitur dasar yang dapat Anda unduh dari sini dan tiga paket premium mulai dari 19 USD.

Kami telah membagi postingan menjadi beberapa bagian yang berbeda sehingga Anda dapat langsung melompat ke bagian yang Anda minati. Tanpa basa-basi lagi, mari kita lihat cara menambahkan bidang bersyarat ke halaman checkout di WooCommerce .

1. Cara membuat logika kondisional
2. Logika bersyarat dengan beberapa bidang khusus anak
3. Cara menggunakan beberapa bidang khusus dan kondisional yang dirantai
4. Apa yang tidak dapat Anda lakukan saat menggunakan logika kondisional

1. Cara membuat logika kondisional

Jadi, sekarang setelah Anda memiliki gagasan yang jelas tentang apa itu logika bersyarat dan bagaimana cara kerjanya, mari kita lihat cara membuat bidang logika bersyarat menggunakan plugin WooCommerce Checkout Manager. Mari kita buat kondisi untuk menampilkan pesan ketika pengguna mengetik " admin " sebagai nama depan di formulir penagihan. Untuk melakukannya, pertama, buka WooCommerce > Checkout > Billing di dasbor WordPress Anda. Di sana, tekan tombol Tambahkan Bidang Baru .

Sebuah jendela akan terbuka. Itu editor bidang bidang baru. Di sana, pilih Pesan sebagai jenisnya dan isi opsi seperti Label, Jenis, dan Pesan. Selain itu, pilih Nama depan sebagai bidang induk di kolom kanan. Terakhir, tulis “ admin ” di bawah First Name dan tekan Save .

Seperti yang Anda lihat, kami menyetel bidang Nama depan sebagai bidang induk. Sekarang saatnya untuk mengujinya. Jadi, buka halaman checkout Anda di frontend dan ketik " admin " di bidang nama depan. Anda akan melihat pesan peringatan seperti ini.

Ini adalah contoh sederhana tetapi kondisional dapat mencakup banyak bidang dan hal-hal bisa menjadi sangat kompleks saat menggunakan banyak persyaratan dan bidang khusus. Jadi, untuk mengelolanya dengan mudah, Anda dapat melihat bidang mana yang memiliki kondisi dan bidang induk di layar pengelola bidang formulir checkout yang sesuai ( Penagihan, pengiriman, tambahan ).

Begitulah cara Anda dapat menambahkan bidang bersyarat ke checkout di WooCommerce menggunakan Manajer Checkout. Sekarang, mari kita lihat contoh yang lebih kompleks. Dan tentu saja, yang terbaik dari semuanya adalah tidak ada batasan berapa banyak bidang khusus yang dapat menerapkan kondisi yang sama atau berbeda ke bidang induk yang sama.

2. Logika bersyarat dengan beberapa bidang anak khusus

Sekarang, katakanlah Anda ingin memberi pembeli Anda opsi untuk menerima produk yang telah mereka beli di salah satu pusat distribusi Anda atau untuk memilih pengiriman standar ke lokasi tertentu. Untuk ini, Anda dapat menggunakan bidang jenis radio sehingga pelanggan dapat memilih salah satu dari dua opsi.

Buat bidang induk baru

Jadi, pertama, buka WooCommerce > Checkout dan buat bidang jenis radio. Untuk contoh ini, kami akan memanggil bidang ini "Pengiriman". Kemudian masuk ke Opsi. Kami akan menyebutnya Takeaway and Delivery. Di sini, Anda juga dapat memilih harga untuk setiap opsi dan menetapkan satu sebagai harga default. Karena kami ingin menampilkan bidang yang berbeda kepada pelanggan tergantung pada kotak centang yang mereka pilih, kami akan menggunakan beberapa bidang checkout WooCommerce default untuk opsi Pengiriman . Dengan cara ini, pembeli dapat mengisi detail mereka untuk menerima produk mereka di alamat yang mereka pilih. Jadi, edit bidang WooCommerce default: negara bagian, kota, kode pos, dan alamat jalan. Kemudian, buat logika kondisional yang sama untuk masing-masing dari mereka. Selain itu, kami akan membuat kondisional dan memilih jenis bidang radio Pengiriman sebagai bidang induk dan menampilkan bidang Negara jika pengguna memilih opsi Pengiriman. Tentu saja, Anda dapat melakukan hal yang sama untuk semua bidang ini atau beberapa di antaranya. Dalam contoh ini, kami akan membuat kondisional bidang berikut:

• billing_state
• billing_city
• billing_postcode
• billing_address_1

Buat bidang anak khusus

Kemudian, Anda perlu membuat bidang kustom baru yang akan muncul ketika pelanggan memilih opsi Bawa Pulang sehingga Anda dapat mengirim produk ke salah satu pusat distribusi. Sekali lagi, buka pengaturan plugin dan buat jenis bidang Pilih . Aktifkan kotak centang bersyarat, pilih Pengiriman sebagai induk, dan beri nama Bawa pulang di bawah Pengiriman . Setelah itu, Anda perlu membuat alamat untuk pusat distribusi. Jadi, buka bagian Opsi dan tambahkan beberapa alamat. Terakhir, simpan perubahannya. Sekarang, saatnya untuk memeriksa frontend. Buka halaman checkout dan pilih beberapa opsi yang baru saja Anda buat. Misalnya, ketika pengguna memilih opsi Bawa Pulang, Anda dapat memilih salah satu pusat distribusi. Di sisi lain, jika mereka memilih Pengiriman , mereka harus memasukkan alamat tempat mereka ingin menerima produk mereka. CATATAN : Kami telah menambahkan dua bidang lagi untuk menampilkan pesan informasi, satu untuk setiap opsi, menggunakan kondisi yang sama yang kami gunakan di bidang lain. Sekarang Anda tahu cara menambahkan bidang bersyarat ke checkout WooCommerce menggunakan logika yang lebih kompleks. Namun, Anda dapat melangkah lebih jauh dan membuat logika yang lebih kompleks. Mari kita lihat cara membuat kondisional berantai .

3. Cara menggunakan beberapa bidang khusus dan kondisional yang dirantai

Ketika Anda bekerja dengan banyak conditional yang terkait, hal-hal bisa menjadi sangat rumit. Kondisional yang dirantai adalah contoh yang bagus untuk ini. Itu ketika ada kondisional yang diterapkan ke bidang yang memiliki kondisi lain di bidang yang berbeda. Untuk lebih memahaminya, Anda dapat memikirkan suatu kondisi dengan sub-kondisi, yang memiliki sub-kondisi lain, dan seterusnya. Tingkat hierarki persyaratan dan jumlah bidang kustom yang dapat Anda gunakan tidak terbatas sehingga Anda dapat membuat logika yang sangat kompleks dengan banyak dependensi.

Membuat kondisional yang dirantai

Jadi, mari buat contoh yang lebih kompleks menggunakan kondisional berantai. Katakanlah Anda ingin memberi pelanggan Anda opsi untuk menambahkan paket tambahan ke pesanan mereka. Pilihannya adalah Karton, Kado, dan Styrofoam. Pertama, tambahkan field type checkbox agar pelanggan bisa meminta paket Extra. Di tab Harga di editor bidang, masukkan harga yang ingin Anda tambahkan ke pesanan saat ini ketika pelanggan memilih kotak centang Paket Ekstra. Kemudian, Anda perlu mengerjakan opsi kemasan yang akan Anda tawarkan kepada pelanggan Anda. Kami akan mengizinkan pembeli untuk memilih lebih dari satu opsi sehingga kami akan membuat jenis bidang Multi-pilih. Tambahkan label dan pilih Paket Ekstra sebagai bidang induk sehingga logika kondisional Anda terlihat seperti ini: Lalu, buka tab Opsi dan buat opsi untuk pelanggan Anda. Pada layar ini, Anda dapat menetapkan harga yang berbeda untuk setiap alternatif. Karena kami telah menetapkan harga saat kami membuat bidang kotak centang, kami tidak akan menggunakan opsi itu di sini. Setelah Anda selesai melakukannya, saatnya untuk memeriksa frontend. Jika semuanya berfungsi dengan benar, Anda seharusnya dapat memilih beberapa opsi saat mencentang bidang Pengemasan ekstra : Kami telah menggunakan satu kondisional di sini untuk menampilkan bidang multi-pilih. Sekarang, mari buat kondisional berantai dengan masing-masing opsi/nilai dari bidang induk.

Tambahkan beberapa opsi

Jadi, mari pilih opsi Bungkus kado dan terapkan beberapa persyaratan. Mari buat bidang khusus radio dan isi editor sebagai berikut. Kami akan menawarkan beberapa cetakan kertas untuk pembungkus kado, jadi kami akan menggunakan bidang ini untuk membiarkan pelanggan memilih salah satunya. Untuk melakukannya, buka bagian Opsi dan atur cetakan kertas untuk bidang radio. Kami telah mengonfigurasi opsi seperti ini: Dan di frontend, Anda akan melihat sesuatu seperti ini: Saat kami menampilkan bungkus kado, lebih baik menampilkan gambar daripada teks. Untuk menampilkan gambar di setiap opsi, kami telah menggunakan beberapa gambar yang sebelumnya telah kami unggah ke perpustakaan. Anda dapat memasukkan gambar untuk label setiap opsi dengan kode berikut: <img class=”paper-style” src=”#path of your image url”> Sejauh ini, Anda telah membuat logika kondisional berantai yang mencakup dua tingkat dan dua kondisi yang saling bergantung. Kemasan ekstra ->(kondisi 1)-> Jenis kemasan ->(kondisi 2)-> Bungkus Kado

Menambahkan level bersyarat lainnya

Mari kita melangkah lebih jauh dan menambahkan level kondisional baru. Pada tangkapan layar terakhir, Anda akan melihat bahwa ada bidang baru bernama Kartu Hadiah untuk memberi pengguna opsi untuk menambahkan kartu hadiah khusus ke paket. Untuk itu, kami akan mengenakan biaya tambahan $4. Selain itu, kita akan menggunakan kondisi untuk menampilkan bidang kustom baru dan membiarkan pengguna memasukkan teks yang ingin mereka cetak pada kartu hadiah. Jadi, mari buat bidang kotak centang baru dan atur sebagai berikut: Anda dapat melihat bagaimana kami merujuk ke bidang induk yang sama, dan menggunakan kondisi yang sama yang kami gunakan untuk Bungkus Kado di langkah sebelumnya. Kemudian, tambahkan area teks sehingga pengguna dapat mengetik teks yang ingin mereka lihat di kartu hadiah dan mengonfigurasinya seperti ini: Ini adalah syarat terakhir. Ini memiliki bidang khusus Kartu hadiah sebagai bidang induk dan Teks kartu hadiah sebagai bidang anak. Jadi sekarang, saat pembeli memilih opsi Kartu hadiah, mereka akan melihat ini: Dan begitulah cara Anda membuat logika kompleks dan menambahkan beberapa bidang kondisional ke halaman checkout di WooCommerce. Kami telah merantai tiga kondisional dan beberapa bidang kustom dalam urutan ini: Kemasan ekstra ->(kondisi 1)-> Jenis kemasan ->(kondisi 2)-> Bungkus Kado ->(kondisi 3)->Kartu Hadiah

4. Apa yang tidak dapat Anda lakukan saat menggunakan logika kondisional

Gunakan bidang dari berbagai bentuk

Di WooCommerce, bidang bersyarat harus merujuk ke bidang induk yang terletak di formulir yang sama. Ada tiga formulir di halaman pembayaran: Penagihan, Pengiriman, dan Formulir tambahan. Masing-masing berfungsi sebagai formulir terpisah dan tidak dapat memiliki persyaratan yang bergantung pada bidang dari formulir lain.

Bersyarat pada bidang tanpa nilai (tombol, judul, pesan)

Anda tidak dapat menggunakan tombol, pesan, dan jenis bidang judul sebagai bidang induk karena tidak memiliki nilai apa pun untuk memeriksa apakah kondisinya terpenuhi.

Edit ID atau nama bidang

Untuk memberikan integrasi yang tepat dengan WooCommerce, Anda tidak dapat mengedit nama dan ID bidang. Ini berlaku untuk bidang WooCommerce default dan bidang khusus apa pun yang Anda tambahkan.

Memicu tindakan lain selain menampilkan/menyembunyikan bidang

Di WooCommerce, bidang kondisional dapat melakukan satu tindakan: menampilkan bidang yang ditentukan saat kondisinya benar. Artinya, sayangnya, Anda tidak dapat menambahkan diskon, produk, mengedit pesanan, atau melakukan tindakan lain apa pun saat kondisi terpenuhi.

Terapkan kondisional ke nilai bidang di luar checkout

Terakhir, conditional hanya dapat memeriksa nilai bidang checkout lain pada formulir yang sama. Jadi, Anda tidak dapat memeriksa kondisi yang memeriksa kuantitas produk, harga total, peran pengguna, atau apa pun yang bukan nilai bidang checkout.

Kesimpulan

Secara keseluruhan, logika kondisional dapat membantu Anda meningkatkan pengalaman pengguna dan meningkatkan rasio konversi di situs Anda. Itu sebabnya menambahkan bidang bersyarat ke checkout WooCommerce Anda adalah cara yang bagus untuk membawa toko Anda ke tingkat berikutnya.

Dalam panduan ini, Anda telah mempelajari cara membuat dan menyiapkan bidang tambahan menggunakan plugin WooCommerce Checkout Manager. Kami telah menambahkan bidang khusus dan membuat logika kondisional sederhana serta contoh yang lebih kompleks dengan kondisional berantai. Terakhir, kami telah melihat batasan logika kondisional di WooCommerce.

Di sini, kita telah melihat beberapa contoh tetapi itu hanyalah puncak gunung es. Ada banyak hal yang dapat Anda lakukan dengan bidang bersyarat untuk meningkatkan checkout Anda. Jadi, kami sarankan Anda membuat bidang khusus dan bermain-main dengan conditional.

Untuk informasi lebih lanjut tentang cara memaksimalkan checkout Anda, Anda dapat melihat panduan kami untuk mengoptimalkan checkout WooCommerce dan tutorial kami untuk menonaktifkan validasi kode pos. Beri tahu kami jika Anda memiliki pertanyaan atau keraguan untuk menambahkan bidang bersyarat ke kasir. Kami akan dengan senang hati membantu Anda!