Buat Bidang Kustom di WooCommerce Checkout dan Halaman Produk

Diterbitkan: 2018-08-01

WooCommerce standar tidak memungkinkan Anda membuat bidang khusus tanpa menulis kode Anda. Namun, ada situasi ketika Anda memerlukan produk khusus atau bidang pembayaran untuk menangani pesanan WooCommerce secara efektif! Jangan khawatir. 2 plugin gratis akan membantu Anda menambahkan bidang khusus di toko Anda.

Anda tahu mungkin perlu memiliki informasi spesifik tentang produk atau pesanan yang tidak diberikan WooCommerce kepada Anda !

Dapatkan lebih banyak detail pesanan dengan menambahkan bidang khusus di WooCommerce. Izinkan saya menunjukkan kepada Anda dua plugin gratis untuk melakukannya dengan mudah!

Daftar isi

  • Apa bidang khusus di WooCommerce?
  • Bidang khusus Produk WooCommerce
  • Bidang khusus WooCommerce Checkout

Apa bidang khusus di WooCommerce?

Anda dapat menganggap bidang khusus sebagai informasi tambahan yang menjelaskan, misalnya, produk atau pesanan. Mereka akan membantu Anda menampilkan produk dengan lebih baik dan mendapatkan lebih banyak detail untuk memproses pesanan WooCommerce secara efektif!

Beberapa contoh bidang khusus

  • kotak centang
  • bidang teks
  • tombol radio
  • pemilih tanggal
  • pemilih warna
  • dll.

Seperti inilah tampilannya dalam formulir pemesanan:

Formulir pesanan khusus WooCommerce
Tombol radio, Kotak centang, Pemilih tanggal, Bidang teks, Pemilih warna
Tentu saja, Anda dapat menggunakannya untuk berbagai hal seperti membuat wizard komputer, konfigurasi mobil, atau opsi pembungkus kado langsung di halaman produk WooCommerce.

Contoh lain, Anda dapat mengizinkan pelanggan mengunggah file ke pesanan atau memasukkan nomor PPN UE untuk tujuan akuntansi. Ini juga bagus untuk mengubah jenis bidang pembayaran atau menyembunyikan beberapa di antaranya!

Mari tambahkan bidang khusus

Anda mungkin ingin membuat dua jenis bidang khusus di WooCommerce, misalnya:

  • bidang khusus di halaman checkout WooCommerce untuk mendapatkan detail lebih lanjut tentang pesanan,
  • dan bidang baru untuk menyesuaikan halaman produk WooCommerce sehingga produk memiliki lebih banyak pilihan.

Saya akan menunjukkan kepada Anda keduanya.

Bidang khusus Produk WooCommerce

Pertama-tama, Anda memerlukan plugin untuk itu. Lihat:

Unduh di sini:

Bidang Produk Fleksibel WooCommerce

Buat panduan produk untuk menjual ukiran, pembungkus kado, pesan kado, kartu nama, prangko, dan secara opsional mengenakan biaya untuk itu (tetap atau persentase).

Unduh gratis atau Buka WordPress.org
10.000+ Instalasi Aktif
Terakhir Diperbarui: 13-03-2023
Bekerja dengan WooCommerce 7.1 - 7.5.x

Pertama, lihat kumpulan contoh kolom kustom baru di halaman produk yang dapat Anda tambahkan dengan plugin Flexible Product Fields for WooCommerce gratis:

Buat Bidang Kustom di WooCommerce: Halaman Produk
Contoh halaman produk WooCommerce

Seperti yang Anda lihat, Anda dapat membuat panduan lengkap. Pelanggan dapat mempersonalisasi komputer mereka dengan cara ini. Selain itu, beberapa opsi memerlukan biaya tambahan. Plugin menambahkan biaya tambahan ke harga total (tersedia di PRO). Pelanggan dapat memesan komputer pribadi mereka dan membayar Anda seluruh harga di muka.

Kembali ke tampilan. Ini adalah konfigurasi dasar. Saya tidak menggunakan gaya CSS apa pun dan saya menggunakan tema default WooCommerce: etalase. Anda dapat menyesuaikan tampilan bidang seperti yang Anda inginkan, tentu saja. Ada opsi untuk tujuan ini di plugin.

Bidang Produk Fleksibel

Singkatnya, plugin ini memungkinkan Anda membuat add-on produk. Anda dapat menambahkan bidang khusus baru ke produk di toko WooCommerce Anda. Anda telah melihat contohnya.

Bidang Produk Fleksibel WooCommerce

Buat panduan produk untuk menjual ukiran, pembungkus kado, pesan kado, kartu nama, prangko, dan secara opsional mengenakan biaya untuk itu (tetap atau persentase).

Unduh gratis atau Buka WordPress.org
10.000+ Instalasi Aktif
Terakhir Diperbarui: 13-03-2023
Bekerja dengan WooCommerce 7.1 - 7.5.x
Plugin ini tersedia secara gratis! Anda juga dapat memutakhirkan plugin jika Anda memerlukan opsi tambahan seperti logika kondisional. Baca dokumentasi plugin →

