WooCommerce: Jak włączyć filtry produktów (tj. „Filtry Ajax”)?

Jeśli Twój sklep WooCommerce ma wiele produktów, klienci online mogą łatwo się zgubić. Może być zbyt wiele stron do odwiedzenia („stronnicowanie produktów”) przed znalezieniem produktu, którego szukają. Nie trzeba dodawać, że jest to ogromna strata dla Twojej firmy. Możliwe, że nigdy nie wrócą.

Jeśli robisz zakupy w popularnych witrynach e-commerce, takich jak Amazon i eBay, wiesz, że każdy z nich zawiera miliard produktów. Na szczęście, oprócz bardzo przydatnego paska wyszukiwania, witryny te udostępniają „ filtry produktów ” na pasku bocznym. Możesz doprecyzować według ceny, recenzji, tagu, kategorii itd.; witryna nie „odświeży się”, ale zamiast tego natychmiast zwróci przefiltrowane wyniki na tej samej stronie .

Są to tak zwane „ Ajax Product Filters ” (Ajax to zestaw aplikacji, które działają w tle bez wymuszania odświeżania strony internetowej). A jak właśnie udowodniły Amazon i eBay, te filtry są absolutnie niezbędne, jeśli masz ponad 100 produktów WooCommerce.

Na szczęście są do tego wtyczki. I są albo bezpłatne, albo całkiem tanie, jeśli porównasz ten niewielki koszt z potencjalnym zwrotem z inwestycji (ROI).

Poza tym, jeśli masz wiele produktów, masz już kilka kategorii produktów WooCommerce, tagi produktów, atrybuty produktów, niestandardowe pola produktów, ceny, stany magazynowe. Oznacza to, że wdrożenie Ajax Product Filters w Twoim sklepie WooCommerce może zająć tylko 10 minut : aktywuj wtyczkę, wybierz kryteria filtrowania, a Twoi użytkownicy automatycznie zobaczą płynny widżet filtra na pasku bocznym!

Jakie są więc najlepsze wtyczki „WooCommerce Ajax Product Filter”?

1. Domyślne widżety filtrów produktów WooCommerce (BEZPŁATNE)

Niespodzianka

WooCommerce domyślnie udostępnia widżety filtrów produktów. Aby użyć wbudowanych filtrów WooCommerce, przejdź do Wygląd > Widgety i przeciągnij i upuść następujące filtry na pasku bocznym: „ Filtruj produkty według atrybutu ”, „ Filtruj produkty według oceny ” i „ Filtruj produkty według ceny ”.

Niektóre z moich testowanych produktów mają atrybut o nazwie „Rozmiar”, więc ustawiłem widżet „Filtruj produkty według atrybutu”, aby filtrować rozmiary produktów. Wszystko odbywa się automatycznie, o ile Twoje produkty mają istniejące atrybuty. Teraz front-end wygląda tak:

W około 1 minutę udało mi się dodać filtry według atrybutu, oceny i „suwaka” ceny. Super łatwe. Istnieją jednak dwa główne problemy: te filtry WooCommerce nie są obsługiwane przez Ajax (stąd strona „ładuje się ponownie” po użyciu jednego z filtrów) i są zbyt ograniczone . Istnieją tylko 3 domyślne widżety, możesz mieć tylko listę lub listę atrybutów, masz tylko suwak ceny, a nie listę przedziałów cenowych jak Amazon… w zasadzie nie możesz wiele zrobić z tą konfiguracją.

Prawdopodobnie potrzebujesz bardziej zaawansowanych widżetów, więcej opcji projektowych, systemu opartego na Ajax i czegoś bardziej solidnego, ale elastycznego.

2. Wtyczka rozszerzonej nawigacji warstwowej z obsługą Ajax firmy WooCommerce (PREMIUM)

Ta oficjalna wtyczka WooCommerce to świetny pierwszy krok w kierunku perfekcyjnego filtrowania produktów. Ta wtyczka zapewnia lepszy UX i więcej opcji widżetów niż domyślne wbudowane widżety filtrów produktów innych niż Ajax.

Po aktywacji wtyczka Ajax-Enabled Enhanced Layered Navigation oferuje dodatkowy widżet, którego możesz użyć na stronach sklepu / archiwum / kategorii o nazwie „ WooCommerce Ajax Layered Nav ”.

Wspaniałą rzeczą w tym zaawansowanym widżecie jest to, że możesz zdecydować, jak wyświetlać filtr atrybutów w interfejsie użytkownika, tj. jako listę, pole wyboru, menu rozwijane lub selektor etykiet / próbki kolorów .

Szkoda, że ​​nie ma demo, do którego mógłbym cię skierować. Możesz użyć dowolnej liczby widżetów, ale nie ma filtra cen, filtra ocen, filtra zapasów itp. Dotyczy to tylko atrybutów (rozmiar, kolor itp.) .

Tak więc, o ile nie jest to wystarczające dla twoich celów, ta wtyczka nie jest kompletna.

3. Wtyczka WooCommerce Ajax Product Filter firmy YITH (FREE & PREMIUM)

Jeśli chodzi o YITH, wiesz, że mają wtyczkę WooCommerce do wszystkiego… nie trzeba dodawać, że sprzedają również zaawansowaną wtyczkę Ajax Product Filter.

Dobra wiadomość jest taka – jest to również darmowa wersja (która robi prawie to samo, co wtyczka premium WooCommerce, którą opisaliśmy w poprzedniej sekcji). Poza tym ze strony wtyczki możesz obejrzeć demo i przetestować produkt przed zakupem.

