Prowadząc sklep internetowy, w którym dostępna jest większa ilość produktów, kluczowe jest zapewnienie klientom łatwego i szybkiego sposobu na znalezienie konkretnych produktów, które ich interesują. W dobie rosnącej konkurencji i coraz większych oczekiwań konsumentów, istotne jest, aby doświadczenie zakupowe było jak najbardziej przyjazne i efektywne.

Funkcjonalność pozwalająca na precyzyjne filtrowanie produktów nie tylko zwiększa satysfakcję klientów, ale również przyczynia się do wyższych współczynników konwersji i lojalności kupujących. Dzięki odpowiednio stworzonemu systemowi filtrów, użytkownicy mogą szybko odnaleźć produkty spełniające ich specyficzne wymagania, co znacznie poprawia ogólną jakość obsługi w Twoim sklepie.

Dlatego w tym artykule pochylimy się nad tym tematem, sprawdzimy co potrzebujemy do stworzenia filtrów, oraz przetestujemy dwa rozwiązania.

Dodawanie atrybutów w CMS WordPress

Kluczową kwestią, aby móc filtrować produktu po ich parametrach, jest dodane atrybutów w każdym produkcie. Jeżeli to już mamy zrobione (ze względów że wykorzystujemy atrybuty, do wypisywania w produkcie jego szczegółów w tabeli – to rewelacja), temat będzie szybciutki. W przypadku, gdy jednak nie mamy atrybutów dodanych w naszych produktach, no niestety będzie trzeba to nadrobić.

Dodawanie atrybutów produktów w WooCommerce w CMS WordPress jest kluczowym krokiem do organizowania i filtrowania produktów.

Jak dodać atrybuty w produkcie?

Najpierw musimy zalogować się do kokpitu WordPressa i przejść do sekcji “Produkty” -> “Atrybuty”. W tej sekcji możemy dodawać nowe atrybuty, takie jak kolor, rozmiar czy materiał. Wprowadzamy nazwę atrybutu oraz slug (przyjazny dla URL) oraz opcjonalnie opis. Po utworzeniu atrybutu wybieramy opcję “Dodaj atrybut”, aby go zapisać.

Kolejnym krokiem jest dodanie terminów do nowo utworzonego atrybutu. W sekcji atrybutów wybieramy kolumnę “Warunki” obok każdego atrybutu i klikamy na nie. Następnie dodajemy terminy, które będą pasować do tego atrybutu, na przykład różne kolory lub rozmiary. Powtarzamy ten proces dla wszystkich potrzebnych terminów. Jeżeli większość produktów korzysta z tych samych atrybutów, to na pewno ta kwestia przyśpieszy aktualizacje produktów.

Po dodaniu atrybutów i ich terminów, możemy je przypisać do produktów. Przechodzimy do sekcji “Produkty” -> “Wszystkie produkty” i wybieramy pierwszy produkt, który chcemy edytować. W sekcji “Dane produktu” przechodzimy do zakładki “Atrybuty”. Wybieramy atrybut z rozwijanego menu, a następnie klikamy “Dodaj”. Dopasowujemy odpowiednie terminy z listy i zapisujemy zmiany.

Powtarzamy ten proces dla wszystkich produktów, które mają atrybuty, aby umożliwić skuteczne filtrowanie i lepszą organizację sklepu internetowego.

Użycie wbudowanych widżetów WooCommerce

Jak już mamy uzupełnione szczegóły produktu (atrybuty) w każdym produkcie, możemy przejść do ich filtrowania. Na pierwszy strzał idzie wbudowana funkcjonalność, w naszym systemie CMS. Użycie wbudowanych widżetów WooCommerce jest prostym i skutecznym sposobem na filtrowanie produktów po atrybutach.

Aby użyć wbudowane narzędzie, przechodzimy do sekcji “Wygląd” -> “Widżety” i odszukujemy widżet “Filtruj produkty po atrybutach” oraz dodajemy do wybranej strefy widżetów, na przykład paska bocznego. Następnie z prawej strony, wybieramy atrybut, po którym chcemy filtrować produkty (na przykład kolor) i ustawiamy sposób wyświetlania opcji filtrowania, aby najlepiej pasował do układu szablonu serwisu internetowego.

