Jak stworzyć piękną stronę sklepu WooCommerce (w 5 krokach)

Szukasz najłatwiejszego sposobu na dostosowanie strony sklepu WooCommerce?

WordPress oferuje szeroką gamę bloków, które pomogą Ci tworzyć profesjonalne strony internetowe. Jeśli korzystasz z WooCommerce, zyskujesz również dostęp do dedykowanych bloków WooCommerce, które możesz wykorzystać w swoim sklepie internetowym.

Dlatego możesz się zastanawiać, jak wykorzystać te elementy do zbudowania strony sklepu WooCommerce, która napędza konwersje.

Na szczęście proces jest bardzo prosty. Korzystając z tych bloków, WooCommerce pozwala wyświetlać produkty na różne sposoby. Dodatkowo możesz dodać filtry i funkcje wyszukiwania, aby ułatwić użytkownikom przeglądanie Twojego sklepu.

W tym artykule pokażemy, jak stworzyć piękną stronę sklepu WooCommerce za pomocą bloków . Możesz postępować zgodnie z naszymi wskazówkami i wybrać bloki, których chcesz użyć, w zależności od swoich potrzeb. Zacznijmy!

Spis treści:

1. Umieść blok Wszystkie produkty
2. Dodaj bloki polecanych produktów i/lub wybranych produktów
3. Włącz wyszukiwanie produktów na stronie sklepu
4. Użyj bloków Polecane kategorie
5. Dodaj opcję filtrowania produktów według ceny

Jak dostosować stronę sklepu WooCommerce za pomocą bloków?

Aby rozpocząć, otwórz edytor strony Sklepu w swoim sklepie. Następnie postępuj zgodnie z tymi instrukcjami, aby dostosować jego zawartość.

1. Umieść blok Wszystkie produkty

Strony sklepu mają różne kształty i rozmiary. W sklepie internetowym ta strona zazwyczaj wyświetla wszystkie produkty, które masz na sprzedaż. Użytkownicy mogą klikać poszczególne pozycje, aby otworzyć odpowiednie strony produktów lub dodawać je bezpośrednio do koszyka (jeśli sklep na to pozwala):

Dzięki WordPress i WooCommerce masz pełną kontrolę nad tym, jakie elementy umieścić na stronie Twojego sklepu. Wygląd i styl tej strony będzie zależał od używanego motywu i sposobu jego konfiguracji.

WooCommerce automatycznie konfiguruje stronę sklepu, gdy zaczynasz korzystać z wtyczki, dzięki czemu możesz śmiało sprawdzić, jak wygląda Twoja. Kiedy będziesz gotowy do edycji, przejdź do Strony i znajdź opcję Sklep .

Otwórz tę stronę w Edytorze bloku i powinieneś zobaczyć coś takiego:

Domyślnie strona Sklep zawiera blok Wszystkie produkty i nagłówek. Jeśli nie widzisz tego bloku, możesz dodać go do strony, klikając znak plus (+) i wybierając go z listy opcji:

Blok Wszystkie produkty wyświetla siatkę zawierającą wszystkie produkty Twojego sklepu, uporządkowane od nowych do starych. Aby zmienić kolejność wyświetlania swoich produktów, kliknij blok i przejdź do panelu ustawień po prawej stronie. Następnie przejdź do sekcji Ustawienia treści i wybierz swoje preferencje z menu Zamów produkty według :

Tymczasem w obszarze Ustawienia układu możesz wybrać liczbę kolumn i wierszy, które chcesz wyświetlić w siatce produktów. Zapraszam do zapoznania się z innymi opcjami dostępnymi w tym bloku.

2. Dodaj bloki polecanych produktów i/lub wybranych produktów

Wiele stron sklepów wyróżnia konkretne produkty. Są to zazwyczaj przedmioty, na które właściciele sklepów chcą zwrócić uwagę, takie jak nowe lub przecenione zapasy lub ostatnio dodane produkty. WooCommerce zawiera blok polecanych produktów , który umożliwia zaprezentowanie dowolnego produktu w Twoim sklepie.

Po umieszczeniu tego bloku na swojej stronie musisz wybrać produkt, który chcesz promować, i kliknąć Gotowe :

Następnie WooCommerce wyświetli obraz produktu, nazwę, cenę, opis i wezwanie do działania (CTA). Blok powinien wyglądać mniej więcej tak:

Następnie możesz dostosować ten blok do własnych upodobań. Na przykład możesz zmienić obraz i zmodyfikować przycisk CTA.

Wadą dodania bloku Polecane produkty do strony sklepu WooCommerce jest to, że może odwrócić uwagę użytkowników od pozostałych produktów. Aby temu przeciwdziałać, sugerujemy użycie kolumn do wyświetlania wielu polecanych produktów obok siebie:

Alternatywą dla bloku Polecane produkty jest opcja Ręcznie wybierane produkty . Ten blok pozwala wybrać kilka produktów i wyświetlić je obok siebie. Używa tego samego stylu co blok Wszystkie produkty :

