Kompletny przewodnik WooCommerce Block

WooCommerce to jedna z popularnych wtyczek do tworzenia witryn e-commerce na WordPress. WooCommerce Blocks to jedna z wtyczek w WooCommerce, zaprojektowana, 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 – a wszystko to bez pisania ani jednej linii kodu.  

Aby móc korzystać z tych nowych bloków, musisz zainstalować wtyczkę WordPress WooCommerce Blocks. Ta wtyczka jest poligonem doświadczalnym dla funkcji eksperymentalnych, które można dodać do rdzenia WooCommerce.

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

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 funkcjonalności WooCommerce do Twoich stron i postów. Bez pisania kodu te bloki umożliwiają prezentację produktów, kategorii produktów, filtrów wyszukiwania, koszyków na zakupy, kas i nie tylko.

Mówiąc prościej, bloki WooCommerce 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 funkcjonalności e-commerce obsługiwanej przez WooCommerce. Jest to podstawowa wtyczka WooCommerce, więc otrzymasz ją automatycznie po zainstalowaniu i aktywowaniu WooCommerce na swojej stronie WordPress.

Ponadto płynnie integrują się 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 tutaj ...

Lista funkcji bloku WooCommerce

Po zrozumieniu, czym jest blok WooCommerce, omówimy kolejno każdą udostępnioną funkcję:

• 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 elementy (podobnie jak przyciski).
• Wszystkie recenzje: Wyświetla wszystkie recenzje produktów.
• Najlepiej sprzedający się produkt: Wyświetla najlepiej sprzedające się produkty w formacie siatki.
• Do kasy: Wyświetla formularz umożliwiający klientom realizację zamówień.
• Koszyk: Wyświetla koszyk.
• Polecana kategoria: wyróżnia określone kategorie produktów wraz z przyciskami wezwania do działania.
• Polecany produkt: Wyświetla wybrane polecane produkty.
• Filtruj według ceny: wyświetla przedział cenowy, w którym klienci mogą filtrować produkty. Możesz także włączyć edytowalny zakres cen, klikając przycisk lub tekst tutaj.
• Filtruj według zapasów: umożliwia filtrowanie produktów na podstawie stanu dostępności w magazynie. Ta funkcja umożliwia wyświetlanie produktów znajdujących się w magazynie, niedostępnych lub zamawianych ponownie.
• Filtruj według ocen: umożliwia klientom filtrowanie produktów na podstawie ocen.
• Filtruj według atrybutu: filtruje produkty na podstawie rozmiaru lub koloru.
• Produkty wybrane ręcznie: wyświetla ręcznie wybrane produkty w formacie siatki, co pozwala wybrać, które produkty mają być wyświetlane.
• Mini koszyk: Zapewnia krótki podgląd koszyka.
• Najnowsze produkty: pokazuje najnowsze produkty ułożone w siatkę. format. Można je dostosować, dodając/usuwając elementy, takie jak tytuł, cena, ocena i przycisk Kup.
• Produkt w sprzedaży: Wyświetla produkty aktualnie w sprzedaży w formacie siatki i można je dostosować, dodając/usuwając elementy, takie jak tytuł, cena, ocena i przycisk Kup.
• 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 formacie siatki.
• Produkt według atrybutu: wyświetla produkty z określonymi atrybutami (kolor, rozmiar itp.) w formacie siatki.
• Produkt według kategorii: wyświetla produkty w oparciu o kategorie w formacie siatki.
• Recenzja produktów ubocznych: Wyświetla recenzje pogrupowane według produktów.
• Recenzja 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 korzystać z bloku siatki produktów w WooCommerce

Oprócz zapoznania się z funkcjami dostępnymi w blokach WooCommerce, spróbujmy zastosować lub dodać siatkę produktów w WooCommerce. Upewnij się, że masz zainstalowaną wtyczkę blokującą WooCommerce na swojej stronie. Oto jak go dodać:

1. Otwórz stronę lub post , na którym chcesz wyświetlić siatkę produktów, a następnie wpisz 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: Możesz dostosować liczbę wierszy i kolumn wyświetlanych w siatce produktów. Na przykład ustawienie obu na 2, aby uzyskać zrównoważony widok.
• Ustawienia treści: Możesz wyświetlić menu rozwijane umożliwiające sortowanie produktów. Funkcja ta umożliwia klientom sortowanie produktów według własnych preferencji. Możesz go wyłączyć, jeśli nie jest potrzebny.
• Zaawansowana stylizacja: możesz dodać klasy CSS, aby dostosować wygląd.

Jak dodać polecane produkty do swojej strony

Blok Polecane produkty pozwala zaprezentować określone produkty na Twojej stronie lub w poście. Za pomocą tego bloku możesz wybierać produkty, dostosowywać ich wygląd i umieszczać je w swoich treściach, aby przyciągnąć odwiedzających do produktów, które chcesz promować.

Aby dodać Polecany Blok Produktów, wykonaj następujące kroki:

1. Otwórz stronę lub post, do którego chcesz go dodać. Na przykład, jeśli umieścisz go nad siatką produktów, utwórz miejsce w tym obszarze i kliknij wyświetlony przycisk „+”.

