Cara Menambahkan Bidang Unggah Kustom di WooCommerce

Diterbitkan: 2021-05-06

Apakah Anda ingin menyertakan bidang unggahan di halaman checkout Anda? Anda telah datang ke tempat yang tepat. Pada artikel ini, kami akan menunjukkan cara menambahkan bidang unggahan khusus di WooCommerce langkah demi langkah.

Dengan lebih dari 5 juta unduhan aktif, WooCommerce adalah platform eCommerce paling populer di dunia. Ketika datang untuk membuat toko online, itu adalah pilihan utama bagi banyak pemilik toko dan untuk alasan yang bagus. WooCommerce membuat seluruh pengalaman online mulus dan mudah bagi pelanggan dan pemilik toko.

Selain mudah diatur dan digunakan, WooCommerce juga hadir dengan banyak fitur yang memberi Anda banyak fleksibilitas. Baik dengan menggunakan plugin atau dengan sedikit pengkodean, Anda dapat menambahkan fungsionalitas apa pun yang Anda butuhkan untuk meningkatkan pengalaman berbelanja dan meningkatkan penjualan Anda.

Bukan rahasia lagi bahwa untuk mencapai itu, checkout Anda harus dioptimalkan dan bebas gangguan. Salah satu cara untuk meningkatkan pengalaman pengguna adalah dengan menambahkan bidang unggah khusus ke toko WooCommerce Anda . Dengan cara ini, Anda dapat mengizinkan pelanggan Anda untuk mengunggah file selama proses pembayaran dan mengkonfirmasi pesanan dengan segera daripada harus menunda pembelian sampai mereka mengirimkan dokumentasi tambahan melalui email.

Sebelum kita masuk ke detailnya, mari kita lebih memahami mengapa menambahkan bidang unggahan khusus ke toko Anda adalah ide yang bagus.

Mengapa Menambahkan Bidang Unggah Kustom di WooCommerce?

Ada beberapa situasi di mana pembeli mungkin perlu mengunggah dokumen saat membeli produk secara online.

Beberapa hotel mungkin meminta pelanggan mereka untuk melampirkan semacam identifikasi -biasanya kartu identitas atau paspor- ketika mereka memesan secara online. Di banyak negara, hotel harus memberikan informasi tentang tamu mereka kepada Polisi atau pihak berwenang setempat setiap hari, sehingga mereka mungkin meminta ID Anda sebelum Anda tiba untuk mempercepat proses check-in.

Demikian pula, beberapa situs yang menjual tiket pesawat atau kereta api secara online mengharuskan penumpang untuk mengunggah ID atau paspor mereka selama proses pemesanan. Jika Anda perlu mengubah tiket Anda, meminta pengembalian uang , atau mengklaim semacam kompensasi atas keterlambatan, perusahaan mungkin meminta Anda untuk mengunggah dokumen tertentu seperti paspor atau ID, tiket yang Anda beli, dan sebagainya.

Selain itu, toko online grosir memiliki pelanggan yang membeli produk dalam jumlah besar dan menghabiskan ribuan dolar dalam satu transaksi. Dalam kasus ini, sebagai tindakan keamanan, mereka mungkin meminta pengguna untuk mengunggah beberapa bukti identitas.

Selain itu, toko pakaian yang menawarkan opsi untuk membeli T-shirt khusus dapat meminta pelanggan untuk mengirimkan desain mereka sendiri untuk dicetak. Untuk itu, mereka perlu mengizinkan pengguna mengunggah file sehingga mereka dapat mengunggah desain mereka.

Terakhir, memiliki opsi untuk mengunggah file sangat berguna untuk toko yang menjual layanan yang memerlukan sertifikasi sebelumnya seperti menyelam, paralayang, dan sebagainya.

Meskipun mungkin tidak wajib dalam setiap kasus, menambahkan bidang unggahan khusus ke halaman checkout Anda dapat membuat prosesnya mudah dan jauh lebih nyaman bagi kedua belah pihak .

Sekarang kami lebih memahami kapan Anda harus menambahkan bidang unggahan khusus ke toko WooCommerce Anda, mari kita lihat bagaimana melakukannya.

Cara Menambahkan Bidang Unggah Kustom di WooCommerce

Cara termudah untuk menambahkan bidang unggahan khusus di WooCommerce adalah dengan menggunakan plugin. Untuk demonstrasi ini, kami akan menggunakan Manajer Checkout untuk WooCommerce, alat freemium dengan lebih dari 90.000 pemasangan aktif.

Plugin ini memiliki banyak fitur untuk membantu Anda menyesuaikan checkout dan menyertakan opsi untuk menambahkan bidang khusus. Untuk mengetahui lebih banyak tentang semua fungsi yang ditawarkan alat ini, lihat halaman produk.

Manajer Pembayaran untuk WooCommerce oleh QuadLayers

Langkah 1: Instal Manajer Checkout untuk WooCommerce

Pertama, Anda perlu menginstal plugin. Di Dasbor Admin WordPress Anda, navigasikan ke Plugin > Tambahkan baru.

