Zaufane samouczki WordPress, kiedy ich najbardziej potrzebujesz.
Przewodnik dla początkujących po WordPressie
Puchar WPB
25 milionów+
Witryny korzystające z naszych wtyczek
16+
Lata doświadczenia z WordPressem
3000+
Samouczki WordPress od ekspertów

Jak skonfigurowałem filtry produktów WooCommerce i przestałem tracić klientów

Kiedy po raz pierwszy dodałem filtry produktów do mojego sklepu WooCommerce, była to katastrofa. Wyglądały, jakby zostały zaprojektowane w 1999 roku, bardziej myliły klientów, niż pomagali, a co najgorsze, zepsuły moją stronę płatności. Musiałem je usunąć w ciągu kilku godzin.

Ale wiedziałem, że mój sklep potrzebuje filtrów. Kiedy masz setki produktów, klienci szukają sposobu na szybkie zawężenie swoich wyborów. Bez odpowiedniego filtrowania czują się przytłoczeni i odchodzą, zabierając ze sobą swoje pieniądze.

Więc podwinąłem rękawy i przetestowałem każde główne rozwiązanie do filtrowania WooCommerce, jakie mogłem znaleźć. Po tygodniach testów znalazłem najlepsze wtyczki: łatwe w konfiguracji, piękne w wyglądzie i, co najważniejsze, pomagają klientom znaleźć (i kupić) to, czego potrzebują.

W tym przewodniku pokażę, jak skonfigurowałem moje filtry produktów WooCommerce, abyś i Ty mógł przestać tracić potencjalnych klientów.

Jak skonfigurowałem filtry produktów WooCommerce i przestałem tracić klientów

🧑‍💻 W skrócie: Ten przewodnik pokazuje dwa sposoby dodawania filtrów produktów w WooCommerce. WPFilters jest świetny, jeśli chcesz nowoczesnych filtrów w stylu Amazon. Filter Everything to prosta, darmowa opcja, jeśli potrzebujesz tylko podstawowego filtrowania.

Dlaczego warto dodać filtry produktów WooCommerce?

Filtry produktów ułatwiają klientom znalezienie dokładnie tego, czego szukają. Zamiast przewijać długie listy produktów, mogą zawęzić wyniki według ceny, rozmiaru, koloru, oceny i innych – za pomocą zaledwie kilku kliknięć.

Ma to znaczenie, ponieważ słaba nawigacja często prowadzi do porzucenia koszyka i utraty sprzedaży. Kiedy odwiedzający nie mogą szybko znaleźć tego, czego potrzebują, wielu z nich odchodzi bez zakupu.

Ponadto dodanie filtrów do Twojego sklepu WooCommerce może znacznie obniżyć współczynnik odrzuceń. Klienci spędzają więcej czasu na przeglądaniu i faktycznie finalizują zakupy.

Dodawanie filtrów produktów pomaga poprawić zarówno doświadczenie zakupowe, jak i wydajność Twojego sklepu. Oto jak:

  • ⏱️ Oszczędzaj czas klientów – Kupujący mogą w ciągu kilku sekund zawęzić setki produktów do kilku pasujących, co sprawia, że przeglądanie jest szybsze i mniej frustrujące.
  • 📈 Zwiększ sprzedaż – Kiedy klienci szybko znajdują odpowiedni produkt, chętniej dodają go do koszyka i kończą proces realizacji zakupu.
  • 🧑‍💻 Zwiększ czas spędzany na stronie – Jasne filtry sprawiają, że odwiedzający przeglądają Twój sklep zamiast szukać gdzie indziej.
  • 📱 Popraw zakupy mobilne – Filtry znacznie ułatwiają użytkownikom mobilnym przeglądanie katalogu bez niekończącego się przewijania na małym ekranie.
  • 🌟 Buduj zaufanie klientów – Czysty, dobrze zorganizowany sklep pokazuje, że dbasz o doświadczenie zakupowe, co pomaga budować zaufanie do Twojej marki.

Mając to na uwadze, przeprowadzę Cię przez proces dodawania filtrów produktów WooCommerce. Oto wszystko, co omówię w tym przewodniku:

🛑 Ważne: Filtry produktów opierają się na Atrybutach Produktów. Upewnij się, że faktycznie dodałeś atrybuty, takie jak Rozmiar, Kolor lub Cena, do swoich produktów w WooCommerce. Jeśli jeszcze tego nie zrobiłeś, zapoznaj się z naszym przewodnikiem na temat dodawania tagów, atrybutów i kategorii produktów.

Metoda 1: Dodaj filtr produktów WooCommerce w stylu Amazon (zalecane)

WPFilters to najlepsza wtyczka do filtrowania WooCommerce – jest przyjazna dla początkujących i świetnie wygląda od razu po instalacji. Nie musisz być programistą, aby ją skonfigurować, a zapewnia ona Twojemu sklepowi czyste filtry w stylu Amazon, które ułatwiają klientom znalezienie tego, czego szukają.

Ponadto, doskonale współpracuje z każdym motywem WooCommerce, co czyni ją bezpiecznym wyborem, niezależnie od używanego motywu.

Więcej informacji na temat tego narzędzia znajdziesz w naszej szczegółowej recenzji WPFilters.

Krok 1: Zainstaluj i aktywuj WPFilters

Aby rozpocząć filtrowanie produktów, musisz zainstalować WPFilters.

Najpierw musisz założyć konto WPFilters na stronie SearchWP. SearchWP to firma stojąca za WPFilters i oferuje niezawodne wsparcie, jeśli kiedykolwiek będziesz potrzebować pomocy.

Kliknij przycisk Get WPFilters Now, wybierz plan i postępuj zgodnie z instrukcjami, aby zakończyć proces zakupu.

Strona główna WPFilters

💡 Uwaga: SearchWP to wtyczka premium, która daje Ci pełną kontrolę nad tym, jak działa wyszukiwanie na Twojej stronie WordPress, w tym funkcje filtrowania za pośrednictwem WPFilters. Istnieje również darmowa wtyczka o nazwie SearchWP Live AJAX Search, która pozwala dodawać wyniki wyszukiwania na żywo.

Po zarejestrowaniu zaloguj się do panelu swojego konta i pobierz plik ZIP wtyczki. Znajdziesz go w obszarze pobierania na swoim koncie.

Teraz jesteś gotowy do zainstalowania i aktywowania wtyczki. W panelu administracyjnym WordPress przejdź do Wtyczki » Dodaj wtyczkę.

Podmenu Dodaj wtyczkę pod Wtyczkami w obszarze administracyjnym WordPressa

Na następnym ekranie kliknij „Wyślij wtyczkę”, aby otworzyć narzędzie do przesyłania plików.

Następnie kliknij przycisk „Wybierz plik”, wybierz plik zip z lokalnego komputera i kliknij „Zainstaluj teraz”.

Wybierz plik zip wtyczki do przesłania i zainstalowania w WordPress

Nie zapomnij kliknąć „Aktywuj”, aby zakończyć proces instalacji. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem dla początkujących na temat jak zainstalować wtyczkę WordPress.

Po aktywacji WPFilters automatycznie uruchomi kreatora konfiguracji, który pomoże Ci zacząć. Kliknij przycisk „Rozpocznij”.

Przyjazny dla użytkownika kreator konfiguracji WPFilters

Ten kreator przeprowadzi Cię przez podstawową konfigurację i połączy wtyczkę z Twoim sklepem WooCommerce.

Po prostu postępuj zgodnie z instrukcjami wyświetlanymi na ekranie w kreatorze konfiguracji. Proces zajmuje tylko minutę lub dwie i zapewnia, że wszystko jest poprawnie skonfigurowane dla Twojego sklepu.

Krok 2: Utwórz nowy element filtru dla swoich produktów WooCommerce

Teraz, gdy WPFilters jest zainstalowany, czas utworzyć pierwszy element filtrujący. Element filtrujący to po prostu jedna opcja filtrowania, z której mogą korzystać klienci, na przykład filtrowanie według koloru lub rozmiaru.

Aby rozpocząć, przejdź do WPFilters » Elementy w swoim panelu administracyjnym WordPress. Następnie kliknij przycisk „Dodaj nowy” na górze strony.

Dodawanie nowego elementu WPFilters

Najpierw musisz wprowadzić nazwę dla swojego filtru.

Ta nazwa służy jedynie do Twojej referencji w obszarze administracyjnym. Ale polecam wybrać coś opisowego, na przykład „Kolor” lub „Filtr”, dla łatwiejszej organizacji.

