Fitur-Fitur WooCommerce

Daftar Isi
  1. 1. Sales Notification
  2. 2. Trust Indicators
  3. 3. Sale Countdown
  4. 4. Stock Progress
  5. 5. Wishlist
  6. 6. Variation Swatches
  7. 7. Cart Popup
  8. 8. Infinite Scroll
  9. 9. Sticky Buttons
  10. 10. Marketplace Buttons
Berikut adalah penjelasan detail untuk setiap fitur WooCommerce yang tersedia di AgenWebsite Storekit.

1. Sales Notification

Tipe: FREE Tujuan: Menampilkan popup notifikasi pembelian real-time sebagai social proof untuk meningkatkan kepercayaan dan konversi pengunjung.

Tampilan di Frontend

Saat pengunjung membuka halaman toko Anda, popup notifikasi akan muncul di sudut layar menampilkan pembelian terbaru. Notifikasi menunjukkan:
    • Foto produk yang dibeli
    • Nama pembeli dan kota asal
    • Nama produk yang dibeli
    • Waktu pembelian (misalnya “6 days ago”)
Sales Notification popup di frontend
Popup akan muncul bergantian menampilkan pesanan-pesanan terbaru secara otomatis sesuai interval yang dikonfigurasi.

Konfigurasi

Akses: Penglaris Toko > WooCommerce > Sales Notification
Pengaturan Sales Notification
Pengaturan Deskripsi Default
Enable Feature Mengaktifkan atau menonaktifkan fitur Sales Notification Nonaktif
Position Posisi popup di layar. Pilihan: Bottom Left, Bottom Right, Top Left, Top Right Bottom Left
Initial Delay (seconds) Waktu tunggu sebelum popup pertama muncul setelah halaman dibuka 5 detik
Display Duration (seconds) Berapa lama setiap popup ditampilkan 5 detik
Interval (seconds) Jeda waktu antar popup notifikasi 10 detik
Max Orders to Show Jumlah maksimal pesanan yang ditampilkan dalam antrian (1–50) 10
Mask Customer Name Menyembunyikan sebagian nama pelanggan untuk privasi (contoh: “J**n D.”) Aktif
Notification Text — Line 1 Template teks baris pertama. Placeholder: {name}, {city} {name} from {city}
Notification Text — Line 2 Template teks baris kedua. Placeholder: {product} just purchased {product}
Background Color Warna latar belakang popup #ffffff (putih)
Notification Cache Tombol untuk membersihkan cache data pesanan dan me-regenerate dari pesanan terbaru

Virtual Orders (Pesanan Virtual)

Fitur ini sangat berguna untuk toko baru yang belum memiliki pesanan nyata. Virtual Orders akan menampilkan notifikasi palsu dengan nama dan kota yang Anda tentukan sendiri, sehingga toko Anda tetap terlihat ramai. Catatan: Notifikasi virtual hanya ditampilkan ketika tidak ada pesanan nyata di toko Anda. Begitu pesanan nyata mulai masuk, sistem akan otomatis menggunakan data pesanan asli.
Pengaturan Deskripsi
Enable Virtual Orders Mengaktifkan notifikasi virtual saat tidak ada pesanan nyata
Customer Names Daftar nama pelanggan virtual (satu nama per baris). Contoh: Budi Santoso, Siti Nurhaliza, dll.
Customer Cities Daftar kota virtual (satu kota per baris). Contoh: Jakarta, Surabaya, Bandung, dll.
Sistem akan mengacak kombinasi nama, kota, dan produk dari toko Anda untuk menghasilkan notifikasi yang terlihat natural.

Cara Kerja

    1. Plugin mengambil data pesanan terbaru dari WooCommerce dan menyimpannya dalam cache
    1. Saat pengunjung membuka halaman, popup muncul setelah Initial Delay
    1. Setiap popup ditampilkan selama Display Duration
    1. Popup berikutnya muncul setelah Interval
    1. Jika pengunjung mengklik popup, mereka akan diarahkan ke halaman produk

2. Trust Indicators

Tipe: FREE Tujuan: Menampilkan indikator kepercayaan berupa rating bintang, jumlah review, dan total penjualan di halaman produk untuk meningkatkan keyakinan pembeli.

Tampilan di Frontend

Trust Indicators muncul di bawah harga produk pada halaman detail produk. Indikator menampilkan hingga 3 informasi:
    • Star Rating — Rating bintang produk berdasarkan review
    • Review Count — Jumlah total review
    • Sales Count — Jumlah total penjualan (contoh: “15 Sold”)
