Cara Mengaktifkan Swatch Warna WooCommerce Untuk Variasi Produk Variabel dalam Tema Flatsome (Secara Global)

Memiliki variasi produk adalah fakta umum untuk eCommerce. Jika Anda memiliki eCommerce, Anda pasti perlu menyiapkan toko Anda untuk variasi produk Anda. Swatch Warna WooCommerce dapat membantu Anda melakukannya.

Di WooCommerce, Anda diberikan dropdown secara default untuk menangani variasi produk.

Aku tahu apa yang kamu pikirkan sekarang! Anda berpikir, “jadi apa! Mengapa orang-orang ini membuat keributan? ”

Mari kita bersihkan sudut pandang kita. Kami percaya setiap target pemilik eCommerce adalah untuk meningkatkan penjualan dan mempertahankan pengunjung ke situs mereka. Untuk membuatnya lebih lama, Anda perlu memberi mereka pengalaman yang mulus sehingga mereka merasa nyaman tinggal di situs Anda untuk waktu yang lama.

Dropdown untuk melihat variasi produk adalah proses kuno, juga memerlukan lebih banyak klik untuk melihat variasi. Ini bukan pengalaman yang nyaman bagi pengunjung, oleh karena itu Anda harus menggunakan sesuatu yang dapat memperlancar pengalaman menonton berbagai variasi. Di sinilah Variasi Swatch untuk membuat segalanya mudah dan mulus. Meskipun Variasi Swatch menawarkan warna, gambar, dan contoh tombol, dalam artikel ini, kami hanya akan fokus pada Swatch Warna.

Ada beberapa manfaat langsung dan tidak langsung menggunakan WooCommerce Color Swatch untuk variasi produk. Mari kita cari tahu beberapa!

1. Ini memberi pengunjung Anda pengalaman yang lancar
2. Menjelajahi variasi warna dapat meningkatkan penjualan
3. Pengunjung membutuhkan lebih sedikit klik untuk melihat variasi produk
4. Pengalaman pengguna yang lebih baik mengirimkan sinyal positif kepada mesin pencari sehingga mereka dapat mempromosikan konten ini

Bersemangat untuk mengaktifkan contoh warna WooCommerce di toko Anda, bukan? Mari kita mulai dengan seluruh proses!

Cara Mengaktifkan Plugin Swatch Warna WooCommerce di eStore

Sebelum memulai, kami ingin memberi tahu Anda tentang beberapa prasyarat. Yang pertama adalah tema WooCommerce. Anda memerlukan tema WooCommerce untuk memulai Variasi Swatch. Anda dapat memilih tema gratis atau premium untuk toko Anda. Kami menyarankan Anda menggunakan tema berkualitas tinggi seperti Flatsome, etalase, dll. Kemudian Anda perlu menginstal plugin Variation Swatches .

Langkah 1: Buka Dasbor.

Langkah 2: Arahkan kursor pada Plugin, lalu klik Add New.

Langkah 3: Halaman pencarian akan muncul. Di kanan atas, Anda akan menemukan kotak pencarian. Ketik Swatch Variasi WooCommerce, lalu instal dan aktifkan plugin.

Jadi, prasyarat sudah disiapkan. Sekarang, kita dapat bergerak maju untuk menggunakan Variasi Swatch untuk mengaktifkan contoh warna untuk variasi produk variabel.

Setelah berhasil menginstal, dan mengaktifkan plugin WooCommerce Variation Swatches, saatnya membuat color swatch.

Mari kita mulai prosesnya!

Langkah 01: Buat Atribut Produk Variabel

Pada awalnya, kita perlu membuat atribut warna dan variasi secara global. Untuk membuatnya, buka Dasbor , klik Produk , lalu buka Atribut . Anda akan menemukan kotak Atribut . Isi kolom yang wajib diisi sesuai kebutuhan Anda. Untuk tujuan demonstrasi, kami menamai atributnya sebagai Color . Kami membiarkan slug kosong karena secara otomatis menghasilkan slug untuk atribut tersebut. Kami memilih Type as Color .

Anda dapat memilih opsi, dan beri nama sesuai keinginan Anda. Jika Anda tidak memilikinya, ikuti kami. Setelah mengisi kolom yang diperlukan, klik tombol Add Attribute .

Setelah itu, daftar akan dibuat di sisi kanan seperti tangkapan layar berikut.

Langkah 02: Buat Variasi Atribut

Anda dapat menambahkan lebih banyak atribut ke daftar menggunakan proses yang sama. Setelah membuat atribut, Anda perlu membuat variasi atribut. Untuk membuat variasi produk untuk atribut, buka daftar dan klik pada Configure terms of the attribute.

Kami telah membuat atribut Warna misalnya. Di dalam atribut warna, Anda dapat menambahkan warna sebagai variasi di dalam atribut. Anda juga dapat memilih warna apa pun yang Anda inginkan, tetapi untuk tujuan demonstrasi, kami akan menambahkan Merah , Hijau , dan Biru . Singkatnya, untuk membuat variasi, isi kolom nama, biarkan slug kosong, dan pilih warna.

