Versi 2.0.0 · Loteng Anova Technology
Anova Store Kit adalah add-on WooCommerce. Produk, kategori, tag, atribut, pesanan, stok, ongkir, email transaksi, dan payment gateway tetap milik WooCommerce. Plugin ini hanya mengatur dashboard, template, layout, dan pengaturan tampilan toko:
- Layout toko: halaman semua produk, arsip kategori/tag, hasil pencarian produk — dengan sidebar, filter, toolbar, listing kategori.
- Pencarian produk dengan hasil langsung (live search) dan pencocokan SKU.
- Halaman single produk: 5 layout, 5 gaya galeri, 3 gaya tab.
- Kartu produk (4 gaya), tombol Beli sekarang, Pesan via WhatsApp, Preview (URL demo), Lihat cepat, Wishlist.
- Template desain untuk keranjang, checkout, wishlist, email WooCommerce, dan Akun Saya → Unduhan.
Bagian 1–9 untuk pemilik toko. Bagian 10–11 untuk pengembang.
Daftar isi
- Instalasi
- Dashboard
- Halaman toko & arsip
- Filter & pencarian
- Halaman single produk
- Tombol & WhatsApp
- Template desain
- Shortcode
- Pemecahan masalah
- Referensi pengembang
- Terjemahan
1. Instalasi
| Kebutuhan | Minimum |
|---|---|
| WordPress | 5.8 |
| PHP | 7.4 |
| WooCommerce | 7.0 (kompatibel HPOS) |
| Tema | Tema klasik untuk layout toko & single otomatis. Tema blok: pakai shortcode |
- Pasang & aktifkan WooCommerce lebih dulu.
- Plugin → Tambah Baru → Unggah Plugin →
anova-store-kit.zip→ Pasang → Aktifkan. Halaman Wishlist dibuat otomatis. - Anova Store → Pengaturan → WhatsApp: isi nomor WhatsApp toko.
- Anova Store → Template: pilih desain tiap bagian toko.
- Bila ingin memakai desain keranjang & checkout: Pengaturan → Alat → Ubah Keranjang & Checkout ke klasik (lihat bagian 7).
Plugin ini tidak membuat tabel dan tidak mengubah data WooCommerce. Yang disimpan hanya opsi ask_settings, meta produk _ask_*, dan wishlist member.
2. Dashboard
Menu Anova Store → Dasbor menampilkan data WooCommerce:
- Pendapatan & jumlah pesanan lunas bulan ini (diproses + selesai, dikurangi refund; disegarkan tiap 10 menit).
- Jumlah pesanan menunggu pembayaran, ditahan, diproses, dan jumlah produk.
- Pesanan terbaru (dengan tautan WhatsApp pembeli), produk terlaris, produk stok habis.
- Tombol cepat ke Produk, Kategori, Pesanan, Pembayaran WooCommerce.
- Daftar persiapan dan contekan shortcode.
Mengelola pesanan, produk dan pembayaran tetap di menu WooCommerce dan Produk.
3. Halaman toko & arsip
Berlaku untuk halaman Toko (semua produk), kategori produk, tag produk, dan pencarian produk. Atur di Pengaturan → Toko & arsip dan Template → Layout toko & arsip.
| Layout | Keterangan |
|---|---|
| Sidebar kiri / kanan | Filter di sidebar, bisa menempel saat digulir |
| Filter di atas | Grup filter berjajar di atas produk sebagai dropdown |
| Filter panel samping | Filter tersembunyi, dibuka lewat tombol Filter |
| Lebar penuh | Tanpa sidebar |
Di ponsel, sidebar selalu menjadi panel samping yang dibuka tombol Filter.
Bagian halaman:
- Judul & deskripsi halaman/kategori, breadcrumb WooCommerce.
- Listing kategori di atas produk: di Toko menampilkan kategori utama, di halaman kategori menampilkan subkategori. Gaya: Kartu, Lingkaran, Overlay, Kapsul. Gambar diambil dari thumbnail kategori WooCommerce.
- Toolbar: tombol filter, jumlah hasil, tombol grid/daftar, urutan (sorting WooCommerce).
- Chip filter aktif dengan tombol × dan Hapus semua.
- Grid produk: kolom desktop/tablet/ponsel, jumlah per halaman, rasio gambar.
- Paginasi: nomor halaman atau tombol Muat produk lainnya.
Isi sidebar: filter bawaan, area widget (Tampilan → Widget → Anova Store — Sidebar toko), atau keduanya.
4. Filter & pencarian
Pengaturan → Filter & pencarian.
| Filter | Cara kerja |
|---|---|
| Kata kunci | Pencarian produk |
| Kategori | Kotak centang bertingkat, dengan jumlah produk |
| Rentang harga | Slider ganda + isian min/maks |
| Atribut | Semua atribut global WooCommerce (Produk → Atribut) atau yang dipilih saja. Term bisa diberi warna swatch (lingkaran warna) di Produk → Atribut → Atur term |
| Rating | 4★ ke atas, 3★ ke atas, dst. |
| Ketersediaan | Hanya yang tersedia, sedang diskon |
Dengan Perbarui hasil tanpa reload, produk diperbarui otomatis saat filter diubah (URL ikut berubah sehingga bisa dibagikan dan tombol Back browser tetap berfungsi).
Pencarian produk (
) menampilkan hasil langsung saat mengetik (gambar, nama, harga), pilihan kategori, dan mencocokkan SKU. Form pencarian produk bawaan WooCommerce (widget/blok) juga diganti dengan versi ini.
5. Halaman single produk
Template → Layout halaman produk / Galeri produk / Tab produk, dan Pengaturan → Halaman produk.
| Layout | Keterangan |
|---|---|
| Klasik | Galeri kiri, ringkasan kanan |
| Terbalik | Galeri kanan |
| Lebar | Galeri di atas, ringkasan dua kolom |
| Split | Galeri besar, ringkasan berlatar menempel |
| Minimal | Rata tengah |
Galeri: Slider + thumbnail bawah, Slider + thumbnail vertikal, Grid 2 kolom, Bertumpuk, Slider titik. Semua mendukung zoom saat kursor di atas gambar, lightbox (geser di ponsel), dan gambar variasi otomatis tampil saat pembeli memilih varian.
Tab: Tab, Akordeon, atau Bagian berurutan — isinya tetap tab WooCommerce (Deskripsi, Informasi tambahan, Ulasan, dan tab dari plugin lain).
Lainnya: ringkasan menempel, bar beli menempel di ponsel, jumlah & kolom produk terkait/upsell.
Per produk: buka edit produk → Data produk → tab Anova Store:
| Isian | Fungsi |
|---|---|
| URL demo / preview | Tujuan tombol Preview |
| Label | Badge pada gambar (mis. “Terlaris”) bila tidak diskon |
| Pesan WhatsApp | Pesan khusus produk ini |
| Layout / Gaya galeri | Menimpa pengaturan global |
Semua hook WooCommerce tetap dijalankan, jadi plugin lain (ulasan, ukuran, ongkir, dll.) tetap tampil.
6. Tombol & WhatsApp
Pengaturan → Tombol
| Tombol | Perilaku |
|---|---|
| Tambah ke keranjang | Tombol WooCommerce. Di halaman produk bisa tanpa reload, lalu membuka keranjang samping |
| Beli sekarang | Memasukkan produk (termasuk varian yang dipilih) ke keranjang dan langsung ke checkout WooCommerce — atau langsung ke chat WhatsApp |
| Pesan via WhatsApp | Pesan berisi produk, varian, jumlah, harga dan tautan |
| Preview | Membuka URL demo produk |
| Lihat cepat | Popup produk di kartu, lengkap dengan pilihan varian dan tombol beli |
| Wishlist | Ikon hati. Tamu disimpan di cookie, member di akun |
Gaya tombol (Penuh, Garis tepi, Lembut, Kapsul), sudut, dan ikon juga diterapkan ke tombol keranjang WooCommerce di kartu produk.
Pengaturan → WhatsApp
- Pesan produk — placeholder
{site} {product} {price} {qty} {options} {sku} {url}. - Tombol “Pesan via WhatsApp” di halaman keranjang — placeholder
{site} {items} {subtotal} {total} {cart_url}. - Kotak konfirmasi WhatsApp di halaman pesanan diterima — bisa dibatasi untuk metode pembayaran tertentu (mis. Transfer Bank, COD). Placeholder
{site} {order} {items} {subtotal} {shipping} {total} {name} {phone} {email} {address} {note} {payment} {order_url}. Opsi membuka WhatsApp otomatis setelah checkout. - Tombol WhatsApp melayang.
Checkout dan pembayaran tetap memakai gateway WooCommerce; WhatsApp hanya untuk konfirmasi.
7. Template desain
Anova Store → Template menampilkan pilihan visual. Klik Preview ↗ untuk melihat halaman asli dengan desain itu tanpa menyimpan (hanya terlihat oleh admin).
| Bagian | Pilihan | Catatan |
|---|---|---|
| Layout toko & arsip | 5 | Bagian 3 |
| Daftar kategori | Kartu, Lingkaran, Overlay, Kapsul | |
| Kartu produk | Kartu, Minimal, Overlay, Daftar | Juga untuk |
| Layout produk, galeri, tab | 5 / 5 / 3 | Bagian 5 |
| Keranjang | Tabel klasik, Kartu + ringkasan samping, Ringkas | Keranjang klasik (shortcode) |
| Checkout | Klasik dua kolom, Modern bertahap, Minimal satu kolom | Checkout klasik (shortcode) |
| Wishlist | Grid, Tabel | |
| Sederhana, Header bermerek, Struk | Header & footer semua email WooCommerce | |
| Unduhan | Tabel, Kartu | Akun Saya → Unduhan |
Keranjang & checkout blok vs klasik. Toko WooCommerce baru memakai blok Cart/Checkout yang punya tampilan sendiri. Desain Anova berlaku untuk versi klasik. Pakai Pengaturan → Alat → Ubah Keranjang & Checkout ke klasik untuk mengganti isi kedua halaman dengan
Email: logo (kosong = gambar header WooCommerce), warna aksen (kosong = warna dasar WooCommerce), teks footer. Isi email tetap dari WooCommerce. Pratinjau lewat tombol Preview di halaman Template.
Warna & sudut: warna utama, teks, tombol WhatsApp, dan sudut berlaku di seluruh tampilan.
Menimpa template dari tema: salin file dari wp-content/plugins/anova-store-kit/templates/ ke wp-content/themes/tema-anda/anova-store-kit/ dengan path yang sama. Contoh: templates/content-product.php → tema-anda/anova-store-kit/content-product.php.
Bila modul Kartu produk / Layout produk Anova aktif, file
woocommerce/content-product.phpdanwoocommerce/content-single-product.phpdi tema tidak dipakai. Matikan modulnya di Pengaturan → Umum bila ingin memakai template tema.
8. Shortcode
| Shortcode | Fungsi |
|---|---|
| Pencarian produk |
| Listing kategori |
| Toko lengkap (filter + grid + paginasi) di halaman mana pun — cocok untuk tema blok & page builder |
| Panel filter saja (dikirim ke halaman toko) |
| Shortcode WooCommerce, otomatis memakai kartu Anova |
| Galeri produk |
| Tombol beli sekarang (produk simple) |
| Tombol tunggal |
| Halaman wishlist |
0 · 0 | Ikon header dengan jumlah |
| Mini keranjang WooCommerce |
Bila id kosong, dipakai produk yang sedang dibuka. Anova Canvas / Elementor: widget Shortcode. Gutenberg: blok Shortcode.
9. Pemecahan masalah
Layout toko/single tidak berubah. Tema blok (FSE) memakai template blok WooCommerce; gunakan
Showing all 4 results dan blok shortcode. Cek juga modul di Pengaturan → Umum.
Anova Translate
Elementor Pro – Lisensi 1 Tahun
Desain keranjang/checkout tidak berubah. Halaman masih memakai blok — ubah ke klasik (bagian 7).
Filter atribut tidak muncul. Hanya atribut global (Produk → Atribut) yang bisa difilter; atribut khusus per produk tidak.
Filter tidak memperbarui hasil. Plugin cache halaman harus mengizinkan parameter ask_cat, ask_attr, min_price, max_price, ask_rating, ask_stock, ask_sale (jangan diabaikan dari kunci cache).
Jumlah wishlist/keranjang tidak berubah. Kecualikan cookie ask_wishlist dan cookie WooCommerce dari cache.
Tombol WhatsApp tidak muncul. Nomor WhatsApp belum diisi.
Integrasi Anova Translate. Semua teks tampilan depan bisa diterjemahkan oleh Anova Translate.
10. Referensi pengembang
10.1 Struktur
anova-store-kit/
├── anova-store-kit.php bootstrap (butuh WooCommerce, deklarasi HPOS)
├── includes/
│ ├── class-ask-shop.php layout arsip, kategori, load more
│ ├── class-ask-filters.php filter & query
│ ├── class-ask-search.php live search, SKU
│ ├── class-ask-single.php layout single, galeri, tab
│ ├── class-ask-buttons.php beli sekarang, WA, preview, quick view
│ ├── class-ask-cart.php AJAX add to cart, drawer
│ ├── class-ask-whatsapp.php keranjang & halaman terima kasih
│ ├── class-ask-wishlist.php
│ ├── class-ask-design.php skin cart/checkout, email, unduhan
│ └── admin/ dashboard, pengaturan, template, meta produk
├── templates/ semua tampilan (bisa ditimpa tema)
└── assets/ css & js10.2 Template WooCommerce yang diganti
| WooCommerce | Anova | Cara |
|---|---|---|
archive-product.php | templates/archive-product.php | template_include (Toko, kategori, tag, pencarian produk) |
content-product.php | templates/content-product.php | wc_get_template_part |
content-single-product.php | templates/content-single-product.php | wc_get_template_part |
emails/email-header.php, email-footer.php | templates/emails/… | woocommerce_locate_template |
myaccount/downloads.php | templates/myaccount/downloads.php | woocommerce_locate_template |
10.3 Parameter URL filter
s, post_type=product, ask_cat[]=slug, min_price, max_price, ask_attr[pa_warna][]=merah, ask_rating=4, ask_stock=1, ask_sale=1. Diterapkan lewat woocommerce_product_query (query utama) dan woocommerce_shortcode_products_query untuk
Anova Translate
Elementor Pro – Lisensi 1 Tahun
10.4 Hook
| Hook | Jenis | Kegunaan |
|---|---|---|
ask_extra_buttons | filter | Daftar tombol tambahan per konteks |
ask_product_badge | filter | HTML badge |
ask_filter_query_parts | filter | Ubah tax/meta query filter |
ask_wa_cart_message · ask_wa_order_message | filter | Pesan WhatsApp |
ask_woo_template_map | filter | Tambah/kurangi template WooCommerce yang diganti |
ask_locate_template | filter | Lokasi template |
ask_save_settings | filter | Saring pengaturan sebelum disimpan |
ask_card_before_title · ask_card_after | action | Konten tambahan di kartu |
ask_loaded | action | Plugin siap |
JavaScript: event jQuery ask_shop_updated pada body; window.AnovaStoreKit.openCart(), .toast(pesan), .reloadShop(url). Event WooCommerce added_to_cart tetap dipicu.
10.5 Data
| Nama | Isi |
|---|---|
Opsi ask_settings | Semua pengaturan |
Meta produk _ask_preview_url, _ask_badge, _ask_wa_message, _ask_layout, _ask_gallery_style | Tab Anova Store |
Meta term ask_color | Warna swatch atribut |
User meta _ask_wishlist, cookie ask_wishlist | Wishlist |
Transient ask_price_range, ask_month_revenue | Cache rentang harga & statistik |
Menghapus plugin (dengan opsi Hapus pengaturan aktif) hanya menghapus data di atas — data WooCommerce tidak disentuh.
11. Terjemahan
Teks sumber berbahasa Inggris dengan text domain anova-store-kit; terjemahan Bahasa Indonesia lengkap ada di languages/. Setelah mengubah teks:
bash
python3 tools/make-pot.py # perbarui .pot
python3 tools/make-pot.py --compile # .po → .mo + .l10n.php