Jak dostosować stronę sklepu WooCommerce (bez kodu)

Szukasz sposobu na dostosowanie strony sklepu WooCommerce? W tym przewodniku krok po kroku poznasz trzy w 100% bezkodowe metody dostosowywania strony sklepu.

Strona sklepu Twojego sklepu, zwana także stroną katalogu, to strona zawierająca listę wielu produktów. Mogą to być wszystkie Twoje produkty (na „głównej” stronie sklepu) lub produkty z określoną kategorią lub tagiem.

Mówiąc bardziej technicznie, jest to projekt archiwum dla typu postu Produkty w sklepie WooCommerce.

Ponieważ strona sklepu pomaga odwiedzającym przeglądać i odkrywać Twoje produkty, ważne jest, aby była ona poprawna. Ten post nauczy Cię, jak to zrobić!

Poniżej nauczysz się trzech różnych sposobów dostosowywania strony sklepu WooCommerce bez kodu , używając naszego motywu Botiga jako przykładu:

• Wbudowane opcje w natywnym motywie WordPress Customizer
• Natywny edytor bloków WordPress
• Wtyczka kreatora stron Elementor (ta metoda pozwoli Ci korzystać z darmowej wersji Elementora)

Uwaga — Jeśli jeszcze nie utworzyłeś swojego sklepu WooCommerce, możesz przejść do naszego przewodnika na temat tworzenia sklepu WooCommerce. Gdy już będziesz mieć działający sklep, wróć tutaj, aby rozpocząć dostosowywanie strony sklepu!

Szybkie wprowadzenie do dostosowywania strony sklepu WooCommerce

Jeśli chcesz w pełni spersonalizować stronę sklepu WooCommerce, wybierz motyw WooCommerce, który zapewnia elastyczność.

Chociaż ogólne zasady, których nauczysz się w tym samouczku, mogą odnosić się do dowolnego motywu WooCommerce, my użyjemy motywu Botiga z kilku powodów:

• Zawiera szczegółowe opcje w WordPress Customizer, które pozwalają dostosować stronę sklepu bez konieczności projektowania wszystkiego od podstaw.
• Jeśli chcesz zaprojektować wszystko od zera, Botiga Pro ma wbudowaną funkcję, która pozwala dostosować wszystko za pomocą natywnego edytora bloków WordPress lub darmowej wersji Elementora.

Oprócz wielu opcji dostosowywania, Botiga jest również jednym z najszybszych motywów WooCommerce, dzięki czemu Twój sklep odniesie sukces również w innych obszarach.

Mając to na uwadze, ten samouczek nadal będzie przydatny, jeśli używasz innego motywu WooCommerce.

Na przykład większość motywów WooCommerce daje przynajmniej kilka opcji w Konfiguratorze.

Podobnie ogólna metoda Elementora, którą prezentujemy, będzie działać z dowolnym motywem. Jedyna różnica polega na tym, że musisz kupić Elementor Pro, jeśli nie używasz Botiga, podczas gdy Botiga pozwala robić wszystko, korzystając z bezpłatnej wersji Elementora.

Jeśli chcesz dowiedzieć się więcej o Botiga, możesz przejść do strony motywu Botiga.

Metoda 1 – Personalizacja strony sklepu za pomocą narzędzia WordPress Customizer

Dla większości ludzi najłatwiejszym sposobem edytowania strony sklepu WooCommerce jest użycie opcji motywu w WordPress Customizer.

Dzięki Botiga otrzymujesz szczegółowy zestaw opcji, które pomogą Ci dostosować układ, styl i zawartość strony sklepu w Twoim sklepie.

Inny motyw może nie oferować tak wielu opcji, ale powinieneś być w stanie znaleźć przynajmniej kilka w Konfiguratorze.

Oto jak użyć opcji motywu Botiga, aby dostosować stronę sklepu WooCommerce.

1. Wybierz, co ma być wyświetlane na stronie Twojego sklepu

Na dobry początek wybierz, jakie treści mają być wyświetlane na stronie Twojego sklepu. Domyślnie wyświetla się tylko produkty, ale Botiga daje również możliwość wyświetlania kategorii.

Aby uzyskać dostęp do tych ustawień, otwórz WordPress Customizer, przechodząc do Wygląd → Dostosuj na pulpicie nawigacyjnym WordPress.

