Panduan Lengkap Menggunakan Swatch Variasi WooCommerce dengan Cerdas [2022]

Diterbitkan: 2022-02-13

Untuk meningkatkan penjualan di toko online Anda, langkah pertama adalah membuat calon pelanggan Anda terkesan secara visual. Dan untuk melakukannya, Anda harus mengoptimalkan halaman produk Anda.

Semakin mudah Anda membuat pembeli memilih produk mereka, semakin tinggi konversinya.

Jika Anda memiliki produk variabel di toko Anda, Anda ingin menampilkan semua variasi produk dengan cara yang ramah pengguna.

Salah satu tren terbaru yang telah melihat hasil yang bagus adalah penggunaan swatch untuk menyajikan variasi , daripada menu drop-down.

Oleh karena itu, gunakan contoh variasi WooCommerce untuk menyajikan varian produk dengan cara yang lebih menarik dan menarik.

Ciptakan niat pembeli yang lebih besar karena:

  • Pembeli akan mendapatkan pratinjau varian daripada teks. Misalnya, mereka akan melihat warna merah secara visual, daripada memilih teks 'Merah', sehingga membantu untuk mengambil keputusan praktis.
  • Lebih mudah untuk menelusuri varian dengan mengklik tombol carikan, daripada menu drop-down.
  • Petak akan menarik pembeli untuk memeriksa varian, dan mungkin menciptakan niat pembeli. Seperti yang mereka katakan, semakin banyak Anda menghabiskan waktu untuk suatu produk, semakin Anda ingin membelinya.

Hari ini kita akan membahas bagaimana Anda dapat menggunakan contoh variasi di toko WooCommerce Anda dengan cara yang paling berorientasi pada hasil.

Anda akan mempelajari cara menerapkan jenis contoh variasi yang tepat tergantung pada varian produk Anda untuk meningkatkan niat pembeli.

Setelah membaca panduan ini, Anda akan dapat:

  • Pahami betapa pentingnya setiap jenis swatch variasi
  • Siapkan contoh warna, gambar, atau label untuk varian Anda sendiri
  • Contoh penggunaan variasi swatch yang bagus
  • Tingkatkan niat pembeli dan tingkatkan penjualan Anda

Jadi mari selami itu.

Daftar Isi

# Topik
1. Kapan dan mengapa menggunakan contoh variasi yang berbeda untuk hasil maksimal – dengan contoh
2. Bagaimana cara mengubah dropdown ke contoh tombol untuk variasi WooCommerce?
3. Bagaimana cara mengatur contoh warna WooCommerce untuk variasi produk?
4. Bagaimana cara mengatur contoh gambar untuk variasi produk WooCommerce?
5. Bagaimana cara mengatur contoh variasi label untuk produk variabel?

Kapan Dan Mengapa Menggunakan Variasi Swatch yang Berbeda?

Gunakan Swatch Variasi WooCommerce

Produk variabel Anda mungkin memiliki jenis variasi yang berbeda. Anda tidak dapat menyiapkan contoh variasi unik untuk varian yang berbeda untuk membuat keterlibatan maksimum.

Variasi Warna Swatch

Sebuah produk mungkin tersedia dalam berbagai warna. Misalnya, Anda menjual sebuah t-shirt yang memiliki tiga warna, Merah, Biru, dan Kuning.

Kemudian Anda dapat menggunakan contoh variasi warna agar pelanggan Anda dapat memilih dari varian tersebut.

Secara default, WooCommerce memungkinkan orang memilih melalui menu drop-down yang membosankan. Tapi Anda bisa membuatnya lebih menarik dengan tombol carikan berwarna.

Lihat sendiri perbedaannya:

Bawaan

Pilihan variasi warna default
Pilihan variasi WooCommerce default untuk warna

Menggunakan Swatch Variasi Warna

Swatch Variasi Warna WooCommerce
Menggunakan Swatch Variasi Warna WooCommerce

Seperti yang Anda lihat, warnanya terlihat jelas. Jadi seseorang akan menemukan pemilihan lebih mudah dan lebih praktis.

Contoh Variasi Gambar

Produk tertentu lebih fleksibel dan Anda dapat menyajikan varian menggunakan contoh variasi gambar.

Misalnya, Anda menjual kotak kado dengan berbagai bentuk. Jadi daripada menyajikan pilihan drop-down, Anda dapat menampilkan varian dengan contoh gambar.

Inilah betapa menakjubkannya itu menjadi:

Bawaan

