Cara Mengatur Infinite Scroll di WooCommerce (LarisTurbo)
Panduan lengkap Infinite Scroll For WooCommerce: memuat produk tambahan otomatis atau via tombol Load More di halaman shop, teks tombol, dan margin loading.
Infinite Scroll For WooCommerce mengaktifkan infinite scroll di listing produk WooCommerce: produk tambahan dimuat otomatis saat pengunjung scroll ke bawah (atau lewat tombol Load More, tergantung pengaturan). Ini menggantikan pagination klasik, sehingga pengunjung tidak perlu klik nomor halaman.
Fitur ini bekerja di loop produk WooCommerce klasik (.products) maupun template produk block (.wc-block-product-template). Pagination bawaan tema akan disembunyikan saat infinite scroll aktif.
Tutorial ini membahas jenis loading, kustomisasi tombol, margin spinner, dan cara verifikasi di halaman Shop.
Yang akan tampil di toko
Di halaman yang punya lebih dari satu halaman produk:
- Grid produk dibungkus container infinite scroll
- Di bawah grid muncul salah satu:
- Tombol Load More (mode default), atau
- Spinner loading otomatis saat pengunjung mendekati footer (mode scroll)
- Nomor halaman / pagination WooCommerce disembunyikan
Jika total produk hanya cukup untuk satu halaman, fitur tidak menambahkan apa pun—tidak ada tombol atau spinner.
Prasyarat
- Plugin LarisTurbo For WooCommerce by TokoPressID terpasang dan lisensi aktif
- WooCommerce aktif
- Halaman shop menampilkan loop produk standar (bukan katalog fully custom tanpa class
.products) - Untuk uji: cukup banyak produk agar WooCommerce membuat lebih dari 1 halaman (cek Settings → Products → Products per page)
Cara membuka pengaturan
- Login ke WordPress Admin.
- Buka LarisTurbo → For WooCommerce.
- Di daftar fitur, cari Infinite Scroll For WooCommerce, lalu klik Settings.
Opsi lanjutan muncul setelah Enable Infinite Scroll dicentang.
Opsi yang tersedia
| Label di plugin | Jenis | Fungsi |
|---|---|---|
| Enable Infinite Scroll | Checkbox | Menyalakan infinite scroll di listing produk |
| Loading Type | Radio | Load More Button (default) atau Auto Load on Scroll |
| Button Text | Teks | Label tombol Load More. Kosong = Load More |
| Custom Styles | Heading | Bagian pengaturan tampilan loading |
| Button/Loading Margin (px) | Margin | Jarak sekitar tombol atau spinner loading |
Loading Type
| Pilihan | Perilaku |
|---|---|
| Load More Button | Pengunjung menekan tombol untuk memuat batch produk berikutnya |
| Auto Load on Scroll | Produk berikutnya dimuat otomatis saat scroll mendekati footer/widget footer |
Mode Auto Load on Scroll lebih mulus untuk mobile, tetapi mode Load More Button memberi kontrol eksplisit kepada pengunjung (lebih ramah untuk koneksi lambat).
Langkah-langkah setup
1. Aktifkan fitur
- Buka Settings Infinite Scroll For WooCommerce.
- Centang Enable Infinite Scroll.
- Simpan.
2. Pilih cara memuat produk
- Pilih Loading Type sesuai UX toko Anda.
- Jika memakai tombol, sesuaikan Button Text—misalnya
Muat Produk Lainnya. - (Opsional) Atur Button/Loading Margin (px) jika tombol terlalu rapat dengan grid produk.
- Simpan.
3. Verifikasi di halaman shop
- Pastikan jumlah produk di toko melebihi Products per page WooCommerce.
- Buka halaman shop di tab incognito.
- Scroll ke bawah grid produk:
- Mode button: tombol Load More (atau teks kustom) harus muncul
- Mode scroll: spinner muncul dan produk baru ditambahkan tanpa klik
- Pastikan pagination angka (1, 2, 3…) tidak tampil lagi.
- Muat sampai halaman terakhir—tombol hilang atau loading berhenti saat semua produk sudah dimuat.
Verifikasi cepat
- Produk halaman 2+ muncul di grid yang sama tanpa reload penuh halaman
- URL tidak berubah drastis (tetap di halaman shop/kategori)
- Filter/sorting WooCommerce yang sudah aktif di URL tetap dihormati saat memuat halaman berikutnya
- Hanya satu halaman produk → tidak ada tombol infinite scroll (perilaku normal)
Troubleshooting
Tombol Load More tidak muncul
- Cek jumlah produk: jika ≤ Products per page, hanya ada 1 halaman—fitur tidak aktif
- Pastikan Enable Infinite Scroll dicentang
- Tema mungkin tidak memakai markup
.productsstandar; cek apakah block template.wc-block-product-templateada
Produk dobel atau layout pecah setelah load
- Konflik dengan plugin lazy load atau masonry tema—uji dengan tema default Storefront
- Pastikan tidak ada custom JS pagination yang bentrok
Auto scroll memuat terus tanpa henti
- Biasanya karena footer sangat pendek; coba mode Load More Button
- Cek plugin optimasi yang memodifikasi tinggi halaman
Pagination masih terlihat
- Beberapa tema menempatkan pagination di luar selector standar; hubungi support tema atau sesuaikan CSS tema
Ringkasan
Alur setup: aktifkan Enable Infinite Scroll → pilih Loading Type → sesuaikan Button Text → uji di shop dengan lebih dari satu halaman produk. Fitur ini meningkatkan browsing katalog tanpa memaksa pengunjung mengklik pagination.