Cara menambahkan bidang khusus ke produk di WooCommerce

Programming

Terakhir diubah pada 29 Juni 2022.

WooCommerce adalah perangkat lunak terbaik di antara perangkat lunak e-niaga teratas yang gratis. Ini didasarkan pada platform WordPress. Menyiapkan keranjang belanja dengan WooCommerce sangat mudah.

Di artikel sebelumnya, kami melihat beberapa kode berbasis WooCommerce untuk alat berikut.

Showcase produk WooCommerce menampilkan informasi yang memenuhi kebutuhan pelanggan. Terkadang detail awal tidak dapat menyampaikan semuanya dan memungkinkan pelanggan untuk mengidentifikasi nasibnya.

Ini adalah sesuatu yang memerlukan penambahan informasi tambahan menggunakan integrasi konteks kustom. Plugin WooCommerce mendukung penambahan bidang khusus ke produk melalui antarmuka admin.

Di bawah ini kita akan melihat opsi dan cara menggunakannya.

Mengapa Manajer Toko WooCommerce Membutuhkan Bidang Kustom

Pelajari mengapa WooCommerce Store membutuhkan ini sebelum menambahkan bidang khusus ke produk Anda.

Karena beberapa toko memiliki galeri produk umum dengan data umum seperti judul, gambar, dan harga. Dalam hal ini, bidang khusus tidak diperlukan.

Daftar berikut menunjukkan manfaat fitur ini untuk bidang khusus di Toko WooCommerce.

  • Untuk menambahkan metadata produk untuk menampilkan informasi produk tambahan.
  • Sehingga pelanggan dapat memberikan informasi lebih lanjut mengenai produk yang akan dibeli.
  • Untuk menambahkan bidang interaktif yang mudah digunakan untuk menghemat upaya penyesuaian.
  • Untuk menambahkan iklan, penawaran, diskon, dan lainnya.
  • Untuk dukungan pengguna akhir untuk menentukan tanggal pengiriman, waktu dan tempat.
  • Untuk tujuan pajak, dan pengiriman kustom dengan mengubah sakelar.

Membuat jenis bidang khusus yang didukung oleh plugin WooCommerce

Plugin WooCommerce yang ada dapat menambahkan dua jenis bidang khusus ke produk.

  1. Bidang Data – Menerima bidang informasi yang ditampilkan di antarmuka pengguna.
  2. Add-on Fields – Bidang yang mengumpulkan data dari pengguna di etalase.

1. Bidang Data – Menerima bidang informasi yang ditampilkan di antarmuka pengguna

Bidang khusus ini untuk menampilkan lebih banyak informasi selain dari judul biasa, harga, dan semua item. Ini membantu untuk menampilkan metadata produk tentang fitur, versi, peringkat, dan semuanya.

Misalnya monitor, untuk menampilkan informasi tambahan seperti:

Merek jantung
Model Dell 20H
Ukuran layar 23
Kemungkinan HDMI, anti-cahaya

2. Bidang Pengaya – Bidang yang mengumpulkan data dari pengguna di jendela toko

Jenis bidang khusus ini adalah tentang membuat opsi untuk interaksi pelanggan. Ini memungkinkan spesifikasi atau penyesuaian lebih lanjut untuk ditambahkan ke produk.

Hal ini untuk menambah informasi pribadi oleh pelanggan dalam pembelian produk. Contoh,

  • Kolom pilihan ganda untuk memilih ukuran atau warna T-shirt.
  • Bidang teks yang dibeli untuk mengumpulkan merek untuk ukiran di mobil.

Cara menambahkan bidang tampilan khusus di WooCommerce

  1. Gunakan plugin WooCommerce
  2. Tambahkan kode untuk menampilkan bidang khusus untuk produk.

Metode 1: Gunakan plugin

Kami telah menggunakan tiga plugin untuk mendukung penambahan bidang khusus ke produk di Toko WooCommerce. Mereka memiliki fitur-fitur canggih dan juga mudah disesuaikan.

  1. Area produk lanjutan untuk WooCommerce
  2. Plugin produk untuk WooCommerce
  3. Bidang khusus lanjutan