Pilihan variasi gambar default
Pilihan variasi WooCommerce default untuk bentuk

Menggunakan Swatch Variasi Gambar

Contoh Variasi Gambar WooCommerce
Menggunakan Swatch Variasi Gambar WooCommerce

Seperti yang Anda lihat, varian disajikan dalam swatch kecil untuk bentuk sehingga membuatnya lebih menarik.

Tip:
Itu selalu ideal untuk memiliki gambar dengan semua varian bersama-sama sebagai gambar unggulan untuk produk. Jika Anda tidak memilikinya, gunakan gambar varian paling populer sebagai gambar unggulan.

Contoh Variasi Label

Faktor-faktor tertentu seperti Ukuran atau Panjang sulit untuk digambarkan secara visual.

Misalnya, jika Anda menjual kaos dengan ukuran L (untuk besar), M (untuk Sedang), dan S (untuk Kecil), maka Anda tidak dapat menampilkan ukuran sebenarnya secara visual.

Dalam hal ini, Anda tetap bisa membuatnya menarik dengan menghadirkan varian menggunakan tombol carikan variasi label.

Begini caranya tetap membuat perbedaan:

Bawaan

Pilihan variasi default
Pilihan variasi WooCommerce default untuk ukuran

Menggunakan Swatch Variasi Label

Contoh Variasi Label WooCommerce
Menggunakan Swatch Variasi Label WooCommerce

Meskipun tidak ada visualisasi ukuran, swatch membuat pemilihan lebih menarik. Orang akan sering mengklik swatch hanya karena penasaran.

Contoh Variasi Teks

Serupa dengan ukuran, beberapa faktor variasi lain seperti bahan atau variasi terkait kelompok usia, dll, tidak dapat digambarkan secara visual, juga tidak dapat digambarkan sebagai label.

Misalnya Anda menjual topi ukuran Kids, Teen size dan Grow-up size.

Dalam hal ini, Anda dapat mengubahnya menjadi contoh teks kancing yang menarik.

Keuntungannya di sini adalah bahwa semua variasi yang tersedia akan dicantumkan di depan pembeli dan pembeli dapat memilih hanya dengan mengklik tombol.

Berikut pratinjaunya:

Bawaan

Pilihan variasi default
Pilihan variasi WooCommerce default untuk ukuran

Menggunakan Swatch Variasi Teks

Contoh Variasi Teks WooCommerce
Menggunakan Swatch Variasi Teks WooCommerce

Tip:
Jika Anda memiliki label ukuran selain nilai bernomor, simpan bagan di situs Anda untuk menemukan nilai ukuran yang tepat. Toko sering kehilangan penjualan karena kurangnya grafik ini. Pelanggan tidak cukup sabar untuk mengetuk Anda pada layanan pelanggan untuk mengetahui ukuran yang tepat.

Seperti yang Anda lihat, mengubah menu variasi menjadi swatch membuatnya jauh lebih menarik dan menarik.

Nah, jika Anda ingin menerapkan atraksi ini, maka Anda bisa melakukannya dengan mudah menggunakan plugin Variation Swatches For WooCommerce.

Variasi Swatch Untuk WooCommerce

Variasi Swatch untuk WooCommerce adalah plugin sederhana yang dengannya Anda dapat mengubah pilihan dropdown dasar varian menjadi contoh tombol dengan mudah. Dibutuhkan hanya beberapa klik.

Biarkan saya memberi Anda panduan langkah demi langkah tentang bagaimana Anda dapat dengan mudah mengatur swatch variasi di toko online Anda menggunakan Variasi Swatch untuk WooCommerce.

Bagaimana cara mengubah dropdown ke contoh tombol untuk variasi WooCommerce?

Seperti yang telah dibahas sebelumnya, WooCommerce menampilkan variasi sebagai opsi dropdown di halaman produk.

Namun, Anda dapat dengan mudah mengonversi opsi variasi dari dropdown ke contoh tombol hanya dalam beberapa klik, menggunakan plugin.

Inilah cara Anda melakukannya langkah demi langkah.

1. Pertama, instal dan aktifkan Variasi Swatch untuk WooCommerce.

Di dasbor admin Anda, Anda akan mendapatkan menu baru bernama Swatch. Klik di atasnya.

Variasi Swatch

Ini akan membawa Anda ke dasbor plugin.

Variasi Swatch untuk Dasbor WooCommerce
Variasi Swatch untuk Dasbor WooCommerce.

2. Tetapkan gaya dan desain swatch dasar

