Cara Mengatur Stock Progress Bar di WooCommerce (LarisTurbo)
Panduan lengkap Stock Progress Bar For WooCommerce: bar progres stok di halaman produk, teks urgensi, referensi persentase, posisi otomatis atau shortcode, dan produk variabel.
Stock Progress Bar For WooCommerce menampilkan bar progres visual yang membantu pelanggan cepat menangkap stok yang tersisa di halaman produk. Dibanding angka saja, bar progres biasanya lebih mudah “kebaca” dan terasa lebih meyakinkan saat stok mulai menipis.
Bar dihitung dari stok aktual produk yang mengelola inventori (Manage stock aktif). Anda bisa menyesuaikan teks, warna, posisi tampilan, serta angka referensi agar persentase bar terlihat konsisten di semua produk (misalnya saat stok awal 10 vs 1.000 unit).
Tutorial ini membahas cara mengaktifkan fitur, opsi di Settings, pilihan penempatan (mengganti output stok WooCommerce atau manual), dan cara verifikasi hasilnya di frontend.
Yang akan tampil di toko
Di halaman produk tunggal (atau area tempat Anda menempatkan shortcode/block), pengunjung melihat:
- Teks urgensi stok (default Indonesia: Stok Terbatas! Hanya tersisa %quantity% item saja)
- Bar progres bergaris animasi yang lebarnya mengikuti persentase stok tersisa
- Teks bisa di atas atau di bawah bar, sesuai Text Position
Bar hanya muncul jika produk in stock, mengelola stok, dan jumlah stok lebih dari 0. Produk tanpa manajemen stok atau yang habis tidak menampilkan bar.
Prasyarat
- Plugin LarisTurbo For WooCommerce by TokoPressID terpasang dan lisensi aktif
- WooCommerce aktif
- Produk uji dengan Manage stock dicentang dan Stock quantity diisi (misalnya 25)
Cara membuka pengaturan
- Login ke WordPress Admin.
- Buka LarisTurbo → For WooCommerce.
- Di daftar fitur, cari Stock Progress Bar For WooCommerce, lalu klik Settings.
Opsi detail di bawah muncul setelah Enable Stock Progress Bar dicentang.
Opsi yang tersedia
| Label di plugin | Jenis | Fungsi |
|---|---|---|
| Enable Stock Progress Bar | Checkbox | Menyalakan atau mematikan seluruh fitur |
| Progress Bar Text | Teks | Kalimat di atas/bawah bar. Kosong = default locale (ID: Stok Terbatas! Hanya tersisa %quantity% item saja) |
| Text Position | Radio | Before Progress Bar (default) atau After Progress Bar |
| Reference Stock Number | Angka | Baseline perhitungan persentase (default 100). Contoh: stok 75 dengan referensi 100 = bar 75% |
| Progress Bar Max Percentage | Angka (%) | Batas lebar maksimum bar (default 75%, minimum efektif 10). Stok sangat tinggi tidak membuat bar penuh 100% |
| Position | Radio | Penempatan otomatis atau manual (lihat tabel di bawah) |
| Disable for Variable Products with Variation Stock | Checkbox | Mematikan bar di produk variabel yang memakai stok per-variasi |
| Text Alignment | Ikon | Kiri, tengah, atau kanan |
| Text Font Size (px) | Angka | Ukuran font teks |
| Text Color | Warna | Warna teks |
| Progress Bar Filled Color | Warna | Warna bagian terisi bar |
| Progress Bar Empty Color | Warna | Warna latar bar kosong |
| Margin (px) | Margin | Jarak luar (atas/kanan/bawah/kiri) |
Placeholder teks
Di field Progress Bar Text, gunakan %quantity% untuk menyisipkan angka stok aktual (ditampilkan tebal di frontend).
Posisi di halaman produk
Bagian Stock Progress Bar Position in Single Product Page:
| Nilai | Label di plugin | Kapan dipakai |
|---|---|---|
stock |
In-Stock HTML Output | Mengganti output HTML stok WooCommerce (filter woocommerce_get_stock_html). Ini posisi default |
custom |
Manual Placement | Tidak otomatis; pakai shortcode atau block |
Shortcode:
[laristurbo_wc_stock_progressbar]: di dalam product loop (halaman produk tunggal)[laristurbo_wc_stock_progressbar product_id="123"]: di mana saja dengan ID produk tertentu
Block editor (block theme): Stock Progress Bar For WooCommerce (LarisTurbo), letakkan di template produk WooCommerce.
Pengaturan Custom Styles bisa ditimpa oleh panel block saat Anda memakai block theme.
Produk variabel dan grouped
- Untuk produk variable dengan stok per-variasi: bar muncul menggantikan output stok saat variasi dipilih (sama seperti pola stok WooCommerce)
- Shortcode dan block tidak didukung untuk stok tingkat variasi, hanya lewat output stok HTML
- Centang Disable for Variable Products with Variation Stock jika ingin mempertahankan teks stok standar untuk produk variabel
- Pada produk grouped, filter bar sementara dilepas saat daftar anak produk dirender agar tidak bentrok
Langkah konfigurasi umum
1. Aktifkan dan atur teks
- Centang Enable Stock Progress Bar.
- (Opsional) Isi Progress Bar Text atau biarkan kosong untuk default Indonesia.
- Pilih Text Position (Before Progress Bar atau After Progress Bar).
- Simpan pengaturan.
2. Sesuaikan perhitungan bar
- Atur Reference Stock Number jika ingin baseline selain 100 (misalnya 50 untuk produk stok kecil).
- Atur Progress Bar Max Percentage agar bar tidak terlihat selalu penuh saat stok masih banyak (default 75%).
- Simpan.
3. Pilih posisi
Otomatis (default):
- Biarkan Position → In-Stock HTML Output.
- Pastikan produk menampilkan info stok di tema Anda (WooCommerce biasanya menampilkannya di summary produk).
Manual (tema block atau layout kustom):
- Set Position → Manual Placement.
- Sisipkan
[laristurbo_wc_stock_progressbar]di template/deskripsi produk, atau tambahkan block Stock Progress Bar For WooCommerce (LarisTurbo).
4. (Opsional) Sesuaikan tampilan
Atur Text Alignment, ukuran font, warna teks, warna bar terisi/kosong, dan Margin (px) di bagian Custom Styles.
Verifikasi
- Buka halaman produk yang Manage stock aktif dan stok > 0.
- Pastikan teks menampilkan angka stok benar (placeholder
%quantity%terisi). - Pastikan lebar bar masuk akal: stok 25 dengan referensi 100 ≈ 25%, tetapi tidak melebihi Progress Bar Max Percentage.
- Untuk produk variabel: pilih variasi yang punya stok sendiri, bar harus muncul di area stok variasi.
- Ubah Stock quantity di admin, refresh halaman produk, bar dan angka harus mengikuti.
Troubleshooting
| Gejala | Kemungkinan penyebab | Solusi |
|---|---|---|
| Bar tidak muncul sama sekali | Fitur belum aktif | Centang Enable Stock Progress Bar dan simpan |
| Bar tidak muncul | Produk tidak mengelola stok | Aktifkan Manage stock dan isi Stock quantity |
| Bar tidak muncul | Stok 0 atau out of stock | Tambah stok atau uji produk lain yang in stock |
| Masih teks stok biasa | Posisi bukan output stok | Pilih In-Stock HTML Output, atau gunakan shortcode/block jika Manual Placement |
| Bar tidak muncul di produk variabel | Opsi disable aktif | Hapus centang Disable for Variable Products with Variation Stock |
| Shortcode kosong di luar halaman produk | Tanpa product_id di luar loop |
Pakai [laristurbo_wc_stock_progressbar product_id="ID"] |
| Bar selalu terlihat penuh | Referensi terlalu kecil | Naikkan Reference Stock Number atau turunkan Progress Bar Max Percentage |
| Style tidak berubah | Block theme menimpa global | Atur warna/margin di panel block |
Ringkasan
- Bar hanya untuk produk yang mengelola stok dan in stock
- Persentase = stok aktual ÷ Reference Stock Number, dibatasi Progress Bar Max Percentage
- Default posisi mengganti output stok WooCommerce; manual lewat shortcode
[laristurbo_wc_stock_progressbar]atau block LarisTurbo - Produk variabel + stok per-variasi: bar lewat output stok, bukan shortcode