1. Area Produk Lanjutan untuk WooCommerce

Plugin ini digunakan untuk menambahkan bidang tambahan ke halaman produk WooCommerce. Membantu menyematkan bidang add-on produk sehingga pelanggan dapat menyesuaikan pesanan.

Lihat detail dan prasyarat plugin di bawah ini.

resep 4,5 atau lebih tinggi
Fasilitas aktif 20000+
versi PHP 5.6 atau lebih tinggi
pembaruan terbaru 2 minggu yang lalu

Kemungkinan

  • Bidang produk khusus yang dipilih pada halaman produk dapat dipindahkan ke halaman keranjang belanja dan penyelesaian. Seluruh aliran stabil sampai pesanan diterima.
  • Bangun bidang produk yang mulus di belakang dengan pengalaman terintegrasi.
  • Ada opsi untuk menambahkan beberapa harga untuk memanipulasi harga dasar produk saat memilih.
  • Mendukung semua area interaktif yang memungkinkan dengan opsi sembunyikan acara.
  • Ini memungkinkan produk dan antarmuka pemetaan konteks khusus untuk mengontrol visibilitas.
  • Kustomisasi angka pajak WooCommerce dimungkinkan.
  • Multibahasa dalam tema yang siap diterjemahkan.

Langkah-langkah penggunaan

Unduh plugin ini dari repositori resmi WordPress. Kemudian instal dan aktifkan untuk WooCommerce Store. Jika Anda baru menggunakan WordPress, berikut cara menyiapkan plugin.

  1. Buka Produk -> Tambah Baru dari menu admin WooCommerce.
  2. Klik “Bidang Kustom” di bawah panel “Data Produk”.
  3. Konfigurasikan pengaturan “Tata letak grup bidang”. Ini untuk memposisikan label atau catatan lapangan jika ada. Ini juga membantu menandai bidang sebagai wajib.
  4. Pilih “Tambahkan bidang pertama” atau “Tambah bidang” dan tentukan jenis bidang, label, dan semuanya.
  5. Tambahkan aturan bersyarat untuk menambahkan dependensi antara bidang yang akan ditampilkan.

Ini adalah antarmuka manajemen WooCommerce untuk menambahkan bidang khusus ke produk. saya tambahkan Ukuran Pilihan untuk produk sebagai kelompok proporsi.

Pengaturan latar belakang produk lanjutan

Ini menunjukkan bidang khusus yang ditambahkan di bagian depan produk sebagai opsi radio.

Output bidang produk tingkat lanjut

2. Ekstensi produk untuk WooCommerce

Plugin ini dengan jelas menyatakan tujuan dengan namanya. Ya, menambahkan lebih banyak bidang lebih memungkinkan pelanggan berinteraksi dengan toko untuk mempersonalisasi pembelian.

Pembuat formulir kustom yang mudah digunakan memungkinkan Anda membuat grup bidang untuk halaman toko WooCommerce. Lihatlah versi dan detail lainnya di bawah ini.

versi WordPress 4.0 atau lebih tinggi
Fasilitas aktif 30000+
versi PHP 5.6 atau lebih tinggi
Pembaruan terakhir pada 3 minggu yang lalu

Unduh plugin ini dari repositori WordPress yang ditautkan. Plugin ini menyediakan antarmuka drag-and-drop untuk membuat grup bidang khusus untuk produk.

Kemungkinan

  • Kemampuan untuk menyesuaikan pesanan pembelian
  • Menyimpan data pribadi pelanggan melalui bidang khusus yang ditambahkan ke produk di backend.
  • Membantu pembangun mendesain satu set bidang khusus.
  • Memungkinkan lebih banyak jenis bidang seperti bidang teks, nomor dan email, bidang gabungan, dan lainnya.
  • Dalam versi dasar, dimungkinkan untuk menambahkan tagDan <h*> Menyediakan untuk menampilkan meta produk di bagian depan.

Langkah-langkah penggunaan

