Cara Membuat Swatch Variasi Radio, Label, Warna dan Gambar untuk Atribut Produk Variabel WooCommerce

Contoh variasi produk WooCommerce adalah teknologi luar biasa yang diperkenalkan untuk meningkatkan penjualan dan konversi situs.

Berpikir mengapa swatch luar biasa, bukan?

Contoh variasi produk menggantikan variasi produk WooCommerce default pilih bidang tarik-turun dan aktifkan contoh warna, gambar, label, dan radio. Akibatnya, pelanggan dapat dengan mudah memilih variasi produk yang diinginkan dan segera menambahkannya ke keranjang.

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat mengaktifkan radio, label, warna, dan variasi foto di produk variabel WooCommerce menggunakan OceanWP Theme .

Saya berasumsi Anda telah menginstal tema OceanWP. Untuk mengaktifkan swatch di produk variabel Anda, instal plugin WooCommerce Variation Swatches terlebih dahulu.

Demo Langsung | Unduh Plugin Swatch Variasi WooCommerce

Instalasi Swatch Variasi WooCommerce

Anda juga dapat mengunduh plugin Swatch Variasi WooCommerce dari backend situs Anda. Pilih Mulai Memasang Plugin dari pemberitahuan admin teratas.

Instal dan Aktifkan Swatch Variasi WooCommerce dan plugin Ocean Extra .

Jika Anda tidak mendapatkan pemberitahuan teratas untuk menginstal plugin swatch, navigasikan ke Plugins >> Add New . Cari Swatch Variasi WooCommerce di bidang pencarian. Instal dan Aktifkan Plugin Swatch Variasi WooCommerce oleh Emran Ahmed .

Setelah instalasi dan aktivasi plugin berhasil, saatnya membuat swatch variasi radio, label, warna dan gambar dalam tema OceanWP. Mari kita mulai prosesnya.

Pengaturan Swatch Variasi WooCommerce

Setelah menginstal plugin Woocommerce Variation Swatches and Photos di tema OceanWP Anda. Saatnya mengkonfigurasi plugin ini untuk produk variabel Anda. Ada dua cara untuk menginstal plugin ini.

1. Aktifkan contoh variasi untuk produk variabel yang ada
2. Atur variasi swatch Untuk produk variabel baru

Dalam tutorial ini, saya akan menjelaskan kedua cara tersebut.

Aktifkan Variasi Swatch Untuk Produk Variabel yang Ada

Banyak dari Anda sudah memiliki produk variabel yang dibuat di toko Anda. Jika Anda ingin mengubah pilihan dropdown variasi produk menjadi radio, label, warna, dan gambar swatch, Anda telah mengikuti tutorial ini dari sini. Periksa tangkapan layar berikut. Variasi default pilih dropdown saat ini terlihat seperti screenshot berikut di situs Anda. Dalam langkah-langkah berikutnya, saya akan menunjukkan kepada Anda bagaimana Anda mengubah bidang pemilihan variasi menjadi contoh yang indah.

Sebelum

Setelah

Langkah 01: Mengedit Atribut

Buka Produk >> Atribut . Semua atribut global yang ada tercantum di bagian atribut. Setelah menginstal plugin WooCommerce Variation Swatches, ia menambahkan bidang Type . Secara default itu akan menunjukkan pilih di bawah Jenis judul.

Karena Plugin WooCommerce Swatches hadir dengan Tiga jenis atribut: Warna, Gambar, Tombol . Anda dapat mengatur jenis atribut apa pun untuk atribut yang Anda inginkan.

Untuk tujuan demonstrasi, atribut Fabrics, Pattern dan Label telah dibuat. Tambahkan jenis atribut Warna untuk atribut Pola , jenis atribut Gambar untuk atribut Kain dan jenis atribut Tombol untuk Atribut Label .

Untuk menyetel tipe atribut warna ke atribut Pola , klik Edit .

Pilih Jenis Warna dari dropdown jenis.

Dapatkan kembali Produk >> Atribut . Edit atribut Fabrics seperti atribut Pattern .

Dapatkan kembali Produk >> Atribut lagi. Edit atribut Label seperti atribut Fabrics dan Pattern .

Ketika pemilihan tipe atribut selesai, kembali ke halaman daftar atribut. Daftar Attribute akan terlihat seperti gambar berikut.

Tampilan depan produk akan terlihat seperti tangkapan layar berikut setelah memilih jenis atribut untuk atribut produk.

Variasi untuk atribut Label terlihat bagus, tetapi variasi untuk atribut Pattern perlu menentukan warna dan variasi untuk atribut Fabrics perlu menambahkan gambar.