Kemudian, cari plugin Checkout Manager for WooCommerce oleh QuadLayers dan klik tombol “ Instal Sekarang ”. Setelah plugin diinstal, tekan " Aktifkan ".

Instal Manajer Checkout untuk WooCommerce oleh QuadLayers

Sekarang saatnya untuk mengkonfigurasi plugin. Mari kita mulai dengan menambahkan bidang unggahan khusus baru ke halaman checkout WooCommerce.

Sebelum itu, mari kita lihat bagaimana tampilan halaman checkout. Seperti yang Anda lihat, tidak ada bidang yang memungkinkan pelanggan mengunggah file.

Halaman Checkout - Sebelum

Mari kita lihat cara menyiapkan Pengelola Checkout agar pembeli dapat menambahkan file selama proses pembayaran.

Langkah 2: Tambahkan bidang Unggah Kustom di Halaman Pembayaran WooCommerce

Di Dasbor WordPress Anda, navigasikan ke WooCommerce > Checkout. Di sana Anda akan menemukan semua pengaturan untuk Checkout Manager.

Buka pengaturan Manajer Pembayaran WooCommerce

Buka tab Checkout dan buka bagian Tambahan untuk membuka pengaturan bidang tambahan.

CATATAN : Dalam contoh ini, kami akan menambahkan bidang pada bagian Tambahan tetapi Anda dapat menambahkannya ke Penagihan, Pengiriman, atau bagian pembayaran apa pun yang Anda inginkan hanya dengan membuka area yang sesuai di bawah tab Checkout.

Di sudut kanan, Anda akan melihat menu tarik-turun yang memungkinkan Anda memilih posisi di mana Anda ingin menampilkan bidang tambahan ini. Klik tombol “ Tambah Bidang Baru ” untuk mulai membuat bidang tambahan baru.

Pengaturan Manajer Pembayaran

Siapkan bidang Unggah Kustom

Setelah itu, Anda akan masuk ke halaman baru dengan menu pengaturan. Di sini Anda dapat menentukan parameter untuk bidang yang ingin Anda tambahkan. Karena kami ingin menambahkan bidang unggahan khusus, pilih File di bawah Jenis dan atur label khusus dan teks tombol. Kemudian, tekan “ Simpan ”.

Tambahkan bidang khusus baru

Setelah Anda membuat beberapa bidang tambahan, Anda dapat mengelola parameter yang berbeda dari menu pengaturan bidang tambahan. Parameter ini meliputi:

  • Reposisi: Anda menggunakan panah atas dan bawah untuk memindahkan bidang ke atas atau ke bawah. Atau, Anda dapat mengeklik dan menyeret ikon tiga garis horizontal untuk memposisikan ulang bidang.
  • Wajib: Mengaktifkan bidang wajib membuat bidang wajib diisi. Ini berarti pengguna tidak dapat melanjutkan sampai mereka mengisi bidang itu.
  • Posisi: Anda dapat memilih posisi di mana Anda ingin menampilkan bidang. Ada tiga opsi untuk dipilih: kiri, kanan, atau lebar.
  • Hapus: Mengaktifkan ini melarang bidang lain muncul di kiri atau kanan bidang khusus ini.
  • Nonaktifkan: Dengan mencentang tombol nonaktifkan, bidang tertentu tidak akan ditampilkan di halaman checkout.
  • Edit dan Hapus: Seperti namanya, Anda dapat mengedit atau menghapus bidang tertentu dengan mengklik tombol masing-masing.

Opsi manajemen lapangan

Setelah Anda mengonfigurasi semua pengaturan, simpan perubahannya.

Sekarang mari kita lihat situs kita dari depan untuk melihat perubahannya. Seperti yang Anda lihat, sekarang ada tombol untuk mengunggah file. Dari 2 custom field yang kami buat, hanya Test Field yang diaktifkan dan tidak wajib sehingga muncul sebagai opsional pada halaman checkout.

Tambahkan Bidang Unggah Kustom di WooCommerce - Halaman Checkout

Itu dia! Ini adalah betapa sederhananya menambahkan bidang unggahan khusus di WooCommerce. Dengan menggunakan tombol ini, pelanggan dapat mengunggah file apa pun atau bahkan mengunggah banyak file selama proses pembayaran. File yang diunggah akan disimpan di halaman pesanan bersama dengan detail pesanan lainnya. Selain itu, Anda akan dapat mengelola semua file yang diunggah pengguna melalui dasbor pesanan admin.

Unggah berkas

Namun bukan hanya itu yang dapat Anda lakukan dengan Checkout Manager. Memiliki checkout yang dioptimalkan adalah kunci untuk meningkatkan tingkat konversi, jadi Anda hanya boleh menampilkan bidang yang harus diisi pelanggan untuk menyelesaikan pesanan. Mari kita lihat bagaimana Anda dapat menambahkan bidang bersyarat yang hanya muncul ketika kondisi tertentu terpenuhi.

Bonus: Tambahkan Bidang Bersyarat di WooCommerce

