Tingkatkan Halaman Produk WooCommerce Anda Menggunakan Bidang Kustom

Jika Anda ingin meningkatkan toko WooCommerce Anda, mempelajari cara menggunakan bidang khusus WooCommerce adalah alat yang hebat untuk dimiliki di sabuk alat Anda.

Bidang khusus memungkinkan Anda mengumpulkan dan menampilkan informasi tambahan tentang produk WooCommerce Anda, yang sangat berguna untuk menyesuaikan toko Anda.

Dengan alat yang tepat, bidang kustom WooCommerce juga tidak harus rumit. Meskipun Anda tentu saja dapat menggunakan kode untuk menyisipkan bidang khusus, Elementor menawarkan cara yang lebih mudah untuk bekerja dengan bidang khusus yang memungkinkan Anda melakukan segalanya dari antarmuka visual Elementor.

Dalam posting ini, kami akan membahas semua yang perlu Anda ketahui tentang bidang kustom WooCommerce, termasuk yang berikut:

• Pandangan yang lebih dalam tentang bidang khusus WooCommerce dan bagaimana bidang itu membantu meningkatkan toko Anda.
• Berbagai jenis bidang khusus yang dapat Anda tambahkan ke WooCommerce.
• Kapan menggunakan bidang khusus WooCommerce vs atribut/taksonomi produk.
• Cara membuat bidang khusus WooCommerce di backend.
• Cara menampilkan bidang khusus di frontend toko Anda, menggunakan Elementor Pro atau kode khusus.

Mari kita mulai!

Bidang khusus WooCommerce memungkinkan Anda menyimpan dan menampilkan informasi tambahan tentang produk di situs Anda. Mereka seperti bidang kustom WordPress biasa, tetapi mereka secara khusus mengumpulkan informasi tentang produk WooCommerce Anda.

Secara default, WooCommerce menawarkan bidang tingkat tinggi yang berlaku untuk sebagian besar produk, seperti harga dan deskripsi produk. Tapi itu tidak memberi Anda cara untuk membuat bidang yang unik untuk toko Anda.

Di situlah bidang khusus dapat berguna.

Di bagian belakang, bidang khusus mempermudah penyimpanan detail dan informasi unik tentang produk Anda. Alih-alih mencoba memasukkan informasi khusus ke dalam kotak deskripsi produk yang tidak terstruktur, Anda dapat membuat bidang khusus untuk semua detail penting, yang mempermudah pengelolaan dan pembaruan produk.

Di frontend, bidang kustom membantu Anda menampilkan semua informasi itu secara terstruktur. Jika diperlukan, mereka juga memberi Anda kesempatan untuk mengumpulkan informasi tambahan dari pembeli, seperti membiarkan mereka memasukkan pesan ukiran khusus untuk disertakan pada perhiasan yang mereka beli dari toko Anda.

Jika Anda masih tidak yakin bagaimana semua ini terjadi – jangan khawatir! Di bagian berikutnya, kami akan memberi Anda beberapa contoh nyata tentang bagaimana Anda dapat menggunakan bidang khusus untuk menyempurnakan toko Anda.

Ada dua jenis bidang khusus yang akan Anda lihat untuk toko WooCommerce:

• Bidang data produk – ini memungkinkan Anda menyimpan informasi tambahan tentang suatu produk. Sebagai admin toko, Anda akan memasukkan data ini dari dasbor WordPress backend Anda. Kemudian, Anda akan menampilkan data di halaman produk Anda.
• Bidang masukan khusus – ini memungkinkan Anda mengumpulkan informasi tambahan tentang produk dari pembeli. Biasanya, ini untuk membantu Anda membuat beberapa jenis produk yang dapat disesuaikan. Perbedaan utama di sini adalah pembeli Anda memasukkan data dari frontend situs Anda.

Bergantung pada situasi toko Anda, Anda mungkin hanya menggunakan satu jenis bidang khusus WooCommerce. Atau, Anda dapat menggunakan kedua jenis tersebut sehingga Anda dapat menampilkan informasi tambahan dan mengumpulkan informasi tambahan dari pembeli Anda.

Mari kita lihat mereka lebih detail.

Penggunaan paling umum dari bidang kustom WooCommerce adalah untuk menampilkan informasi tambahan tentang suatu produk. Bidang input WooCommerce backend adalah "satu ukuran cocok untuk semua", tetapi Anda mungkin memiliki situasi di mana Anda ingin menampilkan informasi unik tentang produk Anda secara terstruktur.