Pada Pengaturan Umum, Anda akan menemukan opsi untuk mengatur warna dan batas swatch seperti biasanya ditampilkan, saat diarahkan, atau saat dipilih.

Plus Anda akan dapat mengatur ukuran font.

Konfigurasikan pengaturan ini sesuka Anda.

3. Buka Tab Kontrol

Klik pada tab Kontrol di sebelah kiri.

Kontrol

Tab Kontrol akan memiliki banyak opsi.

tab kontrol

4. Aktifkan Dropdown Ke Tombol Swatch

Di sini, aktifkan opsi Dropdown To Button Swatches .

Dropdown ke contoh tombol

Kemudian simpan pengaturan. Sekarang Anda akan melihat bahwa variasi pada halaman produk akan ditampilkan dalam bentuk swatch tombol.

Pilihan Dropdown Default

Pilihan Dropdown Default

Swatch Tombol Untuk Variasi

Tombol Swatch untuk Variasi

Setelah Anda mengaktifkan dropdown to button swatch untuk toko Anda, sekarang Anda dapat menyesuaikan swatch menjadi warna, gambar atau label swatch dengan mudah, dalam beberapa langkah sederhana.

Cara Mengatur Swatch Warna WooCommerce untuk Variasi Warna

Dengan menggunakan Color swatch, Anda dapat memberikan gambaran visual tentang warna yang akan dipilih pembeli. Jadi, tidak akan ada keraguan.

Dan seperti yang Anda lihat sebelumnya, contoh warna sangat menarik dibandingkan dengan pilihan dropdown biasa.

Untuk mengatur set up color swatch, ikuti langkah-langkah di bawah ini.

1. Aktifkan Dropdown Ke Tombol Swatch

Pertama-tama ikuti langkah-langkah untuk mengaktifkan dropdown to button swathes seperti yang dijelaskan sebelumnya.

(Klik di sini untuk membaca cara mengaktifkan dropdown ke contoh tombol.)

2. Buka Atribut Buatan Anda

Istilah variasi biasanya dikelompokkan ke dalam atribut.

Buka Dasbor > Produk > Atribut dan Anda akan menemukan daftar atribut yang telah Anda buat di toko Anda, dan opsi untuk menambahkan atribut baru.

Ikhtisar Atribut

Di sisi kanan, Anda dapat melihat daftar atribut yang dibuat yang Anda miliki.

Atribut Global

3. Ubah Atribut yang Anda Inginkan Sebagai Jenis Warna

Arahkan mouse Anda pada nama atribut yang ingin Anda gunakan contoh warna.

Edit atribut warna

Anda akan mendapatkan opsi untuk Mengedit atau Menghapus. Klik Edit dan itu akan membawa Anda ke halaman Edit atribut.

Edit Atribut untuk Warna

Setelah Anda berada di halaman Edit Attribute, Anda akan melihat bahwa Anda memiliki bidang untuk Type.

Bidang jenis atribut untuk warna

Klik di atasnya dan pilih opsi "Warna".

Atribut jenis warna

Kemudian klik tombol Perbarui di bawah ini.

4. Atur Swatch Warna Untuk Ketentuan Variasi

Setelah Anda menetapkan jenis atribut ke "Warna", sekarang Anda dapat menetapkan contoh warna ke istilah varian di bawah atribut ini.

Kembali ke Dasbor > Produk > Atribut dan di sisi kanan atribut (Anda baru saja menetapkan sebagai jenis Warna), Anda akan mendapatkan opsi untuk "Konfigurasikan istilah".

Konfigurasikan Ketentuan Untuk Variasi Warna Swatch

Klik pada Configure terms dan Anda akan dibawa ke halaman berikut:

Konfigurasi Halaman Persyaratan

Di sini, Anda dapat menambahkan istilah untuk variasi warna atau, di sisi kanan Anda dapat melihat istilah varian yang sudah Anda siapkan untuk warna di toko Anda.

Daftar Ketentuan Variasi Warna

Arahkan mouse Anda pada satu istilah warna dan Anda akan menemukan opsi untuk Mengedit.

Edit Istilah Varian

Klik edit dan itu akan membawa Anda ke halaman edit. Di sini, di bawah ini Anda akan melihat bahwa Anda memiliki opsi untuk memilih warna.

Edit Mode Warna

Klik "Pilih Warna" dan Anda akan mendapatkan opsi untuk menetapkan warna.

Warna untuk swatch

Pilih warna yang sesuai dan klik Select Color lagi.

