Articles

Jak stworzyć niestandardowy projekt strony kategorii WooCommerce

Czy szukasz alternatywy dla domyślnego projektu strony kategorii WooCommerce w swoim motywie WordPress? Tworzenie niestandardowego projektu dla kategorii produktów WooCommerce pozwala zaoferować zoptymalizowane doświadczenie zakupowe, które może mieć pozytywny wpływ na dolną linię Twojego sklepu.

Z odpowiednią wtyczką, tworzenie własnego niestandardowego układu strony kategorii WooCommerce również nie musi być trudne. To jest to, co zamierzamy pokazać w tym poście. Pokażemy, jak utworzyć niestandardowy układ oparty na tabeli dla swoich kategorii WooCommerce. To daje Ci kontrolę nad tym, jakie dokładnie informacje są wyświetlane i jak kupujący będą wchodzić w interakcję z Twoimi produktami.

Oto przykład tego, co zbudujesz w tym poście:

A WooCommerce category page with a table layout

Zaczniemy od niektórych korzyści płynących z tego podejścia do tabeli. Następnie przejdziemy do przewodnika krok po kroku, jak to zrobić w swoim własnym sklepie WooCommerce z wtyczką WooCommerce Product Table.

Korzyści z używania układu tabeli dla stron kategorii

Choć dokładny projekt układu strony kategorii Twojego sklepu eCommerce zależy od Twojego motywu WordPress, projekty stron kategorii większości motywów wyglądają mniej więcej tak:

How most themes handle archive pages

Ten układ jest w porządku w niektórych sytuacjach, ale ogranicza liczbę produktów, które możesz wyświetlić. Ogranicza również ilość informacji, jakie możesz podać o każdym produkcie (choć dodanie przycisków szybkiego widoku produktu jest jednym ze sposobów na złagodzenie tego).

Woo Multistore napisali o znaczeniu projektowania strony kategorii WooCommerce w sposób, który zwiększa konwersje. Układ tabeli pomaga przezwyciężyć niedociągnięcia, wyświetlając więcej produktów i informacji w kompaktowym układzie, który kończy się wykorzystaniem mniejszej ilości miejsca, a także dodając dodatkowe funkcje nawigacyjne, takie jak wyszukiwanie i filtrowanie.

To oznacza, że możesz uzyskać więcej swoich produktów/szczegółów produktów przed oczami kupujących, co zapewnia, że mogą zobaczyć cały katalog i zwiększa szansę na dokonanie zakupu.

Zobaczysz również korzyści SEO z wyszukiwarek, ponieważ możesz wyświetlić więcej niestandardowych treści na w pełni niestandardowej stronie (lub stronach docelowych też). To pozwala pokazać produkty, które są istotne, a następnie dodać tekst kontekstowy zbyt. Wszystko to powinno być nagrodzone wyższymi rankingami.

Pomimo, że ten typ układu może być korzystny dla wszystkich typów sklepów eCommerce, jest on szczególnie pomocny dla:

  • Hurtowni
  • Plików cyfrowych (wideo, pliki audio, ebooki, itp.)
  • Restauracji
  • Katalogów produktów
  • …wiele więcej!

Jak stworzyć niestandardowy projekt strony kategorii WooCommerce za pomocą WooCommerce Product Table

Kolejną zaletą korzystania z układu tabeli dla projektu strony kategorii WooCommerce jest to, że możesz ustawić wszystko bez konieczności posiadania specjalnej wiedzy technicznej.

Aby to zrobić, użyjesz wtyczki WooCommerce Product Table. Ta wtyczka wymienia twoje produkty WooCommerce w elastycznym układzie tabeli, który kontrolujesz, wraz z możliwością dodawania filtrów, pól wyszukiwania, paginacji i innych.

Możesz także użyć wtyczki, aby wyświetlać tylko produkty z określonych kategorii lub podkategorii. WooCommerce Product Table zapewnia dwa sposoby, aby to zrobić:

  1. Możesz centralnie włączyć układ tabeli produktów na wszystkich stronach kategorii produktów. (Idealny, jeśli chcesz dostosować wszystkie swoje strony kategorii produktów.)
  2. Alternatywnie możesz użyć shortcode, aby ręcznie utworzyć własne strony kategorii WooCommerce. (Na przykład, jeśli chcesz użyć tabeli do listy produktów tylko z określonych kategorii.)

Poniżej pokażemy, jak skonfigurować WooCommerce Product Table, aby osiągnąć obie opcje.

Konfiguracja WooCommerce Product Table

