Cara Mengatur Variation Swatch di WooCommerce (LarisTurbo)

Panduan lengkap Variation Swatch For WooCommerce: mengganti dropdown variasi dengan tombol, warna, gambar, atau daftar pilihan, plus konversi otomatis dan gaya swatch.

Variation Swatch For WooCommerce mengubah variasi produk menjadi swatch visual (menggantikan dropdown) supaya pemilihan opsi seperti warna, gambar, atau teks terasa lebih cepat dan rapi. Hasilnya, pelanggan bisa browsing opsi variasi lewat tampilan yang lebih intuitif dan enak dilihat.

Setelah fitur aktif, tipe tampilan diatur per atribut produk lewat Products → Attributes (misalnya atribut pa_warna pakai Button (Color), atribut pa_ukuran pakai Button (Text)). LarisTurbo juga bisa mengonversi dropdown bertipe Select menjadi tombol secara otomatis.

Tutorial ini fokus pada aktivasi global, opsi gaya di Settings, dan langkah awal supaya swatch tampil di halaman produk variabel. Konfigurasi warna/gambar per nilai atribut dibahas di tutorial lanjutan.

Yang akan tampil di toko

Di halaman produk variable, pengunjung melihat:

Daftar opsi variasi sebagai tombol, swatch warna, swatch gambar, atau daftar pilihan tunggal (radio)
Dropdown <select> asli disembunyikan (display: none), tetapi tetap ada di HTML agar WooCommerce bisa memproses pilihan
Untuk tipe Button (Single Choice List) pada produk dengan satu atribut saja, harga variasi bisa ditampilkan di samping opsi

Prasyarat

Plugin LarisTurbo For WooCommerce by TokoPressID terpasang dan lisensi aktif
WooCommerce aktif
Minimal satu produk variabel dengan atribut dan variasi yang sudah dikonfigurasi

Cara membuka pengaturan

Login ke WordPress Admin.
Buka LarisTurbo → For WooCommerce.
Di daftar fitur, cari Variation Swatch For WooCommerce, lalu klik Settings.

Opsi di bawah muncul setelah Enable Variation Swatch dicentang.

Opsi yang tersedia (Settings global)

Label di plugin	Jenis	Fungsi
Enable Variation Swatch	Checkbox	Menyalakan atau mematikan seluruh fitur swatch
Automatically convert all variation select to button	Checkbox	Mengonversi atribut bertipe Select menjadi tombol teks (default: aktif). Pada tema digital, label menjadi Automatically convert all variation select to choices list (tipe radio)
Color	Warna	Warna dasar swatch/tombol
Border Color	Warna	Warna border swatch
Hover/Active Color	Warna	Warna saat hover atau opsi terpilih
Hover/Active Border Color	Warna	Warna border saat hover atau opsi terpilih

Deskripsi di Enable Variation Swatch mengingatkan bahwa tipe tampilan per atribut diatur di pengaturan atribut WooCommerce setelah fitur aktif.

Tipe atribut (di WooCommerce, bukan di Settings LarisTurbo)

Setelah fitur aktif, buka Products → Attributes, edit atribut, lalu pilih Type. Opsi tambahan dari LarisTurbo:

Type di WooCommerce	Tampilan di toko
Select	Dropdown standar (atau dikonversi otomatis jika opsi auto-convert aktif)
Button (Text)	Tombol berlabel teks
Button (Color + Text)	Kotak warna + teks
Button (Color)	Kotak warna saja
Button (Image + Text)	Thumbnail gambar + teks
Button (Image)	Thumbnail gambar saja
Button (Single Choice List)	Daftar radio (tema digital memakai ini sebagai hasil auto-convert)

Untuk tipe warna/gambar, setiap nilai atribut (term) punya field Color atau Image saat Anda mengedit term di Products → Attributes → Configure terms.

Langkah konfigurasi umum

1. Aktifkan fitur

Centang Enable Variation Swatch.
Biarkan Automatically convert all variation select to button aktif jika ingin semua dropdown langsung jadi tombol tanpa mengubah tipe atribut satu per satu.
Simpan pengaturan.

2. Atur tipe atribut (disarankan)

Buka Products → Attributes.
Klik Configure terms pada atribut yang dipakai produk variabel Anda (misalnya warna, ukuran).
Di halaman edit atribut, ubah Type sesuai kebutuhan (misalnya Button (Color) untuk warna).
Untuk tipe warna/gambar, edit setiap term dan isi field Color atau unggah Image (tombol Upload image).
Simpan atribut dan term.

Detail langkah upload warna/gambar per term: Mengatur Atribut Swatch Warna dan Gambar.

3. Sesuaikan gaya global

Kembali ke Settings Variation Swatch For WooCommerce.
Atur Color, Border Color, Hover/Active Color, dan Hover/Active Border Color agar selaras dengan tema toko.
Simpan.

4. Cek di produk variabel

Buka halaman frontend produk variabel.
Pastikan dropdown diganti swatch sesuai tipe atribut.
Klik opsi variasi, harga dan stok harus berubah seperti biasa di WooCommerce.

Verifikasi

Dropdown asli tidak terlihat, tetapi memilih swatch mengubah variasi aktif (harga/gambar/stok ikut berubah)
Atribut bertipe Select dengan auto-convert aktif tampil sebagai tombol (atau daftar radio di tema digital)
Atribut Button (Color) / Button (Image) menampilkan swatch visual; jika warna/gambar term kosong, swatch bisa tampil polos atau placeholder gambar WooCommerce
Produk satu atribut + tipe Button (Single Choice List): opsi bisa menampilkan harga per variasi

Troubleshooting

Gejala	Kemungkinan penyebab	Solusi
Masih dropdown biasa	Fitur belum aktif	Centang Enable Variation Swatch.
Masih dropdown	Tipe atribut Select dan auto-convert mati	Aktifkan Automatically convert all variation select to button, atau ubah Type atribut
Swatch warna/gambar kosong	Term belum diisi	Edit term atribut, isi Color atau Image.
Perubahan warna term tidak langsung tampil	Cache atribut	Simpan ulang term; plugin menyimpan cache di opsi `lt_variation_swatch_{taxonomy}`
Harga tidak muncul di daftar radio	Bukan produk satu atribut	Harga di samping opsi hanya untuk Button (Single Choice List) saat produk punya satu atribut.
Gaya tidak cocok dengan tema	Hanya warna global	Sesuaikan empat field warna di Custom Styles, atau periksa CSS tema yang menimpa `.lt-variation-swatch`

Ringkasan

Aktifkan Enable Variation Swatch, lalu atur Type per atribut di Products → Attributes
Auto-convert mengubah Select → tombol (atau daftar radio di tema digital) tanpa edit manual
Warna/gambar per nilai atribut di level term, bukan di Settings LarisTurbo
WooCommerce tetap memproses variasi lewat <select> tersembunyi di balik swatch