Jak dostosować stronę kategorii WooCommerce w WordPress bez kodowania

jak dostosować stronę kategorii wooCommerce

Zastanawiasz się, czy edytować stronę kategorii produktów WooCommerce w Elementorze?

Cóż, jeśli tak, to gorąco polecam. Dostosowanie strony Archiwum WooCommerce i jej optymalizacja może zwiększyć sprzedaż.

Ale pytanie brzmi: jak dostosować stronę kategorii produktów WooCommerce w WordPress?

Cóż, na pewno nie musisz kodować, aby dostosować stronę kategorii WooCommerce, jeśli postępujesz zgodnie z procesem pokazanym na tym blogu.

W tym artykule dowiesz się jak dostosować stronę kategorii WooCommerce bez żadnego kodowania. Poza tym też poznajesz jak tworzyć różne niestandardowe szablony archiwów dla każdej kategorii indywidualnie. A także sposoby optymalizacji strony archiwum w celu zwiększenia współczynnika konwersji.

Więc czytaj dalej….

Po co dostosowywać strony kategorii WooCommerce

Według zbudowany z, Z WooCommerce korzysta ponad 29% procent z 1 miliona najpopularniejszych witryn internetowych. Chociaż ta popularność wskazuje na wiarygodność WooCommerce jako narzędzia eCommerce, odzwierciedla również to, że tysiące witryn internetowych korzysta z tego samego domyślnego układu, jaki ma do zaoferowania WooCommerce.

WooCommerce
Wykorzystanie WooCommerce wśród 1 miliona najpopularniejszych witryn

A jeśli myślisz o użyciu domyślnego WooCommerce page tylko zminimalizuje szansę Twojej witryny na wyróżnienie się w tłumie, to się mylisz. Istnieją również inne powody, które należy wziąć pod uwagę. Aby poznać te inne powody, spójrzmy na stronę kategorii domyślnej WooCommerce z rozszerzeniem Motyw WordPress Twenty Twenty Two aktywowany.

Domyślna strona kategorii WooCommerce
Domyślna strona kategorii WooCommerce

Jeśli widzisz, domyślna strona kategorii WooCommerce ma podstawowy wygląd, który nie jest zbyt atrakcyjny. Poza tym nie ma żadnych zaawansowanych opcji jak wyszukiwanie produktów przy użyciu nazw, filtrowanie produktów na podstawie różnych atrybutów itp. Wszystko to jest ważne, aby zapewnić użytkownikom dobre doświadczenia w Twoim sklepie internetowym.

Poza tym, kto nie lubi dobrze wyglądającej witryny, która jest kojąca dla oczu i łatwa w nawigacji? 

Cóż, odpowiedź brzmi: wszyscy! Przejdźmy do następnej sekcji, w której dowiesz się, jak dostosować szablony stron kategorii produktów WooCommerce bez żadnego kodowania.

Dostosuj WooCommerce za pomocą ShopEngine

Jak dostosować stronę kategorii produktów WooCommerce w 6 krokach

Jest to łatwy do zrozumienia samouczek na temat dostosowywania stron kategorii WooCommerce w WordPress bez żadnego kodowania. Postępując zgodnie z tym procesem, możesz w mgnieniu oka wybrać układ i projekt swojej strony archiwum WooCommerce. Więc zacznijmy…

Krok #1: Zainstaluj narzędzie do tworzenia stron Elementor i ShopEngine

Aby edytować stronę kategorii produktów WooCommerce w Elementorze, korzystając z procesu pokazanego na tym blogu, będziesz potrzebować dwóch wtyczek WordPress:

ShopEngine to najlepszy kreator WooCommerce do tworzenia stron metodą „przeciągnij i upuść” – Elementor. Jest to dodatek do Elementora, który zawiera ogromną liczbę widżetów i modułów, dzięki którym dostosowywanie WooCommerce jest łatwe.

Notatka: Możesz skorzystaj z kuponu społeczność20 aby uzyskać WYŁĄCZENIE 20% w ShopEngine Pro. Najpierw zainstaluj Elementor, ponieważ ShopEngine jest zależny od tego narzędzia do tworzenia stron. Jeśli potrzebujesz pomocy przy aktywacji ShopEngine Pro, sprawdź dokumentacja.

Krok #2: Utwórz niestandardowy szablon strony kategorii WooCommerce