Jenis bidang yang dapat Anda tambahkan ke produk WooCommerce Anda

  • Teks
  • Textarea
  • Nomor
  • Surel
  • URL
  • Multi-kotak centang
  • Radio dengan warna
  • Waktu
  • Warna
  • Menuju
  • Gugus kalimat
  • Gambar
  • HTML
  • Kotak centang
  • Tombol radio
  • Pilih
  • Multi-pilih
  • Radio dengan gambar
  • Judul
  • Tanggal (PRO)
  • Unggah File (PRO)
Kami menjelaskan semua bidang ini di Panduan Opsi Personalisasi Produk WooCommerce

Anda harus memeriksa panduan itu! Anda akan menemukan ada banyak kasus penggunaan. Kami memandu pengguna langkah demi langkah melalui konfigurasi untuk menerapkan:

  • Sistem pemesanan sederhana,
  • Fitur pembungkus kado,
  • Penyihir diet katering,
  • Penyihir komputer dll.

Bidang khusus WooCommerce Checkout

Sekarang, izinkan saya menunjukkan kepada Anda cara menambahkan bidang khusus ke pesanan WooCommerce dari halaman checkout!

Anda membutuhkan plugin ini:

Unduh di sini:

Bidang Checkout Fleksibel WooCommerce

Edit, tambahkan baru, atau sembunyikan bidang yang tidak perlu dari formulir pembayaran WooCommerce. Ini semua tentang konversi dan pengalaman pengguna yang lebih baik.

Unduh gratis atau Buka WordPress.org
80.000+ Instalasi Aktif
Terakhir Diperbarui: 13-03-2023
Bekerja dengan WooCommerce 7.1 - 7.6.x

Mari kita lihat contoh halaman checkout yang disesuaikan dengan plugin Flexible Checkout Fields for WooCommerce gratis:

Bidang baru dalam formulir checkout
Contoh halaman checkout WooCommerce

Plugin ini memungkinkan Anda menambah, menghapus, menyusun ulang, dan menyesuaikan halaman checkout WooCommerce secara efektif!

Susun ulang bidang checkout WooCommerce
Konfigurasi bidang khusus pesanan WooCommerce

Bidang Checkout Fleksibel

Jadi, singkatnya, Bidang Checkout Fleksibel memungkinkan Anda membuat bidang khusus di checkout WooCommerce→

Tambahkan bidang khusus baru ke halaman checkout WooCommerce
Tambahkan bidang khusus baru ke halaman checkout WooCommerce

Selain itu, dengan plugin ini, Anda dapat mengedit atau mengatur ulang kolom checkout WooCommerce default !

Misalnya, Anda dapat menonaktifkan beberapa bidang alamat penagihan untuk proses pembayaran yang lebih cepat.

Tampilkan lebih sedikit bidang checkout untuk mendapatkan lebih sedikit informasi untuk pesanan WooCommerce
Tampilkan lebih sedikit bidang checkout untuk mendapatkan lebih sedikit informasi untuk pesanan WooCommerce

Lebih dari 80.000 toko di seluruh dunia menggunakan plugin ini setiap hari.

Jenis bidang checkout dalam versi gratis

  • Teks
  • Textarea
  • Nomor
  • Surel
  • Telepon
  • URL
  • Kotak centang
  • Warna
  • Judul
  • Gugus kalimat
  • Gambar
  • HTML

Bidang dalam versi PRO

  • Multi-kotak centang
  • Tombol radio
  • Pilih (Drop Down)
  • Multi-Pilih
  • Radio dengan gambar
  • Tanggal
  • Radio dengan warna
  • Waktu
  • Unggah File
Baca lebih lanjut tentang cara menambahkan bidang khusus ke checkout WooCommerce .

Unduh ekstensi WooCommerce gratis ini untuk menyesuaikan halaman checkout Anda.

Bidang Checkout Fleksibel WooCommerce

Edit, tambahkan baru, atau sembunyikan bidang yang tidak perlu dari formulir pembayaran WooCommerce. Ini semua tentang konversi dan pengalaman pengguna yang lebih baik.

Unduh gratis atau Buka WordPress.org
80.000+ Instalasi Aktif
Terakhir Diperbarui: 13-03-2023
Bekerja dengan WooCommerce 7.1 - 7.6.x
Baca dokumentasi plugin →

Ringkasan

Tambahkan bidang produk dan pembayaran khusus di WooCommerce

Pada artikel ini, saya menunjukkan kepada Anda plugin yang dapat Anda gunakan untuk membuat bidang khusus di WooCommerce.

Ada dua plugin yang dapat Anda gunakan untuk membuat bidang khusus di WooCommerce:

  • Unduh Bidang Pembayaran Fleksibel →
  • Unduh Bidang Produk Fleksibel →

Kedua plugin tersedia untuk diunduh secara gratis. Namun, versi gratisnya tidak mendukung semua fitur.

Anda dapat menguji semua plugin kami (juga versi PRO mereka) dalam demo gratis !

Beri tahu kami jika Anda memiliki pertanyaan tentang plugin dan membuat bidang khusus!

Lebih lanjut tentang plugin kami