Nazywanie elementu WPFilters

Następnie wybierzesz typ pola filtru, który określi, w jaki sposób klienci będą wchodzić w interakcję z tym filtrem.

WPFilters oferuje kilka opcji:

  • Checkbox – Pozwól klientom wybierać wiele opcji jednocześnie
  • Radio – Pozwól na wybór tylko jednej opcji naraz
  • Dropdown – Wyświetl opcje w menu rozwijanym, aby zaoszczędzić miejsce
  • Dropdown (Multi Select) – Typ listy rozwijanej, który pozwala na wielokrotny wybór
  • Wyszukiwanie – Dodaj pole wyszukiwania, aby klienci mogli wpisać, czego szukają
  • Slider – Idealny do zakresów cenowych lub wartości liczbowych
  • Reset – Dodaj przycisk do wyczyszczenia wszystkich wybranych filtrów

Dla większości atrybutów produktu, takich jak kolor, rozmiar czy marka, polecam użycie opcji pola wyboru. Jest to najłatwiejszy sposób dla klientów i pozwala im na łączenie wielu wyborów.

Wybieranie pola filtra produktu w WPFilters

Po wybraniu typu filtra, musisz dodać źródło danych. Mówi to WPFilters, według jakich informacji o produkcie filtrować, takich jak kategorie produktów, tagi lub niestandardowe atrybuty.

Kliknij listę rozwijaną źródła danych i wybierz atrybut, według którego chcesz filtrować. Jeśli skonfigurowałeś atrybuty produktów w WooCommerce, pojawią się one na tej liście.

Wybór źródła danych dla elementu WPFilters
Krok 3: Dostosuj swój filtr produktów WooCommerce

Po utworzeniu elementu filtra możesz teraz dostosować jego wygląd i zachowanie w swoim sklepie. WPFilters daje Ci kilka opcji, aby filtr pasował do Twojej marki i poprawił doświadczenie użytkownika.

Możesz zacząć od dostosowania ustawień w sekcji „Kontener”, gdzie możesz:

  • Pokaż tytuł – Aby wyświetlić lub ukryć nazwę filtra nad opcjami.
  • Rozwijane – Przydatne, jeśli masz wiele filtrów na jednej stronie. Klienci mogą rozwijać lub zwijać każdy filtr, aby zachować czysty układ.
  • Zobacz więcej/mniej – Ogranicz liczbę opcji wyświetlanych na początku i pozwól klientom rozwinąć listę, jeśli chcą zobaczyć więcej. Pomaga to zapobiec sytuacji, w której długie listy filtrów zdominują stronę.
  • Poziomy – Wyświetlaj opcje filtra w rzędzie zamiast w kolumnie. Działa to dobrze w przypadku prostych filtrów z kilkoma wyborami, takimi jak rozmiary.

Oto jak dostosowuję moje ustawienia „Kontenera”:

Konfiguracja kontenera elementu

Następnie przejdź do sekcji ustawień Elementu.

  • Liczba elementów – Pokazuje, ile produktów pasuje do każdej opcji. Na przykład klienci zobaczą Niebieski (15) lub Czerwony (8), dzięki czemu będą wiedzieć, co jest dostępne, zanim klikną.
  • Puste – Ukrywa opcje bez pasujących produktów, co utrzymuje czystość filtrów i pozwala uniknąć ślepych zaułków.
  • Hierarchiczne – Grupuje powiązane opcje, pozwalając klientom na przechodzenie od głównej kategorii do podkategorii, co czyni je idealnymi dla większych sklepów.

Po dostosowaniu tych ustawień kliknij „Zapisz zmiany”, aby zapisać swoją konfigurację.

Konfiguracja ustawień elementów

WPFilters zaktualizuje następnie podgląd na żywo w tym kreatorze.

Jeśli coś nie wygląda tak, jak powinno, możesz wrócić i dostosować ustawienia, aż będą idealne.

Podgląd filtra kolorów na żywo w kreatorze WPFilters
Krok 4: Osadź filtr w swoim sklepie

Teraz, gdy Twój filtr jest gotowy, czas dodać go do swojego sklepu internetowego. WPFilters daje Ci elastyczne opcje dotyczące miejsca wyświetlania filtrów.

