Czy kiedykolwiek chciałeś stworzyć sortowalną i filtrowalną siatkę zawierającą całość lub część produktów WooCommerce?

Jeśli prowadzisz sklep WooCommerce, wiesz, że WooCommerce ma już dedykowaną stronę archiwum, która pomaga zaprezentować poszczególne produkty.Jak stworzyć siatkę produktów Wordpress woocommerce 1

Ale w zależności od tego, co sprzedajesz, nie zawsze jest to najskuteczniejszy sposób na zaprezentowanie swoich produktów.

W niektórych przypadkach wyświetlanie produktów WooCommerce w siatce jest bardziej wydajne.

A jeśli to brzmi jak sytuacja, w której się znajdujesz, nic ci nie jest, bo pokażę ci, jak stworzyć siatkę twoich produktów WooCommerce.

Ale jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu 

Wróćmy do tego, dlaczego tu jesteśmy.

Co możesz zrobić z siatką produktów WooCommerce?

Chociaż nie jest to pełna lista, oto kilka sytuacji, w których siatka produktów może zapewnić odwiedzającym lepsze wrażenia niż zwykła strona archiwum:

Odkrywaj Jak zainstalować sklep internetowy na WordPress za pomocą wtyczki WooCommerce

  • Hurtownie - jeśli sprzedajesz hurtowo wiele produktów, zapewnienie klientom łatwego sposobu sortowania lub filtrowania siatki może być bardziej przyjazne dla użytkownika niż umożliwienie im przeglądania poszczególnych stron produktów.
  • Katalogi produktów - podobnie, jeśli chcesz po prostu wyświetlić łatwy do przeglądania katalog produktów, siatka sortowania / filtrowania AJAX pozwoli zaoszczędzić klientom czas (i przeładowania stron).
  • Zamów formularze - jeśli chcesz stworzyć formularz zamówienia w oparciu o produkty WooCommerce, siatka zapewnia bardzo łatwy sposób na zrobienie tego. To także dobre podejście do wyświetlania menu restauracji i przyjmowania zamówień online.

Jak stworzyć siatkę produktów WooCommerce

Użyjemy wtyczki Tabela produktów WooCommerceWtyczka koncentruje się wyłącznie na tworzeniu siatki produktów. A dzięki parametrom interfejsu i krótki kod, możesz dostosować prawie każdy aspekt działania sieci.

Przeczytaj także nasz przewodnik na temat: Jak zwiększyć czas spędzony na blogu WordPress

Oto niektóre z najbardziej przydatnych funkcji, moim zdaniem:

  • Łatwe dodawanie lub usuwanie kolumn Możesz nawet dodać kolumny zawierające niestandardowe pola lub niestandardowe taksonomie, a tabela produktów WooCommerce w pełni integruje się z zaawansowanymi niestandardowymi polami.
  • Zawiera widżety filtra 4. Pozwalają one zapewnić czytelnikom bezproblemową obsługę, oferując opcje filtrowania na pasku bocznym.
  • Obsługa odmian / atrybutów produktu. Wybierz jeden z 3 różnych sposobów wyświetlania odmian produktów w swojej siatce.
  • Pola wielokrotnego wyboru. Ułatwia tworzenie formularzy zamówień, umożliwiając klientom wybranie wielu produktów przed dodaniem ich do koszyka.
  • Natychmiastowe wyszukiwanie, sortowanie i filtrowanie , Klienci mogą manipulować danymi siatki bez ponownego ładowania strony.
  • Dodaj do koszyka , Podobnie klienci mogą dodawać produkty do koszyków bez konieczności ponownego ładowania strony.
  • Obsługa Lazy Load, Przydatny do poprawy wydajności dużych sieci ( chociaż wpływa to na możliwość oferowania natychmiastowego sortowania lub filtrowania )

Oto jak korzystać z tej wtyczki ...

Krok 1: Skonfiguruj domyślną funkcję siatki