Misalnya, mungkin Anda memiliki toko buku online dan ingin menyertakan cuplikan ulasan positif dari para kritikus tentang buku yang Anda jual. Tentu, Anda dapat memasukkannya langsung ke dalam deskripsi produk, tetapi menggunakan bidang khusus akan memungkinkan Anda memberikan kutipan ini bidang masukan khusus dan Anda akan memiliki kontrol lebih besar atas tempat Anda menempatkannya.

Atau, mungkin Anda menjual kaos grafis dan Anda ingin mengumpulkan dan menampilkan informasi tentang perancang setiap kaos.

Berikut ini contoh menambahkan beberapa bidang khusus di backend:

Dan kemudian Anda dapat menampilkan informasi itu di mana pun Anda inginkan pada halaman produk Anda seperti ini:

Pada dasarnya, jika Anda ingin menampilkan semua jenis informasi tambahan tentang suatu produk, meletakkan informasi itu di bidang khusus dapat sangat berguna karena alasan berikut. Kamu bisa…

1. Buat bidang input khusus, yang memudahkan untuk menambahkan informasi dan memperbarui informasi di masa mendatang.
2. Tampilkan informasi persis di mana Anda ingin meletakkannya. Anda dapat menempatkannya di mana saja di halaman produk Anda. Dan dengan Elementor, Anda bahkan tidak perlu mengetahui kode apa pun untuk melakukan ini.
3. Format informasi sesuai keinginan Anda. Misalnya, Anda dapat menambahkan warna untuk menarik perhatian, batas, dll.

Pilihan lain untuk menggunakan bidang khusus WooCommerce adalah membuat bidang masukan khusus pada halaman produk tunggal Anda sehingga pembeli dapat menyesuaikan produk atau memberikan informasi tambahan.

Misalnya, mungkin Anda menjual jenis perhiasan tertentu dan Anda ingin memberikan kemampuan kepada pembeli untuk membuat ukiran khusus pada barang yang mereka beli. Atau mungkin Anda ingin membiarkan pembeli memasukkan pesan khusus untuk sablon di baju.

Untuk menyelesaikan kasus penggunaan ini, Anda dapat menambahkan bidang input teks ke halaman produk frontend.

Berikut adalah contoh yang menambahkan bidang input seperti itu selain bidang data khusus dari bagian sebelumnya:

Jika Anda ingin mengumpulkan data produk tambahan, opsi populer lainnya adalah atribut dan taksonomi WooCommerce. Anda hanya akan melihat ini yang disebut "atribut" saat Anda menyesuaikan produk, tetapi apa yang dilakukan WooCommerce di backend adalah membuat taksonomi kustom baru untuk setiap atribut yang Anda buat.

Atribut dan taksonomi juga merupakan cara yang sangat berguna untuk menyimpan informasi tentang suatu produk, tetapi keduanya memiliki fungsi yang berbeda sehingga penting untuk memahami perbedaannya:

• Atribut/taksonomi – Anda menggunakan ini untuk mengelompokkan produk, seperti sebuah kategori. Pembeli Anda dapat menggunakan informasi ini untuk menyaring semua produk dengan atribut tertentu. WooCommerce sudah menyertakan dua taksonomi secara default – kategori dan tag produk – tetapi Anda dapat menggunakan atribut untuk menambahkan taksonomi khusus tanpa batas.
• Bidang khusus – Anda menggunakannya untuk menyimpan informasi yang unik untuk setiap produk individual. Produk tidak dikelompokkan bersama berdasarkan informasi bidang khusus.

Mari kita lihat beberapa contoh kapan harus menggunakan masing-masing…

Pertama, katakanlah Anda menjual berbagai desain t-shirt dengan warna berbeda. Anda menginginkan cara untuk menyimpan informasi tentang warna setiap kaos sehingga pembeli Anda dapat memfilter semua kaos dengan warna yang mereka minati.

Untuk kasus penggunaan ini, Anda ingin menggunakan atribut produk (taksonomi). Ini akan mengelompokkan item yang berbeda berdasarkan warna yang ditetapkan dan memungkinkan pembeli memfilternya. Misalnya, menelusuri semua kemeja hijau.

Tapi kemudian katakanlah Anda juga ingin menambahkan catatan tentang bagaimana produk tersebut cocok. Misalnya, apakah ukurannya pas atau sedikit lebih ketat atau lebih longgar dari biasanya. Informasi ini unik untuk setiap t-shirt dan bukan sesuatu yang kebanyakan pembeli ingin filter, jadi Anda akan lebih baik meletakkan detail ini di bidang khusus.

