Tipe: PRO
Tujuan: Mengubah dropdown variasi warna menjadi swatch visual (bulatan/kotak warna atau gambar) yang lebih menarik.
Cara Mengaktifkan
Buka Dashboard WordPress > AgenWebsite > Storekit, pilih tab WooCommerce, lalu menu Variation Swatches di sidebar.
- Centang Enable Feature, pilih gaya & ukuran swatch.
- Pada tabel Color / Image Swatches, klik + Add Row dan daftarkan tiap warna: isi Name / Term dan pilih Hex Color atau unggah Image.
- Klik Save Changes.
Konfigurasi
| Pengaturan | Default | Keterangan |
|---|---|---|
| Swatch Style | Circle | Bentuk swatch: Circle, Square, atau Rounded. |
| Swatch Size (px) | 32 | Ukuran swatch dalam piksel (20–60). |
| Color / Image Swatches | — | Katalog swatch (lihat di bawah). |
Katalog Color / Image Swatches
Tabel ini adalah daftar swatch terpusat — atur sekali, berlaku untuk semua produk. Tiap baris memiliki:
- Name / Term — nama warna (mis. Merah, red). Dicocokkan dengan term atribut produk berdasarkan nama atau slug (tidak peka huruf besar/kecil).
- Hex Color — pilih warna lewat color picker.
- Image (overrides color) — atau unggah gambar dari Media Library untuk swatch motif/tekstur. Jika gambar diisi, gambar mengalahkan warna.
- + Add Row menambah swatch, tombol × Remove menghapus baris.
Override per Term (opsional)
Anda juga bisa mengatur warna/gambar langsung pada term di Products > Attributes > (atribut warna) > Configure terms — edit term lalu isi Swatch Color atau Swatch Image. Nilai per term ini mengalahkan katalog global.
⚠️ Catatan: Plugin hanya mengonversi atribut yang namanya mengandung kata color atau warna. Jika sebuah warna tidak ada di katalog maupun term, plugin menebak dari namanya (mis. “Blue”/“Biru” → biru). Untuk hasil akurat, daftarkan warna di katalog.
Tampilan di Frontend
Pada halaman produk variabel, dropdown warna digantikan deretan swatch yang dapat diklik; swatch gambar menampilkan fotonya. Dropdown asli disembunyikan namun tetap berfungsi di belakang layar. Atribut non-warna (mis. Size) tetap berupa dropdown.
