Mengatur Header Navigation dan Mini Cart (WordPress Theme)
Panduan Header Navigation (Logo & Menu): sticky header, search, akun, mini cart WooCommerce, serta warna menu dan ikon di tab Style.
Header Navigation (Logo & Menu) adalah area navigasi utama: logo, menu utama, ikon search, ikon akun, dan (jika WooCommerce aktif) Mini Cart. Di website toko, bagian ini biasanya paling sering dilihat pengunjung, jadi wajar kalau Anda ingin tampilannya rapi, jelas, dan nyaman di mobile.
Perlu diingat, logo diatur dari Theme Settings: General → Site Logo, bukan di section ini. Di Header Navigation, Anda mengatur perilaku navigasi (sticky/transparent), fitur quick icon (search, akun, mini cart), serta style warna dan spacing.
Tutorial ini berlaku untuk semua tema WordPress by TokoPressID, termasuk LarisManis, Adora, Salvia, LarisGram, LarisDigital, dan tema TokoPressID lainnya dengan struktur Theme Settings yang sama.
Cara membuka pengaturan
- TokoPressID → Theme Settings → Theme Settings: Sections.
- Klik Header Navigation (Logo & Menu).
Opsi Settings
| Label | Fungsi |
|---|---|
| HIDE Header Navigation (Logo & Menu) Globally In All Pages | Mematikan navigasi di seluruh situs |
| Header Navigation Type | Default Header Navigation From Theme atau Custom Header Navigation From Elementor |
| Custom Header Navigation | Pilih template Elementor |
| Sticky Header Navigation | Yes / No: menu menempel saat scroll |
| Position Navigation at Top of Header | Overlay transparan di atas area header (label setting: Transparent Navigation) |
| Setup Logo / Setup Site Logo | Ke Site Logo di General |
| Setup Menu / Setup Header Navigation Menu | Ke Appearance → Menus |
| SHOW Search Form | Menampilkan form pencarian di header |
| SHOW Mini Cart | Ikon keranjang WooCommerce (default: aktif jika WC ada) |
| Mini Cart Action | Perilaku klik ikon keranjang (lihat bawah) |
| SHOW My Account Icon | Ikon/tautan akun (default: aktif) |
| My Account Text | Teks saat belum login (placeholder: Login) |
| My Account Text (Logged In) | Teks saat sudah login (placeholder: Dashboard) |
| My Account Custom Link | URL kustom menggantikan halaman akun default |
Mini Cart Action (WooCommerce)
- Open Cart Widget Sidebar (Offcanvas) (default): panel samping mini cart
- Open Cart Page: langsung ke halaman Cart
- Open Checkout Page: langsung ke halaman Checkout
Mode Elementor
Jika Custom Header Navigation From Elementor dipilih, opsi sticky, menu, search, mini cart, dan akun dari tema tidak dipakai. Desain header sepenuhnya dari template Elementor yang dipilih.
Opsi Style (default tema)
Tab Style tersedia untuk navigasi default (bukan Elementor):
| Grup | Contoh field |
|---|---|
| Latar | Default Background Color, Sticky Background Color (+ varian [Dark]) |
| Logo teks | Logo Text Color, (Hover), Logo Text Font Size |
| Menu | Menu Alignment, Menu Color, (Hover), submenu background/border |
| Ikon quick nav | Icon Color, (Hover) |
| Mini cart | Minicart Count Color / [Dark] Minicart Count Color (badge jumlah item) |
| Spacing | Font Size, Top and Bottom Padding Space |
Langkah contoh: header toko dengan mini cart
- Atur logo di Theme Settings: General → Site Logo.
- Buat menu utama, assign ke Header Navigation Menu.
- Centang SHOW Mini Cart dan SHOW Search Form sesuai kebutuhan.
- Pilih Mini Cart Action = offcanvas jika ingin pengalaman belanja cepat.
- Aktifkan Sticky Header Navigation = Yes jika menu harus selalu terlihat.
- Sesuaikan Menu Color dan Minicart Count Color di tab Style.
- Save Changes, uji tambah produk ke keranjang di frontend.
Override per halaman
Metabox Page Layout saat edit post/page dapat menyembunyikan Header Navigation untuk halaman tertentu (landing page tanpa menu, misalnya).
Troubleshooting
| Masalah | Solusi |
|---|---|
| Mini Cart tidak muncul | WooCommerce harus aktif; centang SHOW Mini Cart; tidak pakai header Elementor |
| Menu kosong | Assign menu ke lokasi Header Navigation |
| Sticky tidak jalan | Hanya untuk default tema; cek konflik CSS plugin |
| Badge count tidak update | Biasanya cache; uji di jendela incognito setelah add to cart |