Jak dostosować swój sklep internetowy za pomocą bloków WooCommerce?

Opublikowany: 2020-02-27

Edytor bloków Gutenberga sprawia, że ​​WordPress jest jeszcze bardziej dostępny dla właścicieli witryn na dowolnym poziomie umiejętności, umożliwiając tworzenie skomplikowanych stron poprzez przeciąganie i upuszczanie bloków treści. Dzięki blokom WooCommerce możesz wybierać i wyświetlać produkty, kategorie, filtry i nie tylko praktycznie w dowolnym miejscu na swojej stronie — nie musisz używać skrótów ani edytować linii kodu!

Rzućmy okiem na dostępne bloki WooCommerce i dowiedzmy się, jak korzystać z każdego z nich.

Zanim zaczniesz, zaktualizuj WordPress i WooCommerce do najnowszej wersji. Uwaga: wersje demonstracyjne tego posta zostały utworzone z motywem Storefront, ale powinny działać z dowolnym wybranym motywem przyjaznym dla WooCommerce.

Poznaj bloki WooCommerce

Możesz umieszczać bloki WooCommerce w dowolnym miejscu, w którym włączony jest Edytor bloków: posty, strony i niestandardowe typy postów. Zacznij od przejścia do strony lub posta, który chcesz edytować, a następnie kliknij ikonę Dodaj blok (która przypomina symbol „plusa”) w lewym górnym rogu.

zrzut ekranu Edytora bloku, pokazujący, jak dodać nowy blok

Spowoduje to otwarcie menu wszystkich dostępnych bloków. Rozwiń zakładkę WooCommerce , aby wyświetlić bloki specyficzne dla Twojego sklepu internetowego.

Wskazówka dla profesjonalistów: możesz również szybko dodawać bloki do treści za pomocą skrótu klawiaturowego `/`. Na przykład możesz wyświetlić dostępne bloki WooCommerce, wpisując `/woocommerce`.

Opcje blokowania WooCommerce

Kliknięcie bloku dodaje go do strony i wyświetla szereg opcji, które zmieniają się w zależności od wybranego bloku.

Bloki produktów

Bloki produktów umożliwiają wyświetlanie produktów na stronie i publikowanie treści. Jest to świetny sposób na umieszczanie linków do polecanych produktów w poście na blogu, wyświetlanie najnowszych produktów na stronie docelowej lub tworzenie niestandardowej strony Sklepu. Istnieje wiele bloków produktów, które spełniają określone potrzeby i są wyjaśnione bardziej szczegółowo poniżej:

Polecany blok produktów

Polecany blok produktów z tytułem, ceną i przyciskiem Kup teraz

Jest to w pełni konfigurowalny blok, który wyróżnia pojedynczy produkt. Możesz wyświetlić tytuł i cenę produktu oraz dodać przycisk zachęcający do zakupów. Istnieje również wiele ustawień nakładki, w tym:

  • Kolor nakładki
  • Przezroczystość tła
  • Centralny punkt obrazu
  • Pozycjonowanie w tle

Dodaj wyróżniony blok produktu do strony docelowej, aby przyciągnąć uwagę klientów i służyć jako wezwanie do działania lub umieścić go bezpośrednio w poście na blogu jako wizualny link do produktu. Możliwości są nieograniczone!

Blok wszystkich produktów

Blok Wszystkie produkty, pokazujący produkty w siatce

Blok Wszystkie produkty wyświetla wszystkie Twoje produkty. Jest to przydatne, jeśli chcesz wstawić inne treści — tekst, obrazy, filmy itp. — nad lub pod produktami i jest świetnym sposobem na utworzenie katalogu wizualnego. Zawiera następujące opcje:

  • Ustawienia układu:
    • Liczba kolumn i wierszy — dostosuj układ siatki produktów
    • Wyrównaj przyciski — ustaw przyciski tak, aby znajdowały się bezpośrednio pod treścią lub wyrównaj je
  • Ustawienia zawartości:
    • Pokaż listę rozwijaną sortowania — wyświetl lub ukryj listę rozwijaną z opcjami sortowania
    • Zamów produkty według — wybierz domyślną kolejność produktów na podstawie ceny, ocen, nowości lub wyprzedaży
    • Edytuj informacje wyświetlane dla produktów — usuń recenzje, dodaj odznakę sprzedaży, dołącz opis i nie tylko

Filtruj bloki

Połącz bloki filtrów z blokiem wszystkich produktów, aby umożliwić odwiedzającym witrynę zawężenie wyszukiwania produktów. Gdy kupujący wybierają filtr, produkty automatycznie aktualizują się, aby spełnić ich kryteria, bez ponownego ładowania strony. Dostępne są trzy bloki filtrów:

  • Filtruj według atrybutów, takich jak kolor lub rozmiar
  • Filtruj według ceny minimalnej i maksymalnej
  • Pokaż aktywne, wybrane filtry

Poniższy przykład wykorzystuje wszystkie trzy bloki:

produkty wyświetlane w siatce obok filtrów

Łącząc te bloki, możesz w kilka minut stworzyć interesującą, łatwą w nawigacji stronę sklepu.

Blok ręcznie wybieranych produktów

ręcznie wybierany blok produktów w siatce

Blok Ręcznie wybieranych produktów umożliwia ręczne wybieranie produktów, które chcesz wyświetlić. Jeśli napiszesz post na blogu zatytułowany „Pomysły na prezenty na rocznicę”, możesz wyświetlić konkretne produkty, które najlepiej pasują do tego tematu, bezpośrednio w poście.

Po dodaniu bloku wybierz konkretne produkty z listy lub wyszukaj dokładnie ten, którego szukasz.