Następnie wybierz Ogólne w WooCommerce :

Teraz użyj menu rozwijanego Wyświetlanie strony sklepu , aby wybrać, czy chcesz wyświetlać tylko produkty, tylko kategorie, czy oba.

Możesz również dokonać podobnego wyboru dla stron archiwum kategorii, korzystając z listy rozwijanej Wyświetlanie kategorii . W tym przypadku decydujesz, czy wyświetlić podkategorie.

2. Otwórz ustawienia strony sklepu w WordPress Customizer

Następnie wróć do listy menu głównego w Konfiguratorze i wybierz opcje Katalogu produktów , aby w pełni dostosować stronę swojego sklepu.

Zobaczysz teraz kilka opcji na pasku bocznym, podzielonych na dwie zakładki — Ogólne i Styl :

• Ogólne – Kontroluj układ i zawartość elementów na stronie Twojego sklepu.
• Styl – Dostosuj wygląd elementów na stronie swojego sklepu, na przykład zmieniając kolory/czcionki lub dodając obramowania.

3. Dostosuj układ ogólny

Aby rozpocząć, rozwiń ustawienia układu , aby dostosować ogólny układ strony sklepu.

Najpierw wybierz typ układu, który oferuje trzy ogólne opcje:

• Siatka
• Lista
• Kamieniarstwo

Możesz także kontrolować ogólne opcje układu, takie jak liczba używanych wierszy i kolumn.

Poniżej możesz wybrać, jakiego stylu nagłówka chcesz użyć na stronie swojego sklepu i jakie treści umieścić w nagłówku, np. czy wyświetlać kategorie produktów.

W dalszej części menu Dostosowywanie dostępne są opcje kontrolowania układu paska bocznego, elementów strony i podziału na strony:

• Układ paska bocznego – Możesz dodać pionowy lub poziomy pasek boczny. Następnie możesz kontrolować zawartość paska bocznego za pomocą widżetów. Może to być naprawdę świetne do dodawania filtrów produktów, aby pomóc odwiedzającym przeglądać Twoje produkty.
• Elementy strony – Możesz pokazać/ukryć różne elementy na stronie.
• Paginacja – Możesz użyć normalnego podziału na strony, nieskończonego przewijania lub przycisku „Załaduj więcej” opartego na technologii Ajax, który ładuje nowe produkty bez przeładowywania strony.

4. Dostosuj Kartę Produktu

Następnie możesz otworzyć sekcję Karta produktu , aby dostosować wygląd poszczególnych produktów na stronie sklepu.

Po pierwsze, możesz wybrać różne układy kart i rozmieszczenie przycisków Dodaj do koszyka.

Na przykład na poniższym zrzucie ekranu widać, że przenieśliśmy przycisk Dodaj do koszyka, aby unosił się nad obrazem produktu w lewym dolnym rogu.

W dalszej części ustawień możesz dokonać kilku innych ważnych wyborów:

• Dostosuj lub wyłącz zachowanie szybkiego podglądu produktu.
• Włącz/wyłącz określone elementy treści — na przykład, czy wyświetlać liczbę recenzji na stronie sklepu.
• Dostosuj wyrównanie i odstępy.

5. Dostosuj tag sprzedaży i kategorie

Następnie możesz rozwinąć sekcje Tag sprzedaży i Kategorie , aby skonfigurować te obszary na stronie swojego sklepu.

Ustawienia tagu sprzedaży pozwalają kontrolować umiejscowienie i tekst plakietki sprzedaży. Istnieje również opcja pokazania procentu sprzedaży, co spowoduje dynamiczne wstawienie odpowiedniego rabatu dla każdego produktu.

Ustawienia kategorii pozwalają kontrolować układ kart kategorii, jeśli w kroku 1 tego przewodnika wybrano wyświetlanie kategorii:

6. Dostosuj opcje stylu według potrzeb

Gdy jesteś zadowolony z układu i zawartości strony swojego sklepu, możesz przejść do zakładki Styl , aby dostosować styl wszystkiego zgodnie z potrzebami.

Ponownie, tutaj możesz zmieniać kolory, dostosowywać czcionki, dodawać obramowania i tak dalej.