Po zainstalowaniu i aktywowaniu wszystkich wymaganych wtyczek musisz utworzyć szablon kategorii. Aby utworzyć szablon strony kategorii niestandardowej WooCommerce,

  • Nawigować do: ShopEngine ⇒ Szablon konstruktorów
  • Kliknij Dodaj nowy
  • Podaj nazwę szablonu
  • Z listy rozwijanej wybierz opcję Wpisz jako archiwum
  • Pozostaw pole Obowiązująca kategoria bez zmian jest stworzenie wspólnego szablonu dla wszystkich kategorii
  • Włącz opcję Ustaw domyślne aby zastąpić dowolny istniejący szablon strony kategorii/archiwum
  • Wybierz pustą opcję w obszarze Przykładowy projekt 
  • Kliknij Edytuj za pomocą Elementora aby rozpocząć tworzenie szablonu
utwórz szablon strony kategorii niestandardowej WooCommerce
Utwórz pusty szablon strony kategorii WooCommerce

Notatka: Wybrałem pustą opcję, ponieważ na tym blogu pokażę, jak to zrobić utwórz od podstaw niestandardową stronę kategorii. ShopEngine oferuje wiele gotowy szablon strony kategorii WooCommerce. Jeśli chcesz używać A gotowy szablon, wybierz ten, który Ci się podoba, a następnie przejdź do kroku 5. (kroki 3 i 4 są obowiązkowe, jeśli chcesz budować od zera)

Krok #3: Wybierz układ/strukturę strony kategorii WooCommerce

Po przejściu do trybu edytora musisz wybrać strukturę strony kategorii WooCommerce.

Do zbudowania niestandardowej strony archiwum użyję 3 różnych typów układów dla trzech różnych sekcji. Możesz zrobić to samo, co pokazano na blogu lub wybrać układ, który Ci się podoba.

Aby wybrać konstrukcję, kliknij ikonę „+”., następnie najedź kursorem na układ, który Ci się podoba i po prostu go kliknij.

wybierz strukturę niestandardowej strony kategorii, jak dostosować samouczek strony kategorii produktów WooCommerce
Wybierz strukturę

Notatka: Możesz powtórzyć ten sam proces, aby wybrać różne układy.

Powiązany: Jak dostosować stronę produktu WooCommerce

Krok #4: Przeciągnij i upuść widżety ShopEngine i dostosuj ustawienia

ShopEngine zapewnia ponad 8 dedykowanych widżetów do tworzenia niestandardowych stron archiwum WooCommerce. Te widżety stron kategorii to

  • Opis archiwum
  • Archiwizuj produkty
  • Tytuł archiwum
  • Archiwum Liczba wyników
  • Tryb przeglądania archiwum
  • Zamawiaj według filtra
  • Filtr produktów na stronę
  • Lista produktów
  • Filtry produktów

Zamierzam skorzystać z niektórych z nich. Możesz użyć ich wszystkich do edycji strony kategorii produktów Elementor WooCommerce. Ale wcześniej musisz upewnić się, że wszystkie widżety są aktywowane i dostępne do użytku. 

Możesz aktywować/włączyć widżety z ShopEngine ⇒ Widżety. Tutaj włącz wszystkie widżety lub te, których będziesz używać i wreszcie kliknij przycisk „Zapisz zmiany”, aby zaktualizować status.

Włącz wszystkie widżety strony kategorii ShopEngine
Włącz wszystkie widżety strony kategorii ShopEngine

Mam zamiar wybrać A układ jednokolumnowy I przeciągnij i upuść widżety Wyszukiwanie zaawansowane i Liczba wyników archiwizacji.

przeciągnij i upuść widżet wyszukiwania i zliczania wyników dla strony kategorii wooCommerce, jak dostosować stronę kategorii WooCommerce
Przeciągnij i upuść widżety Wyszukiwanie zaawansowane i Liczba wyników archiwizacji

Możesz wybrać widżet i dostosować powiązane ustawienia. Na przykład, jeśli klikniesz widżet Wyszukiwanie zaawansowane, na lewym panelu otrzymasz opcje takie jak Kolumna produktów, Pokaż kategorię w wynikach wyszukiwania, Pokaż listę rozwijaną kategorii, Tekst dla wszystkich kategorii, Ikona wyszukiwania itp.

Dostosuj widżet wyszukiwania zaawansowanego WooCommerce
Dostosuj widżet wyszukiwania zaawansowanego WooCommerce

Teraz w następnej sekcji użyję kroków opisanych w kroku 3, aby wstawić nowy układ dwóch kolumn. Następnie przeciągnij i upuść widżety Filtry produktów i Archiwizuj produkty.

przeciągnij i upuść filtry produktów oraz archiwizuj widżety produktów dostosuj stronę archiwum WooCommerce
Wybierz nową strukturę Elementora

