Jak tworzyć filtrowane paski boczne dla stron Divi WooCommerce?

Jeśli kiedykolwiek próbowałeś dodać filtrowane paski boczne WooCommerce do stron utworzonych za pomocą kreatorów stron, prawdopodobnie zauważyłeś, że filtry nie pojawiają się na Twoich stronach. Nie ma znaczenia, jakiego kreatora stron używasz, filtry po prostu nie będą wyświetlane.

Powodem jest to, że te widżety nie są kompatybilne z kreatorami stron. W tym artykule przyjrzymy się łatwemu sposobowi tworzenia filtrowanych pasków bocznych WooCommerce dla stron utworzonych za pomocą Divi Builder lub dowolnego innego kreatora stron.

Standardowe paski boczne WooCommerce

WooCommerce zawiera kilka widżetów, które można filtrować.

• Filtruj produkty według atrybutu
• Filtruj produkty według ceny
• Filtruj produkty według oceny

Te widżety działają świetnie na zwykłych motywach WordPress, ale nie wyświetlają się na stronach utworzonych za pomocą kreatorów stron.

Motywy WordPress

Filtrowalne widżety działają dobrze na stronach utworzonych za pomocą zwykłych motywów WordPress. Twenty Seventeen pokazuje je na pasku bocznym bez problemu. Używam przykładowych danych WooCommerce, które zawierają kolory i ceny. Wyróżnia się Filtruj produkty według atrybutu i ceny.

Oto Divi pokazujące domyślną stronę sklepu WooCommerce bez użycia Divi Builder. Pokazuje widżety filtrów tak jak każdy normalny motyw.

Kreatory WordPress

Strony wykonane za pomocą kreatorów nie wyświetlają widżetów filtrów WooCommerce. Nie ma znaczenia, czy pasek boczny jest wyświetlany w kreatorze, czy jako standardowy pasek boczny. Oto kilka przykładów.

Ta strona została zbudowana za pomocą Beaver Builder. Zawiera pasek boczny, ale filtry się nie wyświetlają. Dodałem widżet tekstowy, dzięki czemu można zobaczyć, że pasek boczny wyświetla się bez widżetów filtrów. Opublikowałem stronę do oglądania na żywo, ale to nie robiło żadnej różnicy.

Ten został zbudowany z Elementora. Dodałem pasek boczny nad produktami. Pokazuje widżet tekstowy, ale nie filtry. Opublikowałem też stronę do oglądania na żywo, ale nie było różnicy.

Oto Divi Builder pokazujący ten sam pasek boczny. Użycie wtyczki lub motywu Divi Builder dało ten sam rezultat. Opublikowałem stronę do oglądania na żywo, ale filtry nadal się nie wyświetlały.

Wyświetlanie filtrów WooCommerce na paskach bocznych kreatora

Na szczęście istnieje prosty sposób na pokazanie filtra produktów WooCommerce na pasku bocznym, nawet jeśli budujesz stronę produktu za pomocą narzędzia do tworzenia stron. Potrzebujemy wtyczki o nazwie Filtr produktów WooCommerce.

Themify – Filtr produktów WooCommerce

Filtr produktów WooCommerce to darmowa wtyczka od Themify, która działa inaczej niż standardowe widżety filtrów produktów WooCommerce. Łatwe tworzenie wielu kombinacji filtrów. Utwórz formularz za pomocą kreatora formularzy przeciągnij i upuść. Ustaw układ pionowy lub poziomy, wybierz liczbę kolumn i dostosuj go do swojej witryny. Pokazuje wyniki wyszukiwania na żywo i zawiera wiele opcji. Jest intuicyjny w użyciu i działa ze wszystkimi kreatorami motywów.

Tworzenie nowego filtra produktów

Zainstaluj wtyczkę z depozytu WordPress. W menu Pulpit nawigacyjny przejdź do Filtry produktów > Filtry produktów > Dodaj nowy . Otrzymasz modal ze wszystkim, czego potrzebujesz do utworzenia filtra. Przejdź przez ustawienia, aby utworzyć swój krótki kod. Zamiast trzech widżetów filtrów, ten jeden filtr może tworzyć wiele typów filtrów niestandardowych, aby utworzyć dowolną liczbę widżetów.

Nadaj mu tytuł opisujący filtr. Wybierz układ pionowy lub poziomy, aby wyświetlić puste pola, sortowanie produktów, liczniki produktów i produkty, których nie ma w magazynie. Wybierz, czy chcesz wyświetlać paginację i wybierz między standardowym, nieskończonym przewijaniem lub wczytaj więcej.

Wprowadź liczbę produktów na stronie. Wybierz, czy chcesz włączyć przełączanie grup pól, przewijać do wyniku, wybierać między logiką AND lub OR dla taksonomii oraz czy wyniki są wyświetlane na bieżącej stronie, czy na nowej stronie. Jeśli wybierzesz nową stronę, będziesz mógł wybrać stronę z listy. Możesz także wybrać, czy filtr ma się wyświetlać na nowej stronie.

Po dokonaniu wyboru musisz zbudować formularz. To określi, jak filtr będzie wyglądał na pasku bocznym. Przeciągnij każdy z elementów formularza, który chcesz, do pola u dołu ekranu tworzenia krótkiego kodu.

Każdy element otwiera nowy zestaw funkcji. Każdy jest inny, ale większość ma podobne opcje. Oto spojrzenie na kategorię.

