Mengatur Tipe Atribut, Warna, dan Gambar Swatch (LarisTurbo)

Cara memilih tipe swatch per atribut WooCommerce, mengisi meta warna/gambar per term, cache swatch, dan kolom preview di admin.

Tutorial ini melengkapi Cara Mengatur Variation Swatch di WooCommerce dengan fokus pada konfigurasi per atribut dan meta per nilai atribut (term). Pengaturan global seperti Enable Variation Swatch dan warna/border di Settings sudah dibahas di tutorial 01.

Di mana tipe swatch diatur?

Tipe tampilan tidak ada di LarisTurbo → Settings. Setelah Enable Variation Swatch aktif, buka:

Products → Attributes → pilih atribut (misalnya pa_warna) → kolom Type

LarisTurbo menambahkan opsi Type berikut (label persis di admin):

Atribut yang tetap Select menampilkan dropdown standar, kecuali opsi konversi otomatis di Settings aktif (lihat tutorial 01).

Mengisi warna atau gambar per nilai atribut

Untuk tipe yang memakai warna atau gambar (color, button-color, image, button-image), setiap term atribut punya field tambahan.

Langkah per term

1. Buka Products → Attributes → klik Configure terms pada atribut yang sudah bertipe warna/gambar.
2. Saat Add new atau Edit term, isi salah satu field berikut:

3. Simpan term. Plugin menyimpan meta lt_variation_color atau lt_variation_image dan memperbarui cache atribut.

Kolom preview di daftar term

Di tabel term atribut, kolom kosong di kiri Name menampilkan preview kecil (kotak warna atau thumbnail gambar). Berguna untuk audit cepat tanpa membuka setiap term.

Cache atribut (lt_variation_swatch_{taxonomy})

Warna dan gambar per slug term disimpan ke option WordPress, misalnya lt_variation_swatch_pa_warna, dengan struktur:

{ "type": "color", "data": { "merah": "#ff0000", "biru": "#0000ff" } }

Cache dibangun ulang saat Anda menyimpan term (create/edit). Di frontend, plugin membaca cache ini dulu; jika tipe tidak cocok atau cache kosong, cache dibangun ulang dari term meta.

Kalau Anda mengubah banyak term sekaligus (impor/migrasi) dan swatch tidak ikut update, edit dan simpan ulang salah satu term, atau ubah Type atribut lalu kembalikan untuk memicu rebuild cache.

Perilaku di halaman produk

Saat pengunjung membuka produk variabel:

1. WooCommerce merender <select> variasi seperti biasa.
2. LarisTurbo mendeteksi Type atribut dari taxonomy.
3. Jika bukan select, <select> disembunyikan dan diganti <ul class="lt-variation-swatch lt-variation-swatch-type-{type}">.
4. Klik swatch mengisi nilai tersembunyi di <select> (perilaku standar tema WooCommerce).

Tipe khusus: Button (Single Choice List)

• Hanya relevan jika atribut bertipe radio (atau konversi otomatis ke radio pada tema digital).
• Jika produk punya satu atribut variasi saja, plugin bisa menampilkan harga variasi di samping setiap opsi (lt-variation-swatch-price).
• Layout tabel variasi disederhanakan lewat CSS inline agar label dan opsi tampil sebagai daftar vertikal.

Placeholder gambar

Term tanpa gambar yang di-upload memakai placeholder WooCommerce (wc_placeholder_img_src) di swatch gambar.

Alur kerja yang disarankan

1. Aktifkan Enable Variation Swatch di LarisTurbo.
2. Buat atau edit atribut di Products → Attributes; set Type sesuai kebutuhan (warna → color atau button-color, ukuran → button).
3. Buka Configure terms; isi Color atau Image untuk setiap nilai.
4. Pastikan produk variabel memakai atribut tersebut dan variasi sudah dibuat.
5. Buka halaman produk di frontend; pilih swatch dan pastikan harga/stok variasi berubah.

Troubleshooting

Swatch tetap dropdown

• Type atribut masih Select dan konversi otomatis nonaktif.
• Atribut belum dipakai di produk variabel yang Anda uji.

Warna/gambar tidak muncul

• Type atribut bukan color, button-color, image, atau button-image.
• Term belum punya Color / Image yang disimpan.
• Cache usang: simpan ulang term atau cek option lt_variation_swatch_{taxonomy}.

Preview admin kosong

• Field Color / Image kosong di term tersebut.
• Untuk gambar, pastikan attachment masih ada di Media Library.