Variable Product Price dan Sale Badges (WordPress Theme)
Cara mengatur format harga produk variabel dan badge Sale serta Sold Out di Theme Settings WooCommerce tema WordPress TokoPressID.
Dua section di Theme Settings: WooCommerce ini mengatur tampilan harga produk variabel dan badge promo di seluruh toko: Woo - Variable Product Price dan Woo - Sale! & Sold-Out Badges. Karena sifatnya global, perubahan akan terlihat di halaman Shop, product grid, related products, dan widget produk.
Tutorial ini berlaku untuk semua tema WordPress by TokoPressID yang mendukung WooCommerce, termasuk LarisManis, Adora, Salvia, LarisGram, LarisDigital, dan tema TokoPressID lainnya dengan struktur Theme Settings yang sama.
Cara membuka pengaturan
- Buka TokoPressID → Theme Settings.
- Klik Theme Settings: WooCommerce.
- Buka section Woo - Variable Product Price atau Woo - Sale! & Sold-Out Badges.
Woo - Variable Product Price
Produk variabel secara default menampilkan rentang harga (misalnya Rp 50.000 - Rp 100.000). Opsi Show variable product price mengubah format tampilan.
| Label di tema | Pilihan | Hasil di frontend |
|---|---|---|
| Show variable product price | Default | Rentang harga standar WooCommerce |
| {minprice} | Hanya harga minimum | |
| {minprice}+ | Harga minimum dengan tanda plus | |
| From {minprice} | Teks “From” + harga minimum | |
| Starting at {minprice} | Teks “Starting at” + harga minimum |
Placeholder {minprice} diganti otomatis dengan harga variasi termurah.
Kapan memakai format minimum
- Katalog dengan banyak variasi harga: tampilan lebih ringkas
- Iklan “mulai dari” harga tertentu
- Grid produk padat yang perlu satu baris harga
Biarkan Default jika pelanggan perlu melihat rentang harga penuh sebelum membuka halaman produk.
Woo - Sale! & Sold-Out Badges
Section ini mengatur badge diskon (Sale!) dan badge stok habis (Sold Out) di thumbnail produk.
Badge Sale!
| Label di tema | Jenis | Fungsi |
|---|---|---|
| “Sale!” Badge Type | Radio | Format teks badge |
| “Sale!” Badge Text | Teks | Teks kustom (jika tipe Custom Text) |
| “Sale!” Badge Background Color | Warna | Latar badge |
| “Sale!” Badge Text Color | Warna | Warna teks badge |
“Sale!” Badge Type: pilihan:
| Pilihan | Contoh tampilan |
|---|---|
| Custom Text | Teks dari field “Sale!” Badge Text (default: Sale!) |
| Percentage Only (e.g. 50%) | Angka persentase diskon saja |
| Percentage with “OFF” (e.g. 50% OFF) | Persentase + teks OFF |
Badge Sold Out
Muncul saat produk tidak tersedia untuk dibeli (out of stock).
| Label di tema | Jenis | Fungsi |
|---|---|---|
| “Sold Out” Badge Text | Teks | Teks badge (default: Sold Out) |
| “Sold Out” Badge Background Color | Warna | Latar badge |
| “Sold Out” Badge Text Color | Warna | Warna teks badge |
Langkah konfigurasi
Harga variabel
- Buka Woo - Variable Product Price.
- Pilih format di Show variable product price.
- Simpan pengaturan.
- Buka halaman Shop dan cek produk variabel.
Badge sale
- Buka Woo - Sale! & Sold-Out Badges.
- Pilih “Sale!” Badge Type.
- Jika Custom Text, isi “Sale!” Badge Text (misalnya Diskon atau Promo).
- Atur warna latar dan teks badge.
- Atur teks dan warna Sold Out jika perlu.
- Simpan dan uji produk yang sedang sale serta produk habis.
Tips
- Warna badge sale sebaiknya kontras dengan Product Box Background di Woo Template - Shop Page → Style.
- Tipe Percentage Only efektif untuk flash sale; Custom Text lebih fleksibel untuk branding.
- Badge Sold Out tetap tampil meskipun DISABLE product sale flash aktif di Shop (badge sold out adalah logika terpisah).