Ada beberapa langkah untuk menambahkan dan menampilkan bidang khusus di halaman produk tema WooCommerce.

  1. Terpercaya dan ahli Produk-> Ekstensi Produk Khusus Melalui menu admin WordPress.
  2. Tambahkan formulir baru dari grup Bidang Produk Kustom dan publikasikan.
  3. Terpercaya dan ahli Produk Dan buka produk baru atau panel edit.
  4. Pilih “Opsi Produk Kustom” Dari Data produk kelompok
  5. Periksa formulir untuk menambahkan peta antara bidang dan produk khusus.

Untuk menambahkan bidang khusus dan memetakannya ke produk, lihat dua gambar di bawah.

Pengaturan plugin produk

Memetakan ekstensi produk

Kemudian, Toko WooCommerce menampilkan bidang khusus pada satu halaman produk.

Keluaran plugin produk

3. Bidang khusus lanjutan

Mendukung kontrol penuh halaman pengeditan WordPress dan data formulir khusus.

versi WordPress 4.7 atau lebih tinggi
Fasilitas aktif 2+ juta
versi PHP 5.6 atau lebih tinggi
pembaruan terbaru 6 hari yang lalu

Plugin sederhana dan intuitif memiliki fungsi yang kuat dan lebih dari 30 jenis konteks

Kemungkinan

  • Ini menawarkan fungsi yang kuat untuk menyesuaikan dan menambahkan bidang khusus ke produk
  • Antarmuka yang bagus dan sederhana untuk menambahkan grup bidang khusus sesuai kebutuhan.
  • Mendukung lebih dari 30 jenis bidang untuk memisahkan lebih banyak data dari bidang produk khusus standar.

Langkah-langkah penyesuaian

Sebelum membaca langkah-langkah berikut, unduh atau instal plugin ini untuk mengaktifkan plugin ini.

  1. Tambahkan dan sesuaikan grup bidang.
  2. Tambahkan bidang formulir ke grup.
  3. Tambahkan data untuk bidang khusus pada halaman produk.
  4. Tampilkan informasi produk di bagian depan

Langkah 1: Tambahkan dan sesuaikan grup bidang

Terpercaya dan ahli Bidang khusus Tambahkan bidang baru melalui menu admin dan tentukan lokasi UI dan pengaturan lainnya.

Membantu mengatur mode dan gaya untuk menambahkan dan menampilkan bidang khusus pada halaman produk. Mengelola posisi relatif dan penyelarasan bidang di antarmuka pengguna.

Bidang juga dapat digambar untuk posting, produk, halaman, dan lainnya.

Langkah 2: Tambahkan bidang formulir ke grup

Antarmuka Tambah Bidang memungkinkan Anda memasukkan data berikut. Untuk bidang komposit, ia meminta Anda untuk memasukkan beberapa opsi di bidang yang dimuat.

  • Label, nama, jenis
  • Catatan lapangan atau teks bantu.
  • Apakah bidang tersebut diperlukan atau tidak.
  • Lokasi default dan pemegang nilai.
  • Konten yang akan ditambahkan atau ditambahkan.
  • Pembatasan kepribadian, aturan.
  • Bidang atau pengidentifikasi cakupan kelas.

Langkah 3: Tambahkan data untuk bidang khusus berdasarkan produk

Jika grup bidang khusus dipetakan ke lokasi halaman produk, halaman Tambah / Edit akan menampilkannya.

Tambahkan data untuk bidang khusus yang ditampilkan di produk WooCommerce di toko.

##Gambar

Langkah 4: Tampilkan informasi produk di bagian depan

Kemudian tampilkan data bidang khusus pada halaman produk tunggal di bagian depan.

Dalam plugin ini kita perlu menambahkan kode pendek sederhana untuk menampilkan bidang khusus pada halaman produk.

Pada [acf field=”<field-id or slug>”] Kode pendek digunakan untuk menampilkan grup bidang khusus.

Ada beberapa fungsi di WordPress untuk menampilkan bidang produk WooCommerce.