Nie musisz tu nic zmieniać. Ale jeśli chcesz wprowadzić pewne poprawki, jest to dobry obszar do zbadania.

7. Poznaj inne opcje dostosowywania

Oprócz dedykowanego obszaru Katalog produktów w Konfiguratorze, Botiga oferuje również kilka innych opcji, które mogą mieć wpływ na stronę Twojego sklepu.

Na przykład możesz dostosować kolor przycisków dodawania do koszyka i szybkiego podglądu (a także wszystkich innych przycisków w Twojej witrynie), otwierając ustawienia Przyciski .

Jeśli jest jakiś szczegół, który chcesz zmienić, warto zapoznać się z innymi opcjami. Ale jeśli już podoba Ci się wygląd strony Twojego sklepu, nie musisz szukać dalej.

8. Opublikuj układ strony swojego sklepu

Gdy będziesz zadowolony z wyglądu strony swojego sklepu, wystarczy kliknąć przycisk Publikuj , aby opublikować ją w swoim sklepie.

Metoda 2 – Personalizacja strony sklepu za pomocą edytora bloków WordPress

W przypadku większości sklepów wbudowane opcje dostosowywania Botiga zapewniają wystarczającą elastyczność, jeśli chodzi o tworzenie niestandardowej strony sklepu w WooCommerce.

Jednak możesz mieć sytuacje, w których chcesz zbudować naprawdę niestandardowy projekt od podstaw.

Aby pomóc Ci to osiągnąć bez kodu, możesz użyć funkcji Templates Builder w Botiga Pro, aby dostosować stronę sklepu za pomocą natywnego edytora bloków WordPress lub Elementora (nawet darmowej wersji).

W tej sekcji pokażemy, jak to działa z edytorem bloków. Następnie w następnej sekcji pokażemy, jak to działa z Elementorem. Jeśli już wiesz, że chcesz używać Elementora, kliknij ten link, aby przejść do tej sekcji.

1. Włącz moduł konstruktora szablonów Botiga Pro

Aby włączyć kreator szablonów, przejdź do Wygląd → Pulpit motywu → Funkcje motywu .

Następnie przewiń w dół i włącz moduł Templates Builder .

Będziesz potrzebować Botiga Pro, aby aktywować ten moduł — jeśli jeszcze go nie masz, możesz go kupić, klikając tutaj.

2. Utwórz nowy układ strony sklepu

Następnie przejdź do Wygląd → Szablony Botiga → Dodaj szablon, aby utworzyć nowy szablon strony sklepu.

W interfejsie szablonu nadaj mu nazwę (np. „Strona sklepu”) i jako typ szablonu wybierz Katalog sklepu .

3. Zaprojektuj stronę swojego sklepu za pomocą bloków

Teraz możesz użyć edytora do zaprojektowania układu strony sklepu za pomocą bloków.

Możesz użyć dowolnego z istniejących bloków WordPress (lub bloków z innych wtyczek).

Botiga dodaje również kilka własnych bloków WooCommerce dla ważnych dynamicznych treści, takich jak szczegóły archiwum sklepu i szczegóły produktu.

Aby faktycznie wyświetlić listę niektórych rodzajów produktów, możesz użyć bloku Zapytanie o produkt .

Na początku dodanie bloku Zapytanie o produkt pokaże siatkę Twoich produktów.

Następnie możesz użyć ustawień bloku, aby filtrować różne typy produktów, dostosowywać układ, dostosowywać kartę produktu, zmieniać style i nie tylko.

Aby uzyskać bardziej szczegółowy wygląd, obejrzyj również ten film:

4. Opublikuj swój szablon

Gdy będziesz zadowolony z projektu strony sklepu, wystarczy kliknąć przycisk Publikuj .

Kiedy otworzysz stronę sklepu w interfejsie, powinieneś zobaczyć swój niestandardowy szablon strony sklepu.

Metoda 3 – Personalizacja strony sklepu za pomocą wtyczki Elementor

Jeśli wolisz używać Elementora zamiast edytora bloków, możesz również zastosować podobne podejście, aby dostosować stronę sklepu WooCommerce.