Po zainstalowaniu i aktywacji wtyczki, pierwszą rzeczą do zrobienia jest skonfigurowanie domyślnej funkcjonalności dla twoich sieci. Sprawdź nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Zasadniczo określa to domyślne zachowanie krótkiego kodu. Ale możesz także zmienić to zachowanie dla poszczególnych siatek, dodając parametry do shortcode.

Aby uzyskać dostęp do ustawień wtyczki, przejdź do WooCommerce → Ustawienia. Następnie kliknij kartę Produkty i wybierz opcję Tabele produktów :

dodaj kolumny produktu woocommerce wordpress.png

Konfigurowanie wyglądu swoich siatek

Przede wszystkim możesz wybrać styl swojej siatki w sekcji Projekt stołu, Możesz to zrobić za pomocą:

  • Domyślnie - jak możesz sobie wyobrazić, ta opcja wykorzystuje domyślne ustawienia wtyczki bez dalszej interwencji z Twojej strony. Postara się w jak największym stopniu wykorzystać aktualny motyw Twojego bloga.
  • Personnalisé : po zaznaczeniu rozszerza listę opcji stylizacji, które pozwalają dostosować kolory i rozmiary czcionek bez potrzeby Niestandardowy CSS.

dostosuj tabelę produktów css.png

Po skonfigurowaniu stylu musisz skonfigurować ustawienia domyślne krótkiego kodu. Ponownie możesz edytować je dla poszczególnych skrótów za pomocą parametrów tego ostatniego. Ale konfiguracja pozwoli Ci zaoszczędzić czas i ułatwi później pracę.

konfigurowanie ustawień tabeli produktów.png

Większość ustawień nie wymaga wyjaśnień i widać, że tabela produktów WooCommerce zapewnia dobrą obsługę podpowiedzi lub łączy do dokumentacji, aby pomóc Ci dowiedzieć się więcej o każdym z ustawień.

Odkryj także Jak dodać sklep WooCommerce na Facebook

Po ustawieniu domyślnych skrótów możesz przewijać dalej, aby skonfigurować bardziej zaawansowane ustawienia układu i funkcji.

zaawansowana konfiguracja tabel produktów.png

Ponownie, wtyczka wykonuje świetną robotę; ten, który ma dostarczyć dodatkowe informacje dla któregokolwiek z parametrów, które mogą być nieco trudne do zrozumienia. 

Jak kontrolować zapasy swojego sklepu internetowego WooCommerce ? Odkryj go, klikając ten link.

Należy zwrócić uwagę na: ograniczenie opłaty progresywnej. Jeśli zdecydujesz się na użycie ładowania progresywnego, aby przyspieszyć swój sklep internetowy, ograniczysz funkcję wyszukiwania i sortowania wtyczki.

Zobacz także naszą ofertę Najlepsze wtyczki WooCommerce 12, aby ulepszyć swój sklep internetowy

Po zakończeniu konfiguracji zapisz zmiany.

Krok 2: Dodaj widżety siatki WooCommerce (opcjonalnie)

Jak wspomniałem, Tabela produktów WooCommerce oferuje również cztery widżety, które pomogą Ci dodać opcje filtrowania do paska bocznego ( jak możesz w klasycznych sklepach WooCommerce ).

Aby uzyskać do niego dostęp, przejdź do Wygląd → Widżety jak zwykle i przesuń palcem po wybranych widżetach:

widget table woocommerce.png

Krok 3: Dodaj krótki kod, w którym chcesz wyświetlić siatkę produktu

Jesteś na mecie! Teraz wszystko, co musisz zrobić, to dodać krótki kod [product_table] gdziekolwiek chcesz, aby pojawiła się Twoja siatka.

Odkryj też Jak znaleźć link do strony logowania WordPress

Domyślnie krótki kod będzie działał zgodnie z ustawieniami wybranymi w kroku 1. Ale jeśli chcesz dostosować funkcjonalność dla określonych skrótów, możesz to zrobić za pomocą wiele parametrów shortcode dostępne.

Na przykład, aby użyć siatki tylko na produktach z określonej kategorii, możesz dodać parametr taki:

