Przewodnik po użyciu bloków Gutenberga w sklepie WooCommerce

Wprowadzenie edytora Gutenberg do WordPressa w dużym stopniu przyczyniło się do przekształcenia tożsamości WordPressa. Od podstawowego systemu zarządzania treścią z funkcjami dodawania multimediów i opcjonalnie wtyczek do różnych potrzeb, teraz jest dodatkowo bogatym, skoncentrowanym na mediach edytorem WYSIWYG i kreatorem stron internetowych, bez uszczerbku dla elastyczności, którą zawsze oferował. W rzeczywistości bloki, które zapewnia Gutenberg, zwiększają elastyczność tworzenia stron w sposób, w jaki chcesz.

Największą zaletą, jaką Gutenberg oferuje w porównaniu z poprzednim edytorem (zwanym również edytorem TinyMCE) jest to, że eliminuje potrzebę znajomości kodowania lub potrzebę zrozumienia struktury WordPress, aby wiedzieć, jak dodać więcej funkcji do swojej witryny WordPress lub WooCommerce sklep. Jeśli jednak czujesz się bardziej komfortowo ze starym edytorem WordPress, zawsze możesz zainstalować tę darmową wtyczkę znaną jako Edytor klasyczny autorstwa współtwórców WordPress, która daje możliwość całkowitego wyłączenia Gutenberga lub przełączania się między starym edytorem a Gutenbergiem . Gutenberg oferuje również blok klasycznego edytora, aby użytkownicy mogli korzystać z klasycznych funkcji edytora w Gutenbergu! Brzmi zbyt pięknie, aby mogło być prawdziwe? Zanurzmy się w tym poście, a raczej przewodniku po użyciu bloków Gutenberga w swoim sklepie WooCommerce!

Dostęp do bloków Gutenberga można uzyskać za pośrednictwem dowolnej strony WordPress. Kiedy dodajesz nową stronę lub edytujesz istniejącą stronę w WordPressie, możesz zobaczyć symbol „+”, gdy najedziesz kursorem na lewy górny obszar zawartości na ekranie.

Istnieją różne rodzaje bloków, które Gutenberg zapewnia do różnych zastosowań:

Chociaż bloki mogą być używane do tworzenia różnych stron, jako administrator WooCommerce lub kierownik sklepu, najbardziej chciałbyś skupić się na stronie głównej lub sklepowej. Dlatego na potrzeby tego samouczka stwórzmy stronę główną Twojego sklepu, która ma na celu zwiększenie sprzedaży! W tym celu będziemy najczęściej używać bloków WooCommerce . Bloki te były wcześniej częścią wtyczki funkcji firmy Automattic i zostały połączone z WooCommerce w wersji 3.5.

Bloki WooCommerce zawierają różne funkcje lub „bloki” związane głównie z wyświetlaniem produktów na Twojej stronie, których możesz użyć do budowy swojego sklepu. Poniżej znajduje się lista bloków dostępnych w ramach bloków WooCommerce:

• Produkty według kategorii
• Najnowsze produkty
• Opisywany produkt
• Najlepiej sprzedające się produkty
• Na wyprzedaży produktów
• Ręcznie wybrane produkty
• Najwyżej oceniane produkty
• Produkty według atrybutu

Zacznijmy od dodania polecanego produktu na górze naszej strony głównej. Może to być dowolny produkt, który chcesz wyróżnić wśród użytkowników/odbiorców.

Dodaliśmy produkt znany jako „Członkostwo w sklepie”. Po dodaniu produktu wyświetla się jego zdjęcie, opis i cena. Możesz je ukryć, korzystając z opcji na prawym pasku bocznym. Dodano również przycisk „Kup teraz”; kolor, tekst i adres URL, na który wskazuje, są atrybutami edytowalnymi.

Kolor nakładki to interesująca funkcja, która pozwala ustawić kolor i krycie obrazu produktu, który wybrałeś jako produkt polecany w tym przypadku:

Możesz także dodać klasę CSS do tego obrazu. Podobnie przycisk Kup teraz można również edytować:

Następnie dodajmy kilka nowości i bestsellerów sklepu, aby zarówno nowi, jak i powracający odwiedzający mieli coś do wywiezienia z tej strony.

W tym celu najpierw dodamy blok znany jako Nagłówek znajdujący się w Common Blocks:

Po dodaniu odpowiedniego nagłówka, takiego jak „Nowości”, możemy iść dalej i dodać odpowiedni blok dla tego samego. W obu naszych celach będziemy używać bloków WooCommerce znanych jako najlepiej sprzedające się produkty i najnowsze produkty . Te bloki można ponownie znaleźć w blokach WooCommerce. Dodajmy blok Najnowsze produkty .

Możesz zobaczyć, że blok Najnowsze produkty pobiera ostatnio dodane produkty z Twojego sklepu WooCommerce. Możesz wybrać wyświetlanie dowolnej liczby produktów w tym bloku, ustawiając liczbę wyświetlanych wierszy i kolumn, a także filtrować produkty według kategorii za pomocą opcji na prawym pasku bocznym:

W ten sposób dodaliśmy kolejny wiersz po wierszu Polecany produkt dla nowo przybyłych:

Następnie dodajmy w podobny sposób najlepiej sprzedające się produkty (po dodaniu do niego bloku Nagłówek):

Teraz, gdy utworzyliśmy te wiersze zarówno dla nowych, jak i powracających użytkowników, dodajmy również wiersz z produktami, które są w sprzedaży, aby przyciągnąć większą sprzedaż. Zrobimy to ponownie za pomocą bloku Wyprzedaż w WooCommerce Blocks (po użyciu bloku Nagłówek do dodania nagłówka):

Istnieje wiele innych bloków, które możesz dodać w ramach bloków WooCommerce w oparciu o swoje wymagania. Dodajmy teraz wszystkie produkty do strony Sklepu. W tym celu możesz wybrać blok Produkty według kategorii .

Wiele razy wszystkie te bloki można znaleźć również w kategorii bloków najczęściej używanych , ale na potrzeby tego samouczka wybraliśmy te bloki z kategorii, do której zostały przypisane. Możesz połączyć wszystkie nagłówki z odpowiednimi stronami, takimi jak strona sprzedaży, strona bestsellerów itp., aby klienci mogli wyświetlić pełną listę produktów w tej sekcji.

Na naszym sklepie/stronie głównej możemy dodać przycisk „Przeglądaj sklep”, który będzie prowadzić do strony sklepu.

Aby dodać przycisk, musimy wybrać spośród bloku Layout Elements.

Połączymy ten przycisk ze stroną Sklepu.

Podobnie możesz utworzyć przyciski poniżej wszystkich innych utworzonych przez nas bloków, takich jak blok „Bestsellery”, blok „Wyprzedaż” itp. oraz utworzyć osobne strony dla wszystkich tych wszystkich i połączyć przyciski z odpowiednimi stronami.

Aby utworzyć oddzielne strony dla oddzielnych rodzajów produktów (bestsellery lub produkty wyprzedażowe), możesz skorzystać z krótkich kodów, które będą wyświetlać te konkretne produkty na odpowiednich stronach. W tym poście rozmawialiśmy o tym, jak wyświetlać różne kategorie produktów na stronie głównej (lub dowolnej stronie) za pomocą różnych skrótów.

Tak wygląda w końcu nasza strona:

Teraz po prostu kliknij Dostosuj (w interfejsie użytkownika, po wyświetleniu podglądu strony), aby ustawić ją jako stronę główną i gotowe! W ten sposób łatwo jest tworzyć atrakcyjne strony główne dla swojego sklepu WooCommerce za pomocą Gutenberga. Eksploruj i eksperymentuj z różnymi blokami, które Gutenberg ma do zaoferowania, aby maksymalnie wykorzystać jego funkcje!