Widget WC Products Grid (WordPress Theme)
Panduan widget Elementor TP - WooCommerce Products: filter produk, kolom responsif, carousel, dan style product box.
Widget TP - WooCommerce Products menampilkan grid atau carousel produk WooCommerce di halaman Elementor. Cocok untuk section produk di homepage, landing page promo, atau halaman campaign, tanpa perlu menulis shortcode.
Widget berada di kategori TokoPress di editor Elementor.
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.
Prasyarat
- WooCommerce aktif dengan produk yang dipublikasikan
- Elementor dan tema WordPress by TokoPressID aktif
- Elementor Pro tidak wajib (tema mendaftarkan hook WooCommerce jika Pro tidak ada)
Cara menambahkan widget
- Edit halaman dengan Elementor.
- Cari TP - WooCommerce Products di kategori TokoPress.
- Seret ke kanvas.
- Atur tab Content dan Style.
Tab Content: Products Setting
Filter produk
| Label di Elementor | Fungsi |
|---|---|
| Filter By | Sumber produk yang ditampilkan |
Pilihan Filter By:
| Nilai | Produk yang ditampilkan |
|---|---|
| All Products | Semua produk (sesuai limit) |
| Featured Products | Produk unggulan |
| On-sale Products | Produk sedang diskon |
| Best Selling Products | Terlaris (by sales) |
| Top Rated Products | Rating tertinggi |
| Products In A Category | Satu kategori (field Category muncul) |
Jumlah dan kolom
| Label di Elementor | Fungsi |
|---|---|
| Number of Products To Show | Total produk (1-24) |
| Number of Products Per Row (desktop) | Kolom grid desktop (viewport >= 992px) |
| Number of Products Per Row (tablet) | Kolom tablet (576px - 991px); default ikuti desktop |
| Number of Products Per Row (Mobile) | Kolom mobile (< 576px) |
Opsi kolom tablet/mobile termasuk default untuk mewarisi desktop.
Carousel
Widget mendukung mode carousel (opsi carousel di kontrol lanjutan). Saat carousel aktif, pengaturan per row dinonaktifkan karena tampilan menjadi slider horizontal.
Cek panel widget untuk opsi:
- Autoplay
- Navigasi panah
- Dots pagination
(Label persis mengikuti UI Elementor di tab Content / Style.)
Tab Style
Sesuaikan tampilan product box agar selaras dengan Woo Template - Shop Page:
- Warna judul dan harga
- Spacing antar produk
- Tombol Add to cart (jika ditampilkan)
Product box di widget menggunakan style WooCommerce tema; pengaturan global shop di Theme Settings → Woo Template - Shop Page → Style mempengaruhi tampilan dasar.
Contoh konfigurasi
Homepage: produk unggulan 4 kolom
- Filter By: Featured Products
- Number of Products To Show: 8
- Per Row (desktop): 4
- Per Row (mobile): 2
Landing flash sale
- Filter By: On-sale Products
- Aktifkan carousel jika produk banyak
- Pasangkan dengan widget TP - Countdown
Satu kategori
- Filter By: Products In A Category
- Pilih Category
- Set jumlah produk sesuai katalog kategori
Perbedaan dengan halaman Shop
| Aspek | Halaman Shop | Widget Elementor |
|---|---|---|
| URL | /shop/ |
Di halaman mana saja |
| Pagination | Ya | Tidak (limit fixed) |
| Filter/sort WooCommerce | Ya | Tidak |
| Sidebar shop | Ya | Tidak |
Gunakan halaman Shop untuk katalog penuh; widget untuk cuplikan promosi.
Troubleshooting
| Masalah | Solusi |
|---|---|
| Widget tidak muncul di panel | Aktifkan WooCommerce |
| Produk kosong | Pastikan ada produk sesuai filter (featured/sale) |
| Kolom tidak berubah di mobile | Set Per Row (Mobile) eksplisit, jangan default |
| Style tidak sama dengan shop | Sinkronkan Theme Settings → Shop Page → Style |