Rozpocznij sklep WooCommerce z WordPress
WooCommerce obsługuje sklep: produkty, zamówienia, podatki i płatności. Nie zadba jednak o to, by wszystko to wyglądało jak marka sklepu. Ten przewodnik buduje cztery ekrany, które widzi klient, przy użyciu bloków w edytorze, który WordPress już oferuje.
Krok 1: Zainstaluj WooCommerce
WooCommerce to bezpłatna wtyczka z katalogu wtyczek WordPress, która odpowiada za wszystko, co komercyjne: dane produktów, stany magazynowe, zamówienia, zasady podatkowe, strefy wysyłki i bramki płatności. Canvas nigdy nie zastępuje tej warstwy, dlatego pozostałe rozszerzenia WooCommerce nadal działają.
Dwa sposoby instalacji
- Pozwól kreatorowi konfiguracji to zrobić. Wybierz dema sklepu podczas konfiguracji, a krok wtyczek zainstaluje i aktywuje WooCommerce przed importem, ponieważ sklep wymaga wtyczki do obsługi sklepu.
- Zainstaluj samodzielnie z sekcji Wtyczki, Dodaj nowy, i uruchom kreator WooCommerce. Wybierz tę opcję, jeśli dodajesz sklep do witryny, którą już prowadzisz.
Tak czy inaczej, przejdź raz przez konfigurację WooCommerce i odpowiedz na pytania o kraj, walutę i sprzedawane produkty. Te odpowiedzi wpływają później na podatki i wysyłkę, a ich późniejsza zmiana jest żmudna.
Skonfiguruj usługę dostarczania e-maili przed przyjęciem pierwszego prawdziwego zamówienia. Potwierdzenia zamówień są domyślnie wysyłane przez serwer, na którym działa WordPress, a sklep, którego potwierdzenia trafiają do spamu, generuje zgłoszenia do wsparcia, na które nie da się odpowiedzieć.
Krok 2: Zacznij od demo sklepu lub od pustego katalogu
Tutaj trzeba dokonać wyboru, który warto przemyśleć przez dziesięć minut.
Zaimportuj demo sklepu
21 z 88 dem to działających sklepów WooCommerce. Import jednego z nich daje produkty, kategorie, atrybuty, kolory wariantów, zaprojektowany sklep, zaprojektowaną stronę produktu, koszyk i kasę, wszystko na miejscu i w pełni edytowalne. To najszybszy sposób, by zobaczyć, jak elementy do siebie pasują, a jeśli import nie przypadnie do gustu, można go cofnąć w całości.
Buduj na własnym katalogu
Jeśli produkty są już sprzedawane i zapisane w bazie danych, wybierz opcję tylko stron i zaimportuj ją do istniejącej witryny. Strony demo i wpisy, których używają, są przenoszone bez ustawień, menu i strony głównej dema, a katalog pozostaje dokładnie tam, gdzie jest.
Tak czy inaczej strony WooCommerce w witrynie zostają przejęte, więc zawsze jest tylko jeden sklep, jeden koszyk, jedna finalizacja zamówienia i jedna strona konta.
Krok 3: Dodaj pierwsze produkty
Produkty to rekordy WooCommerce, dodawane w sekcji Produkty w panelu administracyjnym WordPress, a ta część jest celowo zwyczajna. Poświęć tu czas zamiast na układ, bo dobra strona produktu to przede wszystkim dobre dane produktu.
- Jedno czytelne zdjęcie na produkt, wykonane tak samo dla każdej pozycji. Siatka katalogu wygląda na zaprojektowaną, gdy kształty do siebie pasują, a na naprędce złożoną, gdy nie pasują.
- Krótki opis, który odpowiada na pytanie, jakie naprawdę ma kupujący. Rozmiar, materiał, czas dostawy, co się dzieje, gdy produkt nie pasuje.
- Kategorie zgodne z tym, jak kupują klienci, a nie z tym, jak uporządkowano magazyn.
- Atrybuty dla wszystkiego, co się zmienia. Kolor, rozmiar, wykończenie. Podaj terminom koloru rzeczywistą wartość barwy w panelu administracyjnym, bo to właśnie ona później zamienia listę rozwijaną w próbki kolorów.
- Stan magazynowy, waga i wymiary przy wysyłce produktów fizycznych. Reguły wysyłki z nich korzystają.
Dodaj trzy produkty, zanim zaczniesz cokolwiek projektować. Układ oceniany na podstawie jednego przykładowego produktu to układ, który trzeba będzie przebudować.
Krok 4: Projektowanie strony sklepu
Sklep to katalog, którego zadaniem jest szybko doprowadzić kogoś do strony produktu. Canvas daje do tego bloki, a zwykle wystarczy jedno ustawienie motywu z trzema wariantami układu.
Bloki
Siatka produktów pobiera dane z kategorii, tagu, wyszukiwania lub ręcznie wybranej listy. Karuzela produktów robi to samo w jednym rzędzie na stronie głównej. Karty kategorii produktów kierują użytkowników do wybranego działu. Filtr cen pozwala kupującym zawęzić długi katalog. Każdy z nich to blok z panelem ustawień, więc liczba kolumn, źródło i sortowanie są opcjami, a nie kodem.
Szablon bazowy
Sam sklep to szablon bloku, który możesz otworzyć w Edytorze witryny. Ułóż go na pełną szerokość, z lewym paskiem bocznym, prawym paskiem bocznym lub obydwoma, zależnie od tego, czy filtry i kategorie uzasadniają swoje miejsce w katalogu. Jest w sumie 18 szablonów sklepu, obejmujących sklep, stronę produktu, archiwa, koszyk i finalizację zamówienia.
Domyślne ustawienia całego sklepu
Opcje motywu obejmują 39 ustawień sklepu w 5 zakładkach: katalog, strona produktu, koszyk i kasa, mini koszyk w nagłówku oraz tryb katalogu. Tutaj znajduje się liczba produktów na stronie, paginacja, kształt zdjęcia produktu, ustawienie pokazywania dodatkowych zdjęć z galerii po najechaniu oraz zawartość nakładki po najechaniu. Blok, który ustawia jedną z tych opcji samodzielnie, nadal ma pierwszeństwo na stronie, na której się znajduje.
Krok 5: Zaprojektuj stronę produktu
Ta strona sprzedaje, więc zasługuje na więcej niż domyślny układ, z którego korzysta każdy sklep w internecie.
Zbuduj z gotowych elementów
Każdy element strony produktu to blok: galeria zdjęć, cena, ocena gwiazdkowa, metadane, krótki opis, próbki wariantów, przycisk dodaj do koszyka, zakładki, pasek udostępniania i powiązane produkty. Możesz je przenosić, zmieniać ich wygląd lub całkiem pominąć, a strona nadal będzie działać, ponieważ każdy blok pobiera własne dane z WooCommerce.
Lub zacznij od gotowego układu
Jeśli wolisz nie zaczynać od poszczególnych części, wybierz jeden z gotowych układów pojedynczego produktu i przesuwaj jego elementy: układ domyślny, przyklejoną sekcję podsumowania, która podąża za galerią podczas przewijania, układ listy, projekt oparty na kolorze, układ sklepu, dwa układy galerii z własnym linkowaniem oraz warianty z paskiem bocznym po lewej, po prawej lub dwoma paskami bocznymi. Przypisz układ dla każdego produktu w edytorze albo ustaw domyślny dla sklepu w Opcjach motywu.
Co umieścić w pierwszym widoku strony
Zdjęcie, nazwa, cena, wybór wariantu i przycisk dodaj do koszyka. Reszta, łącznie z opisem, którego większość osób nigdy nie czyta, może znaleźć się niżej. Sprawdź to na telefonie, zanim uznasz, że się mylisz.
Krok 6: Koszyk i finalizacja zamówienia
Te dwa ekrany to miejsca, w których tracone są pieniądze, a w większości motywów są to ekrany, których nie wolno edytować. Tutaj są blokami jak wszystkie inne.
Koszyk
Blok Canvas Cart Table na zawartość koszyka, blok Canvas Cart Totals na podsumowanie i blok Canvas Cross-Sells na produkt, który kupujący rzeczywiście mógłby dodać. Trzymaj to krótko i dbaj o wyraźny przycisk. Najczęstszym błędem w koszyku jest ściana promocyjnych treści między sumą a przyciskiem realizacji zamówienia.
Finalizacja zakupu
Blok rozliczeniowy dla formularza, blok przeglądu zamówienia dla tego, co jest kupowane, oraz blok powiadomień z komunikatami informującymi kupującego o tym, co się stało. WooCommerce nadal obsługuje zamówienie, płatność i e-maile, a sposób wyświetlania ekranu ustala się samodzielnie.
Reguły, które same się opłacają
- Proś tylko o pola, których naprawdę wymaga wysyłka.
- Pokaż łączny koszt, wraz z dostawą, przed etapem płatności.
- Podaj słownie, po ilu dniach zamówienie dotrze.
- Umieść politykę zwrotów w miejscu, które zauważy zdenerwowany kupujący dokonujący pierwszego zakupu.
Krok 7: Próbki wariantów, dodawanie do koszyka i style kart
W integrację wchodzą trzy elementy zachowania sklepu, które zwykle wymagają osobnej wtyczki każdy.
- Próbki kolorów atrybutów. Nadaj terminowi atrybutu produktu kolor w panelu administracyjnym, a produkty z wariantami zamiast listy rozwijanej pokażą kolorowe kropki lub przyciski. Kupujący wybiera wariant na podstawie wyglądu, co ma największe znaczenie na telefonie.
- Dodawanie do koszyka bez przeładowania strony. Dodanie produktu z siatki, karuzeli lub nakładki karty aktualizuje koszyk w miejscu, dzięki czemu klient zostaje na stronie, którą przegląda, a koszyk w nagłówku na bieżąco pokazuje liczbę produktów.
- Style kart produktów. Ustaw jeden kształt dla wszystkich zdjęć z katalogu, aby siatka była równa, wybierz, czy dodatkowe zdjęcia z galerii mają się pokazywać po najechaniu, czy działać jako pokaz slajdów, i zdecyduj, co oferuje nakładka po najechaniu: kup, szybki podgląd lub oba.
Wszystkie trzy to ustawienia. Żadne z nich nie wymaga fragmentu kodu, motywu potomnego ani drugiej wtyczki, a każde można wyłączyć, jeśli wolisz prostsze działanie.
Niektóre motywy sprzedają tę warstwę osobno. OceanWP udostępnia bezpłatną integrację z WooCommerce i oferuje Ocean eCommerce Pro jako osobny produkt, a porównanie Canvas z OceanWP przedstawia, co zawiera każdy plan dla sklepu.
Krok 8: Płatności, szybkość, a na końcu zamówienie testowe
Projekt na końcu, pieniądze na początku. Przejdź przez to, zanim ogłosisz, że sklep jest otwarty.
Konfiguracja sprzedażowa w WooCommerce
- Połącz bramki płatności, których chcesz używać, i dokończ ich weryfikację, która zwykle trwa dłużej, niż się spodziewasz.
- Ustaw reguły podatkowe i strefy wysyłki dla miejsc, do których faktycznie wysyłasz.
- Napisz strony zwrotu środków, zwrotów i dostawy oraz dodaj do nich linki w stopce i w procesie finalizacji zamówienia.
Szybkość w Canvas
WooCommerce ładuje skrypty i arkusze stylów na każdej stronie witryny, również na tych, które niczego nie sprzedają. Pięć przełączników to ogranicza: wyłącz JavaScript WooCommerce na stronach, które nie wyświetlają treści sklepu, wyłącz śledzenie atrybucji zamówień, zatrzymaj odpytywanie serwera przez skrypt cart fragments na każdej stronie pokazującej koszyk oraz usuń biblioteki siły hasła i select poza stronami konta i kasy. Znajdują się one wśród 35 optymalizacji, a każdą z nich można cofnąć.
Następnie złóż prawdziwe zamówienie
Kup coś we własnym sklepie, na telefonie, korzystając z transmisji danych komórkowych. Zapłać prawdziwą kartą, jeśli bramka płatności obsługuje testowy zwrot. Sprawdź, czy e-mail z potwierdzeniem dociera i czy zamówienie pojawia się w panelu administracyjnym, a następnie wykonaj zwrot płatności. Wszystko, co uda się znaleźć w ciągu tych pięciu minut, klient znalazłby w zamian.
Źródła
Tam, gdzie ten przewodnik opisuje coś spoza samego Canvas, poniżej znajdziesz oficjalne strony, na których to udokumentowano.
- Instalacja i odinstalowywanie WooCommercewoocommerce.com · WooCommerce jest bezpłatny, instaluje się z ekranu Wtyczki i otwiera własny kreator konfiguracji
- Strony WooCommercewoocommerce.com · WooCommerce wyznacza po jednej stronie dla sklepu, koszyka, finalizacji zamówienia i konta
- Konfigurowanie podatków w WooCommercewoocommerce.com · Stawki podatku ustawia się w ustawieniach WooCommerce
- Konfigurowanie stref wysyłkiwoocommerce.com · Strefa wysyłki to obszar geograficzny, do którego wysyłasz towary
- Śledzenie atrybucji zamówieńwoocommerce.com · Co zapisuje atrybucja zamówień i ustawienie WooCommerce, które ją wyłącza
Co dalej
Dwa przewodniki o reszcie witryny wokół sklepu oraz pełny opis funkcji sklepu.
Najczęstsze pytania
Pozostałe pytania znajdziesz w pełnym FAQ, a każde ustawienie szczegółowo opisuje dokumentacja.
Czy nadal potrzebna jest wtyczka WooCommerce?
Tak, sklep Canvas nadal działa na wtyczce WooCommerce. Canvas dodaje bloki, szablony i opcje ponad nią i pozostawia wtyczce pełną kontrolę, więc zamówienia, produkty, podatki, wysyłka i płatności pozostają tam, gdzie inne rozszerzenia się ich spodziewają. Jeśli zaczynasz od dema sklepu, kreator konfiguracji instaluje i aktywuje WooCommerce przed uruchomieniem importu.
Czy bloki sklepu to dodatkowy zakup?
Nie, bloki sklepu Canvas są dostępne w każdym planie bez dodatkowych kosztów. Wszystkie bloki sklepu (24 bloki) to bloki premium, a każdy plan zawiera każdy blok premium, wraz ze wszystkimi 18 szablonami sklepu oraz wszystkie 21 sklepów demo. Nie ma poziomu e-commerce ani dodatku do sklepu.
Czy mogę łączyć je z blokami WooCommerce?
Tak, można je swobodnie mieszać: bloki sklepu Canvas to zwykłe zarejestrowane bloki, więc mogą stać obok bloków WooCommerce i podstawowych bloków w tym samym szablonie i na tej samej stronie. Wymieniaj po jednym elemencie naraz, a resztę układu zostaw bez zmian.
Czy import dema sklepu da mi dwie strony finalizacji zamówienia?
Nie, import dema sklepu Canvas zostawia jedną stronę finalizacji zamówienia. Importer znajduje strony sklepu, koszyka, finalizacji zamówienia i konta, które ma Twoja witryna, i kieruje do nich menu oraz linki dema, więc zostaje po jednej z każdego typu. Istniejące produkty i zamówienia pozostają nietknięte, a cały import można cofnąć.
Zbuduj kolejną witrynę w Canvas
Początkujący, freelancer czy agencja: wszyscy otrzymują te same bloki i dema. Zacznij od jednej witryny i buduj tyle, ile potrzebujesz, na tej samej licencji.