Nadaj mu tytuł. Możesz ukryć tytuł, jeśli chcesz. Wybierz, czy chcesz wyświetlać liczniki produktów, hierarchię kategorii i uwzględniać elementy podrzędne. Wyświetl filtr jako pole wyboru, łącza, przyciski opcji, pole rozwijane lub opcję wielokrotnego wyboru. Wybierz logikę, ustaw porządek sortowania i wybierz układ z liczbą kolumn. Ustaw kolory tekstu. Możesz także wybrać kategorie, które chcesz uwzględnić lub wykluczyć.

Jeśli wybierzesz kolor, ikony otworzą zestaw selektorów kolorów, w których możesz ustawić kolory każdej kategorii produktów indywidualnie. Ustaw kolor tła i tekstu. Możesz wybrać kolory z selektorów lub wpisać kody szesnastkowe w polach.

Możesz także przeciągać i upuszczać pola w wybranej przez siebie kolejności. Po utworzeniu filtra wybierz Zapisz .

Zamknij modalne, a zobaczysz, że Twój filtr został dodany do listy. Zawiera nazwę, krótki kod i listę pól w filtrze. Możesz edytować, eksportować lub usuwać filtr. Skopiuj krótki kod.

Dodaj widżet tekstowy do paska bocznego i wklej krótki kod.

Filtry są teraz wyświetlane na stronach sklepów utworzonych za pomocą kreatorów. Oto strona z Divi Builder.

Oto filtr pokazujący się na stronie wykonanej przez Beaver Builder w motywie Twenty Sixteen.

Oto filtr z Elementorem w motywie Twenty Seventeen. Ten wykorzystuje układ poziomy.

Korzystanie z Themify – filtra produktów WooCommerce z układami Divi

Divi ma do wyboru wiele układów sklepu. W tym przykładzie dodałem moduł tekstowy do strony sklepu meblowego i umieściłem shortcode filtra w module tekstowym. Mogłem wybrać moduł paska bocznego, ale w tym przykładzie nie ma to większego znaczenia.

To jest układ pionowy. Ładnie wpasowuje się w projekt layoutu.

Ustawiłem przyciski tak, aby pasowały do ​​stylu układu. Niestety nie udało mi się dostosować przycisku wyszukiwania.

Oto układ poziomy. Ten przykład nadal używa układu 3/2-kolumnowego, który wybrałem dla filtru pionowego.

Filtry otwierają się po najechaniu. Jest responsywny, więc wyświetla się pionowo, aby zmieścić się w kolumnie.

W tym przypadku umieściłem filtr pod modułem sklepu.

Oto filtr nad modułem sklepu.

Niezależnie od tego, czy używasz skrótu w module tekstowym, czy na pasku bocznym, możesz dodać stylizację za pomocą karty Projekt modułu Divi. Oznacza to, że możesz stylizować tekst etykiety, stylizując tekst modułu. W tym przykładzie ustawiłem tekst na czerwony, zwiększyłem rozmiar i zrobiłem go wielkimi literami.

Filtrowanie produktów WooCommerce

Aby przeprowadzić wyszukiwanie, użytkownik klika przyciski, zaznacza pola i przesuwa suwak, aby filtrować to, czego szuka. Mogą też wpisać tytuł. Kiedy są gotowe, po prostu klikają przycisk wyszukiwania.

Wyniki wyszukiwania

Wyniki będą następnie wyświetlać sposób, w jaki został skonfigurowany w ustawieniach. W tym przypadku ustawiłem wyświetlanie ich na dole strony. Automatycznie przewija do wyników i zapewnia użytkownikowi funkcję sortowania.

Jeśli ustawisz go tak, aby otwierał się na nowej stronie, wyniki zostaną umieszczone na dole tej strony. W tym przykładzie utworzyłem stronę, używając nagłówka ze strony Sklep meblowy. Otworzyłem funkcję sortowania, aby pokazać opcje sortowania.

Końcowe myśli

Oto nasze spojrzenie na to, jak tworzyć filtrowane paski boczne WooCommerce dla strony utworzonej za pomocą Divi Builder. Wtyczka jest intuicyjna i dodaje wiele funkcji filtrowania do produktów WooCommerce. Możesz utworzyć dowolną liczbę filtrów i umieścić je na dowolnej stronie. Możesz nawet stylizować je za pomocą funkcji stylizacyjnych Divi. Ponieważ jest to krótki kod, możesz ich używać w paskach bocznych lub modułach.

Chciałbym mieć większą kontrolę nad sposobem wyświetlania wyników. Na przykład pomocne byłoby umieszczenie krótkiego kodu w miejscu, w którym pojawi się wynik. Umożliwiłoby to umieszczenie wyników w dowolnym miejscu na stronie, a nie na dole. Umożliwiłoby to tworzenie niestandardowych stopek, obszaru wyników na stronie itp. Chciałbym też mieć kilka dodatkowych opcji stylizacji. Przede wszystkim chcę nadać styl przyciskowi wyszukiwania.

Themify – Filtr produktów WooCommerce to świetny wybór, jeśli chcesz mieć darmową wtyczkę, aby dodać filtr produktów do stron Divi Builder.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś wtyczkę Themify – WooCommerce Product Filter ze stronami sklepu wykonanymi za pomocą Divi Builder? Daj nam znać o swoim doświadczeniu w komentarzach.

Polecane zdjęcie za pośrednictwem Maxa Griboedova / shutterstock.com