Ada beberapa situasi di mana atribut dan bidang khusus dapat cocok dan Anda mungkin memilih pendekatan yang berbeda tergantung pada kebutuhan spesifik Anda.

Misalnya, Anda ingin menambahkan informasi tentang desainer grafis yang membuat setiap t-shirt yang Anda jual. Berikut adalah skenario yang berbeda di mana Anda mungkin ingin menggunakan setiap opsi:

• Atribut – Anda akan menggunakan ini jika Anda menjual beberapa kemeja dari setiap artis dan Anda ingin memberikan opsi kepada pembeli untuk menyaring semua kemeja dari artis tertentu.
• Bidang khusus – Anda akan menggunakan ini jika Anda ingin menyimpan dan menampilkan artis, tetapi Anda tidak perlu membuatnya dapat difilter. Misalnya, mungkin artisnya tidak begitu diminati pembeli atau mungkin Anda hanya menjual satu kemeja dari masing-masing artis.

Ada dua bagian untuk bekerja dengan bidang khusus WooCommerce:

1. Anda perlu membuat bidang khusus di backend sehingga Anda dapat menambahkan lebih banyak informasi ke produk Anda.
2. Anda perlu menampilkan informasi dari bidang khusus tersebut di bagian depan toko Anda.

Di bagian pertama ini, kami akan menunjukkan cara membuat bidang kustom WooCommerce di backend. Kemudian, di bagian berikutnya, kita akan membahas cara menampilkannya.

Cara Anda membuat bidang khusus bergantung pada apakah Anda ingin menampilkan bidang data produk tambahan atau jika Anda ingin menampilkan bidang masukan khusus. Mari kita lalui keduanya…

Untuk mengumpulkan dan menyimpan data tambahan tentang produk WooCommerce, Anda dapat menggunakan plugin bidang khusus apa pun. Opsi populer yang terintegrasi dengan Elementor meliputi:

• Bidang Kustom Lanjutan (ACF)
• Perangkat
• Polong
• Kotak Meta

Kami memiliki perbandingan terperinci antara ACF vs Toolset vs Pods jika Anda ingin mempelajari lebih lanjut tentang penawaran tersebut, tetapi kami akan menggunakan ACF untuk contoh ini karena populer, gratis, dan fleksibel. Ide dasar yang sama akan berlaku untuk semua plugin.

Untuk memulai, instal dan aktifkan plugin Bidang Kustom Tingkat Lanjut gratis dari WordPress.org. Lalu, pergi ke Custom Fields → Add New untuk membuat “Field Group” baru.

Grup bidang persis seperti namanya – sekelompok satu atau lebih bidang khusus yang ingin Anda tambahkan ke beberapa atau semua produk WooCommerce Anda.

Untuk memulai, gunakan aturan Lokasi untuk mengontrol produk mana yang ingin Anda tambahkan bidang khusus.

Pertama, atur Post Type sama dengan Product . Jika Anda ingin menampilkan bidang khusus ini di semua produk Anda, hanya itu yang perlu Anda lakukan:

Jika Anda hanya ingin menampilkan bidang khusus ini pada produk tertentu (misalnya produk dalam kategori tertentu), Anda dapat menambahkan lebih banyak aturan sesuai kebutuhan. Misalnya, berikut ini tampilan untuk menargetkan produk dalam kategori "Pakaian" atau "Dekorasi":

Kemudian, Anda dapat menambahkan bidang khusus Anda menggunakan tombol + Tambahkan Bidang di bagian atas antarmuka. Untuk setiap bidang, Anda dapat memilih dari jenis bidang yang berbeda (misalnya nomor vs teks pendek vs teks panjang, dll.) dan mengonfigurasi detail lain tentang bidang itu.

Misalnya, berikut adalah tiga bidang khusus untuk dikumpulkan…

1. Nama desainernya.
2. Tahun desainer membuat desain.
3. Pernyataan tentang desain dari desainer.

Setelah Anda puas dengan tampilan semuanya, lanjutkan dan Publikasikan grup bidang Anda.

Sekarang, saat Anda mengedit produk, Anda akan melihat bidang khusus baru tersebut di antarmuka pengeditan produk:

Di bagian selanjutnya, kami akan menunjukkan cara mengambil informasi di bidang khusus ini dan menampilkannya di frontend toko WooCommerce Anda.

Tapi pertama-tama – mari kita bicara tentang jenis lain dari bidang khusus WooCommerce – bidang masukan produk khusus.