Bidang bersyarat memiliki dua bagian: bidang induk dan bidang anak. Bidang anak tergantung pada input dari bidang induk. Ini berarti bahwa itu tidak terlihat secara default tetapi muncul ketika bidang induk mengambil nilai tertentu.

Misalnya, jika Anda ingin menambahkan bidang unggahan khusus ke toko WooCommerce Anda yang hanya diperlukan dalam keadaan tertentu, solusi terbaik adalah membuat bidang bersyarat sehingga bidang hanya muncul saat dibutuhkan.

Kami akan melakukan ini dalam dua langkah. Pertama, kami akan menanyakan pengguna apakah mereka ingin mengunggah file atau tidak. Jika mereka mengatakan "Ya", dan baru kemudian, bidang unggah file akan terlihat. Dalam contoh ini, pertanyaan pertama kami akan menjadi bidang induk dan tombol unggah file akan menjadi bidang anak.

Sekarang setelah kita mengetahui apa itu bidang bersyarat, mari kita lihat cara menambahkannya ke WooCommerce menggunakan plugin Checkout Manager.

Buat bidang bersyarat dengan Manajer Checkout

Pertama, mari tambahkan bidang induk. Mengikuti contoh yang sama, kami akan menambahkannya ke bagian Tambahan tetapi Anda dapat menambahkannya di Penagihan, Pengiriman, atau bagian pembayaran apa pun yang Anda inginkan.

Buka WooCommerce > Checkout, buka tab Checkout , dan buka bagian Tambahan . Tekan tombol “ Tambah Bidang Baru ” dan atur parameter untuk bidang induk. Menggunakan contoh di atas, kami akan memilih Pilih sebagai "Jenis" dan menambahkan label khusus dan teks placeholder.

Tambahkan Bidang baru

Lalu buka tab Opsi di sisi kiri dan atur semua opsi yang memungkinkan yang dapat dipilih pengguna. Dalam contoh ini, kami mengajukan pertanyaan kepada pengguna yang hanya memiliki dua jawaban: "Ya" atau "Tidak". Karena jawaban atas pertanyaan ini tidak menambahkan biaya tambahan (seperti pengiriman cepat atau pengiriman internasional misalnya), kami menetapkan harga ke 0. Setelah Anda mengonfigurasi semua parameter, simpan perubahannya.

Tambahkan Bidang Unggah Khusus di WooCommerce - Opsi bidang bersyarat

Buat bidang anak

Selanjutnya, Anda perlu membuat bidang anak -bidang unggahan khusus-, dan mengatur parameter bersyarat.

Untuk melakukannya, buat bidang, atur jenis, label, dan tempat penampung tombol. Lalu pergi ke bagian kanan dan centang kotak “ Activate Conditional Field Requirement ”. Setelah itu, pilih bidang yang baru saja Anda buat pada langkah sebelumnya sebagai bidang induk dan pilih nilai bidang induk yang bidang anak harus diaktifkan. Dalam hal ini, kami hanya ingin menampilkan file unggahan ketika pengguna menjawab "Ya" untuk pertanyaan pertama.

Setelah selesai, jangan lupa untuk menyimpan perubahan.

Tambahkan bidang bersyarat

Itu dia! Anda sekarang telah berhasil menyiapkan bidang bersyarat di halaman checkout WooCommerce Anda.

Sekarang buka halaman checkout Anda dan periksa apakah bidang bersyarat berfungsi dengan benar. Awalnya, hanya kolom induk yang akan ditampilkan, tetapi jika Anda memilih "Ya", tombol unggah file akan muncul.

Untuk informasi lebih lanjut tentang cara menambahkan bidang bersyarat ke WooCommerce, lihat panduan lengkap kami.

Kesimpulan

Secara keseluruhan, menambahkan bidang unggah khusus di checkout WooCommerce dapat berguna karena memungkinkan pelanggan Anda mengunggah file yang diperlukan selama proses pembayaran.

Ada beberapa situasi di mana pengguna mungkin perlu mengunggah file atau gambar. Misalnya, verifikasi ID untuk pemesanan hotel online, saat membeli tiket pesawat, desain khusus untuk pakaian, penukaran atau pengembalian barang, atau layanan yang memerlukan sertifikasi tertentu. Itulah mengapa mengizinkan pembeli Anda untuk mengunggah file di kasir membuat seluruh proses menjadi lebih sederhana dan nyaman.

Dalam artikel ini, kita telah membahas:

  • Manfaat menambahkan bidang unggahan khusus
  • Petunjuk langkah demi langkah tentang cara menambahkan bidang unggahan khusus di WooCommerce dengan Manajer Checkout
  • Apa bidang bersyarat itu dan bagaimana cara kerjanya
  • Bagaimana Anda dapat menambahkan bidang bersyarat di WooCommerce untuk mengoptimalkan checkout

Sudahkah Anda menambahkan bidang unggah khusus ke toko Anda? Apakah Anda mengetahui metode lain yang harus kami sertakan? Beri tahu kami di komentar di bawah!