Możesz dodać filtry bezpośrednio do strony sklepu, gdzie klienci przeglądają produkty, lub umieścić je w pasku bocznym, aby mieć do nich łatwy dostęp na każdej stronie.

Pokażę Ci obie metody, abyś mógł wybrać tę, która najlepiej pasuje do Twojego sklepu.

Opcja 1: Wyświetlanie filtru atrybutów produktu na stronie sklepu WooCommerce

Jeśli używasz motywu blokowego (takiego jak Divi lub Twenty Twenty-Five), możesz po prostu otworzyć swoją stronę Sklepu w Edytorze witryny i przeciągnąć blok Filtra na miejsce.

💡 Uwaga: Jeśli używasz motywu klasycznego, zazwyczaj nie możesz edytować układu strony Sklepu bezpośrednio, ponieważ WooCommerce nim zarządza. W przypadku motywów klasycznych zdecydowanie zalecam dodanie widżetu filtra do paska bocznego (patrz Opcja 2).

Najpierw w wizualnym kreatorze WPFilters kliknij przycisk „Osadź”.

Przycisk osadzania w kreatorze elementów WPFilters

Następnie wybierz metodę Gutenberg Block z dostępnych opcji.

Następnie wybierzesz, czy chcesz utworzyć nową stronę, czy wybrać istniejącą.

Kreator osadzania z trybem osadzania i polami strony docelowej

Jeśli masz już skonfigurowaną stronę sklepu, po prostu wybierz ją z menu rozwijanego.

Kliknij „Zaczynajmy!”

Osadzanie filtrów na stronie sklepu

Wizualny kreator otworzy następnie Twoją stronę sklepu w edytorze bloków.

Następnie po prostu kliknij ikonę „+”, aby dodać blok Elementu WPFilters.

Dodawanie elementu WPFilters w edytorze bloków

Z panelu ustawień bloku wybierz utworzony właśnie element filtru.

Zobaczysz, jak pojawi się natychmiast w Twoim edytorze treści.

Wybierz element WPFilters do osadzenia

Możesz powtórzyć ten proces dla wszystkich utworzonych elementów WPFilters.

Po zakończeniu kliknij „Zapisz zmiany” lub „Aktualizuj”, aby opublikować swój filtr.

To wszystko – Twój filtr produktów WPFilters jest już dostępny na stronie sklepu i gotowy do użycia przez klientów:

Elementy filtrów WPFilters w sklepie WooCommerce na żywo
Opcja 2:  Wyświetl filtr atrybutów produktów w pasku bocznym

Dodawanie filtrów do paska bocznego to kolejna świetna opcja, zwłaszcza jeśli chcesz, aby były widoczne na wielu stronach. Pasek boczny zapewnia dostęp do filtrów, nie zajmując miejsca w głównym obszarze treści.

Aby dodać filtr do paska bocznego, przejdź do Wygląd » Widżety w swoim obszarze administracyjnym. Otworzy to narzędzie do dostosowywania paska bocznego, gdzie możesz zarządzać zawartością paska bocznego.

Dostęp do edytora widżetów

💡 Uwaga: Jeśli nie widzisz menu Widżety, prawdopodobnie używasz motywu blokowego. W takim przypadku użyj Opcji 1, aby edytować szablon swojej witryny bezpośrednio.

Stąd możesz poszukać paska bocznego WooCommerce na liście dostępnych obszarów widżetów. Kliknij go, aby rozwinąć pasek boczny i zobaczyć, jakie widżety się tam aktualnie znajdują.

Następnie kliknij ikonę plusa, aby dodać nowy widżet, a następnie dodaj widżet Element WPFilters.

Dodawanie elementu WPFilters do paska bocznego WooCommerce

W panelu Ustawienia Elementu, który się pojawi, wybierz swój filtr z menu rozwijanego.

Możesz dodać wiele widżetów filtrów, aby zapewnić klientom kilka opcji filtrowania.

Wybieranie elementu WPFilters do dodania

Po wybraniu filtra kliknij „Zaktualizuj” lub „Opublikuj”, aby zapisać zmiany na pasku bocznym.

Twój filtr będzie teraz widoczny na wszystkich stronach WooCommerce, które wyświetlają ten pasek boczny:

Filtr WPFilters na stronie Sklep
Krok 5: Przetestuj swój filtr produktów WooCommerce