Notatka: The Widżet filtra produktów jest dostępny tylko w ShopEngine Pro. Upewnij się więc, że zainstalowałeś i aktywowałeś ShopEngine Pro.

Możesz dostosować opcje związane z filtrami, takie jak filtr ceny, filtr ocen, filtr kolorów, filtr kategorii itp. Ponadto możesz dostosować opcje związane z układem, takie jak tryb widoku filtra, przycisk włączania kontenera, kolumny (w każdym wierszu) itp. Jeśli chcesz, możesz także dodać niestandardową listę atrybutów.

Dostosuj widżet filtrów produktów, jak dostosować stronę kategorii WooCommerce
Dostosuj widżet Filtry produktów

Możesz zmienić ustawienia układu produktów Archiwum w opcji układu WooCommerce. Aby uzyskać więcej informacji na temat zmiany opcji układu, możesz to sprawdzić doktor. Co więcej, możesz spersonalizować ustawienia treści, takie jak znaczek wyprzedaży błyskawicznej, pokaż kategorie, pokaż ocenę opisu itp. Możesz także wybrać niestandardową ikonę paginacji i niestandardową kolejność przycisku CTA, np. Dodaj do koszyka, Dodaj do listy życzeń, Szybki podgląd itp. .

Dostosuj widżet Archiwum produktów

Powiązany: Jak dostosować stronę mojego konta WooCommerce

Krok #5: Dostosuj ustawienia stylu strony Archiwum WooCommerce

Po skonfigurowaniu niestandardowych układów i spersonalizowanych widżetów nadszedł czas, aby zmienić ich wygląd, zmieniając ustawienia stylu tych widżetów. Aby zmienić ustawienia stylu, kliknij widżet i na panelu przejdź do zakładki Styl, aby uzyskać dostęp do wszystkich ustawień stylu. Przyjrzyjmy się opcjom stylu widżetów używanych w tym samouczku:

Zaawansowane wyszukiwanie:  Możesz dostosować różne opcje formularza wyszukiwania, ikony wyszukiwania / stylu tekstu, stylu kategorii, stylu produktu, przycisku Więcej produktów i czcionki globalnej. 

Zmień ustawienia stylu zaawansowanego widżetu wyszukiwania, jak dostosować stronę kategorii WooCommerce
Zmień ustawienia stylu Widgetu wyszukiwania zaawansowanego

Liczba wyników archiwalnych: Możesz dostosować opcje wyrównania, koloru i typografii.

widżet zliczania wyników ElementKit
Zmień ustawienia stylu widżetu Liczba wyników archiwizacji

Filtry produktów: Możesz znaleźć opcje stylizowania sekcji filtrów produktów w różnych kategoriach, takich jak Typowe style, Filtr cen/suwak zakresu, Filtr ocen i Filtr kategorii.

Ustawienia stylu filtra produktów do edycji strony kategorii produktów WooCommerce w WordPress
Dostosuj opcje stylu widżetu Filtra produktów

Archiwum produktów: Możesz spersonalizować ustawienia stylu produktu archiwalnego, dostosowując opcje dostępne w sekcjach takich jak Kontener produktu, Zdjęcie produktu, Kategorie produktów, Tytuł produktu, Cena produktu, Etykieta poza, Przycisk Dodaj do koszyka, Ocena, Wyprzedaż błyskawiczna i Paginacja.

Archiwizuj ustawienia stylu produktu, aby edytować stronę kategorii Elementor WooCommerce
Dostosuj styl widżetu Archive Products

Powiązany: Jak dostosować stronę koszyka WooCommerce

Krok #6: Zaktualizuj i wyświetl podgląd szablonu strony kategorii niestandardowej WooCommerce

Po zakończeniu dostosowywania stylu kliknij przycisk Aktualizuj, aby zapisać. Teraz możesz kliknąć przycisk podglądu, aby zobaczyć podgląd, lub ręcznie odwiedzić dowolną stronę kategorii i powinieneś zobaczyć, że nowy szablon jest aktywowany, jak na podglądzie poniżej:

Dostosuj podgląd strony kategorii
Niestandardowa strona kategorii WooCommerce za pomocą ShopEngine

To był proces tworzenia dostosowanej strony kategorii dla Twojego sklepu WooCommerce. Ale co powiesz na stworzenie innego projektu dla każdej kategorii swojego sklepu? Cóż, możesz to zrobić również za pomocą ShopEngine. Aby poznać więcej szczegółów, przejdź do następnej sekcji.