Bloki Polecane produkty i Ręcznie wybierane produkty spełniają podobne cele. Najlepiej byłoby wybrać jedną z dwóch opcji, aby nie przytłaczać odwiedzających zbyt wieloma polecanymi elementami. Zalecamy również umieszczenie tych bloków u góry strony, aby użytkownicy nie mogli ich przegapić.

3. Włącz wyszukiwanie produktów na stronie sklepu

Jeśli masz sklep z dużym katalogiem produktów, musisz zaoferować funkcję wyszukiwania. W ten sposób użytkownicy mogą szukać dowolnych konkretnych przedmiotów, które mieli na myśli, bez konieczności przeglądania całego sklepu.

Dodając blok wyszukiwania do strony sklepu, warto poszukać opcji Wyszukiwanie produktów , a nie domyślnego bloku wyszukiwania WordPress. Wyszukiwanie produktów ograniczy wyniki do produktów WooCommerce, podczas gdy drugi blok wyszukiwania będzie obejmował wszystkie inne strony w Twojej witrynie.

Oto jak wygląda funkcja wyszukiwania WooCommerce:

Pamiętaj, że blok Wyszukiwanie produktów nie działa w edytorze, więc musisz go przetestować w interfejsie. Ponadto blok nie oferuje funkcji autouzupełniania, więc użytkownicy będą musieli wpisać pełne zapytanie i załadować nową stronę, aby zobaczyć wyniki.

4. Użyj bloków Polecane kategorie

Oprócz wskazywania użytkownikom wybranych produktów, możesz również wyróżnić określone kategorie produktów. Może to być szczególnie przydatne, jeśli sprzedajesz kilka rodzajów produktów, ponieważ umożliwi użytkownikom wyszukiwanie przedmiotów w określonym dziale.

Zacznij od dodania bloku Polecana kategoria do swojej strony sklepu WooCommerce. Następnie wybierz kategorię produktu, którą chcesz wyróżnić, i kliknij Gotowe :

Oto jak będzie wyglądał blok Polecana kategoria :

Blok pozwala zmienić kolor tła i tekstu, ale nie oferuje wielu dodatkowych opcji dostosowywania. Ponadto, ponieważ blok zajmuje dużo miejsca, zalecamy umieszczenie wielu polecanych kategorii obok siebie za pomocą kolumn:

Ponieważ blok wyróżnionych kategorii produktów jest bardzo prosty, zalecamy zapoznanie się z wtyczkami, takimi jak bloki wydry, w celu dalszego dostosowania.

Dzięki blokom Otter możesz modyfikować bloki WooCommerce, dodając animacje i inne ustawienia widoczności:

Co więcej, Otter Blocks dodaje wiele nowych bloków, z których możesz korzystać w swoim sklepie internetowym. Należą do nich opcje takie jak wyskakujące okienka (które są idealne do zbierania zapisów e-mail) i recenzje produktów.

5. Dodaj opcję filtrowania produktów według ceny

Do tej pory Twój sklep ma pasek wyszukiwania, ręcznie wybrane produkty, polecane kategorie i cały katalog produktów. Brakuje Ci tylko sposobu na filtrowanie produktów przez użytkowników.

Blok Filtruj produkty według ceny umożliwia klientom właśnie to zrobić. Blok wyświetla suwak, który pozwala klientom ustawić minimalną i maksymalną cenę produktów, które chcą zobaczyć:

Wartości cen nie można edytować – zależą one od cen Twoich produktów. Odwiedzający mogą wpisać żądane wartości lub użyć suwaka, aby je zmodyfikować.

Po wprowadzeniu zmian w suwaku ceny blok Wszystkie produkty zostanie zaktualizowany, aby wyświetlić produkty spełniające kryteria. Dzieje się tak bez konieczności ponownego ładowania strony przez użytkowników.

Jeśli chodzi o rozmieszczenie, zalecamy dodanie bloku Filtruj produkty według ceny nad katalogiem produktów. W ten sposób użytkownicy zobaczą to podczas przewijania strony.

Możesz także umożliwić użytkownikom filtrowanie produktów według rozmiaru, koloru i innych funkcji. Blok Filtruj produkty według atrybutu umożliwia przeglądanie produktów, które spełniają wybrany atrybut, na podstawie opcji dostępnych w Twoim sklepie.

I to prawie wszystko! Po zakończeniu zapisz zmiany, a nowa strona sklepu zacznie działać od razu.

Skonfiguruj swoją stronę sklepu WooCommerce już dziś

Twoim ostatecznym celem jest stworzenie strony, która zmaksymalizuje liczbę konwersji, oferując użytkownikom wszystkie opcje, których szukają, w układzie i kolejności, która ma sens.

Po skonfigurowaniu strony sklepu WooCommerce możesz zwrócić uwagę na strony pojedynczych produktów. W tym celu zapoznaj się z naszym przewodnikiem, jak zoptymalizować stronę produktu WooCommerce.

Masz pytania dotyczące tworzenia strony sklepu WooCommerce za pomocą bloków? Daj nam znać w sekcji komentarzy poniżej!