Po zainstalowaniu i aktywowaniu wtyczki WooCommerce Product Table, będziesz chciał skonfigurować jej domyślne ustawienia.

To pozwala kontrolować, jakie informacje są wyświetlane w tabeli produktów i jak wszystko działa, na przykład, czy wyświetlać pewne atrybuty produktu lub jak będzie działać funkcja dodawania do koszyka.

Aby zacząć, przejdź do WooCommerce → Ustawienia → Produkty → Tabele produktów, aby uzyskać dostęp do ustawień wtyczki kategorii.

Warto przejrzeć wszystkie dostępne ustawienia i wybrać te, które pasują do Twojej wyjątkowej sytuacji. My jednak zajmiemy się tylko podstawami, które są niezbędne do zaprojektowania strony kategorii WooCommerce.

Po pierwsze, znajdź ustawienie Kolumny w sekcji Zawartość tabeli. To właśnie tutaj będziesz kontrolować, jakie informacje pojawiają się w Twojej tabeli. Oprócz wyświetlania podstawowych informacji o produkcie, możesz również wyświetlać atrybuty produktu, pola niestandardowe i inne.

Możesz znaleźć pełną listę opcji kolumn tutaj, ale ta konfiguracja jest dobrą podstawową wersją, która będzie działać dla większości sklepów:

image, name, description, price, buy

Configuring WooCommerce Product Table columns

Dalej w dół, znajdziesz sekcję kolumny Dodaj do koszyka, która pozwala kontrolować przyciski dodawania do koszyka.

Aby przyciągnąć zakupy masowe, możesz dodać pola wyboru, które pozwalają kupującym na masowe dodawanie wielu produktów do koszyka. Możesz też po prostu dodać osobny przycisk dodawania do koszyka do każdego produktu (lub obu!):

Configuring WooCommerce Product Table add to cart

Gdy skończysz, upewnij się, że zapisałeś swoje zmiany.

Po skonfigurowaniu ustawień produktu masz dwa sposoby na utworzenie swoich rzeczywistych kategorii WooCommerce. Przyjrzymy się tym następnym.

2a. Włącz tabele produktów na wszystkich stronach kategorii

WooCommerce Product Table pochodzi z opcją automatycznego dodawania układu tabeli produktów do wszystkich stron kategorii. Jest to najprostsza opcja i zajmuje tylko sekundę, aby skonfigurować.

Na stronie ustawień wtyczki po prostu zaznacz pole „Archiwa kategorii produktów”:

WooCommerce add product table to shop and category pages

To globalnie włączy układ tabeli dla wszystkich kategorii, zastępując domyślny układ, który został dostarczony z twoim motywem.

Dowiedz się więcej o tej metodzie.

2b. Użyj shortcode, aby stworzyć własny projekt strony kategorii WooCommerce

Możesz również użyć shortcode, aby wyświetlić listę produktów WooCommerce według kategorii. Ta opcja jest idealna, jeśli nie chcesz używać układu tabeli produktów na WSZYSTKICH swoich kategoriach.

Po prostu dodaj shortcode wtyczki do zwykłej strony WordPress i określ, które kategorie chcesz wymienić produkty z. Powtórz proces tyle razy, ile chcesz – raz dla każdej kategorii.

Z tą metodą zasadniczo tworzysz nową stronę kategorii produktów WooCommerce dla każdej kategorii produktów, które chcesz wyświetlić, zamiast przeprojektowywać stronę kategorii WooCommerce globalnie.

Możesz albo nadal używać istniejących stron kategorii w połączeniu z nowym układem tabeli. Lub możesz po prostu zastąpić linki do każdej istniejącej strony kategorii produktów swoimi nowymi stronami kategorii zasilanymi przez tabelę. (Wskazówka: Jeśli nie używasz już wbudowanych stron kategorii, przekieruj je do nowych, w których używasz tabel produktów.)

Aby zacząć, przejdź do Strony → Dodaj nowy, aby utworzyć podstawową stronę WordPress. Następnie dodaj [product_table] shortcode do strony. Możesz także dodać tytuł kategorii za pomocą zwykłego pola title.

Add the shortcode to your category page

Domyślnie shortcode wyświetli wszystkie twoje produkty WooCommerce.

Możesz jednak użyć parametru shortcode kategorii, aby odfiltrować produkty z określonych kategorii i / lub podkategorii. Możesz także łączyć wiele kategorii lub tworzyć warunki, takie jak produkt musi być w wielu kategoriach lub podkategoriach, aby został wyświetlony.

Na przykład, aby odfiltrować produkty z kategorii „krzesło”, możesz użyć następującego shortcode:

[product_table category="chair"]

Jeśli chcesz dodać obraz kategorii lub nazwę kategorii, możesz to również zrobić powyżej shortcode za pomocą zwykłego edytora WordPress.

Po opublikowaniu strony powinieneś zobaczyć swój nowy projekt strony kategorii WooCommerce:

A WooCommerce category page with a table layout

Aby utworzyć strony dla dodatkowych kategorii WooCommerce, powtórz proces dla każdej kategorii produktów lub podkategorii, które chcesz wyświetlić.

WooCommerce Product Table
Łatwa w użyciu wtyczka do listowania rezerwacji i terminów WooCommerce w układzie tabeli front-end.

Uczyń swoje kategorie WooCommerce bardziej wyszukiwalnymi za pomocą filtrów

Jeśli chcesz dodać więcej narzędzi wyszukiwania i filtrowania do swoich kategorii WooCommerce, masz dwie opcje:

  1. Możesz dodać opcje wyszukiwania, sortowania i filtrowania za pośrednictwem ustawień WooCommerce Product Table. Te pojawią się nad lub pod twoją tabelą produktów.
  2. WooCommerce Product Table zawiera widżety, których możesz użyć do dodania filtrów do paska bocznego.

Możesz wybrać preferowaną metodę lub jest również całkowicie w porządku, aby użyć obu podejść w tym samym czasie. Pozwoli to Twoim kupującym wybrać preferowaną metodę.

Aby dodać opcje wyszukiwania, sortowania i filtrowania bezpośrednio do układu tabeli, przejdź do WooCommerce → Ustawienia → Produkty → Tabele produktów. Następnie przewiń w dół do sekcji Kontrole tabeli i skonfiguruj opcje zgodnie z własnymi preferencjami:

Table filters

Możesz dowiedzieć się więcej w tym artykule pomocy.

Aby użyć widżetów filtrów, możesz przejść do Wygląd → Widżety. Znajdziesz tam cztery nowe widżety poprzedzone „Tabela produktów:”. Możesz dodać wszystkie widżety lub wybrać tylko określone filtry, które chcesz uwzględnić:

Filter widgets

Oto przykład tego, jak mogą wyglądać oba zestawy filtrów:

Example of WooCommerce category filters

Jak stworzyć niestandardowy projekt strony kategorii WooCommerce za pomocą kodu

Jeśli znasz się na PHP, HTML i CSS, możliwe jest również stworzenie niestandardowego projektu strony kategorii WooCommerce za pomocą kodu, bez wtyczki WooCommerce.

Będziesz chciał pracować z plikiem archive-product.php w swoim motywie lub motywie dziecka. Możesz również użyć tego samego podejścia do edycji stron pojedynczych produktów za pomocą pliku single-product lub innych części witryny sklepu.

Niestety, ponieważ będziesz musiał bezpośrednio edytować kod w plikach szablonów swojego motywu, aby dokonać każdej zmiany, ta metoda nie jest dostępna dla nie-programistów. Zalecamy skorzystanie z Codeable, jeśli potrzebujesz pomocy lub trzymanie się prostszej metody układu tabeli powyżej.

Twórz swój niestandardowy projekt strony kategorii WooCommerce już dziś!

Tworzenie niestandardowego projektu strony kategorii WooCommerce pozwala na wykorzystanie bardziej przyjaznego dla kupującego sposobu wyświetlania produktów.

Używając tabelarycznego układu strony kategorii, jesteś w stanie wyświetlić więcej produktów, wraz z większą ilością szczegółów na temat każdego produktu.

Możesz również dodać mnóstwo pomocnych opcji wyszukiwania i filtrowania, aby pomóc kupującym znaleźć produkty.

By skuteczniej połączyć kupujących z produktami, którymi są zainteresowani, możesz sprzedać więcej produktów i zwiększyć przychody swojego sklepu.

Aby użyć projektu tabeli dla swoich kategorii WooCommerce, możesz użyć wtyczki WooCommerce Product Table. Konfiguracja jest łatwa i nie będziesz potrzebował żadnej specjalnej wiedzy technicznej, aby uruchomić się i działać tak, jak gdybyś chciał bezpośrednio edytować swój plik szablonu archiwum.

WooCommerce Product Table
Łatwa w użyciu wtyczka do listowania rezerwacji i terminów WooCommerce w układzie tabeli front-end.

Zacznij już dziś i stwórz bardziej efektywny sposób przeglądania kategorii produktów przez kupujących w Twoim sklepie WooCommerce.