[product_table kategoria="czapki"]

Możesz nawet być kreatywny i korzystać z warunków AND / OR tutaj.

Na przykład:

  • [product_table kategoria= "czapki + w gwiazda« ] wyświetla tylko produkty należące do fois do kategorii kapeluszy et w gwiazdach.
  • Product_table kategoria= "czapki gwiazda ”] wyświetla produkty, które są soit czapki ou kategoria gwiazd.

Ta dbałość o drobne szczegóły sprawia, że ​​siatka produktów WooCommerce jest tak wspaniała. 

Zobacz także nasze 6 wtyczek WordPress, które tchną nowe życie w Twoje artykuły

I to wszystko z siatką produktów w WooCommerce!

Ceny wtyczki WooCommerce Product Table

Tabela produktów WooCommerce to wyłącznie wtyczka premium. Chociaż w katalogu WordPress.org jest kilka bezpłatnych opcji, nie znalazłem żadnej, która byłaby tak elastyczna lub dobrze udokumentowana, więc myślę, że Tabela produktów WooCommerce jest warta ceny, która jest ...

Dla strony 1 - 75 USD

Dla witryn 5 sieć - 135 USD

Dla stron 20 - 275 USD

Odkryj także niektóre wtyczki premium WordPress  

Możesz użyć innych WordPress wtyczki aby nadać nowoczesny wygląd i zoptymalizować obsługę Twojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. HBook

HBook to Wtyczka WordPressa co pozwoli Ci w prosty sposób stworzyć rozwiązanie rezerwacji online na Twojej stronie.

Hbook

Doskonale nadaje się dla każdego, kto prowadzi działalność w sektorze hotelarskim (hotele, apartamenty wakacyjne, kempingi itp.).

Odkryj także nasze Wtyczki 5 WordPress do udostępniania treści swojego bloga

przez WordPress Plugin Dzięki HBook będziesz mógł w kilka sekund dodać do swojej witryny kalendarze dostępności, cenniki i formularze rezerwacji.

Pobierz | Demo | hosting 

2. WooCommerce Tabs Pro: Dodatkowe zakładki do strony produktu

Ce WordPress Plugin zapewnia nieograniczoną liczbę dodatkowych zakładek na stronie produktu.Dodatkowe karty-produkt-strona-wordpress-plugin-To-Page-builder

Jego główne cechy to: możliwość zmień tytuł kart, a edytor do edycji treści niestandardowych, strmożliwość przypinania zakładek lub nie, do wyboru ikony zakładek, łatwe usuwanie zakładki, pdostosowanie położenia zakładek w interfejsie publicznym, et więcej ...

Pobierz | Demo | hosting

Ta wtyczka WooCommerce pozwala Twoim partnerom zdobywać punkty kredytowe, jeśli ich subskrybenci kupią twoje produkty z istniejącego sklepu internetowego.

Wielopoziomowa wtyczka polecająca Woocommerce

Jego funkcje to m.in .: konfiguracja spersonalizowanego limitu kredytu i umorzenia, pełne raporty administracyjne dla zarejestrowanych użytkowników, zarządzanie parametrami globalnymi lub specyficznymi dla produktu, obsługa skrótówi wiele innych.

Odkryj też Jak dodać rozwijany formularz kontaktowy do globalnego nagłówka

Jest to wielopoziomowy system afiliacyjny WooCommerce, coś, co wykracza poza typowy system transakcyjny afiliacyjny.

Pobierz | Demo | hosting

Inne zalecane zasoby

Zachęcamy również do zapoznania się z poniższymi zasobami, aby przejść dalej w zakresie kontroli nad witryną i blogiem.

Wnioski

To jest to! To tyle w tym samouczku. Mam nadzieję, że będziesz mógł tworzyć siatki produktów WooCommerce na WordPress. Nie wahaj się podziel się wskazówką ze znajomymi w sieciach społecznościowych.

Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress.

Ale w międzyczasie opowiedz nam o swoim commentaires i sugestie w dedykowanej sekcji.

...