Gdy wtyczka premium jest aktywna, zobaczysz 5 nowych widżetów:

• Ajax Sortuj według (sortuje produkty zgodnie z opcjami sortowania WooCommerce, ale robi to z Ajaxem!)
• Filtr produktów Ajax (sortuj według atrybutu / kategorii / tagu / marki i wyświetlaj jako menu rozwijane / pola wyboru / lista / próbki / etykiety)
• Filtr cen Ajax (utwórz przedziały cenowe na liście z możliwością filtrowania)
• Ajax Stock/on Sale Filter (dodaj widżet, aby odfiltrować/odfiltrować produkt na wyprzedaży lub w magazynie)
• Ajax Reset Filter (zresetuj filtry jednym kliknięciem)

To jest back-end:

A to jest strona Sklepu, gdy te widżety filtrów są aktywne:

Masz nieograniczoną liczbę kombinacji filtrów i możesz korzystać z wielu widżetów „Ajax Product Filter”. Oznacza to, że na tym samym pasku bocznym możesz jednocześnie filtrować według atrybutu, tagu, kategorii, ceny i/lub marki . I bez odświeżania strony – wyniki wyświetlają się natychmiast.

Jak możesz sobie wyobrazić, filtr produktów YITH WooCommerce Ajax jest kompatybilny ze wszystkimi innymi wtyczkami YITH i dlatego może robić całkiem zaawansowane rzeczy.

Możesz także „przełączyć” każdy widżet i domyślnie go „zamknąć”. Poza tym w każdym widżecie możesz zaznaczyć / odznaczyć, który atrybut / tag / kategoria ma być wykluczony z filtra .

Tak, to jest bardzo elastyczne. I to działa.

4. FacetWP (PREMIUM)

Last but not least, FacetWP, potężne narzędzie filtrujące kompatybilne również z WooCommerce, to bardzo zaawansowany produkt dla programistów – jeśli chcesz go w pełni wykorzystać, potrzebna jest wiedza techniczna. Zawiera zaczepy, skróty, oparte na wydajności kodowanie Ajax i integracje.

Aby dodać filtr, musisz dodać krótki kod do widżetu tekstowego lub – jeszcze lepiej – dodać go za pomocą PHP do plików motywu (oznacza to, że możesz również wyświetlać filtry poza paskiem bocznym ).

FacetWP pozwala na stworzenie kilku „aspektów”, czyli wyświetlaczy filtrujących, takich jak:

• Pola wyboru
• Upuścić
• fWybierz
• Radio
• Hierarchia
• Suwak
• Szukaj
• autouzupełnienie
• Zakres dat
• Zakres numerów
• Ocena w skali gwiazdkowej
• Bliskość

W przypadku WooCommerce każdy filtr aspektu lub produktu może kierować do następujących źródeł danych:

1. Cena £
2. Cena sprzedaży
3. Normalna cena
4. Średnia ocena
5. Stan magazynowy (w magazynie / brak w magazynie)
6. Na wyprzedaży
7. Kategorie produktów
8. Tagi produktów
9. Cechy produktu

Jak widać, tworzenie aspektu WooCommerce jest dość proste:

FacetWP zawiera świetną dokumentację programistyczną i jest niezbędny w przypadku zaawansowanych projektów. Jeśli z drugiej strony FacetWP to dla ciebie za dużo, to preferuję wtyczkę YITH WooCommerce Ajax Product Filter.

5. JetSmartFilters firmy Crocoblock

JetSmartFilters firmy Crocoblock to łatwa w użyciu wtyczka z systemem filtrów opartym na AJAX i 9 przydatnymi widżetami, które sprawiają, że witryna WooCommerce jest przyjazna dla użytkownika bez pisania ani jednej linii kodu:

1. Filtr ocen – porządkuje produkty według oceny.
2. Filtr wizualny – bardzo skuteczny w przypadku sklepów internetowych, które oferują różne kolory lub marki.
3. Filtr wyszukiwania – umożliwia wyszukiwanie według słów lub fraz i szybko wyświetla odpowiednie wyniki.
4. Filtr radiowy – daje możliwość wybrania jednego produktu lub posta z listy.
5. Filtr checkbox – pozwala wybrać kilka opcji z checklisty.
6. Zakres dat – dobra opcja, jeśli zamierzasz filtrować posty lub produkty na podstawie daty ich dodania lub wydarzeń według daty, w której mają się odbyć.
7. Filtr Check Range – pomaga stworzyć szereg opcji w postaci listy checkboxów .
8. Filtr zakresu – umożliwia ustawienie zakresu wyszukiwania za pomocą suwaka .
9. Wybierz filtr – pozwala wybrać opcje w postaci rozwijanej listy.

Dodatkowe widżety we wtyczce JetSmartFilters pomagają użytkownikom witryny przeglądać odpowiednie produkty bez odświeżania strony, przeglądać aktualnie stosowane filtry i usuwać niezbędne dla większej wygody.

JetSmartFilters jest ściśle powiązany z innym dodatkiem produkowanym przez Crocoblock – JetWooBuilder. Ta wtyczka jest niezbędnym narzędziem dla twórców witryn e-commerce, ponieważ zapewnia wszechstronne opcje prezentacji produktów, począwszy od różnych odmian siatek produktów, aż po formularze recenzji i oceny.