Plugin di atas sangat bagus jika Anda ingin mengumpulkan informasi tambahan tentang suatu produk dan menampilkannya di bagian depan situs Anda. Namun, mereka tidak bagus untuk mengumpulkan masukan khusus dari pembeli Anda di frontend. Misalnya, membiarkan pembeli memasukkan pesan ukiran khusus yang akan ditambahkan ke produk.

Untuk kasus penggunaan ini, Anda biasanya menginginkan plugin pengaya produk WooCommerce. Plugin ini dirancang khusus untuk menerima input produk dari pembeli di frontend toko Anda.

Anda dapat menemukan banyak plugin untuk memenuhi kebutuhan ini, tetapi dua tempat yang baik untuk memulai adalah:

• Plugin Pengaya Produk WooCommerce resmi – $49
• Bidang Produk Lanjutan – freemium

Kami akan menunjukkan cara kerjanya menggunakan plugin Pengaya Produk resmi dari tim WooCommerce, tetapi ide dasarnya akan sama dengan semua plugin pengaya produk.

Dengan plugin terinstal, Anda dapat pergi ke Produk → Add-on untuk membuat bidang input khusus yang ingin Anda tampilkan di beberapa/semua produk Anda.

Sama seperti menyiapkan ACF, Anda dapat menargetkan bidang Anda ke semua produk atau hanya kategori produk tertentu.

Anda juga dapat menambahkan bidang sebanyak yang diperlukan dan memilih dari jenis bidang yang berbeda.

Satu perbedaan utama adalah Anda juga memiliki opsi untuk menyesuaikan harga produk berdasarkan pilihan yang dibuat pembeli.

Misalnya, Anda dapat mengenakan biaya tambahan $5 jika pembeli ingin menambahkan ukiran/pesan khusus:

Anda juga memiliki opsi untuk menambahkan bidang masukan khusus langsung ke produk saat Anda bekerja di editor produk. Anda dapat melakukan ini dari tab Add-on baru di kotak Data produk :

Plugin Pengaya Produk akan secara otomatis menampilkan bidang khusus ini di bagian depan toko Anda. Namun di bagian berikutnya, kami akan menunjukkan kepada Anda bagaimana Anda dapat mengontrol penempatannya secara manual menggunakan Elementor.

Sekarang setelah Anda membuat bidang khusus dan menambahkan informasi ke bidang tersebut, Anda siap untuk menampilkan informasi tersebut di bagian depan situs Anda.

Kami akan menunjukkan kepada Anda dua opsi di sini:

1. Elemen
2. Kode kustom melalui file functions.php

Cara termudah untuk menampilkan bidang kustom WooCommerce Anda adalah dengan Elementor Pro dan Elementor WooCommerce Builder. Menggunakan visual, antarmuka drag-and-drop Elementor, Anda dapat membuat satu atau beberapa template produk yang menyertakan data dari bidang kustom Anda.

Untuk memulai, buka Templat → Pembuat Tema dan buat satu templat produk baru.

Anda kemudian dapat memilih dari salah satu templat yang telah dibuat sebelumnya atau membuat desain produk Anda sendiri dari awal. Jika Anda memerlukan bantuan di sini, Anda dapat melihat panduan lengkap kami tentang cara menyesuaikan desain halaman produk WooCommerce.

Saat Anda siap untuk memasukkan bidang kustom WooCommerce Anda, tambahkan widget Editor Teks biasa dan kemudian pilih opsi untuk mengisinya dengan tag dinamis. Di tarik-turun tag dinamis, pilih ACF FIeld :

Pada layar berikutnya, klik ikon kunci inggris dan gunakan tombol drop-down untuk memilih bidang khusus yang ingin Anda tampilkan:

Anda juga dapat menggunakan opsi Lanjutan untuk menambahkan teks statis sebelum/sesudah informasi dari bidang khusus.

Dan itu saja! Elementor sekarang akan secara dinamis menarik data bidang khusus untuk produk yang Anda pratinjau.

Anda juga dapat menggunakan bidang khusus untuk mengisi lebih dari sekadar teks. Misalnya, jika Anda menambahkan bidang khusus nomor, Anda dapat menggunakan nomor itu untuk mengisi peringkat bintang, penghitung, dan lainnya.

Atau, Anda juga dapat mengisi tautan secara dinamis. Misalnya, Anda dapat membuat bidang khusus yang menyertakan tautan ke dokumentasi produk dan menggunakan tautan tersebut untuk mengisi tombol pada satu halaman produk.