2. Wybierz przycisk „+” na pasku narzędzi bloku, aby otworzyć listę bloków, a następnie wyszukaj i wybierz „Polecany 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 alternatywny tekst do zdjęć produktów.
• Wybierz kolor nakładki bloku.
• Dostosuj przezroczystość bloku.

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

Jak dodać bloki filtrów w WooCommerce

Blok filtrów WooCommerce ułatwia klientom znalezienie produktów spełniających ich kryteria wyszukiwania. Udostępniając opcje filtrowania, klienci mogą szybko zawęzić wyniki wyszukiwania do odpowiednich dla nich produktów.

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

1. Otwórz stronę lub post, w którym chcesz umieścić blok filtra.
2. Określ żądane miejsce umieszczenia bloku filtra.
3. Na pasku narzędzi edytora bloków kliknij przycisk „+” i wyszukaj opcje filtra WooCommerce, takie jak Filtr ceny, Filtr giełdowy, Filtr atrybutów i Filtr ocen.

Omówmy teraz każdy dostępny typ filtra. 

Dodanie filtra według ceny

Blok produktów z filtrem cen umożliwia dodanie funkcji filtrowania, która umożliwia użytkownikom wybranie żą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. Z dostępnej listy możesz wybrać atrybuty, których chcesz użyć. Jego wyświetlanie może mieć formę listy lub menu rozwijanego. Można 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 i wybór filtra.

Dodawanie filtra według zapasów

Blok filtrów stanu zapasów umożliwia użytkownikom wyświetlanie produktów na podstawie ich stanu dostępności. Mogą wyświetlać produkty dostępne (w magazynie), niedostępne (brak w magazynie) lub zamówione. Można go także skonfigurować tak, aby wyświetlał liczbę produktów, wybierał poziom nagłówka i dodał przyciski. Tego bloku można używać z innymi blokami WooCommerce, takimi jak Wszystkie produkty. Niestety ten blok nie zapewnia podglądu po dodaniu do strony.

Bloki koszyka i kasy

naszBlok koszyka zakupów dodaje wyświetlanie koszyka na Twojej stronie. Możesz dołączyć kalkulator kosztów wysyłki, wybrać link do przycisku realizacji zakupu i ustawić wyświetlacz w trybie ciemnym. Ten blok zawiera również powiadomienie, że możesz ustawić tę stronę jako domyślną stronę koszyka w ustawieniach WooCommerce. Zawarty jest także link umożliwiający przesłanie opinii.

Tymczasem blok kasy udostępnia formularz realizacji koszyka. Zostaniesz poinformowany, że tę stronę można ustawić jako domyślną stronę realizacji transakcji w ustawieniach WooCommerce. Dostępna jest także opcja wyświetlania w trybie ciemnym. Blok ten składa się z kilku elementów, które można indywidualnie dostosować. Niestety, ten blok nie zapewnia podglądu po dodaniu do strony.

Jak dostosować stronę sklepu w WooCommerce

Po nauczeniu się korzystania 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 następujące kroki.

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

2. Dodaj blok Wyszukiwanie produktów .

3. Dodaj blok Lista kategorii produktów

Następnie ustaw styl wyświetlania na liście rozwijanej.

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

6. Dodaj Wszystkie produkty .

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

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

Zbuduj swój sklep internetowy za pomocą WooCommerce Blokuj i sprzedawaj swój produkt

Po pomyślnym utworzeniu niestandardowej strony sklepu za pomocą bloków WooCommerce możesz teraz rozpocząć sprzedaż swoich produktów fizycznych i cyfrowych. Szczególnie w przypadku produktów cyfrowych ważne jest dodanie wtyczki do pobierania plików, takiej jak WP File Download Addon.

Ta wtyczka umożliwia sprzedaż produktów 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 wieloma plikami.

Ponadto ta wtyczka integruje się z Dropbox, Google Drive, Microsoft OneDrive i funkcją Social Locker . Możesz udostępniać pliki z tych usług w chmurze jako cyfrowe pliki do pobrania WooCommerce z bardzo ograniczonym dostępem za pośrednictwem łączników API w chmurze.

Dzięki dodatkowi WP File Download sprzedaż produktów cyfrowych w sklepie internetowym WooCommerce stała się bardziej dostępna i wydajna. Po zbudowaniu sklepu za pomocą bloków WooCommerce ta wtyczka doskonale uzupełnia sprzedaż treści cyfrowych.

Wniosek

WooCommerce Blocks to wtyczka umożliwiająca zbudowanie kompletnego sklepu internetowego w systemie WordPress bez konieczności pisania kodu. Dzięki różnym blokom, takim jak siatki produktów, filtry i prezentacje produktów, możesz łatwo stworzyć angażujące i przyjazne dla użytkownika doświadczenie zakupowe. Znajomy interfejs typu „przeciągnij i upuść” sprawia, że ​​tworzenie sklepu internetowego jest szybsze i wydajniejsze.

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

Dodatek WP File Download jest dostępny już od 49 USD rocznie i był używany przez ponad 60 000 członków. Więc na co czekasz? Dołącz do nas, aby uzyskać lepszą sprzedaż produktów cyfrowych!