Kompletny przewodnik po WooCommerce Block

WooCommerce jest jednym z popularnych pluginów do budowania stron e-commerce na WordPress. WooCommerce Blocks jest jednym z pluginów w WooCommerce, zaprojektowanym, aby ułatwić użytkownikom tworzenie sklepów internetowych na WordPress. WooCommerce Blocks pomaga w tworzeniu spersonalizowanych stron sklepu, wyświetlaniu produktów i dodawaniu zaawansowanych funkcji e-commerce, takich jak filtrowanie i wyszukiwanie produktów – wszystko bez konieczności pisania choćby jednej linii kodu. 

Musisz zainstalować wtyczkę WordPress WooCommerce Blocks, aby korzystać z tych nowych bloków. Ta wtyczka jest polem testowym dla eksperymentalnych funkcji, które mogą zostać dodane do głównego WooCommerce.

W tym praktycznym przewodniku omówimy funkcje bloków WooCommerce i sposób ich dostosowania. 

Co to jest blok WooCommerce?

Bloki WooCommerce to zbiór bloków zintegrowanych z edytorem bloków WordPress (Gutenberg), które umożliwiają łatwe dodawanie różnych funkcji i możliwości WooCommerce do Twoich stron i postów. Bez pisania kodu, te bloki umożliwiają prezentowanie produktów, kategorii produktów, filtrów wyszukiwania, koszyków, realizacji zakupu i nie tylko.

Mówiąc prościej, bloki WooCommerce to prekonfigurowane komponenty, które możesz wstawić na swoją stronę WordPress za pomocą edytora bloków, zapewniając łatwy sposób na włączenie funkcjonalności e-commerce zasilanej przez WooCommerce. Jest to część podstawowej wtyczki WooCommerce, więc otrzymujesz je automatycznie po zainstalowaniu i aktywacji WooCommerce na swojej stronie WordPress.

Ponadto integrują się one bezproblemowo z edytorem bloków WordPress, umożliwiając budowanie niestandardowych stron produktów, układów kategorii i doświadczeń zakupowych za pomocą znanego interfejsu przeciągnij i upuść.

Lista funkcji bloku WooCommerce

Po zrozumieniu, czym jest blok WooCommerce, omówimy teraz każdą funkcję udostępnianą pojedynczo:

• Wszystkie produkty: Wyświetla wszystkie produkty sklepu w formacie siatki.
• Aktywne filtry produktów: Wyświetla aktywne filtry produktów w formie listy lub jako chipy (podobne do przycisków).
• Wszystkie opinie: Wyświetla wszystkie opinie o produktach.
• Najlepiej sprzedający się produkt: Wyświetla najlepiej sprzedające się produkty w formacie siatki.
• Zakończenie zamówienia: Wyświetla formularz umożliwiający klientom dokończenie ich zamówień.
• Koszyk: Wyświetla koszyk zakupowy.
• Kategoria polecana: Podświetla określone kategorie produktów wraz z przyciskami call-to-action.
• Produkt wyróżniony: Wyświetla wybrane produkty wyróżnione.
• Filtruj według ceny: Wyświetla zakres cen, według którego klienci mogą filtrować produkty. Możesz także włączyć edytowalny zakres cen, klikając przycisk lub tekst tutaj.
• Filtruj według stanu magazynowego: Umożliwia filtrowanie produktów na podstawie stanu dostępności. Ta funkcja zapewnia opcje wyświetlania produktów dostępnych, niedostępnych lub zamówionych.
• Filtruj według oceny: Umożliwia klientom filtrowanie produktów na podstawie ocen.
• Filtruj według atrybutu: Filtruje produkty na podstawie rozmiaru lub koloru.
• Ręcznie wybrane produkty: Wyświetla ręcznie wybrane produkty w formacie siatki, umożliwiając wybór produktów do wyświetlenia.
• Mini koszyk: Zapewnia krótki przegląd koszyka.
• Najnowsze produkty: Pokazuje najnowsze produkty ułożone w formacie siatki. Mogą być one dostosowane przez dodanie/usunięcie elementów takich jak tytuł, cena, ocena i przycisk kupna.
• Produkt w promocji: Wyświetla produkty obecnie w promocji w formacie siatki i można je dostosować, dodając/usuwając elementy, takie jak tytuł, cena, ocena i przycisk kupna.
• Wyszukiwanie produktów: Dodaje pasek wyszukiwania, aby ułatwić klientom wyszukiwanie produktów.
• Produkty według tagu: Wyświetla produkty z określonymi tagami/etykietami w formacie siatki.
• Produkt według atrybutu: Wyświetla produkty z określonymi atrybutami (kolor, rozmiar itp.) w formacie siatki.
• Produkty według kategorii: Wyświetla produkty na podstawie kategorii w formacie siatki.
• Recenzje według produktów: Wyświetla recenzje zgrupowane według produktów.
• Recenzje według kategorii: Wyświetla recenzje produktów z określonych kategorii.
• Pojedynczy produkt: Wyświetla szczegółowy widok pojedynczego produktu.
• Najwyżej oceniane produkty: Wyświetla produkty z najwyższymi ocenami w formacie siatki.

Jak używać bloku siatki produktów w WooCommerce

Poza uczeniem się o dostępnych funkcjach w blokach WooCommerce, spróbujmy użyć lub dodać siatkę produktów w WooCommerce. Upewnij się, że masz zainstalowany plugin WooCommerce blocks na swojej stronie. Oto jak go dodać:

1. Otwórz stronę lub post, na której chcesz wyświetlić siatkę produktów, a następnie wprowadź tytuł "Produkt".

2. W lewym panelu nawigacyjnym kliknij przycisk (+) > przewiń w dół do sekcji WooCommerce > wybierz "siatkę produktów".

3. Następnie, aby skonfigurować blok, przejdź do prawego panelu.

W tym panelu możesz dostosować kilka rzeczy, w tym:

• Ustawienia układu:
• Ustawienia zawartości: Możesz wyświetlić menu rozwijane do sortowania produktów. Ta funkcja pozwala klientom sortować produkty według ich preferencji. Możesz ją wyłączyć, jeśli nie jest potrzebna.
• Zaawansowane stylowanie: Możesz dodać klasy CSS, aby dostosować wygląd.

Jak dodać polecane produkty do swojej strony

Blok Polecany Produkt pozwala zaprezentować określone produkty na stronie lub w poście. Dzięki temu blokowi możesz wybrać produkty, dostosować ich wygląd i umieścić je w treści, aby przyciągnąć odwiedzających do produktów, które chcesz promować.

Aby dodać polecane produkty, wykonaj następujące kroki:

1. Otwórz stronę lub post, gdzie chcesz dodać. Na przykład, jeśli umieścisz to powyżej siatki produktów, utwórz miejsce w tym obszarze i kliknij przycisk "+" który się pojawi.

2. Wybierz przycisk „+” na pasku narzędzi bloku, aby otworzyć listę bloków, a następnie wyszukaj i wybierz „Polecane produkty”.

3. Wybierz produkty, które chcesz wyróżnić, a następnie kliknij "Zrobione".
4. Aby dostosować wygląd bloku, kliknij "Ustawienia". W panelu ustawień możesz dostosować kilka rzeczy, w tym:

• Pokaż lub ukryj opis i cenę produktu.
• Skonfiguruj wyświetlanie multimediów (obraz i wideo).
• Dodaj alternatywny tekst dla obrazów produktów.
• Wybierz kolor nakładki bloku.
• Dostosuj krycie bloku.

5. Po dokonaniu regulacji możesz opublikować lub zaktualizować stronę, aby zobaczyć wyświetlany blok produktów polecanych.

Jak dodać bloki filtrów w WooCommerce

Blok filtra WooCommerce ułatwia klientom znalezienie produktów pasujących do ich kryteriów wyszukiwania. Udostępniając opcje filtrowania, klienci mogą szybko zawęzić wyniki wyszukiwania do produktów istotnych dla nich.

Aby dodać blok filtra, wykonaj następujące kroki:

1. Otwórz stronę lub wpis, gdzie chcesz umieścić blok filtra.
2. Określ żądane położenie, w którym chcesz umieścić blok filtra.
3. Na pasku narzędzi edytora blokowego kliknij przycisk „+” i wyszukaj opcje filtra WooCommerce, takie jak filtr cen, filtr zapasów, filtr atrybutów i filtr ocen.

Teraz omówmy każdy typ filtra, który jest dostępny. 

Dodawanie filtra według ceny

Blok filtrowania cen produktów umożliwia dodanie funkcji filtrowania, która pozwala użytkownikom wybrać pożądany zakres cen. Zakres cen może być wyświetlany jako edytowalne przyciski lub zwykły tekst. Możesz dodać przyciski, jeśli chcesz, i dostosować poziom nagłówka.

Dodawanie filtra według atrybutu

Blok filtra atrybutów produktu umożliwia użytkownikom filtrowanie produktów na podstawie atrybutów, takich jak kolor i rozmiar. Możesz wybrać atrybuty, których chcesz użyć, z dostępnej listy. Jego wyświetlanie może mieć formę listy lub menu rozwijanego. Możesz także skonfigurować typ zapytania, aby był albo AND, albo OR. Inne funkcje obejmują wyświetlanie liczby produktów, wybieranie poziomu nagłówka, dodawanie przycisków i wybieranie filtra.

Dodawanie filtra według stanu magazynowego

Blok filtra produktów według stanu magazynowego umożliwia użytkownikom wyświetlanie produktów na podstawie ich statusu dostępności. Mogą wyświetlać dostępne produkty (w magazynie), brak w magazynie (brak na stanie) lub na zamówienie. Możesz także skonfigurować go tak, aby wyświetlał liczbę produktów, wybrać poziom nagłówka i dodać przyciski. Ten blok może być używany z innymi blokami WooCommerce, takimi jak Wszystkie produkty. Niestety, ten blok nie zapewnia podglądu po dodaniu do strony.

Bloki koszyka i realizacji zakupu

Nasz blok koszyka dodaje wyświetlanie koszyka na Twojej stronie. Możesz dołączyć kalkulator kosztów wysyłki, wybrać link dla przycisku kasy, oraz ustawić wyświetlanie w trybie ciemnym. Ten blok zapewnia również powiadomienie, które możesz ustawić jako domyślną stronę koszyka w ustawieniach WooCommerce. Zawarty jest również link do przekazywania opinii.

Tymczasem blok kasy zapewnia formularz kasy dla Twojego koszyka. Zostaniesz poinformowany, że tę stronę można ustawić jako domyślną stronę kasy w ustawieniach WooCommerce. Istnieje również opcja wyświetlania w trybie ciemnym. Ten blok składa się z kilku elementów, które możesz dostosować indywidualnie. Niestety, ten blok nie zapewnia podglądu po dodaniu go na stronę.

Jak dostosować stronę sklepu w WooCommerce

Po nauczeniu się, jak korzystać z różnych bloków WooCommerce, możesz połączyć kilka, aby stworzyć przyjazną dla użytkownika niestandardową stronę sklepu. Aby zbudować ten konkretny układ strony sklepu, wykonaj poniższe kroki.

1. Utwórz nową stronę i nazwij ją "Sklep".

2. Dodaj blok wyszukiwania produktów.

3. Dodaj listę kategorii produktów blok

Następnie ustaw styl wyświetlania na rozwijany.

4. Dodaj blok filtra cen.
5. Dodaj blok polecanych produktów i wybierz produkty, które chcesz wyróżnić. Skonfiguruj zgodnie z potrzebami.

6. Dodaj Wszystkie Produkty blok.

Ustaw liczbę kolumn i wierszy na 2 i wyłącz opcję sortowania.

7. Na koniec opublikuj stronę, aby zobaczyć ostateczny układ strony sklepu, który utworzyłeś.

Zbuduj swój sklep internetowy z WooCommerce Block i sprzedawaj swoje produkty

Po pomyślnym utworzeniu niestandardowej strony sklepu z WooCommerce Blocks możesz teraz rozpocząć sprzedaż swoich produktów fizycznych i cyfrowych. Zwłaszcza w przypadku produktów cyfrowych kluczowe jest dodanie wtyczki do pobierania plików, takiej jak WP File Download Addon.

Ta wtyczka pozwala sprzedawać produkty do pobrania cyfrowego w WooCommerce. Dodatek WP File Download ułatwia zarządzanie plikami i kategoriami plików dla produktów cyfrowych WooCommerce. Możesz szybko utworzyć wiele produktów do pobrania cyfrowego powiązanych z jednym lub kilkoma plikami.

Dodatkowo, ta wtyczka integruje się z Dropbox, Google Drive, Microsoft OneDrivei funkcją Social Locker . Możesz dostarczyć pliki z tych usług chmurowych jako cyfrowe pobrania WooCommerce z mocno ograniczonym dostępem za pośrednictwem łączników API chmury.

Dzięki WP File Download Addon sprzedaż produktów cyfrowych w Twoim sklepie internetowym WooCommerce stała się bardziej dostępna i wydajna. Po zbudowaniu sklepu za pomocą WooCommerce Blocks, ten plugin doskonale uzupełnia sprzedaż Twoich treści cyfrowych.

Wniosek

WooCommerce Blocks to wtyczka, która pozwala zbudować kompletny sklep internetowy w WordPress bez pisania kodu. Dzięki różnym blokom, takim jak siatki produktów, filtry i wyświetlacze polecanych produktów, możesz łatwo stworzyć angażujące i przyjazne dla użytkownika doświadczenie zakupowe. Znajomy interfejs przeciągnij i upuść sprawia, że tworzenie sklepu internetowego jest szybsze i bardziej efektywne.

Po zbudowaniu sklepu internetowego, następnym krokiem jest sprzedaż produktów fizycznych i cyfrowych. Możesz wykorzystać WP File Download wtyczkę Addon, aby sprzedać produkty cyfrowe za pomocą WooCommerce, takie jak e-booki, oprogramowanie lub treści multimedialne.

Dodatek WP File Download jest dostępny od 49 USD rocznie i został użyty przez ponad 60 000 członków. Więc na co czekasz? Dołącz do nas, aby lepiej sprzedawać produkty cyfrowe!