Przegląd nowej wtyczki WooCommerce Blocks

Podczas instalacji lub aktualizacji WooCommerce zawiera nową wtyczkę o nazwie Bloki WooCommerce. Dodaje to nowe bloki do edytora bloków WordPress, które umożliwiają dodawanie produktów WooCommerce do stron i postów. W tym artykule przyjrzymy się blokom WooCommerce i zobaczymy, co mogą zrobić.

Wtyczka blokująca WooCommerce

WooCommerce Blocks to nowy dodatek do WooCommerce, który dodaje 7 bloków do Gutenberga:

1. Opisywany produkt
2. Ręcznie wybrane produkty
3. Najlepiej sprzedające się produkty
4. Najwyżej oceniane produkty
5. Najnowsze produkty
6. Na wyprzedaży produktów
7. Produkty według kategorii

Każdy z bloków wyświetla się w regulowanej siatce i można go sortować lub filtrować. Siatki pozwalają określić liczbę kolumn w układzie. Możesz wybrać od 1 do 6 kolumn, dostosowując kontrolkę suwaka. Kilka bloków pozwala również dostosować liczbę rzędów. 4 to wartość domyślna dla wszystkich bloków z kolumnami lub wierszami. Nie obejmuje stronicowania, więc ustawiona liczba to wszystko, co zostanie wyświetlone.

Filtry umożliwiają wybór kategorii. Niektóre zawierają funkcję sortowania, która umożliwia sortowanie według nowości, ceny, oceny, sprzedaży, tytułu lub kolejności menu.

Bloki zawierają również standardową kartę Gutenberg Advanced z niestandardowymi polami CSS.

Aktywuj blok produktów

Kiedy zaktualizujesz lub aktywujesz WooCommerce, zobaczysz nową wtyczkę na liście wtyczek. Jeśli nie widzisz tego tutaj, możesz wyszukać bloki WooCommerce w zakładce Dodaj nowy w obszarze Wtyczki.

Możesz aktywować blok na liście wtyczek lub klikając przycisk u góry pulpitu WordPress.

Korzystanie z bloków WooCommerce

Nowa zakładka o nazwie WooCommerce została dodana do listy dostępnych bloków w edytorze Gutenberg. Wewnątrz tej zakładki znajduje się zestaw 7 bloków WooCommerce. Każdy z bloków ma ikonę, która odpowiada temu, co robią, dzięki czemu można je rozpoznać na pierwszy rzut oka.

Gdy dodajesz bloki do strony, symbole pojawiają się na stronie, na której możesz kliknąć, aby je szybko dodać.

Spójrzmy na każdy blok.

Opisywany produkt

Polecany produkt pozwala wybrać z listy pojedynczy produkt do wyświetlenia. Możesz wyrównać tekst, edytować nakładkę i edytować obraz. Zawiera również pole Dodatkowa klasa CSS.

Ten blok ma najwięcej dostępnych dostosowań ze wszystkich bloków WooCommerce. Ustaw orientację tekstu za pomocą przycisków tekstowych u góry. Kliknięcie Edytuj otwiera dostosowania nakładki. Tutaj możesz wybrać produkt, pokazać opis, pokazać cenę, wybrać kolor nakładki oraz ustawić jej krycie.

Możesz wybrać kolor, którego chcesz użyć, lub możesz wybrać kolor niestandardowy, klikając wielokolorowe kółko. Tutaj możesz wprowadzić kod szesnastkowy, kod RGB lub dostosować kolor za pomocą suwaka i próbnika kolorów. Podoba mi się korekta nakładki. Aby dostosować tekst lub przycisk, musisz użyć CSS.

Ręcznie wybrane produkty

Ręcznie wybrane produkty pozwalają wybrać produkty, które będą wyświetlane. Możesz je wyszukać z samego bloku lub z prawej kolumny. Ustaw liczbę kolumn od 1-6. Uporządkuj według nowości, ceny, oceny, sprzedaży, tytułu lub kolejności menu.

Wybranie produktów dodaje je do układu w siatce.

Najlepiej sprzedające się produkty

Najlepiej sprzedające się produkty nie pozwalają wybrać niczego z bloku, ale nadal możesz dokonać wszystkich dostosowań w ustawieniach po prawej stronie. Tutaj możesz wybrać liczbę kolumn i wierszy (wybierz od 1 do 6 dla każdego), filtrować według kategorii i dostosować CSS.

W tym przykładzie wybrałem 6 kolumn, 2 wiersze i kategorię Odzież.