Zanim skończysz, poświęć kilka minut na przetestowanie swoich filtrów. Otwórz swój sklep w oknie incognito, aby zobaczyć go tak, jak widzą go Twoi klienci.

Wypróbuj różne kombinacje filtrów, aby upewnić się, że wyniki są poprawnie aktualizowane. Na przykład, wybierz „Zielony” i sprawdź, czy pojawiają się tylko pasujące produkty.

Testowanie filtra produktów WPFilter

Dobrym pomysłem jest również przetestowanie każdego dodanego atrybutu, aby upewnić się, że logika filtrowania działa płynnie. Zwróć również uwagę na liczbę produktów obok każdej opcji. Powinny się one zmieniać w miarę stosowania lub usuwania filtrów.

Jeśli coś wygląda nie tak, sprawdź ponownie swoje atrybuty produktów w WooCommerce. Gdy wszystko będzie działać płynnie, Twoje filtry będą gotowe, a zakupy w Twoim sklepie staną się znacznie łatwiejsze.

Metoda 2: Dodaj prosty filtr produktów WooCommerce (metoda darmowa)

Jeśli szukasz prostszej alternatywy dla WPFilters, to Filter Everything jest dobrą opcją. Wybrałem ten wtyczkę, ponieważ jest lekka i oferuje darmową wersję ze wszystkimi ważnymi funkcjami filtrowania.

Należy pamiętać, że Filter Everything działa i wygląda lepiej na motywach klasycznych. Nie obsługuje bloków, więc będziesz musiał użyć krótkiego kodu, który jest zazwyczaj mniej elastyczny.

Krok 1: Zainstaluj i skonfiguruj wtyczkę

Najpierw przejdź do Wtyczki » Dodaj wtyczkę w swoim obszarze administracyjnym WordPress.

Podmenu Dodaj wtyczkę pod Wtyczkami w obszarze administracyjnym WordPressa

Na następnym ekranie użyj paska wyszukiwania, aby szybko znaleźć wtyczkę Filter Everything.

Następnie kliknij „Zainstaluj teraz” i „Aktywuj” w wynikach wyszukiwania, aby zakończyć proces.

Instalacja Filter Everything

Aby uzyskać pomoc, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Filter Everything » Ustawienia , aby skonfigurować kilka ważnych opcji. Te ustawienia kontrolują, jak filtry działają na stronie front-end Twojego sklepu.

Konfiguracja ustawień Filter Everything

Najpierw możesz skonfigurować zachowanie na urządzeniach mobilnych i ustawienia AJAX:

  • Urządzenia mobilne – Wybierz, czy filtry mają być zwinięte na urządzeniach mobilnych, czy wyświetlane tak jak na komputerach stacjonarnych. Zalecam pozostawienie ich zwiniętych i przeniesienie na górę, aby łatwiej je było znaleźć i nie zajmowały zbyt wiele miejsca na mniejszych ekranach.
  • AJAX – Wybierz, czy filtry mają aktualizować wyniki natychmiast, czy przeładowywać stronę po każdym wyborze. Chcesz to włączyć, aby produkty aktualizowały się natychmiast bez przeładowywania całej strony, co zapewnia szybsze zakupy.

Zobaczysz również „HTML ID lub klasa kontenera postów”. Informuje to wtyczkę, która część strony powinna zostać zaktualizowana po zastosowaniu filtrów. Domyślnie jest ustawione na #primary i w większości przypadków możesz bezpiecznie pozostawić je bez zmian.

Konfiguracja mobilna i AJAX

Na koniec przejdź do sekcji „Inne”, aby dopracować kilka opcji wizualnych i zaawansowanych:

  • Kolor podstawowy widżetu – Wpływa na przyciski filtrów i pola wyboru, więc wybierz kolor pasujący do schematu kolorów Twojej marki.
  • Maksymalna wysokość kontenera filtrów, px – Ustawia maksymalną wysokość obszaru filtrów. Jeśli lista stanie się zbyt długa, stanie się przewijalna zamiast obniżać stronę.
  • Integracja zaznaczonych filtrów (chipów) – Pozwala wyświetlać aktywne filtry jako małe „chipy”. Możesz wybrać, gdzie się pojawią, dodając nazwę lokalizacji, taką jak before_main_content.
  • Tryb debugowania – Wyświetla pomocne komunikaty, jeśli coś nie działa, co może być przydatne podczas konfiguracji.

Oto jak to wygląda na moim ekranie:

Sprawdzanie sekcji Inne ustawienia

Po dostosowaniu tych ustawień kliknij „Zapisz zmiany”, aby zapisać swoją konfigurację.

Krok 2: Utwórz zestaw filtrów

Teraz czas na utworzenie zestawu filtrów, który jest po prostu grupą wielu filtrów działających razem. Na przykład, możesz mieć filtry dla kategorii, kolorów i rozmiarów w jednym zestawie.

Przejdź do Filter Everything » Filter Sets w swoim panelu WordPress. Tutaj będziesz organizować i zarządzać wszystkimi filtrami produktów.

Przejście do sekcji Zestawy filtrów

Spowoduje to przejście do kreatora zestawów filtrów.

Kliknij przycisk „Dodaj nowy zestaw filtrów”, aby rozpocząć tworzenie pierwszego zestawu.

Dodaj zestaw filtrów

Następnie możesz nadać mu opisową nazwę.

Jest to tylko do Twojej wiadomości, ale zalecam użycie opisowej nazwy, takiej jak „Filtry produktów” lub po prostu „Filtry”, dla łatwiejszej organizacji.

Nazewnictwo zestawu filtrów

Następnie wybierz typ posta, który chcesz filtrować – strony, wpisy, produkty lub niestandardowe typy postów.

Ponieważ pracujesz z produktami WooCommerce, wybierz „Produkt” z listy rozwijanej i kliknij „Dodaj filtr”.

Wybór produktu jako typ posta i kliknięcie Dodaj

Teraz skonfigurujesz swój pierwszy indywidualny filtr w tym zestawie:

  • Filtruj według – wybierz „Kategorie produktów” z menu rozwijanego. To mówi wtyczce, aby filtrowała Twoje produkty na podstawie przypisanych im kategorii.
  • Tytuł filtra – Użyj czegoś w stylu Kategorie lub Kategorie produktów, cokolwiek najlepiej pasuje do Twojego sklepu.
  • Nazwa zmiennej dla adresu URL – to pole jest wypełniane automatycznie czymś w stylu categories. Pomaga tworzyć czyste, przyjazne dla SEO adresy URL, gdy klienci korzystają z Twoich filtrów.
  • Wyświetl w widżecie – menu rozwijane dobrze sprawdza się w przypadku kategorii, ponieważ produkty mogą należeć do wielu kategorii, a także ułatwia dostrzeganie podkategorii.

💡 Uwaga: Filter Everything oferuje kilka opcji wyświetlania w zależności od Twojego planu:

  • Pola wyboru
  • Suwaki zakresu
  • Listy
  • Pola wyszukiwania
  • Ocena
  • Menu rozwijane

Możesz wybrać styl, który najlepiej pasuje do projektu Twojego sklepu i potrzeb Twoich klientów.

Tworzenie filtra

Możesz dodać więcej filtrów do tego zestawu, klikając ponownie „Dodaj filtr”. Zalecam dodanie filtrów ceny, koloru, rozmiaru lub innych atrybutów produktu, z których korzysta Twój sklep.

Po dodaniu wszystkich potrzebnych filtrów kliknij „Opublikuj”, aby aktywować zestaw filtrów.

Przycisk Publikuj w Filter Everything
Krok 3: Dodaj filtry do swojego sklepu WooCommerce

Po utworzeniu zestawu filtrów możesz wyświetlić go w swoim sklepie WooCommerce. Filter Everything oferuje elastyczne opcje umieszczania filtrów.

Pokażę Ci, jak dodać filtry bezpośrednio do paska bocznego, aby były łatwo dostępne, lub do zawartości strony sklepu za pomocą bloków Gutenberg.

Opcja 1: Wyświetl prosty filtr produktów na pasku bocznym

Dodawanie filtrów do paska bocznego jest szybkie i działa świetnie, jeśli chcesz, aby były widoczne na wielu stronach WooCommerce. Pasek boczny zapewnia dostęp do filtrów, nie zajmując cennego miejsca na treści.

Przejdź do Wygląd » Widżety w swoim panelu administracyjnym WordPress. Otworzy to narzędzie do dostosowywania widżetów, gdzie zarządzasz całą zawartością paska bocznego.