Untuk mempelajari lebih lanjut tentang fitur ini, Anda dapat membaca panduan lengkap kami untuk konten dinamis di Elementor Pro.

Atau, untuk cara lain menampilkan informasi ini di Elementor, Anda juga bisa membuat tabel produk yang menyertakan data bidang kustom Anda.

Jika Anda telah membuat bidang input produk khusus dengan salah satu plugin di atas (seperti plugin Pengaya Produk resmi yang kami sebutkan), plugin tersebut biasanya akan secara otomatis menampilkan bidang tersebut di frontend toko Anda, jadi Anda tidak akan perlu memasukkannya secara manual ke dalam template Elementor Anda.

Di Elementor, bidang add-on ini biasanya akan ditampilkan di mana pun Anda menambahkan widget Tambahkan ke Keranjang di desain Anda. Jadi, jika Anda ingin memindahkannya, Anda bisa mengatur penempatan widget Add to Cart .

Jika Anda tahu jalan di sekitar kode, Anda juga dapat menambahkan bidang khusus WooCommerce ke halaman produk menggunakan file functions.php tema anak Anda atau plugin seperti Cuplikan Kode. Namun, kami tidak merekomendasikan metode ini untuk kebanyakan orang karena rumit.

Anda tidak hanya perlu memahami kode untuk menyiapkannya, tetapi Anda juga tidak akan mendapatkan pratinjau visual waktu nyata dan akan sulit untuk menempatkan bidang Anda. Inilah sebabnya mengapa Elementor membuat pilihan yang lebih baik bagi sebagian besar pemilik toko.

Jika Anda ingin menggunakan metode kode manual, Anda akan bergantung pada kait WooCommerce untuk menempatkan informasi khusus Anda. Jika Anda tidak terbiasa dengan "kait", pada dasarnya mereka memungkinkan Anda menyuntikkan kode atau konten di bagian tertentu dari toko WooCommerce Anda.

Misalnya, Anda dapat menemukan berbagai kait untuk menyuntikkan konten di atas judul produk, di bawah judul produk, di bawah tombol tambahkan ke troli, dll.

Untuk memulai, Anda akan ingin memilih pengait untuk lokasi tempat Anda ingin menyuntikkan konten dari bidang khusus Anda. Untuk mempermudah memvisualisasikan lokasi ini, Anda dapat menggunakan panduan kait WooCommerce visual yang sangat baik dari Business Bloomer.

Selain menemukan pengait yang ingin Anda gunakan, Anda juga memerlukan PHP untuk menampilkan bidang Anda dari ACF. Jika Anda tidak yakin bagaimana mendapatkannya, ACF memiliki dokumentasi yang sangat rinci.

Kemudian, Anda dapat menggunakan cuplikan kode seperti di bawah ini untuk menampilkan bidang, di mana insert_hook_location adalah lokasi kait yang ingin Anda gunakan dan field_name adalah slug nama bidang dari ACF:

Misalnya, cuplikan di bawah ini akan menampilkan bidang khusus pernyataan artistik di bawah detail meta produk WooCommerce:

Inilah yang mungkin terlihat di bagian depan toko Anda:

Anda dapat mengulangi proses untuk menampilkan bidang khusus tambahan.

Memahami cara menggunakan bidang kustom WooCommerce sangat berguna untuk membuat toko WooCommerce kustom yang dioptimalkan.

Anda dapat menggunakannya untuk menawarkan cara terstruktur untuk memasukkan data produk tambahan di dasbor backend dan menampilkan informasi tersebut di situs frontend Anda. Atau, Anda juga dapat membuat bidang masukan khusus untuk memungkinkan pembeli menyesuaikan produk Anda.

Untuk membuat bidang khusus untuk data produk tambahan, Anda dapat menggunakan plugin seperti Bidang Khusus Lanjutan (ACF), sedangkan bidang masukan khusus memerlukan plugin pengaya produk khusus.

Kemudian, untuk cara termudah menampilkan bidang khusus tersebut di frontend toko Anda, Anda dapat menggunakan Elementor dan Elementor WooCommerce Builder. Dengan Elementor, Anda dapat membuat template produk kustom Anda sendiri yang menyertakan informasi dinamis tak terbatas dari bidang kustom Anda – tidak perlu kode.

Apakah Anda masih memiliki pertanyaan tentang cara menggunakan bidang khusus WooCommerce di toko Anda? Tinggalkan komentar dan beri tahu kami!