Trust Indicators pada halaman produk
Angka ditampilkan dengan format singkat: 1.000 menjadi 1K, 1.000.000 menjadi 1M.

Konfigurasi

Akses: Penglaris Toko > WooCommerce > Trust Indicators
Pengaturan Trust Indicators
Pengaturan Deskripsi Default
Enable Feature Mengaktifkan fitur Trust Indicators Nonaktif
Show Star Rating Menampilkan rating bintang produk Aktif
Show Review Count Menampilkan jumlah review Aktif
Show Sales Count Menampilkan total penjualan Aktif
Show in Shop Loop Tampilkan juga di halaman shop dan kategori (tidak hanya di halaman detail produk) Nonaktif
Icon Color Warna ikon indikator #f59e0b (kuning/amber)

Pengaruh di Frontend

    • Halaman Produk: Muncul tepat di bawah harga produk dengan ikon berwarna
    • Halaman Shop/Kategori: Jika opsi “Show in Shop Loop” diaktifkan, indikator juga akan muncul di setiap kartu produk pada grid toko

3. Sale Countdown

Tipe: FREE Tujuan: Menampilkan timer countdown pada produk yang sedang diskon dengan tanggal akhir, menciptakan urgensi agar pelanggan segera membeli.

Tampilan di Frontend

Countdown timer akan muncul di halaman detail produk hanya pada produk yang sedang Sale dan memiliki tanggal akhir diskon. Timer menampilkan hitungan mundur real-time dengan format:
    • Days — Sisa hari
    • Hours — Sisa jam
    • Minutes — Sisa menit
    • Seconds — Sisa detik (bergerak real-time)

Konfigurasi

Akses: Penglaris Toko > WooCommerce > Sale Countdown
Pengaturan Sale Countdown
Pengaturan Deskripsi Default
Enable Feature Mengaktifkan fitur Sale Countdown Nonaktif
Countdown Text Teks yang ditampilkan sebelum timer countdown Sale ends in:
Background Color Warna latar belakang bar countdown #ef4444 (merah)
Text Color Warna teks dan angka timer #ffffff (putih)

Cara Mengatur Diskon dengan Tanggal Akhir

Agar countdown timer muncul, pastikan produk Anda memiliki Sale Price dengan Schedule di WooCommerce:
    1. Edit produk di Products > All Products
    1. Di tab General, isi Sale Price
    1. Klik Schedule dan atur tanggal mulai dan akhir diskon
    1. Simpan produk
Catatan: Timer hanya muncul jika tanggal akhir diskon masih di masa depan. Jika diskon sudah berakhir, timer tidak akan ditampilkan.

4. Stock Progress

Tipe: FREE Tujuan: Menampilkan progress bar level stok produk untuk menciptakan urgensi pembelian ketika stok menipis.

Tampilan di Frontend

Progress bar muncul di halaman detail produk menampilkan:
    • Teks status stok (contoh: “Only 5 left in stock!”)
    • Bar visual yang menunjukkan persentase stok tersisa
Catatan: Progress bar hanya muncul pada produk yang:
    • Memiliki manajemen stok aktif (Stock Management enabled)
    • Stok saat ini di bawah threshold yang ditentukan
    • Produk masih berstatus “In Stock”

Konfigurasi

Akses: Penglaris Toko > WooCommerce > Stock Progress
Pengaturan Stock Progress
Pengaturan Deskripsi Default
Enable Feature Mengaktifkan fitur Stock Progress Bar Nonaktif
Show When Stock Below Progress bar hanya muncul ketika stok di bawah angka ini 20
Initial Stock Angka stok awal untuk kalkulasi persentase. Formula: (stok saat ini / initial stock) × 100% 100
Progress Bar Color Warna bar progress #ef4444 (merah)
Text Template Template teks status. Gunakan {stock} untuk menampilkan angka stok Only {stock} left in stock!

Contoh Kalkulasi

Jika Initial Stock = 100 dan stok saat ini = 15:
    • Persentase: (15 / 100) × 100% = 15%
    • Teks: “Only 15 left in stock!”
    • Bar akan terisi 15% dari total lebar

5. Wishlist

Tipe: PRO (membutuhkan lisensi aktif) Tujuan: Memungkinkan pelanggan menyimpan produk favorit untuk dilihat nanti, meningkatkan engagement dan potensi pembelian berulang.

Tampilan di Frontend

Fitur Wishlist menampilkan dua elemen utama:
    1. Tombol Wishlist — Muncul di bawah tombol “Add to Cart” pada halaman produk, dengan ikon hati (heart) dan teks kustomisasi
    1. Halaman Wishlist — Halaman khusus yang menampilkan semua produk yang disimpan pelanggan, menggunakan shortcode

      Your wishlist is empty.

Tombol Wishlist pada halaman produk

Cara Kerja

    • Pengunjung tamu (guest): Wishlist disimpan di cookie browser selama 30 hari
    • Pengguna login: Wishlist disimpan di user meta database
    • Sinkronisasi otomatis: Ketika pengunjung tamu login, wishlist dari cookie otomatis digabungkan (merge) dengan data di database
    • AJAX toggle: Menambah/menghapus produk dari wishlist tanpa reload halaman

Konfigurasi

Akses: Penglaris Toko > WooCommerce > Wishlist
Pengaturan Wishlist
Pengaturan Deskripsi Default
Enable Feature Mengaktifkan fitur Wishlist Nonaktif
Add to Wishlist Text Teks tombol saat produk belum ada di wishlist Add to Wishlist
Remove from Wishlist Text Teks tombol saat produk sudah ada di wishlist Remove from Wishlist
Icon Color Warna ikon hati #ef4444 (merah)
Wishlist Page ID ID halaman WordPress yang berisi shortcode

Your wishlist is empty.

0

Membuat Halaman Wishlist

    1. Buat halaman baru di Pages > Add New
    1. Beri judul “Wishlist” atau sesuai keinginan
    1. Tambahkan shortcode

      Your wishlist is empty.

      di konten halaman
    1. Publish halaman
    1. Catat Page ID dari halaman tersebut
    1. Masukkan Page ID di pengaturan Wishlist Page ID

6. Variation Swatches

Tipe: PRO (membutuhkan lisensi aktif) Tujuan: Mengubah dropdown variasi warna menjadi swatch visual (bulatan warna) yang lebih menarik dan mudah dipilih pelanggan.

Tampilan di Frontend

Dropdown variasi warna pada produk variabel akan diubah menjadi swatch visual berupa bulatan, kotak, atau rounded yang menampilkan warna sesungguhnya. Pelanggan cukup klik swatch untuk memilih variasi.
Variation Swatches pada halaman produk variabel

Konfigurasi

Akses: Penglaris Toko > WooCommerce > Variation Swatches
Pengaturan Variation Swatches
Pengaturan Deskripsi Default
Enable Feature Mengaktifkan fitur Variation Swatches Nonaktif
Swatch Style Bentuk swatch. Pilihan: Circle (bulat), Square (kotak), Rounded (kotak dengan sudut bulat) Circle
Swatch Size (px) Ukuran swatch dalam piksel (20–60) 32

Mengatur Warna Swatch per Atribut

Plugin secara otomatis mendeteksi atribut warna (mengandung kata “color” atau “warna”) dan menebak warna berdasarkan nama. Untuk warna kustom:
    1. Buka Products > Attributes > Color
    1. Edit term warna yang diinginkan
    1. Isi field Swatch Color dengan kode warna hex
    1. Simpan
Warna yang dikenali otomatis: hitam, putih, merah, biru, hijau, kuning, oranye, pink, ungu, coklat, abu-abu, navy (dalam bahasa Indonesia dan Inggris).

7. Cart Popup

Tipe: FREE Tujuan: Menampilkan popup keranjang belanja saat pelanggan menambahkan produk ke cart, tanpa meninggalkan halaman.

Tampilan di Frontend

Ketika pelanggan mengklik “Add to Cart”, popup akan muncul menampilkan:
    • Daftar produk di keranjang dengan gambar, nama, kuantitas, dan harga
    • Subtotal keranjang
    • Tombol “View Cart” dan “Checkout”
    • Tombol hapus item dari keranjang

Konfigurasi

Akses: Penglaris Toko > WooCommerce > Cart Popup
Pengaturan Cart Popup
Pengaturan Deskripsi Default
Enable Feature Mengaktifkan fitur Cart Popup Nonaktif
Popup Position Posisi popup. Pilihan: Slide from Right (drawer dari kanan) atau Center Modal (modal di tengah layar) Slide from Right
Auto Close (seconds) Waktu otomatis menutup popup. Set 0 untuk menonaktifkan auto close 0 (nonaktif)

8. Infinite Scroll

