Apakah Anda di sini untuk mengaktifkan Swatch Gambar Atribut Produk WooCommerce Untuk produk variabel dalam tema Flatsome?

Besar! Anda berada di tempat yang tepat.

Jika Anda mengikuti tutorial terakhir kami tentang cara membuat contoh warna WooCommerce, Anda akan menemukan tutorial ini dengan mudah.

Jadi, jika Anda berada di sini untuk pertama kalinya, Anda harus memeriksa tutorial sebelumnya untuk mengaktifkan contoh atribut produk warna. Kami berasumsi Anda memiliki versi gratis dan premium dari plugin yang diunduh. Jangan khawatir jika Anda melewatkannya entah bagaimana. Anda dapat mengunduhnya secara instan!

Cara Mengaktifkan Gambar Atribut WooCommerce di Tema Flatsome

Memasang swatch variasi Atribut WooCommerce dan plugin foto sama dengan memasang plugin WordPress lainnya di tema Flatsome. Cukup unggah dan aktifkan dari Plugins >> Add New . Dan ikuti langkah selanjutnya untuk mengkonfigurasinya.

Langkah 01: Buat Atribut Gambar

Untuk membuat atribut Gambar secara global, buka Products >> Attributes . Masukkan judul atribut Anda di bidang Nama . Dalam tutorial ini, saya menamakan atribut name: Image .

Biarkan bidang Slug kosong. Sistem secara otomatis menghasilkan slug atribut. Pilih gambar dari tarik-turun Jenis atribut. Tekan tombol Add Attribute untuk menyimpan perubahan.

Setelah atribut Gambar dibuat, Anda akan melihat daftar dibuat di sisi kanan. itu menunjukkan atribut Gambar yang ditambahkan ditambahkan.

Langkah 02: Buat Variasi Atribut

Atribut Gambar yang baru dibuat kosong. Tidak ada variasi di dalam atribut. Untuk menambahkan variasi di bawah atribut gambar, tekan Configure term link.

Untuk tujuan demonstrasi, kami akan menambahkan tiga variasi. Ramie , Kulit , dan Wol .

Untuk membuat variasi, masukkan judul variasi pada kolom Name . Biarkan bidang slug kosong agar sistem secara otomatis menghasilkannya. Unggah gambar variasi dari komputer atau Media Libra dengan mengklik tombol Unggah/Tambah gambar .

Ketika pemilihan gambar Anda selesai, tekan tombol Tambah Gambar Baru untuk menyelesaikan prosesnya

Seperti daftar atribut. daftar variasi gambar akan dibuat seperti berikut.

Langkah 03: Aktifkan Variasi Atribut dalam Produk Variabel

Saatnya untuk mengaktifkan contoh gambar di dalam produk variabel. Untuk mengaktifkan contoh gambar di produk yang Anda inginkan. Masuk ke mode edit produk yang Anda inginkan. Pastikan Anda memiliki produk variabel yang dipilih dari Data Produk .

Memilih produk Variabel dari dropdown Data Produk , buka Tab Atribut . Klik pada tarik-turun Atribut produk khusus . Dalam dropdown ini, Anda dapat melihat semua atribut yang Anda buat secara global. Karena kita hanya membuat atribut Gambar , sekarang atribut Gambar ditampilkan.

Pilih atribut Gambar dan klik Tambah . Anda dapat melihat layar berikut muncul setelahnya.

Jika Anda ingin memilih semua variasi atribut warna yang tersedia, klik tombol Pilih semua . Jika Anda ingin membatalkan pilihan semua variasi yang dipilih sekaligus. Klik pada tombol Pilih tidak ada . Tambahkan semua variasi dengan memilih tombol Pilih Semua , centang Digunakan untuk pengaturan variasi , dan klik tombol Simpan Atribut . Periksa tangkapan layar berikut untuk pedoman.