Najwyżej oceniane produkty

Najwyżej oceniane produkty również dodaje produkty po wybraniu bloku. Ustawienia pozwalają uwzględnić standardowy układ dla 1-6 kolumn i wierszy, filtrowanie według kategorii i CSS. Ten pokazuje ustawienia domyślne.

Najnowsze produkty

Najnowsze produkty również automatycznie dodają produkty po wybraniu bloku. Ustawienia obejmują układ standardowy, filtr kategorii i CSS. W tym przykładzie wybrałem 5 kolumn i 3 wiersze. Pozostawiłem domyślny filtr kategorii, który obejmuje każdą kategorię.

Na wyprzedaży produktów

Produkty na wyprzedaży automatycznie ładują wszystkie produkty, które są na wyprzedaży. Zawiera również opcje układu kolumn i wierszy, filtr produktów i CSS. Ten dodaje opcję Zamów według, dzięki czemu można zamawiać według nowości, ceny, oceny, sprzedaży, tytułu lub kolejności menu. W tym przykładzie ustawiłem kolumny na 2, a wiersze na 4. Pozostawiłem domyślną kategorię produktów.

Produkty według kategorii

Produkty według kategorii pozwala wybrać kategorie w bloku i zawiera selektor ułatwiający zawężenie wyborów. W moim przykładzie miał tylko jedną opcję (Dowolne wybrane kategorie). Zawiera również opcje układu, wybór kategorii, kolejność według i ustawienia CSS.

W tym przykładzie wybrałem moje kategorie, ustawiłem kolumny na 4, wiersze na 2 i uporządkowałem produkty alfabetycznie.

Przykładowe strony z blokami WooCommerce

Oto spojrzenie na każdy blok na froncie. Dodałem etykietę, aby je zidentyfikować. Każdy z nich ma inną liczbę kolumn, ale wszystkie mają jeden wiersz, aby obraz nie wymknął się spod kontroli. Za pomocą tych bloków możesz łatwo utworzyć stronę sklepu dla każdej kategorii.

Na przykład stworzyłem stronę tylko po to, aby zaprezentować akcesoria. Dodałem obraz okładki i tytuł, a blok Produkty według kategorii ustawiłem tak, aby wyświetlał 3 kolumny i 6 wierszy.

Tworzy czystą stronę z ładnym projektem i oczywiście pokazuje tylko produkty z kategorii akcesoria. Może być używany do tworzenia wszelkiego rodzaju stron produktów.

Oto krótkie wezwanie do działania, które dodaje blok Wybrany ręcznie i blok tekstowy w podwójnej kolumnie.

Strona jest prosta, ale funkcjonalna.

Do tej strony dodałem najlepiej sprzedające się produkty w układzie postu na blogu. Ustawiłem go na 4 kolumny i 1 wiersz i jako kategorię wybrałem Odzież.

Post wygląda świetnie. Przed publikacją pewnie dodałbym trochę miejsca, etykietę na produkty, a może trochę dopełnienia tekstu, ale łatwo dostrzec potencjał.

W tym przypadku dodałem układ dwukolumnowy i dodałem blok tekstowy oraz blok najlepiej sprzedających się produktów z 2 kolumnami i 2 wierszami.

Końcowe myśli

WooCommerce Blocks to ciekawa wtyczka. Bloki są proste w użyciu i zapewniają przydatne narzędzia do kategorii, układu i filtrowania. Lubię suwaki układu kolumn i wierszy. Jeśli chcesz dokonać zmian w ich tekście, przyciskach, nakładkach po najechaniu kursorem itp., musisz użyć CSS, ale przynajmniej niestandardowy CSS jest opcją. Bloki świetnie nadają się do tworzenia stron sprzedaży lub dodawania produktów w treści.

Chciałbym zobaczyć więcej funkcji stylizacji (zwłaszcza w przypadku przycisków, tekstu i nakładek po najechaniu kursorem). Ciągle chciałem dostosować tak, jak zrobiłbym to z Divi (myślę, że Divi mnie zepsuł). Zawiera pola klasy CSS, które pomogą tym, którzy używają CSS. Nawet bez wielu dostosowań lubiłem używać bloków. Jeśli chcesz uwzględnić produkty WooCommerce na swoich stronach i postach Gutenberga, warto wypróbować bloki WooCommerce.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś klocki WooCommerce? Daj nam znać o swoim doświadczeniu w komentarzach.

Polecane zdjęcie za pośrednictwem Jomic / shutterstock.com