Kemudian klik tombol Perbarui di bawah ini.

Setelah diperbarui, kembali dan Anda akan melihat bahwa pratinjau warna ada tepat di samping nama istilah varian warna masing-masing.

swatch variasi warna
Swatch warna biru dipilih untuk istilah variasi Biru

Lakukan hal yang sama untuk sisa variasi warna dan hanya itu. Sekarang produk Anda akan memiliki contoh variasi warna alih-alih pilihan dropdown untuk varian warna.

Menggunakan Swatch Variasi Warna

Swatch Variasi Warna WooCommerce

Bagaimana cara mengatur contoh gambar untuk variasi produk WooCommerce?

Dengan menggunakan Image swatch, Anda dapat menampilkan varian tertentu sebagai swatch yang menarik saat melihat produk.

Dan seperti yang Anda lihat sebelumnya, contoh gambar sangat menarik, dibandingkan dengan pilihan dropdown biasa.

Untuk mengatur set up gambar swatch, ikuti langkah-langkah di bawah ini.

1. Aktifkan Dropdown Ke Tombol Swatch

Pertama-tama ikuti langkah-langkah untuk mengaktifkan dropdown to button swathes seperti yang dijelaskan sebelumnya.

(Klik di sini untuk membaca cara mengaktifkan dropdown ke contoh tombol.)

2. Buka Atribut Buatan Anda

Istilah variasi biasanya dikelompokkan ke dalam atribut.

Buka Dasbor > Produk > Atribut dan Anda akan menemukan daftar atribut yang telah Anda buat di toko Anda, dan opsi untuk menambahkan atribut baru.

Ikhtisar Atribut

Di sisi kanan, Anda dapat melihat daftar atribut yang dibuat yang Anda miliki.

Atribut Global

3. Tetapkan Atribut yang Anda Inginkan Sebagai Jenis Gambar

Arahkan mouse Anda ke nama atribut yang ingin Anda gunakan contoh gambarnya.

Edit atribut gambar

Anda akan mendapatkan opsi untuk Mengedit atau Menghapus. Klik Edit dan itu akan membawa Anda ke halaman Edit atribut.

Edit Atribut untuk Gambar

Setelah Anda berada di halaman Edit Attribute, Anda akan melihat bahwa Anda memiliki bidang untuk Type.

Edit Atribut untuk gambar

Klik di atasnya dan pilih opsi "Gambar".

Atribut jenis gambar

Kemudian klik tombol Perbarui di bawah ini.

4. Atur Swatch Warna Untuk Ketentuan Variasi

Setelah Anda menetapkan jenis atribut ke "Gambar", sekarang Anda dapat menetapkan contoh gambar ke istilah varian di bawah atribut ini.

Kembali ke Dasbor > Produk > Atribut dan di sisi kanan atribut (Anda baru saja menetapkan sebagai Jenis gambar), Anda akan mendapatkan opsi untuk "Konfigurasikan istilah".

Konfigurasikan Ketentuan Untuk Variasi Gambar Swatch

Klik pada Configure terms dan Anda akan dibawa ke halaman berikut:

Konfigurasi Halaman Ketentuan Untuk Swatch Gambar

Di sini, Anda dapat menambahkan istilah untuk variasi atau, di sisi kanan Anda dapat melihat istilah varian yang sudah Anda miliki (di bawah atribut ini).

Daftar Istilah Variasi Gambar

Arahkan mouse Anda pada satu istilah dan Anda akan menemukan opsi untuk Mengedit istilah tersebut.

Edit Istilah Varian

Klik edit dan itu akan membawa Anda ke halaman edit. Di sini, di bawah ini Anda akan melihat bahwa Anda memiliki opsi untuk mengunggah atau menambahkan gambar.

Edit Mode Gambar

Klik "Unggah/Tambah Gambar" dan Anda dapat mengunggah gambar atau memilih gambar dari perpustakaan media Anda.

gambar Untuk Swatch

Pilih gambar yang sesuai lalu klik tombol Perbarui di bawah.

Setelah diperbarui, kembali dan Anda akan melihat bahwa pratinjau gambar ada di samping nama istilah varian.

Contoh variasi gambar
Contoh gambar segitiga dipilih untuk istilah variasi Berbentuk Segitiga

Lakukan hal yang sama untuk varian lainnya dan hanya itu. Sekarang produk Anda akan memiliki contoh variasi gambar alih-alih pilihan dropdown untuk varian ini.

Menggunakan Swatch Variasi Gambar