Langkah 02: Mengedit Variasi

Untuk mendefinisikan warna sebagai variasi di dalam atribut Pattern . Buka Produk >> Atribut . Pilih Konfigurasi istilah dari atribut Pola .

Setelah memilih Konfigurasi istilah, daftar variasi atribut muncul. Untuk Pola, tiga variasi: Variasi Biru , Hijau , dan Merah tercantum di sini. Edit setiap variasi satu per satu untuk menambahkan warna variasi.

Untuk demonstrasi, pilih Edit link untuk variasi Hijau .

Dari panel edit variasi. Pilih warna yang diinginkan dari Colorpicker dan perbarui perubahan dengan menekan tombol Perbarui .

Ketika semua variasi warna berhasil diperbarui, tampilan frontend seperti berikut ini.

Setelah memperbarui variasi atribut pola, edit atribut Fabrics dengan memilih Konfigurasi istilah seperti atribut pola .

Setelah menekan Configure terms , daftar istilah Fabrics muncul seperti pola. Edit setiap variasi untuk menyisipkan gambar variasi. Untuk tujuan demonstrasi, Edit tautan untuk atribut Chambray .

Dari panel edit variasi. unggah gambar variasi yang diinginkan dari gambar dan perbarui perubahan dengan menekan tombol Perbarui .

Setelah memperbarui gambar untuk semua variasi, frontend akan seperti ini tangkapan layar berikut.

Atur Variasi Swatch Untuk Produk Variabel Baru

Ini adalah langkah bagi mereka yang tidak memiliki produk variabel yang dibuat untuk toko mereka. Pertama, kita akan membuat produk variabel dan mengaktifkan swatch untuk mereka.

Langkah 01: Buat Atribut dan Variasi Global

Setelah instalasi dan aktivasi plugin berhasil, buat atribut yang Anda inginkan secara global dari Products >> Attributes . Buat Variasi Pola , Kain, Panjang dan Ukuran , masukkan judul atribut dan jenis atribut yang sesuai dari tarik-turun Jenis.

Ketika atribut warna, gambar dan label Pattern , Fabrics , Label dan Size berhasil dibuat, daftar atribut di sebelah kiri akan dibuat.

Setelah membuat atribut global, tambahkan variasi atribut dengan memilih Konfigurasi istilah. Untuk membuat variasi untuk atribut Pola , pilih Konfigurasi tautan istilah . Isi kolom Nama dan pilih kode warna. Buat variasi Hijau , Biru dan Merah untuk atribut warna.

Daftar variasi atribut muncul di layar kiri setelah menambahkan variasi untuk atribut Pola .

Buka Produk >> Atribut lagi. Buat variasi untuk atribut Fabrics , pilih Configure terms links dari Fabrics . Isi kolom Name dan tambahkan variasi gambar dari media library atau upload dari komputer.

Buat variasi Chambray, Corduroy, dan Embossed untuk atribut gambar dan mereka akan muncul di sebelah kiri.

Buat variasi untuk atribut Radio dan Label seperti variasi Gambar dan Warna.

Langkah 02: Tampilkan Swatch di Halaman Produk Variabel

Untuk mengaktifkan swatch pada halaman produk variabel. Masuk ke mode edit produk yang Anda inginkan, pilih produk variabel dari Data Produk .

Buka Tab Atribut . Klik pada tarik-turun Atribut produk khusus . Di sini semua atribut yang dibuat secara global muncul. Tambahkan semua atribut satu per satu.

Setelah menambahkan semua atribut, tekan tombol Pilih Semua dari setiap pengaturan atribut untuk menambahkan semua variasi yang tersedia sekaligus. Setelah menambahkan variasi atribut produk, simpan pengaturan dengan memilih Tombol Simpan Atribut .

Sekarang masuk ke tab Variasi . Klik pada tarik-turun Tambahkan Variasi . Di sini muncul dua opsi. Yang pertama adalah Tambahkan Variasi dan yang kedua adalah Buat variasi dari semua atribut.

Pilih Buat variasi dari semua atribut dan Tekan Go . Ini akan menambahkan semua kombinasi variasi yang tersedia yang dibuat untuk atribut. Tambahkan gambar harga dan variasi untuk variasi individu dan simpan pengaturannya.

Kesimpulan

Saya telah mencoba membahas setiap langkah untuk menginstal Plugin Swatch Variasi WooCommerce dalam tema OceanWP. Beri tahu saya di kotak komentar jika Anda membutuhkan bantuan lebih lanjut.