Zwykle potrzebujesz Elementor Pro, aby dostosować stronę sklepu w swoim sklepie. Jednak dzięki Botiga Pro możesz w pełni dostosować stronę swojego sklepu za pomocą bezpłatnej wersji Elementora.

Możesz to osiągnąć, ponieważ Botiga Pro dodaje własne niestandardowe widżety Elementor, które pozwalają skonfigurować stronę sklepu.

Biorąc to pod uwagę, Botiga Pro jest nadal w pełni kompatybilny z Elementor Pro. Więc jeśli masz już licencję Elementor Pro, nadal możesz korzystać ze wszystkich dodatkowych funkcji projektowania, które dodaje.

Oto jak edytować stronę sklepu WooCommerce za pomocą Elementora i Botiga.

1. Włącz moduł konstruktora szablonów Botiga Pro

Aby włączyć kreator szablonów, przejdź do Wygląd → Pulpit motywu → Funkcje motywu .

Następnie przewiń w dół i włącz moduł Templates Builder .

Będziesz potrzebować Botiga Pro, aby aktywować ten moduł — jeśli jeszcze go nie masz, możesz go kupić, klikając tutaj.

2. Utwórz nowy układ strony sklepu i uruchom Elementor

Następnie przejdź do Wygląd → Szablony Botiga → Dodaj szablon, aby utworzyć nowy szablon strony sklepu.

W interfejsie szablonu:

1. Nadaj jej nazwę wewnętrzną — np. „Strona sklepu”.
2. Wybierz Katalog sklepu jako typ szablonu.
3. Kliknij przycisk Zapisz wersję roboczą , aby zapisać ją w bazie danych (jest to pomocne przy korzystaniu z Elementora).

Gdy to zrobisz, możesz kliknąć przycisk Edytuj za pomocą Elementora , aby uruchomić interfejs Elementora.

3. Użyj widżetów Botiga do stworzenia projektu strony swojego sklepu

Teraz możesz używać zwykłego interfejsu Elementora do projektowania strony sklepu.

Aby pomóc Ci skonfigurować projekt za pomocą bezpłatnej wersji Elementora, Botiga dodaje kilka własnych widżetów w sekcji Botiga WooCommerce .

Dla strony sklepu najważniejszym widżetem jest widżet Zapytanie o produkt , który pozwala wyświetlić listę niektórych/wszystkich Twoich produktów.

Istnieją również inne przydatne widżety, takie jak Tytuł archiwum , Opis archiwum i inne widżety z etykietą Archiwum.

W ustawieniach widżetu Zapytanie o produkt możesz wybrać, które produkty mają być wyświetlane, dostosować układ, zmienić kartę produktu i nie tylko.

Możesz także skorzystać ze wszystkich normalnych stylów i zaawansowanych opcji oferowanych przez Elementor.

Oprócz korzystania z widżetów Botiga WooCommerce do projektowania strony sklepu, możesz także używać dowolnych innych widżetów Elementor, w tym widżetów z dodatków Elementor innych firm.

4. Opublikuj stronę swojego sklepu

Gdy będziesz zadowolony z projektu swojej strony sklepu, kliknij przycisk Publikuj w Elementorze, aby ją opublikować.

Po opublikowaniu możesz otworzyć stronę swojego sklepu w interfejsie i powinieneś zobaczyć niestandardowy projekt utworzony za pomocą Elementora.

Wniosek: Utwórz niestandardową stronę sklepu WooCommerce już dziś

Na tym kończymy nasz przewodnik dotyczący dostosowywania strony sklepu WooCommerce bez potrzeby używania kodu.

Dla większości ludzi wbudowane opcje Botiga w Customizerze zapewniają już wystarczającą elastyczność do stworzenia niestandardowej strony sklepu WooCommerce.

Jeśli chcesz mieć jeszcze większą kontrolę, funkcja Template Builder w Botiga Pro pozwala w pełni dostosować każdą część strony sklepu za pomocą natywnego edytora bloków WordPress lub Elementora (nawet darmowej wersji).

Jeśli jeszcze nie korzystasz z Botiga, rozważ przejście na Botiga już dziś, aby mieć dostęp do wszystkich tych opcji dostosowywania — oraz o wiele więcej!

Czy nadal masz pytania dotyczące dostosowywania strony sklepu WooCommerce? Daj nam znać w komentarzach.