Cara Mengatur Sticky Footer Menu di WooCommerce (LarisTurbo)

Panduan lengkap Sticky Footer Menu For WooCommerce: menu navigasi tetap ala aplikasi di mobile, urutan item, breakpoint, kustom label/ikon, dan verifikasi di toko.

Sticky Footer Menu For WooCommerce menampilkan menu navigasi sticky ala aplikasi di layar mobile, supaya pengunjung bisa cepat pindah ke halaman penting seperti Shop, Cart, dan Account tanpa perlu membuka menu hamburger tema.

Menu ini bekerja bersama komponen sticky footer LarisTurbo lainnya (misalnya Sticky Mobile CTA atau tombol WhatsApp). Agar tampil, tema Anda perlu memanggil hook laristurbo_footer_sticky (tema resmi TokoPressID sudah mendukung).

Tutorial ini membahas aktivasi, pemilihan item menu, kustomisasi per item, breakpoint mobile, dan cara memastikan menu tampil dengan benar. Nama field mengikuti label asli di plugin sehingga panduan ini bisa diikuti tanpa screenshot.

Yang akan tampil di toko

Pada lebar layar di bawah breakpoint mobile (default 767px):

Bar ikon + label di bagian bawah layar
Item default: Home, Shop, Cart, Account, WhatsApp
Setiap item bisa dikustom label, URL, ikon, dan opsi tab baru
Di halaman produk tunggal, menu bisa disembunyikan agar tidak bentrok dengan Sticky Mobile CTA

Pada layar lebar (desktop), menu disembunyikan otomatis—kecuali tema Anda ditandai sebagai tema mobile penuh LarisTurbo, yang selalu menampilkan menu sticky.

Prasyarat

Plugin LarisTurbo For WooCommerce by TokoPressID terpasang dan lisensi aktif
WooCommerce aktif
Tema mendukung output sticky footer LarisTurbo (tema TokoPressID atau tema yang memanggil hook laristurbo_footer_sticky)
Untuk item WhatsApp: fitur WhatsApp Integration (submenu For WhatsApp) dikonfigurasi dengan nomor WA

Cara membuka pengaturan

Login ke WordPress Admin.
Buka LarisTurbo → For WooCommerce.
Di daftar fitur, cari Sticky Footer Menu For WooCommerce, lalu klik Settings.

Semua opsi di bawah hanya muncul setelah Enable Sticky Footer Menu dicentang.

Opsi yang tersedia

Aktivasi dan tata letak

Label di plugin	Jenis	Fungsi
Enable Sticky Footer Menu	Checkbox	Menyalakan atau mematikan menu sticky
Sticky Footer Menu Items	Sortable	Memilih dan mengurutkan item yang ditampilkan
Responsive Mobile Breakpoint	Angka (px)	Lebar maksimum layar agar menu muncul (default 767). Tidak tampil jika tema mobile khusus LarisTurbo
Hide Sticky Footer Menu in Single Product Page	Checkbox	Menyembunyikan menu di halaman produk tunggal

Key	Label default
Home	Home
Shop	Shop
Cart	Cart
Account	Account
WhatsApp	WhatsApp
Contact	Contact
Custom 1	Custom 1
Custom 2	Custom 2
Custom 3	Custom 3

Urutan default: Home → Shop → Cart → Account → WhatsApp. Seret item di daftar sortable untuk mengubah urutan; centang/hapus centang untuk menampilkan atau menyembunyikan item.

Setiap item yang aktif punya blok pengaturan sendiri, misalnya Home Menu, Shop Menu, dan seterusnya:

Label di plugin	Jenis	Fungsi
Label	Teks	Teks di bawah ikon. Kosong = label default item
URL	Teks	Tautan tujuan. Kosong = URL bawaan (misalnya shop page, cart URL)
Icon	Gambar	Ikon kustom. Kosong = ikon SVG bawaan plugin
Open in New Tab	Checkbox	Membuka tautan di tab baru

URL bawaan yang umum dipakai:

Home → URL beranda situs
Shop → halaman shop WooCommerce
Cart → halaman keranjang
Account → halaman My Account
WhatsApp → link WA global, atau link produk jika pengunjung sedang di halaman produk (jika WhatsApp Buy Button aktif)
Contact dan Custom 1–3 → kosong sampai Anda isi manual

Langkah-langkah setup

1. Aktifkan fitur

Buka Settings Sticky Footer Menu For WooCommerce.
Centang Enable Sticky Footer Menu.
Simpan pengaturan.

2. Atur item dan urutan

Di Sticky Footer Menu Items, pastikan item yang Anda inginkan tercentang.
Seret untuk mengatur urutan (misalnya Cart di tengah, WhatsApp di kanan).
(Opsional) Atur Responsive Mobile Breakpoint jika tema Anda butuh nilai selain 767px.
Simpan.

3. Kustomisasi label dan tautan

Buka blok menu yang ingin diubah, misalnya WhatsApp Menu.
Isi Label jika ingin teks Indonesia, misalnya Chat.
Isi URL jika ingin mengarahkan ke halaman khusus (kosongkan untuk memakai link WA otomatis).
Unggah Icon kustom jika perlu branding sendiri.
Simpan.

4. Cek di perangkat mobile

Buka toko dalam tab incognito atau mode responsive browser (lebar ≤ breakpoint).
Kunjungi homepage atau halaman shop.
Pastikan bar menu muncul di bawah dan setiap ikon membuka halaman yang benar.
Buka satu halaman produk: jika Hide Sticky Footer Menu in Single Product Page aktif, menu harus hilang di halaman itu saja.

Verifikasi cepat

Menu hanya tampil di lebar layar ≤ Responsive Mobile Breakpoint
Item yang tidak dicentang di Sticky Footer Menu Items tidak muncul di frontend
Klik Cart membuka halaman keranjang; badge jumlah item (jika ada di tema) tetap sinkron
Item WhatsApp membuka chat WA, bukan halaman kosong

Troubleshooting

Pastikan Enable Sticky Footer Menu dicentang dan lisensi aktif.
Periksa lebar layar: di desktop menu sengaja disembunyikan.
Pastikan tema memuat hook sticky footer LarisTurbo
Cek apakah Anda berada di halaman produk dengan Hide Sticky Footer Menu in Single Product Page aktif

Item WhatsApp tidak berfungsi

Konfigurasi nomor di LarisTurbo → For WhatsApp → WhatsApp Integration
Untuk link produk otomatis, aktifkan juga WhatsApp Buy Buttons

Naikkan Responsive Mobile Breakpoint hanya jika perlu (menu akan hilang di layar lebih lebar)
Atau aktifkan Hide Sticky Footer Menu in Single Product Page agar tidak bentrok dengan Sticky Mobile CTA

Ikon tidak tampil

Pastikan file Icon yang diunggah format gambar valid (PNG/SVG sebagai URL media)
Kosongkan field Icon untuk kembali ke ikon bawaan plugin

Ringkasan

Alur umum: aktifkan Enable Sticky Footer Menu → pilih dan urutkan Sticky Footer Menu Items → sesuaikan Label/URL per item → cek di layar mobile. Menu ini dirancang untuk navigasi cepat di HP, bukan untuk desktop.