Dostosuj WooCommerce za pomocą ShopEngine

Jak zbudować niestandardową stronę archiwum WooCommerce dla każdej kategorii osobno?

Możesz zbudować zupełnie inny projekt dla każdej kategorii lub tylko określonej kategorii swojego sklepu WooCommerce. W tym celu proces pozostaje prawie taki sam jak pokazane powyżej. Ale w krok 2, Utwórz szablon strony kategoriiTy nie można pozostawić pustego pola Obowiązująca kategoria.

Musisz wybierz kategorię w polu Obowiązująca kategoria dla którego chcesz zastosować tworzony szablon projektu. Na przykład, jeśli chcesz stworzyć projekt, który powinien mieć zastosowanie tylko w kategorii Muzyka, to w polu Obowiązująca kategoria wybierz Muzyka. 

utwórz inną stronę archiwum dla każdej kategorii WooCommerce za pomocą ShopEngine

Pozostałe kroki będą takie same, jak w przypadku tworzenia projektu szablonu kategorii ogólnej pokazanego w pliku sekcja powyżej.

Notatka:  Gdy utworzysz szablon archiwum dla określonej kategorii, tak się stanie dotyczą tylko tej strony kategorii, a nie pozostałych stron kategorii.
Dla pozostałych kategorii należy utworzyć inny szablon kategorii z pustym polem „Dotycząca kategorii” dla wszystkich kategorii lub innym dla każdej z nich. W przeciwnym razie pozostałe kategorie będą miały domyślny szablon archiwum WooCommerce lub szablon oferowany przez aktywowany motyw.

różne szablony stron archiwum WooCommerce przy użyciu ShopEngine - najlepszego kreatora WooCommerce

Oto podgląd innej strony kategorii WooCommerce z innym wyglądem zbudowanym za pomocą ShopEngine:

podgląd innej niestandardowej strony kategorii WooCommerce dla każdej kategorii za pomocą ShopEngine

Notatka: Opcja tworzenia różnych szablonów/projektów dla różnych kategorii witryny WooCommerce jest dostępna tylko w wersji Pro ShopEngine.

Bonus: 5 sposobów na optymalizację strony kategorii WooCommerce w celu zwiększenia współczynnika konwersji 

Oto kilka przydatnych wskazówek, które możesz zastosować, aby zoptymalizować stronę archiwum WooCommerce zwiększyć współczynnik konwersji:

Podaj opcję filtrowania produktów

dodaj filtry produktów, aby zwiększyć konwersję
Filtr produktów na stronie kategorii WooCommerce

Twoja strona kategorii domyślnie wyświetla wszystkie produkty z tej kategorii. Ale zazwyczaj ludzie szukają produktu o określonym kolorze, rozmiarze lub jakiejkolwiek innej cesze.

Dlatego powinieneś udostępnić opcje filtrowania i zawężania liczby produktów w kategorii według ich preferowanego atrybutu. W ten sposób ludzie będą mogli łatwo znaleźć swoje produkty, a Tobie w tym pomoże zwiększ swoją sprzedaż.

Sprawdź także Jak dodać przełącznik walut do witryny WooCommerce w 5 krokach

Dodaj opcję porównania produktów

dodaj porównanie produktów i dowiedz się, jak dostosować stronę kategorii WooCommerce w WordPress
Opcja porównania produktów w WooCommerce

Dodanie a porównanie produktów Opcja w Twoim WooCommerce pomoże konsumentom porównać produkty podobnego rodzaju. Ta opcja jest potrzebna zwłaszcza, jeśli oferujesz produkty cyfrowe, takie jak telefony komórkowe, zegarki itp.

Możliwość porównania produktów pomoże klientom szybciej podjąć decyzję. A to pomoże Ci szybko osiągnąć swój cel, jakim jest większa sprzedaż.

Przycisk listy życzeń

dostosuj listę życzeń strony archiwum woocommerce do dostosowywania strony kategorii WooCommerce
Przycisk listy życzeń na stronie kategorii

Lista życzeń zapewnia możliwość dodania produktów do koszyka w celu późniejszego zakupu. Niektórzy ludzie uważają, że Lista życzeń nie jest aż tak skuteczna, jeśli chodzi o konwersję. Ale szczerze mówiąc, jest bardzo skuteczny.

Ponieważ ludzie zwykle dodają produkty do swojej listy życzeń, gdy naprawdę im się podobają, ale z jakiegoś powodu nie mogą ich od razu kupić. Nie oznacza to jednak, że osoba ta nie kupi później produktów.