Tipe: FREE Tujuan: Memuat produk berikutnya secara otomatis saat pengunjung scroll ke bawah halaman shop, menggantikan navigasi pagination tradisional.

Tampilan di Frontend

Fitur ini hanya aktif di halaman Shop, Category, dan Tag. Saat pengunjung scroll mendekati bagian bawah halaman:
    • Loading spinner muncul di bawah produk terakhir
    • Produk dari halaman berikutnya dimuat dan ditambahkan ke grid
    • Proses berlanjut sampai semua produk ditampilkan
    • Pesan “No more products” muncul saat sudah mencapai akhir

Konfigurasi

Akses: Penglaris Toko > WooCommerce > Infinite Scroll
Pengaturan Infinite Scroll
Pengaturan Deskripsi Default
Enable Feature Mengaktifkan fitur Infinite Scroll Nonaktif
Load Threshold (px) Jarak dari bawah halaman (dalam piksel) untuk memicu pemuatan produk berikutnya. Semakin besar angka, semakin cepat produk dimuat sebelum pengunjung sampai di bawah 300
Hide Default Pagination Menyembunyikan navigasi pagination bawaan WooCommerce (1, 2, 3, Next) Aktif

9. Sticky Buttons

Tipe: FREE Tujuan: Menampilkan bar fixed di bagian bawah layar pada perangkat mobile yang menampilkan harga dan tombol “Add to Cart”, sehingga pelanggan bisa langsung membeli tanpa harus scroll ke atas.

Tampilan di Frontend (Mobile)

Sticky bar muncul di bagian bawah layar hanya pada halaman detail produk dan hanya pada perangkat mobile. Bar menampilkan:
    • Harga produk (opsional)
    • Tombol “Add to Cart” untuk produk simple
    • Tombol “Select Options” untuk produk variabel (scroll ke form variasi saat diklik)
Sticky Buttons pada tampilan mobile

Konfigurasi

Akses: Penglaris Toko > WooCommerce > Sticky Buttons
Pengaturan Sticky Buttons
Pengaturan Deskripsi Default
Enable Feature Mengaktifkan fitur Sticky Buttons di mobile Nonaktif
Show Price Menampilkan harga produk di sticky bar Aktif
Background Color Warna latar belakang sticky bar #ffffff (putih)
Button Color Warna tombol Add to Cart / Select Options #22c55e (hijau)

10. Marketplace Buttons

Tipe: FREE Tujuan: Menampilkan tombol link ke marketplace Indonesia (Tokopedia, Shopee, TikTok Shop, Lazada, Blibli) di halaman produk, memudahkan pelanggan memilih platform pembelian.

Tampilan di Frontend

Tombol marketplace muncul di bawah tombol “Add to Cart” pada halaman detail produk. Setiap tombol memiliki warna brand masing-masing marketplace:
    • Tokopedia — Hijau (#42b549)
    • Shopee — Oranye/Merah (#ee4d2d)
    • TikTok Shop — Hitam (#000000)
    • Lazada — Biru Tua (#0f146d)
    • Blibli — Biru (#0095da)
Tombol hanya muncul untuk marketplace yang URL-nya sudah diisi di produk tersebut.

Konfigurasi Global

Akses: Penglaris Toko > WooCommerce > Marketplace
Pengaturan Marketplace Buttons
Pengaturan Deskripsi Default
Enable Feature Mengaktifkan fitur Marketplace Buttons Nonaktif
Section Title Judul yang ditampilkan di atas tombol marketplace Also available on:
Button Style Gaya tampilan tombol. Pilihan: Icon + Text, Icon Only, Text Only Icon + Text

Mengisi URL Marketplace per Produk

URL marketplace diatur per produk melalui editor WooCommerce:
    1. Edit produk di Products > All Products
    1. Scroll ke bawah ke bagian Product Data
    1. Cari tab/section Marketplace Links
    1. Isi URL untuk setiap marketplace yang tersedia:
      • Tokopedia URL — Link ke produk di Tokopedia
      • Shopee URL — Link ke produk di Shopee
      • TikTok Shop URL — Link ke produk di TikTok Shop
      • Lazada URL — Link ke produk di Lazada
      • Blibli URL — Link ke produk di Blibli
    1. Simpan produk
Catatan: Hanya marketplace yang URL-nya sudah diisi yang akan ditampilkan. Jika sebuah produk hanya dijual di Tokopedia dan Shopee, maka hanya kedua tombol tersebut yang muncul.