Wiesz, co potrafi najbardziej zirytować użytkownika sklepu online? Brak logicznej nawigacji. Kiedy klient nie może znaleźć tego, czego szuka, po prostu wychodzi.
A przecież w sklepie internetowym robionym na WooCommerce, odpowiednio skonfigurowane menu nawigacyjne WooCommerce to połowa sukcesu. Porządek, intuicja i minimalizm – te trzy rzeczy wystarczą, żeby użytkownik nie zgubił się w gąszczu zakładek.
Jeśli zastanawiasz się, jak ustawić menu w WooCommerce, całość sprowadza się do kilku kluczowych etapów: zrozumienia struktury, przypisania pozycji, stworzenia logicznego menu głównego WordPress, dodania kategorii produktów WooCommerce i dopasowania wyglądu do motywu sklepu. Da się to zrobić samodzielnie – krok po kroku, korzystając ze standardowego edytora menu WordPress. A jeśli potrzebujesz pomocy w całościowym podejściu do swojej strony, sprawdź naszą ofertę projektowania firmowych stron internetowych.
- Krok 1: Włącz i znajdź odpowiednie ustawienia menu w panelu WordPress
- Krok 2: Utwórz lub edytuj strukturalne menu główne WooCommerce
- Krok 3: Dodaj kategorie produktów, podmenu i linki niestandardowe
- Krok 4: Dostosuj wygląd i kolejność pozycji menu
- Krok 5: Ustaw lokalizacje menu i sprawdź wersję mobilną
Jeśli chcesz, żebym przeprowadził Cię przez cały proces krok po kroku – czytaj dalej.
Krok 1: Włącz i znajdź odpowiednie ustawienia menu w panelu WordPress
Zaczynam od podstaw – czyli miejsca, gdzie to wszystko się dzieje. W kokpicie WordPressa przechodzimy do zakładki Wygląd → Menu. To właśnie tutaj sterujemy całym mechanizmem nawigacyjnym WooCommerce. Domyślnie WordPress tworzy podstawowe menu główne, ale nie zawsze zawiera ono strony sklepu, kategorii czy koszyka – trzeba je dodać ręcznie.
Po wejściu w „Menu” zobaczysz klasyczny edytor menu WordPress. W lewej kolumnie znajdziesz dostępne elementy, czyli strony, wpisy, kategorie produktów WooCommerce, linki własne i etykiety. Po prawej – aktualną strukturę Twojego menu. Działa tu prosty „przeciągnij i upuść”.
Brzmi banalnie, ale ta sekcja to serce całego zarządzania pozycjami w menu.
Warto od razu utworzyć nowe menu i nazwać je np. „Menu główne sklepu”. Dzięki temu unikniesz zamieszania, a samo menu przypiszesz potem do odpowiedniej lokalizacji motywu (o tym później). Po zapisaniu możesz przejść do dodawania stron takich jak „Sklep”, „Koszyk” czy „Moje konto”.
Jeśli po raz pierwszy konfigurujesz menu w WooCommerce – upewnij się, że motyw wspiera jego personalizację. Niektóre darmowe szablony ograniczają ilość sekcji (wtedy można je obejść przez niestandardowe menu WordPress). Szczegółowy opis, jak dopasować konfigurację do swojej skórki znajdziesz w instrukcji dostosowania motywu WooCommerce.
| Element menu | Funkcja | Czy wymagany? | Typ | Uwagi |
|---|---|---|---|---|
| Strona Sklepu | Wyświetla produkty | Tak | Strona WooCommerce | Domyślnie tworzona przy instalacji |
| Kategorie produktów | Filtrowanie asortymentu | Tak | Kategorie WooCommerce | Dodaj tylko te kluczowe |
| Koszyk | Lista zakupów klienta | Tak | Strona WooCommerce | Automatycznie aktualizowana |
| Moje konto | Dane użytkownika | Opcjonalnie | Strona WooCommerce | Warto zachować |
| Blog | Treści SEO | Opcjonalnie | Strona WordPress | Pomaga w pozycjonowaniu |
Krok 2: Utwórz lub edytuj strukturalne menu główne WooCommerce
Kiedy już wiesz, gdzie wszystko jest, czas to uporządkować. Tworzenie struktury menu sklepu to kluczowy krok, który wpływa na UX i konwersję. Wyobraź sobie klienta, który przegląda Twój asortyment. Jeśli od razu nie widzi kategorii, traci zainteresowanie.
Dlatego układ menu musi być logiczny, prosty i nieprzeładowany.
Tworzenie nowego menu
W sekcji „Utwórz nowe menu” wpisz jego nazwę, np. „Menu nawigacyjne WooCommerce”. Następnie wybierz lokalizację – zazwyczaj „Menu główne”, aby pojawiło się w nagłówku strony. Upewnij się, że masz zaznaczoną opcję „Automatycznie dodawaj nowe strony najwyższego poziomu” – jeśli tego nie chcesz, odhacz, żeby uniknąć bałaganu.
Dodawanie stron sklepu
W lewej kolumnie odznacz zakładki Sklep, Koszyk, Moje konto i dodaj je do menu. W ten sposób tworzysz podstawową nawigację. Używaj opisowych etykiet w języku zrozumiałym dla klientów.
Zamiast „Shop” – napisz po prostu „Sklep”.
Porządkowanie i sortowanie pozycji menu
Przeciągnij elementy w kolejności, która ma sens: najpierw Sklep, potem Kategorie, Promocje, a na końcu Kontakt. Jeśli chcesz dodać submenu – przeciągnij jeden element lekko w prawo pod inny. Otrzymasz menu rozwijane WooCommerce, idealne do grupowania produktów.
Porada praktyczna
Kiedy układasz pozycje menu WooCommerce, ogranicz się do 5–7 głównych sekcji. Zbyt dużo elementów tylko dezorientuje. Większe zbiory umieszczaj w menu mega w WooCommerce albo bocznym panelu. Dla zaawansowanych układów warto sprawdzić wtyczki typu „Max Mega Menu”. Więcej o dopasowaniu motywu do układu menu znajdziesz tutaj – wybór motywu WooCommerce.
Krok 3: Dodaj kategorie produktów, podmenu i linki niestandardowe
Tu zaczyna się to, co odróżnia zwykłą stronę od sklepu internetowego. W WooCommerce menu nabiera życia wtedy, gdy dodasz kategorie produktów WooCommerce i odpowiednio je pogrupujesz. To dzięki nim klient może szybko przejść np. do sekcji „Ogrody”, „Klimatyzacja”, „Kuchnie” itd. – dokładnie tak, jak działa intuicyjny sklep.
Przejdź ponownie do „Wygląd → Menu” i wybierz zakładkę „Kategorie produktów”. Jeśli nie widzisz tej opcji, kliknij „Opcje ekranu” (w prawym górnym rogu) i włącz wyświetlanie kategorii. Teraz możesz zaznaczyć odpowiednie sekcje i dodać je jako elementy menu.
W każdej chwili możesz też dodać link bezpośredni do strony promocyjnej, shortcode’y w menu WordPress albo stworzyć menu tematyczne WordPress.
Podmenu tworzysz przez zwykłe przesunięcie elementu w prawo – w ten sposób powstają grupy w rodzaju „Produkty → Kategoria A → Podkategoria B”. Dzięki temu Twoje podmenu produktów jest logiczne i nieprzeładowane. Dobrze sprawdza się też koncepcja dynamicznego menu WooCommerce, które automatycznie aktualizuje się przy dodawaniu nowych kategorii.
Jeżeli zależy Ci na zaawansowanej personalizacji, warto wykorzystać funkcje menu zależne od ról użytkownika (np. inne pozycje dla zalogowanych i niezalogowanych). Można to osiągnąć przez dedykowane pluginy. Dodatkowe przykłady i rozwiązania znajdziesz w poradniku o child theme WooCommerce.
| Typ elementu menu | Opis | Kiedy stosować | Uwagi | Przykład |
|---|---|---|---|---|
| Kategoria produktów | Przenosi do grupy produktów | Zawsze | Ułatwia przegląd | „Narzędzia ogrodowe” |
| Podkategoria | Umożliwia pogłębienie struktury | Gdy masz duży asortyment | Tworzy hierarchię | „Podkaszarki” |
| Link bezpośredni | Odnośnik do landing page | Promocje i oferty | Dodaje elastyczność | „Wyprzedaż -50%” |
| Strona informacyjna | Dołącza treści jak Polityka zwrotów | Każdy sklep | Buduje zaufanie | „Regulamin” |
| Custom HTML | Dodaje przyciski lub ikony | Dodatkowe CTA | Wymaga HTML | „Promocja ????” |
Krok 4: Dostosuj wygląd i kolejność pozycji menu
Kiedy struktura już gotowa, zajmijmy się stylizacją. Wygląd menu musi współgrać z całym motywem – to tu wchodzimy w personalizację menu sklepu. Przejdź do „Wygląd → Personalizuj → Menu”. W zależności od motywu znajdziesz różne opcje: kolory, tła, czcionki, animacje przy najechaniu.
Możesz też edytować tło i kolorystykę menu, by lepiej pasowały do identyfikacji wizualnej marki.
Zmiana kolejności pozycji
W klasycznym edytorze przeciągnij elementy w żądanej kolejności. Pro tip: najważniejsze linki (np. „Sklep”, „Promocje”) umieść z lewej strony – badania UX pokazują, że tam użytkownik zagląda najpierw.
Dostosowanie stylu CSS
Jeśli chcesz głębiej ingerować w wygląd, dodaj stylizację menu za pomocą CSS. Wystarczy w zakładce „Dodatkowy CSS” wpisać np.:
.main-navigation a { text-transform: uppercase; }
Prosty zabieg, a od razu robi porządek.
Menu mobilne
Koniecznie sprawdź mobilną wersję menu – wielu użytkowników odwiedza Twój sklep z telefonu. Menu musi być responsywne, rozkładać się w formie hamburgera i nie zasłaniać treści. Zajrzyj też do na wigacji mobilnej WordPress w edytorze – tam możesz ustawić specyficzne zachowania tylko dla telefonów.
Menu w stopce i menu boczne
Nie zapominaj o menu stopki sklepu (linki informacyjne) i menu boczne WooCommerce (filtry, kategorie, CTA). Te sekcje często są niedoceniane, a to właśnie one pomagają dokończyć sprzedaż.
Więcej przykładów wdrożeń znajdziesz w naszym materiale o edycji szablonu produktu WooCommerce. Tam pokażemy, jak wizualnie spiąć całość menu z wyglądem produktu.
Krok 5: Ustaw lokalizacje menu i sprawdź wersję mobilną
Ostatni krok to przypisanie menu do konkretnej lokalizacji menu na stronie. Wróć do zakładki „Wygląd → Menu” i zaznacz, gdzie chcesz, by menu się wyświetlało. Najczęściej wybierane opcje to: menu górne w sklepie, menu stopki sklepu i ewentualnie menu boczne WooCommerce. Każdy motyw może mieć inne nazwy lokalizacji – to normalne.
Po przypisaniu kliknij „Zapisz menu” i przejdź na stronę główną, żeby zobaczyć efekt. Sprawdź, czy każda pozycja działa – klikając po kolei w linki. Jeżeli jakieś elementy nie prowadzą tam, gdzie trzeba, wróć do edytora i popraw linki.
Teraz skup się na wersji mobilnej. Otwórz stronę na smartfonie i zobacz, jak działa reakcja na kliknięcia w menu – czy elementy się rozwijają, czy nie nachodzą na logo, czy przycisk hamburgera jest widoczny. Jeśli coś się nie zgadza, popraw CSS lub wtyczkę odpowiedzialną za menu mobilne.
Gdy wszystko wygląda i działa dobrze, menu Twojego sklepu jest gotowe do działania. A jeśli potrzebujesz pomocy przy dalszej optymalizacji interfejsu i testowaniu motywów, zobacz artykuł edycja szablonu koszyka WooCommerce – to kolejny krok w stronę sklepu, który naprawdę sprzedaje.
Twoje menu to nawigacyjny kompas sklepu
Jak widzisz, konfiguracja menu WooCommerce nie musi być skomplikowana. Chodzi o logikę, prostotę i wygodę użytkownika. Gdy poprawnie ustawisz nawigację, poprawia się czas przebywania na stronie, konwersje i ogólny odbiór marki.
Krótko mówiąc – menu to nie detal, tylko strategiczny punkt.
A jeśli czujesz, że chcesz mieć stronę, która nie tylko działa, ale i przyciąga klientów – zajrzyj do nas. Dobre Zasięgi tworzą strony internetowe Szczecin dopasowane do Twojego biznesu – funkcjonalne, responsywne i gotowe na rozwój. Bo dobra strona to strategia, nie przypadek.
FAQ – Najczęstsze pytania o menu WooCommerce
Jak zrobić osobne menu tylko dla sklepu WooCommerce?
Wystarczy utworzyć nowe menu w sekcji Wygląd → Menu i przypisać je do lokalizacji „Sklep”. Następnie dodaj do niego kategorie, produkty i strony związane ze sklepem. W ten sposób oddzielisz menu sklepu od reszty witryny.
Czy mogę mieć dwa menu w nagłówku?
Tak, jeśli motyw to umożliwia. Wiele szablonów pozwala mieć osobno menu górne (np. logowanie, koszyk) i dolne (nawigacyjne). W ustawieniach lokalizacji możesz przypisać oba.
Dlaczego moje menu nie pokazuje stron WooCommerce?
Prawdopodobnie nie zostały dodane poprawnie lub WooCommerce nie stworzył domyślnych stron. W takim przypadku stwórz je ręcznie z poziomu Ustawień WooCommerce → Zaawansowane → Strony.
Jak dodać ikonki do pozycji w menu WooCommerce?
Można to zrobić wykorzystując wtyczkę np. Menu Icons by ThemeIsle. Dzięki niej dodasz małe grafiki przy każdej pozycji menu – świetny detal dla UX.
Czy można ustawić menu zależne od języka w WooCommerce?
Tak, z pomocą wtyczek wielojęzycznych jak WPML czy Polylang. Każdy język może mieć swoje menu z dopasowanymi etykietami.
Czy mogę dodać wyszukiwarkę w menu WooCommerce?
Tak. Wiele motywów ma widget „Search” – wystarczy go dodać w Personalizuj → Widżety → Menu. Możesz też użyć wtyczek rozszerzających wyszukiwanie po produktach.
Jak ustawić menu w stopce z linkami do regulaminu i polityki prywatności?
Tworzysz nowe menu o nazwie „Stopka”, dodajesz strony informacyjne i przypisujesz je do lokalizacji „Footer”. W ten sposób budujesz zaufanie klientów i spełniasz wymogi prawne.