Swatch Variasi Gambar WooCommerce

Bagaimana cara mengatur contoh variasi label untuk produk variabel?

Dengan menggunakan Label swatch, Anda dapat menampilkan varian tertentu yang dapat dikenali dengan huruf atau angka tunggal.

Dan seperti yang Anda lihat sebelumnya, contoh Label lebih menarik, dibandingkan dengan pilihan dropdown biasa.

Untuk mengatur set up label swatch, ikuti langkah-langkah di bawah ini.

1. Aktifkan Dropdown Ke Tombol Swatch

Pertama-tama ikuti langkah-langkah untuk mengaktifkan dropdown to button swathes seperti yang dijelaskan sebelumnya.

(Klik di sini untuk membaca cara mengaktifkan dropdown ke contoh tombol.)

2. Buka Atribut Buatan Anda

Istilah variasi biasanya dikelompokkan ke dalam atribut.

Buka Dasbor > Produk > Atribut dan Anda akan menemukan daftar atribut yang telah Anda buat di toko Anda, dan opsi untuk menambahkan atribut baru.

Ikhtisar Atribut

Di sisi kanan, Anda dapat melihat daftar atribut yang dibuat yang Anda miliki.

Atribut Global

3. Tetapkan Atribut yang Anda Inginkan Sebagai Jenis Label

Arahkan mouse Anda ke nama atribut yang ingin Anda gunakan contoh labelnya.

Edit atribut label

Anda akan mendapatkan opsi untuk Mengedit atau Menghapus. Klik Edit dan itu akan membawa Anda ke halaman Edit atribut.

Edit Atribut untuk label

Setelah Anda berada di halaman Edit Attribute, Anda akan melihat bahwa Anda memiliki bidang untuk Type.

Edit Atribut untuk label

Klik di atasnya dan pilih opsi "Label".

Atribut jenis label

Kemudian klik tombol Perbarui di bawah ini.

4. Tetapkan Label Swatch Untuk Ketentuan Variasi

Setelah Anda menetapkan jenis atribut ke "Label", sekarang Anda dapat menetapkan contoh label ke istilah varian di bawah atribut ini.

Kembali ke Dasbor > Produk > Atribut dan di sisi kanan atribut (Anda baru saja menetapkan sebagai jenis Label), Anda akan mendapatkan opsi untuk "Konfigurasikan istilah".

Konfigurasikan Ketentuan Untuk Contoh Variasi Label

Klik pada Configure terms dan Anda akan dibawa ke halaman berikut:

Konfigurasi Halaman Ketentuan Untuk Label Swatch

Di sini, Anda dapat menambahkan istilah untuk variasi atau, di sisi kanan Anda dapat melihat istilah varian yang sudah Anda miliki (di bawah atribut ini).

Daftar Istilah Variasi Label

Arahkan mouse Anda pada satu istilah dan Anda akan menemukan opsi untuk Mengedit istilah tersebut.

Edit Istilah Varian

Klik edit dan itu akan membawa Anda ke halaman edit. Di sini, di bawah ini Anda akan melihat bahwa ada bidang untuk Anda memasukkan karakter Label.

Edit Mode Label

Masukkan Label yang ingin Anda tampilkan.

Label untuk swatch

Kemudian klik tombol Perbarui di bawah ini.

Setelah diperbarui, kembali dan Anda akan melihat bahwa pratinjau label ada di samping nama istilah varian.

Contoh variasi label

Lakukan hal yang sama untuk varian lainnya dan hanya itu. Sekarang produk Anda akan memiliki contoh variasi label alih-alih pilihan dropdown untuk varian ini.

Menggunakan Swatch Variasi Label

Contoh Variasi Label WooCommerce

Kesimpulan

Jelas bahwa pilihan dropdown untuk produk variabel tidak lagi disukai. Cara terbaik untuk menawarkan variasi adalah dengan menggunakan swatch.

Dan bagian terbaiknya adalah, ini sangat mudah diterapkan dan dapat dilakukan hanya dalam beberapa klik menggunakan plugin Variation Swatches for WooCommerce.

Jadi saya sarankan Anda mencoba plugin dan memanfaatkan manfaat dari variasi swatch WooCommerce. Manfaatkan menarik pembeli dengan mudah tanpa banyak usaha.

Jika Anda ingin mempelajari cara membuat produk variabel, Anda dapat mengikuti panduan ini:

  • Panduan Lengkap Untuk Membuat Produk Variabel WooCommerce