W większości przypadków ludzie rzeczywiście kupują produkty, które dodali do swojej listy życzeń. Dodaj więc opcję listy życzeń na stronie kategorii WooCommerce.

Opcja szybkiego podglądu

dodaj szybki widok, aby zwiększyć współczynnik konwersji strony kategorii za pomocą niestandardowego szablonu strony kategorii woocommerce
Opcja szybkiego podglądu na stronie Archiwum WooCommerce

Dodanie a szybki podgląd przycisk zapewnia wygodę użytkowania, ponieważ nie trzeba odwiedzać oddzielnych stron, aby dowiedzieć się o produkcie. Korzystając z opcji Szybki podgląd, Twój klient może jednym kliknięciem pozostać na stronie kategorii i poznać szczegóły dotyczące produktów.

Jeśli ludzie muszą przejść do strony produktu, aby go wyświetlić, mogą opuścić witrynę bez zakupu produktu, jeśli mu się nie spodoba. Jeśli jednak udostępnisz opcję szybkiego podglądu, aby klienci mogli sprawdzić wiele produktów, pozostając na tej samej stronie, zwiększy to komfort zakupów. W rezultacie pomoże Ci zwiększyć sprzedaż w Twoim sklepie.

Optymalizacja SEO na stronie

Na stronie SEO

Strony kategorii są wskaźnikiem hierarchii stron w Twojej witrynie. Więc, optymalizacja strony kategorii dla wyszukiwarek nigdy nie powinny być zaniedbywane. Ponieważ chociaż chcesz, aby Twoja strona główna i strona produktu były klasyfikowane, strona kategorii, jeśli jest sklasyfikowana, może również zapewnić duży ruch.

Im większy ruch uzyskasz na swojej stronie, tym zwiększysz szansę na uzyskanie większej liczby konwersji. Upewnij się więc, że dodajesz odpowiednie metadane SEO, optymalizuj linki wewnętrzne i zewnętrzne, optymalizuj adres URL itp. Możesz skorzystać z pomocy wtyczek SEO, takich jak Rankmat, Yoast SEO itp.

Czy uważasz, że wszystkie punkty wydają się słuszne, ale czy będę potrzebować wielu wtyczek, aby dodać te opcje do mojej witryny w celu zwiększenia konwersji?

Cóż, nie masz się czym martwić. Ponieważ ShopEngine jest nie tylko fantastycznym narzędziem do dostosowywania WooCommerce z dużą ilością Widżety WooCommerce, zapewnia również Ponad 13 modułów jak lista życzeń, szybka płatność, porównanie produktów itp.

Co więcej, za pomocą tej wtyczki możesz dostosować cały swój sklep WooCommerce. za pomocą tego edytora kategorii możesz edytować wszystkie swoje strony WooCommerce; z strona sklepu Do strona dziękuję. Obejrzyj film, aby poznać ogromne możliwości, jakie ma do zaoferowania ShopEngine.

ShopEngine – najlepszy kreator WooCommerce

Inne blogi związane z WooCommerce:

👉 Jak dodać zaawansowane niestandardowe pole kasy WooCommerce
👉 Najlepsze wtyczki koszyka na zakupy dla WooCoomerce
👉 Jak rozwiązać błąd pustego koszyka WooCommerce
👉 Jak dodać wieloetapową realizację transakcji WooCommerce

Ostatnie słowa na niestandardowej stronie kategorii WooCommerce

Strona kategorii jest niezbędną stroną zarówno dla Twoich klientów, jak i wyszukiwarek. Dostosowywanie i optymalizacja stron kategorii może tylko pomóc Ci osiągnąć większy sukces w biznesie eCommerce. 

Dobrą rzeczą jest to, że teraz wiesz, jak dostosować stronę kategorii WooCommerce w WordPress i jak zoptymalizować stronę, aby podwoić współczynnik konwersji. Co więcej, teraz wiesz, jak tworzyć niestandardowe strony kategorii WooCommerce dla każdej kategorii osobno.

Możesz wykorzystać najbardziej kompletny kreator WooCommerce dostępny na rynku o nazwie ShopEngine, aby zoptymalizować stronę kategorii swojego eStore. A jego wszechstronną wtyczkę WooCommerce możesz teraz pobrać w cenie 20% WYŁĄCZONEJ!

🔔 🔔 Do zakupu ShopEngine Pro w cenie 20% niższej użyj kodu kuponu społeczność20.

Zatem pospieszmy się i już teraz dołączmy do społeczności miłośników WooCommerce!


Uwagi

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *