Kompletny przewodnik po blokach WooCommerce

WooCommerce to jedna z popularnych wtyczek do budowania sklepów internetowych na WordPressie. WooCommerce Blocks to jedna z wtyczek w WooCommerce, zaprojektowana, aby ułatwić użytkownikom tworzenie sklepów online na WordPressie. 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 pisania choćby jednej linii kodu. 

Aby korzystać z tych nowych bloków, musisz zainstalować wtyczkę WordPress WooCommerce Blocks. Ta wtyczka jest poligonem doświadczalnym dla funkcji eksperymentalnych, które mogą zostać dodane do rdzenia WooCommerce.

W tym praktycznym przewodniku omówimy funkcje bloków WooCommerce i sposoby ich dostosowywania. 

Czym jest WooCommerce Block?

WooCommerce Blocks to zbiór bloków zintegrowanych z edytorem bloków WordPress (Gutenberg) , które pozwalają w łatwy sposób dodawać różne funkcje i możliwości WooCommerce do swoich stron i wpisów. Bez pisania kodu bloki te umożliwiają prezentowanie produktów, kategorii produktów, filtrów wyszukiwania, koszyków, realizacji zamówień i nie tylko.

Mówiąc prościej, WooCommerce Blocks to gotowe komponenty, które możesz wstawić do swojej witryny WordPress za pomocą edytora bloków, zapewniając łatwy sposób na włączenie funkcji e-commerce obsługiwanych przez WooCommerce. Wchodzą one w skład podstawowej wtyczki WooCommerce, więc otrzymujesz je automatycznie po zainstalowaniu i aktywowaniu WooCommerce w swojej witrynie WordPress.

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

Lista funkcji WooCommerce Block

Po zrozumieniu, czym jest blok WooCommerce, omówimy teraz po kolei każdą z dostępnych funkcji:

• Wszystkie produkty: Wyświetla wszystkie produkty sklepu w formie siatki.
• Aktywne filtry produktów: Wyświetla aktywne filtry produktów w formie listy lub jako chipsy (podobne do przycisków).
• Wszystkie recenzje: Wyświetla wszystkie recenzje produktów.
• Najlepiej sprzedający się produkt: Wyświetla najlepiej sprzedające się produkty w formie siatki.
• Zamówienie: Wyświetla formularz umożliwiający klientom złożenie zamówienia.
• Koszyk: Wyświetla koszyk zakupowy.
• Wyróżniona kategoria: Wyróżnia określone kategorie produktów wraz z przyciskami wezwania do działania.
• Wyróżniony produkt: Wyświetla wybrane wyróżnione produkty.
• Filtruj według ceny: Wyświetla zakres cen, według którego klienci mogą filtrować produkty. Możesz również włączyć edytowalny zakres cen, klikając tutaj przycisk lub tekst.
• Filtruj według stanu magazynowego: Umożliwia filtrowanie produktów na podstawie statusu dostępności w magazynie. Ta funkcja oferuje opcje wyświetlania produktów dostępnych, niedostępnych lub zamawianych ponownie.
• Filtruj według oceny: Umożliwia klientom filtrowanie produktów na podstawie ocen.
• Filtr według atrybutu: Filtruje produkty na podstawie rozmiaru lub koloru.
• Ręcznie wybrane produkty: Wyświetla ręcznie wybrane produkty w formie siatki, umożliwiając wybór konkretnych produktów do wyświetlenia.
• Mini koszyk: Zapewnia skrócony widok koszyka zakupowego.
• Najnowsze produkty: Wyświetla najnowsze produkty w układzie siatki. Można je dostosować, dodając/usuwając elementy takie jak tytuł, cena, ocena i przycisk zakupu.
• Produkt w promocji: Wyświetla produkty aktualnie objęte promocją w formie siatki i można go dostosować, dodając/usuwając elementy takie jak tytuł, cena, ocena i przycisk zakupu.
• Wyszukiwanie produktów: Dodaje pasek wyszukiwania, aby ułatwić klientom wyszukiwanie produktów.
• Produkt według tagu: Wyświetla produkty z określonymi tagami/etykietami w formie siatki.
• Produkt według atrybutu: Wyświetla produkty o określonych atrybutach (kolor, rozmiar itp.) w formacie siatki.
• Produkt według kategorii: Wyświetla produkty na podstawie kategorii w formacie siatki.
• Opinie według produktów: Wyświetla opinie pogrupowane 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 formie siatki.

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

Oprócz poznania funkcji dostępnych w blokach WooCommerce, spróbujmy użyć lub dodać siatkę produktów w WooCommerce. Upewnij się, że masz zainstalowaną wtyczkę WooCommerce blocks na swojej stronie. Oto jak ją dodać:

1. Otwórz stronę lub wpis , na którym chcesz wyświetlić siatkę produktów, a następnie wpisz tytuł „Produkt”.

2. W lewej nawigacji, kliknij przycisk (+), przewiń w dół do sekcji WooCommerce i wybierz „siatkę produktów”.

3. Następnie, aby skonfigurować blok, przejdź do panelu po prawej stronie.

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

• Ustawienia układu: Możesz dostosować liczbę wierszy i kolumn wyświetlanych w siatce produktów. Na przykład ustawienie obu na 2 zapewni zrównoważony widok.
• Ustawienia treś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 style: Możesz dodać klasy CSS, aby dostosować wygląd.

Jak dodać wyróżnione produkty do swojej strony

Blok Wyróżniony produkt pozwala prezentować konkretne produkty na stronie lub we wpisie. Za pomocą tego bloku możesz wybierać produkty, dostosowywać ich wygląd i umieszczać je w swojej treści, aby przyciągnąć odwiedzających do elementów, które chcesz promować.

Aby dodać blok Wyróżniony produkt, wykonaj następujące kroki:

1. Otwórz stronę lub wpis, w którym chcesz go dodać. Na przykład, jeśli umieszczasz go nad siatką produktów, utwórz w tym obszarze miejsce 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 „Wyróżniony produkt”.

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

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

5. Po dostosowaniu możesz opublikować lub zaktualizować stronę, aby zobaczyć wyświetlanie bloku polecanego produktu.

Jak dodać bloki filtrów w WooCommerce

Blok filtra WooCommerce ułatwia klientom znalezienie produktów spełniających ich kryteria wyszukiwania. Dzięki opcjom filtrowania klienci mogą szybko zawęzić wyniki wyszukiwania do produktów, które ich dotyczą.

Aby dodać blok filtrów, wykonaj następujące kroki:

1. Otwórz stronę lub wpis, w którym chcesz umieścić blok filtra.
2. Określ żądaną lokalizację, w której ma zostać umieszczony blok filtra.
3. Na pasku narzędzi edytora bloków kliknij przycisk „+”, a następnie wyszukaj opcje filtrów WooCommerce, takie jak filtr ceny, filtr stanu magazynowego, filtr atrybutów i filtr ocen.

Teraz omówmy każdy dostępny typ filtra. 

Dodawanie filtra według ceny

Blok filtra ceny produktu pozwala dodać funkcję filtrowania, która umożliwia użytkownikom wybór żądanego przedziału cenowego. Przedział cenowy może być wyświetlany jako edytowalne przyciski lub zwykły tekst. W razie potrzeby możesz dodać przyciski i dostosować ich 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. Może być wyświetlany w formie listy lub menu rozwijanego. Możesz także skonfigurować typ zapytania jako AND lub OR. Inne funkcje obejmują wyświetlanie liczby produktów, wybór poziomu nagłówka, dodawanie przycisków oraz wybór filtra.

Dodawanie filtra według stanu magazynowego

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

Bloki koszyka i zamówienia

ourBlok koszyka zakupowego dodaje wyświetlanie koszyka zakupowego do Twojej strony. Możesz dodać kalkulator kosztów wysyłki, wybrać link dla przycisku finalizacji zakupu i ustawić wyświetlanie w trybie ciemnym. Ten blok zapewnia również powiadomienie, że możesz ustawić stronę jako domyślną stronę koszyka zakupowego w ustawieniach WooCommerce. Zawiera także link do przekazania opinii.

Tymczasem blok realizacji zamówienia udostępnia formularz realizacji zamówienia dla Twojego koszyka. Zostaniesz poinformowany, że tę stronę można ustawić jako domyślną stronę realizacji zamówienia w ustawieniach WooCommerce. Dostępna jest 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 do strony.

Jak dostosować stronę sklepu w WooCommerce

Po zapoznaniu się ze sposobami korzystania z różnych bloków WooCommerce możesz połączyć kilka z nich, 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 nadaj jej nazwę „Sklep”.

2. Dodaj blok wyszukiwania produktów.

3. Dodaj blok listy kategorii produktów

Następnie ustaw styl wyświetlania na listę rozwijaną.

4. Dodaj Filtr ceny blok.
5. Dodaj Polecane produkty blok i wybierz produkty, które chcesz wyróżnić. Skonfiguruj według potrzeb.

6. Dodaj Wszystkie produkty blok.

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

7. Na koniec opublikuj stronę, aby zobaczyć ostateczny układ utworzonej strony sklepu.

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

Po pomyślnym utworzeniu niestandardowej strony sklepu za pomocą WooCommerce Blocks możesz teraz zacząć sprzedawać swoje produkty fizyczne i cyfrowe. 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. WP File Download Addon ułatwia zarządzanie plikami i kategoriami plików dla cyfrowych produktów WooCommerce. Możesz szybko tworzyć wiele produktów do pobrania cyfrowego powiązanych z jednym lub wieloma plikami.

Ponadto wtyczka ta integruje się z Dropbox, Google Drive, Microsoft OneDriveoraz funkcją Social Locker . Możesz udostępniać pliki z tych usług w chmurze jako cyfrowe pliki do pobrania WooCommerce z wysoce ograniczonym dostępem poprzez łączniki API chmury.

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

Podsumowanie

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

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

WP File Download Addon jest dostępny od 49 USD rocznie i korzysta z niego ponad 60 000 użytkowników. Na co więc czekasz? Dołącz do nas, aby lepiej sprzedawać produkty cyfrowe!