zrzut ekranu przedstawiający opcje dla ręcznie wybieranych produktów

Opcje dla bloku ręcznie wybieranych produktów obejmują:

  • Liczba kolumn — wybierz do sześciu
  • Wyrównaj przyciski — ustaw przyciski tak, aby znajdowały się bezpośrednio pod treścią lub wyrównaj je
  • Pokaż lub ukryj:
    • Tytuł produktu
    • Cena produktu
    • Ocena produktu
    • Przycisk Dodaj do koszyka

Produkty według kategorii Blok

Ten blok umożliwia wyświetlanie produktów z określonej kategorii lub wielu kategorii. Jest to idealne rozwiązanie w przypadku docelowych stron docelowych lub stron kategorii, które wymagają dodatkowej treści. Ustawienia obejmują:

  • Kategoria produktu — wybierz kategorię lub kategorie do wyświetlenia
  • Liczba kolumn i wierszy — dostosuj układ siatki produktów
  • Wyrównaj przyciski — pozwól przyciskom natychmiast podążać za treścią lub wyrównuj je w pionie
  • Wyświetl lub ukryj:
    • Tytuł produktu
    • Cena produktu
    • Ocena produktu
    • Przycisk Dodaj do koszyka
  • Zamów przez:
    • Nowość
    • Cena £
    • Ocena
    • Sprzedaż
    • Kolejność menu

Poniższy przykład ma jeden wiersz i pięć kolumn z kategorii „muzyka”:

siatka produktów z określonej kategorii

Dodatkowe bloki produktów

Istnieje kilka dodatkowych bloków produktów, które działają bardzo podobnie do tych wymienionych powyżej:

  • Products by Tag — wyświetlaj produkty na podstawie tagów
  • Products by Attribute — wyświetlaj produkty na podstawie atrybutów
  • Najwyżej oceniane produkty — wyświetlaj produkty z najlepszymi recenzjami
  • Produkty na wyprzedaży — wyświetlaj przecenione produkty
  • Najlepiej sprzedające się produkty — wyświetlaj swoje najlepiej sprzedające się produkty

Przejrzyj bloki

Sześćdziesiąt trzy procent klientów jest bardziej skłonnych do zakupu produktu w witrynie z recenzjami. Bloki recenzji mogą pomóc w wyróżnieniu recenzji klientów w witrynie, aby zapewnić dowód społecznościowy i zachęcić do sprzedaży w zależności od potrzeb.

recenzje wymienione w kolumnie

Wszystkie recenzje Blokuj

Blok Wszystkie recenzje z listą recenzji w jednej kolumnie

Jest to blok, którego potrzebujesz, jeśli chcesz wyświetlić wszystkie recenzje swoich produktów jednocześnie. Możesz użyć tego bloku, aby wyróżnić recenzje na stronie głównej, wyróżnić je na stronie docelowej lub utworzyć stronę specjalnie dla referencji. Opcje obejmują:

  • Wyświetl lub ukryj:
    • Tytuł produktu
    • Ocena produktu
    • Imię i nazwisko recenzenta
    • Image — zdjęcie produktu lub gravatar . recenzenta
    • Data recenzji
    • Przejrzyj treść
  • Zamów według — umożliwia użytkownikom zamawianie recenzji według:
    • Najnowszy
    • Najwyższa ocena
    • Najniższa ocena
  • Początkowa liczba recenzji — liczba recenzji do wyświetlenia
  • Wczytaj więcej — zapewnij możliwość wczytania większej liczby recenzji

Recenzje według bloków produktów i kategorii

recenzje według kategorii

Bloki te zapewniają te same opcje, co blok Wszystkie recenzje, ale pozwalają wybrać określony produkt lub kategorię. To świetny sposób na umieszczanie recenzji w postach lub na stronach bloga. Promujesz premierę nowego albumu? Pokaż pięć najlepszych recenzji tego konkretnego albumu. Piszesz post na blogu o określonej kategorii produktów? Pokaż wszystkie recenzje w tej kategorii. To skuteczny sposób na zaangażowanie odwiedzających witrynę i pokazanie, że można ufać Twoim produktom.

Blok wyszukiwania produktów

blok wyszukiwania widoczny nad filtrami i obok siatki produktów

Gdy potencjalni klienci odwiedzają Twoją witrynę, powinni być w stanie od razu znaleźć to, czego szukają. Jeśli chcą kupić określony produkt, ostatnią rzeczą, jakiej chcesz, jest poruszanie się po stronie po stronie niepowiązanych elementów.

Blok wyszukiwania produktów zapewnia prosty formularz wyszukiwania przeznaczony specjalnie dla produktów. Dodaj go w widocznym miejscu w Twojej witrynie — u góry lub na pasku bocznym sklepu i stron kategorii — i pozwól kupującym wyszukiwać dokładnie to, czego chcą.

Wykorzystaj w pełni swój sklep internetowy dzięki blokom WooCommerce

Przenieś swój content marketing na wyższy poziom, dodając produkty bezpośrednio do stron docelowych, postów na blogu i innych rodzajów mediów. Użytkownicy mogą dokonywać zakupów związanych z treściami, które ich interesują bez dodatkowej nawigacji.

Edytor bloków zapewnia użytkownikom ogromną elastyczność i kontrolę nad układem i projektem ich sklepu internetowego. W połączeniu z naszymi blokami WooCommerce możesz stworzyć naprawdę niestandardową witrynę sklepową — dodając wszystko, od produktów i kategorii po filtry i recenzje praktycznie wszędzie, gdzie potrzebujesz!

Bądź na bieżąco z najnowszymi blokami dla WooCommerce