Dostęp do edytora widżetów

💡 Uwaga: Jeśli nie widzisz tego menu, prawdopodobnie używasz nowoczesnego motywu blokowego i zamiast tego powinieneś użyć metody Edytora (Opcja 2).

W panelu widżetów wyszukaj obszar paska bocznego WooCommerce.

Następnie kliknij przycisk „+”, aby dodać widżet Filter Everything – Filter.

Dodawanie widżetu Filter Everything - Filtr

Ustawienia widżetu otworzą się automatycznie. Następnie możesz wybrać, co chcesz wyświetlić:

  • Tytuł – wyświetla tytuł filtra u góry widżetu.
  • Liczba znalezionych postów – Wyświetla, ile produktów pasuje do wybranych filtrów.
  • Wybrane terminy (Chip) – Wyświetla aktywne filtry jako małe chipy, dzięki czemu klienci mogą szybko zobaczyć, co jest zastosowane.
  • Układ poziomy – Wyświetla filtry w rzędzie zamiast w kolumnie, co dobrze sprawdza się w kompaktowych układach.

Oto, co zobaczysz na ekranie:

Opcje dostosowywania widżetu Filter Everything - Filtr

Możesz poeksperymentować z tymi ustawieniami, aby dopasować je do projektu Twojego sklepu.

Po zakończeniu kliknij „Aktualizuj”, aby opublikować swój widżet.

Aktualizacja widżetu

To wszystko!

Twoje filtry pojawią się teraz w pasku bocznym na wszystkich stronach, które wyświetlają ten obszar paska bocznego.

Filtr produktów Filter Everything w pasku bocznym
Opcja 2: Wyświetl prosty filtr produktów na stronie sklepu WooCommerce

Aby dodać filtry bezpośrednio do strony sklepu, użyj krótkiego kodu [fe_widget] w edytorze Gutenberg.

Jeśli jednak masz więcej niż 1 zestaw produktów, musisz dodać jego identyfikator w tym skrócie, na przykład [fe_widget id="123"]. Ten numer identyfikacyjny znajdziesz obok nazwy zestawu na stronie Filter Everything » Filter Sets.

Aby dodać filtr produktów, przejdź do Pages » All Pages , aby otworzyć stronę sklepu w edytorze bloków.

Edycja strony Sklep

🧑‍💻 Pro Tip: Jeśli nie masz pewności, która strona jest stroną Twojego sklepu, sprawdź w WooCommerce » Settings » Products.

W edytorze Gutenberg wklej wcześniej skopiowany skrót do zwykłego bloku akapitu.

Dodawanie skróconego kodu Filter Everything w edytorze bloków

Jeśli chcesz zobaczyć, jak to wygląda, po prostu podgląd strony. Powinny się one pojawić dokładnie tam, gdzie umieściłeś blok krótkiego kodu.

Gdy będziesz zadowolony z rozmieszczenia, kliknij „Update” lub „Publish”, aby zapisać zmiany.

Twoje filtry produktów są teraz aktywne na stronie sklepu:

Dodatkowa wskazówka: Dodaj inteligentne wyszukiwanie produktów WooCommerce

Teraz, gdy dodałeś filtry produktów, jest jeszcze jedna funkcja, która może przenieść nawigację Twojego sklepu internetowego na wyższy poziom: inteligentne wyszukiwanie produktów.

Podczas gdy filtry pomagają klientom przeglądać według określonych atrybutów, pasek inteligentnego wyszukiwania produktów pozwala im wpisać dokładnie to, czego szukają. Ta kombinacja daje kupującym elastyczność w znajdowaniu produktów w dowolny preferowany sposób.

Inteligentne wyszukiwanie produktów WooCommerce wykracza poza podstawowe wyszukiwanie WordPress. Rozumie atrybuty produktów, kategorie, SKU, a nawet dopasowania częściowe, aby szybko pokazać odpowiednie wyniki.

Tworzenie inteligentnego wyszukiwania produktów

Na przykład, jeśli ktoś szuka „niebieskich sneakersów”, inteligentne wyszukiwanie pokaże wszystkie niebieskie buty z Twojej kategorii sneakersów. Zwykłe wyszukiwanie WordPress może pominąć produkty, jeśli dokładne wyrażenie nie znajduje się w tytule.