Langkah 03: Aktifkan Variasi Atribut dalam Produk Variabel

Sekarang, kita perlu menautkan contoh warna yang dibuat secara global dengan produk variabel. Untuk mengaktifkan produk variasi atribut, buka produk , dan edit. Berhati-hatilah dalam memilih produk variabel dari Data Produk .

Setelah itu, klik Atribut di sebelah kiri. Halaman baru akan dibuka. Ada tarik-turun bernama Atribut produk khusus tempat Anda dapat menemukan semua atribut yang dibuat secara global. Di sini, Anda akan melihat satu-satunya atribut Warna , karena Anda baru saja membuat atribut Warna saja.

Pilih atribut yang ingin Anda pilih, untuk tujuan demonstrasi, pilih Warna . Setelah memilih, halaman ini akan muncul.

Untuk memilih semua variasi yang tersedia, klik tombol Pilih semua . Anda juga dapat membatalkan pilihan tombol semua dengan mengklik Pilih tidak ada . Kemudian centang bagian Digunakan untuk variasi , dan klik Simpan atribut .

Klik Tab Variasi , maka akan muncul halaman baru. Di sana Anda akan melihat dua opsi, satu adalah Add Variation , dan lainnya adalah Create Variations from all atribut .

Pilih opsi apa saja dari dua opsi ini. Untuk tujuan demonstrasi, kita akan memilih Buat variasi dari semua atribut .

Sekarang, variasi warna terlihat dengan produk. Anda juga menambahkan lebih banyak detail khusus variasi di sini seperti gambar variasi, harga variasi, dan variasi spesifik lainnya. Setelah melakukan semua itu, klik tombol Simpan Perubahan .

PS: Tambahkan harga di setiap variasi, jika tidak, variasi tidak akan terlihat di frontend produk.

Setelah berhasil menambahkan variasi swatch, halaman produk individual akan terlihat seperti itu.

Pengaturan Sederhana

Variasi Swatch adalah plugin penting untuk situs WooCommerce. Lebih dari 300K+ situs WooCommerce menggunakan plugin ini. Ini membantu Anda untuk mengaktifkan Tooltip, menonaktifkan stylesheet default plugin, dan beralih antara bentuk bulat dan persegi.

Ubah gaya Shape dari Round ke Square, dan aktifkan Tooltip. Setelah itu, front end halaman produk akan terlihat seperti itu.

Pengaturan lanjutan

Variasi Swatch juga memiliki beberapa fitur canggih yang dapat memberi Anda lebih banyak. Anda dapat mengontrol lebar, tinggi, dan ukuran font Variation Swatch. Ia juga menawarkan untuk menampilkan stok yang habis dengan cerdas.

Untuk menampilkan out-of-stock, Anda perlu memilih opsi Blur dari Attribute Behavior. Setelah memilih itu, produk Anda akan merespons sebagai berikut.

Aktifkan Swatch Warna di Halaman Toko Tema Flatsome

Seiring dengan menambahkan swatch warna ke halaman produk, Anda juga dapat menambahkan Swatch Warna WooCommerce di halaman arsip produk. Untuk menggunakan fitur ini, Anda perlu memutakhirkan versi Anda ke pro. Jika Anda belum memiliki versi pro, dapatkan untuk menggunakan kekuatan penuh dari Variasi Swatch.

Untuk mengaktifkan contoh warna di halaman arsip/toko, periksa pengaturan Tampilkan di arsip untuk menampilkan contoh warna di halaman toko/arsip. Jika Anda menggunakan tema Flatsome, Anda dapat mengaktifkan swatch sebelum dan sesudah menambahkan tombol troli di toko dari pengaturan Posisi Arsip Swatch. Anda juga dapat mengontrol ukuran contoh variasi warna dari pengaturan tersebut.

Saat Anda mengaktifkan swatch di halaman toko, itu akan terlihat seperti ini.

Sesuaikan Tooltip dan Swatch Di Halaman Toko/Arsip

Jika Anda ingin menyesuaikan warna tooltip dan mengaktifkan variasi swatch di toko, Anda perlu menggunakan versi premium dari variasi swatch.

Aktifkan Keterangan Alat

Menggunakan pengaturan lanjutan, Anda dapat menyesuaikan latar belakang tooltip dan warna teks. Untuk menyesuaikan tooltip, periksa di bawah.

Pratinjau akhir dari ujung depan tooltip.

Kesimpulan

Teknologi ini akan meningkatkan kegunaan dan konversi situs Anda. Ini juga memastikan bahwa pelanggan Anda mendapatkan pengalaman yang mulus saat mengunjungi situs Anda. Selain itu, secara tidak langsung dapat meningkatkan penjualan Anda, dan membantu Anda mengembangkan toko WooCommerece Anda.

Jika Anda menghadapi masalah saat memasang plugin ini di tema Flatsome, beri tahu kami di bagian komentar. Kami akan mencoba untuk merespon ASAP!