Dzięki tym prostym krokom możemy łatwo umożliwić swoim klientom filtrowanie produktów według preferowanych cech. Wbudowane widżety WooCommerce są intuicyjne i nie wymagają dodatkowego kodowania, co czyni je idealnym rozwiązaniem dla większości użytkowników. Mają jednak swoje wady, bardzo mało opcji konfiguracji, co zmusza nas w większości przypadków do pójścia na kompromisy. Wygląd tych pól należy również określać za pomocą kodu CSS, w szablonie potomnym – lub w motywie, o ile pozwala na dodatkowe CSS’y.

Możemy być pewni, że użycie tych narzędzi zwiększa użyteczność Twojego sklepu, pomagając klientom szybko znaleźć produkty spełniające ich specyficzne wymagania.

Jak to zrobić w praktyce?

  1. Przejdź do “Wygląd” -> “Widżety”. Dodaj widżet “Filtruj produkty po atrybutach” do jednej z dostępnych stref widżetów (np. pasek boczny).
  2. Wybierz atrybut, po którym chcesz filtrować (np. kolor, rozmiar).
  3. Skonfiguruj widżet według swoich potrzeb (np. sposób wyświetlania, liczba opcji).

Wtyczki do zaawansowanego filtrowania

Alternatywnie mamy również możliwość wykorzystania modułu o nazwie “Filter Everything — Product Filter & WordPress Filter”. Moduł ten umożliwia użytkownikom CMS WordPress’a stworzenie intuicyjnych i skutecznych filtrów produktów oraz treści. Dzięki niemu, zarządzanie dużymi ilościami treści staje się znacznie prostsze, a nawigacja po stronie bardziej przyjazna dla użytkowników. Moduł umożliwia tworzenie dynamicznych i responsywnych filtrów, które dostosowują się do różnych urządzeń i rozmiarów ekranów.

Moduł oferuje szeroką gamę opcji filtrowania, w tym:

  • Filtrowanie po atrybutach produktów (np. rozmiar, kolor, marka)
  • Filtrowanie po kategoriach, tagach i taksonomiach
  • Filtrowanie po cenie, dostępności i innych meta danych

Instalacja i testy modułu

Konfiguracja moduły jest prosta, a dodatkowo w języku polskim – co nie powinno stworzyć dodatkowych problemów.

W pierwszej kolejności po zainstalowaniu modułu, w panelu WP odszukujemy w lewej belce pozycje “Filtry” i wybieramy opcję “Dodaj nowy”:

W tym miejscu wybieramy jakie wartości dokładnie ma analizować:

Po uzupełnieniu wszystkich filtrów dla każdego atrybutu, zapisujemy nasze zmiany i wklejamy shortcode do naszego szablonu: “[fe_widget]

Finalnie na stronie testowej (w naszym przypadku), mogłoby to wyglądać w ten sposób:

Działa, po wybraniu interesującego nas zakresu mamy wyświetlone jedynie produkty spełniające nasze kryteria.

Podsumowanie

Moduł Filter Everything to potężne narzędzie, które znacząco ułatwia zarządzanie dużymi zbiorami produktów i treści na stronach WordPress. Jednak pomimo wielu pozytywnych cech, nie od razu musicie po niego sięgać. Na wstępie zalecam przetestować narzędzia wbudowane, być może wystarczą i nie będzie konieczności obciążania dodatkowym modułem naszego serwisu internetowego.

Jeżeli macie inne pytania odnośnie tworzenia stron internetowych, administracji stron internetowych lub pozycjonowaniem stron śmiało piszcie do nas.

Mateusz Adamski

Mateusz Adamski

Frontend Developer, Specjalista SEO. Od 2009 roku zajmuję się pozycjonowaniem oraz optymalizacją stron internetowych. Od 2012 roku specjalizuję się w tworzeniu stron i sklepów internetowych opartych na systemach CMS WordPress oraz Prestashop. Posiadam dobrą znajomość HTML5, CSS3, Bootstrap. Dysponuję również dużym doświadczeniem z programami Adobe Photoshop, Dreamweaver oraz CorelDRAW. Prywatnie jestem dużym fanem fotografii oraz motoryzacji. Od 2013 roku udzielam się jako klubowicz oraz moderator ogólnopolskiego klubu motoryzacyjnego. Masz jakieś pytania? Napisz do nas.