Dodanie zarówno filtrów, jak i inteligentnego wyszukiwania oznacza, że masz wszystko pod kontrolą. Twoi klienci mogą robić zakupy tak, jak czują się komfortowo, co oznacza więcej zrealizowanych zakupów dla Ciebie.

Aby to skonfigurować, zapoznaj się z naszym szczegółowym przewodnikiem na temat tworzenia inteligentnego wyszukiwania produktów WooCommerce. Przeprowadzi Cię przez cały proces krok po kroku.

Często zadawane pytania dotyczące konfiguracji filtrów produktów WooCommerce

Jeśli nadal masz pytania dotyczące korzystania z filtrów produktów w WooCommerce, te szybkie odpowiedzi powinny pomóc.

Czy istnieje niezawodny i SZYBKI plugin do filtrowania produktów?

Tak, WPFilters jest jedną z najbardziej niezawodnych i najszybszych wtyczek do filtrowania produktów WooCommerce. Jest zbudowana specjalnie z myślą o szybkości i wykorzystuje technologię AJAX do aktualizacji wyników bez przeładowywania strony, zapewniając płynne działanie sklepu.

Najlepszy darmowy filtr produktów dla WooCommerce?

Darmowa wersja Filter Everything jest dobrą opcją. Obsługuje podstawowe filtry, takie jak kategorie, ceny i atrybuty, bez spowalniania witryny. Jedyną wadą jest to, że najlepiej działa z klasycznymi motywami.

Jak filtrować produkty WooCommerce według niestandardowych atrybutów?

Najpierw musisz utworzyć swoje atrybuty w Produkty » Atrybuty i przypisać je do swoich produktów. Następnie użyj pluginu filtrującego WooCommerce, takiego jak WPFilters, aby wyświetlić te atrybuty jako filtry na stronie Twojego sklepu.

Jak utworzyć stronę sklepu WooCommerce z wieloma filtrami?

Możesz dodać wiele widżetów filtrujących do paska bocznego swojego sklepu lub użyć pluginu filtrującego produkty, który pozwala łączyć filtry, takie jak cena, kategoria, ocena i atrybuty, w jednym panelu.

Jaki jest kod filtra produktów w WooCommerce?

WooCommerce nie zawiera pojedynczego skróconego kodu dla zaawansowanych filtrów. Większość funkcji filtrowania pochodzi z widżetów lub pluginów, które generują własne skrócone kody lub bloki, które można umieścić w dowolnym miejscu na stronie.

Następne kroki do ukończenia konfiguracji Twojego sklepu WooCommerce

Teraz, gdy filtry produktów WooCommerce są skonfigurowane, możesz zapoznać się z powiązanymi poradnikami, aby jeszcze bardziej ulepszyć swój sklep WooCommerce:

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak finansowany jest WPBeginner, dlaczego to ważne i jak możesz nas wesprzeć. Oto nasz proces redakcyjny.

Ostateczny zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi – kolekcji produktów i zasobów związanych z WordPress, które powinien mieć każdy profesjonalista!

Interakcje czytelników

1 CommentLeave a Reply

  1. Kiedy po raz pierwszy zobaczyłem WooCommerce, bardzo trudno mi było się po nim poruszać i cokolwiek skonfigurować. Filtry produktów były wymaganiem, które miało prawie każdy, kto rozważał sklep internetowy. I nie ma znaczenia, o jakie produkty chodzi – czy to odzież, czy materiały budowlane. Filtry produktów są po prostu pożądane w sklepie internetowym, a ja byłem zestresowany, ponieważ tak naprawdę nie wiedziałem, jak je zaimplementować w WooCommerce. Dzięki temu artykułowi dowiedziałem się, jak to zrobić, i teraz wreszcie posiadam umiejętność, o którą wszyscy mnie prosili. Mogę odhaczyć to z mojej listy rzeczy do zrobienia, których jeszcze muszę się nauczyć o WooCommerce. To był szczęśliwy dzień, kiedy znalazłem tę stronę, ponieważ przyszedłem tu jako początkujący, a wychodzę z tak wieloma rzeczami, których się nauczyłem.

Leave A Reply

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszą polityką komentowania, a Twój adres e-mail NIE zostanie opublikowany. Proszę NIE używaj słów kluczowych w polu nazwy. Prowadźmy osobistą i znaczącą rozmowę.