Sekarang masuk ke tab Variasi . Klik pada tarik-turun Tambahkan Variasi . Di sini Anda akan melihat dua opsi. Yang pertama adalah untuk Menambahkan Variasi dan yang kedua adalah untuk Membuat variasi dari semua atribut .

Dalam tutorial ini, kita akan memilih Buat variasi dari semua atribut dan klik tombol Go . Itu akan menambahkan semua variasi yang tersedia seperti berikut ini.

Anda dapat melihat pada gambar di atas bahwa variasi gambar Leather , Ramie , dan Wool ada di sana. Dari layar ini, Anda dapat menambahkan gambar variasi, harga variasi, dan detail khusus variasi lainnya. Setelah Anda selesai menambahkan semua detail yang diperlukan di setiap variasi, klik tombol Simpan Perubahan .

Ingat ! Jangan lupa untuk menambahkan harga di setiap variasi, jika tidak, variasi tidak akan terlihat di frontend produk.

Jika Anda berhasil menambahkan variasi. Anda dapat melihat contoh berikut di frontend produk Anda.

Pengaturan Sederhana

Swatch dan foto variasi WooCommerce adalah plugin yang kuat. Ini memungkinkan Anda untuk mengaktifkan Tooltip, menonaktifkan stylesheet default plugin, dan beralih antara bentuk Bulat dan Persegi.

Jika Anda ingin memilih gaya Shape dari Round to Square dan mengaktifkan Tooltip, halaman produk frontend terlihat seperti berikut ini.

Pengaturan lanjutan

Untuk memberikan fleksibilitas tertinggi, plugin WooCommerce Attribute Image Swatches menawarkan beberapa pengaturan lanjutan untuk memberi Anda lebih banyak. Pengaturan memungkinkan Anda untuk mengontrol lebar swatch variasi, tinggi , dan ukuran font. Bagian yang luar biasa, yang akan kami posting adalah opsi Perilaku Atribut untuk menyajikan variasi stok yang habis dengan cerdas. Perilaku Atribut dapat membuat variasi stok kabur, sembunyikan, dan silang.

Jika Anda memilih opsi Blur dari Perilaku Atribut, variasi stok habis akan terlihat seperti tangkapan layar berikut.

Sesuaikan Tooltip dan Swatch Di Halaman Toko/Arsip

Menyesuaikan gambar tooltip dan mengaktifkan swatch adalah fitur premium dari plugin ini. Untuk mengaktifkannya, Anda harus mengunduh Versi Premium dari plugin WooCommerce Variation Swatches terlebih dahulu.

Aktifkan Keterangan Alat

Anda dapat menyesuaikan latar belakang tooltip dan warna teks dari pengaturan Lanjutan . Periksa tangkapan layar berikut untuk menyesuaikan gaya tooltip.

Pratinjau frontend tooltip terlihat seperti tangkapan layar berikut.

Aktifkan Swatch di Halaman Toko

Untuk mengaktifkan contoh gambar di halaman toko. Arahkan ke halaman Arsip / Toko . Periksa pengaturan Tampilkan di arsip untuk menampilkan contoh gambar di halaman toko/arsip. Bahkan Dalam tema Flatsome, Anda dapat mengaktifkan swatch sebelum dan sesudah menambahkan tombol troli di toko dari pengaturan Posisi Arsip Swatch . Selain itu, Anda dapat secara eksklusif mengontrol ukuran contoh variasi gambar dari pengaturan ini.

Setelah mengaktifkan swatch di halaman store, tampilannya seperti screenshot berikut.

Kesimpulan:

Teknologi ini akan meningkatkan kegunaan dan konversi situs Anda. Jika Anda menghadapi masalah saat menginstal plugin swatch variasi produk WooCommerce di Flatsome Theme, beri tahu saya di komentar di bawah. kami akan mencoba membantu Anda. Jika Anda membutuhkan topik apa pun dalam kebutuhan yang Anda inginkan. Beri tahu saya di komentar. kami akan mencoba untuk menutupinya di tutorial berikutnya.