Metode 2: Tambahkan bidang khusus melalui program

Jadi, kami melihat cara menambahkan bidang produk khusus di platform WooCommerce menggunakan plugin. Jika Anda ingin melakukan hal yang sama tanpa menggunakan plugin, caranya sangat mudah dengan beberapa langkah.

Langkah-langkah ini menampilkan bidang khusus pada halaman produk WooCommerce. Setelah mengumpulkan input pengguna di halaman produk, kode kustom menampilkannya di halaman keranjang belanja.

Langkah-langkah untuk menerapkan metode ini dengan menambahkan kode kustom tercantum di bawah ini.

  1. Tambahkan bidang khusus ke panel data produk di admin WooCommerce.
  2. Simpan data bidang khusus yang ditambahkan ke metadata keranjang belanja.
  3. Menampilkan bidang input pada halaman produk.
  4. Posting jumlah di keranjang belanja dan halaman pembayaran.

Tambahkan kode khusus ini ke file function.php dari tema WordPress yang aktif.

1. Tambahkan bidang khusus di panel info produk

Hasilkan kode untuk menampilkan bidang khusus di panel data produk WooCommerce. Kait woocommerce_product_options_general_product_data digunakan untuk memanggil kode ini.


Contoh ini menambahkan penggeser sebagai bidang khusus untuk produk. Oleh karena itu, ia menggunakan fungsi woocommerce_wp_select untuk mengatur parameter berikut.

  • PENGENAL
  • Menandai
  • Keterangan
  • deskripsi_tip
  • Pilihan

Ada fungsi serupa untuk menambahkan jenis bidang formulir lainnya. Sebagai contoh,

  • woocommerce_wp_textarea_input
  • kotak centang woocommerce_wp_
  • woocommerce_wp_hidden_input

2. Simpan input pengguna di bidang khusus di metadata keranjang belanja.

Kemudian, kait tindakan lain ditambahkan untuk menyimpan nilai bidang khusus di meta produk. Ini disebut menyimpan detail produk. Tindakan ini memanggil woocommerce_process_product_meta dan mengaitkan pengontrol.


3. Menampilkan kolom input pada halaman produk

Di bagian ini, jika meta produk tidak kosong, ia menyiapkan bidang HTML tambahan.

Pertama, admin memilih dan menyimpan opsi warna produk. Kode ini kemudian menambahkan bidang drop-down pada halaman produk tunggal.

Membaca meta produk saat ini dengan merujuk ke objek pos global. Kemudian mengambil meta produk dengan ID bidang khusus.

Pada halaman produk WooCommerce, bidang khusus ini ditambahkan sebelum tombol keranjang belanja. Karena menghubungkan tindakan woocommerce_before_add_to_cart_button untuk memanggil pengontrol ini.


4. Tampilkan opsi yang dipilih pada halaman keranjang belanja dan penyelesaian

Kait filter berikut mengontrol fungsi untuk menampilkan opsi kustom yang dipilih. Halaman ini memiliki keranjang belanja sebagai tujuannya untuk menyediakan komponen UI.

Kode ini diaktifkan saat memuat informasi keranjang belanja. Kait filter memanggil woocommerce_add_cart_item_data dan menampilkan nilai bidang khusus yang dipilih.

Menambahkan data ke larik item keranjang belanja, yang akan digunakan nanti di antarmuka halaman pembayaran.


Ini untuk mengurai array item keranjang belanja dan menampilkan nilai bidang khusus pada halaman pembayaran.

Menggunakan kait woocommerce_cart_item_name untuk membuat perubahan ini pada antarmuka pembayaran.

Hasil

Oleh karena itu, kami telah melihat kedua cara untuk menambahkan bidang khusus ke produk. Untuk mengaktifkan bidang produk WooCommerce khusus dengan atau tanpa plugin.

Saya harap artikel ini memberi Anda pengetahuan dasar di bidang ini. Ini juga dapat membantu Anda memahami dan mengulangi langkah-langkah menyesuaikan toko Anda.

Kembali ke atas

Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.