3 skuteczne sposoby dostosowywania i edytowania strony kasy WooCommerce

Szukasz najlepszego sposobu na edycję strony kasy WooCommerce ?

Nauka dostosowywania strony kasy WooCommerce pozwala na większą kontrolę nad jej projektem i zwiększa potencjał sprzedaży.

‍ W tym szczegółowym samouczku pokażemy trzy bezkodowe sposoby dostosowywania strony kasy, w tym pełne dostosowanie projektu i/lub zmianę pól pojawiających się na stronie kasy.

Omówimy również wszystkie wbudowane funkcje oferowane przez WooCommerce, aby dostosować sposób realizacji transakcji.

Zacznijmy…

Powody, dla których warto edytować stronę kasy WooCommerce

Czy jest jakiś rażący powód, aby zacząć modyfikować stronę kasy WooCommerce? To zależy. Wbudowany moduł kasy jest czysty, funkcjonalny i wystarczająco szybki, aby przetwarzać płatności bez denerwowania klientów.

Ale możesz również zauważyć jego wady. Oto główne powody, dla których możesz chcieć edytować stronę kasy WooCommerce :

• Aby zastąpić domyślne elementy marki WooCommerce, takie jak ich gotowe czcionki, style i fiolet WooCommerce.
• Aby dodać elementy internetowe, które odnoszą się do Twojej firmy, takie jak logo, kolory marki i łącza do dokumentacji pomocniczej.
• Jeśli po testach wymagana jest optymalizacja realizacji transakcji pod kątem konwersji.
• Aby przyspieszyć proces realizacji transakcji, przekształcając go w jeden krok.
• Aby uwzględnić sprzedaż dodatkową, sprzedaż krzyżową i powiązane produkty.
• Do dodawania niestandardowych pól lub usuwania niektórych pól dostarczonych przez WooCommerce.
• Aby zmodyfikować opcje wysyłki.
• Do zmiany elementów projektu, takich jak tekst przycisku, wstępnie ustawiony tekst pola i opcje kasy dla gości.

Jak edytować stronę kasy WooCommerce

Dostępnych jest kilka opcji edycji strony kasy WooCommerce. Metoda, która działa najlepiej, będzie zależeć od konkretnych zmian, które próbujesz wprowadzić, oraz od tego, czy jesteś otwarty na korzystanie z wtyczki.

Poniżej omówimy trzy najlepsze metody:

1. Natywne ustawienia WooCommerce – WooCommerce zawiera wiele wbudowanych opcji dostosowywania kasy, które opiszemy w pierwszej metodzie. Twój motyw może również oferować własne opcje dostosowywania projektu strony kasy.
2. Elementor Pro – Elementor Pro oferuje teraz własny widżet kasy, który pozwala w pełni dostosować projekt strony kasy. To świetna opcja, jeśli chcesz edytować projekt strony.
3. Edytor pól kasy – jest to świetna opcja, jeśli chcesz edytować pola formularza, które pojawiają się na stronie kasy. Możesz go używać do dodawania nowych pól, usuwania pól domyślnych i przestawiania wszystkiego według potrzeb.

Przejrzyjmy je...

Metoda 1: Użyj domyślnych ustawień kasy WooCommerce

WooCommerce oferuje wbudowane ustawienia do edycji modułu kasy, a Twój motyw WordPress może już zawierać narzędzia do dostosowywania niektórych pól i ustawień kasy w WordPress Customizer.

Zawsze dobrze jest sprawdzić te ustawienia przed szukaniem dodatkowej wtyczki, motywu lub dostosowania pola, ponieważ możesz już mieć potrzebne funkcje.

Na przykład WooCommerce ma narzędzia do usuwania niektórych pól, włączania stawek podatkowych podczas realizacji zakupu i wyświetlania pól kuponów.

Krok 1: Dodaj obliczenia podatku i pole kuponu przy kasie

WooCommerce ma wbudowane ustawienia do automatyzacji obliczania podatków i akceptowania kuponów przy kasie.

Aby włączyć/wyłączyć, przejdź do WooCommerce > Ustawienia na WordPress.

Wybierz kartę Ogólne i przewiń w dół do sekcji Włącz podatki . Zaznacz pole, aby włączyć stawki i obliczenia podatków podczas realizacji transakcji. Spowoduje to wygenerowanie i wyświetlenie opłat podatkowych na podstawie stawek skonfigurowanych w WooCommerce ( WooCommerce > Ustawienia > Podatek > Stawki standardowe ).

Zaznacz pole Włącz korzystanie z kodów kuponów , aby wyświetlić pole, w którym klienci mogą wpisywać kody rabatowe.

Jeśli wolisz nie pokazywać niektórych elementów, po prostu usuń pola wyboru. Pamiętaj, aby kliknąć przycisk Zapisz , aby zobaczyć zmiany w interfejsie użytkownika.

Krok 2: Wyświetl ceny produktów z podatkiem lub bez

Obliczanie podatków na końcu kasy to jedno, ale musisz również zdecydować, czy chcesz uwzględnić podatek w całkowitym koszcie produktów, zwłaszcza gdy klienci przechodzą przez kasę.

Ogólnie oznacza to większą przejrzystość, zamiast zwiększania ceny wraz z podatkiem tuż przed zapłaceniem przez klienta.

Aby uwzględnić podatek z ceną w procesie płatności, przejdź do WooCommerce > Ustawienia > Podatek .

Przewiń stronę w dół, aby znaleźć pole „Wyświetl ceny podczas koszyka i kasy”.

Wybierz z rozwijanego menu:

• Zawiera podatek
• Bez podatku

Kliknij Zapisz zmiany .

Krok 3: Ustaw, jakie elementy wysyłkowe mają być wyświetlane w kasie

Ponadto, w WooCommerce > Ustawienia , możesz zaznaczyć, która strefa wysyłki, metody i obliczenia pojawiają się w kasie WooCommerce.

Po prostu przejdź do zakładki Wysyłka i dostosuj:

• Obliczenia: aby włączyć kalkulator kosztów wysyłki na stronie koszyka
• Obliczenia: aby ukryć koszty wysyłki w kasie do momentu wpisania adresu
• Miejsce wysyłki: aby ustawić domyślne adresy wysyłki w kasie

Kliknij Zapisz zmiany .

Krok 4: Zarządzaj kontami i prywatnością w kasie

Pozostając w WooCommerce > Ustawienia , przejdź do zakładki Konta i prywatność .

U góry strony zobaczysz dwa pola:

• Kasa gościa: uwzględnij/usuń kasę gościa i istniejące loginy konta
• Tworzenie konta: pozwól klientom utworzyć konto lub rozpocząć subskrypcję podczas kasy

Przejdź w dół strony Konta i prywatność , aby znaleźć obszar Polityka prywatności .

Wypełnij pole tekstowe Polityka prywatności kasy , aby upewnić się, że klienci zobaczą politykę podczas kasy. Pozostaw to pole puste, jeśli wolisz nie wyświetlać polityki prywatności w tym obszarze.

Krok 5: Wybierz rzeczywistą stronę kasy i inne zaawansowane ustawienia

Przejdź do zakładki Zaawansowane , aby wyświetlić sekcję Ustawienia strony ; skłania to handlowców do informowania WooCommerce, gdzie wysyłać klientów podczas dokonywania zakupu.

Domyślnie WooCommerce generuje strony Koszyk , Kasa , Moje konto i Warunki , które można znaleźć, przechodząc do Strony > Wszystkie strony w WordPress.

Masz jednak możliwość wygenerowania zupełnie nowej strony i podlinkowania jej tutaj. Zastępuje to domyślne strony kasy i odsyła klientów do niestandardowych.

Inną opcją na karcie Zaawansowane jest Wymuś bezpieczne dokonywanie płatności , co wymaga certyfikatu SSL.

Krok 6: Zmień projekt kasy swojego motywu w WordPress Customizer

Motywy WordPress z funkcją WooCommerce często instalują narzędzia WordPress Customizer, aby łatwo dostosować styl realizacji transakcji.

Pamiętaj, że wszystkie motywy WooCommerce oferują unikalne ustawienia WordPress Customizer (niektóre w ogóle nie mają żadnych ustawień), ale ogólnie rzecz biorąc, warto sprawdzić WordPress Customizer, aby uzyskać szybką kontrolę nad kasą.

Aby rozpocząć, przejdź do Wygląd > Dostosuj w WordPress.

Jeśli jest dostępny, Twój motyw powinien wyświetlać przycisk WooCommerce gdzieś w WordPress Customizer. Kliknij na to.

To tylko przykład z motywem Storefront (więc możesz nie widzieć tego samego), ale często motywy mają kartę Do kasy w programie Customizer. Wybierz to lub coś podobnego, co może wskazywać na kontrolę nad kasą.

Przejrzyj wszystkie ustawienia płatności oferowane przez Twój motyw. W motywie Storefront możesz ustawić te pola jako opcjonalne, wymagane lub ukryte:

• Pole nazwy firmy
• Pole 2 wiersza adresu
• Pole telefonu

Możliwe jest również wyróżnienie wymaganych pól gwiazdką.

Wreszcie motyw Storefront oferuje opcje wyświetlania strony Polityki prywatności i Regulaminu na końcu kasy.

Metoda 2: Użyj narzędzia do tworzenia stron, aby edytować pola kasy WooCommerce i ogólny styl

Kreatory stron, takie jak Elementor, Beaver Builder i Themify, oferują widżety treści WooCommerce, które zastępują to, co jest obecnie na stronie kasy WooCommerce.

Twórcy stron prawie wyłącznie rezerwują swoje moduły kasowe WooCommerce dla swoich planów Premium, więc istnieje duża szansa, że ​​będziesz musiał zapłacić za tę funkcję. Na przykład otrzymujesz widżet Elementor Checkout z planem Pro.

To powiedziawszy, kreator stron zapewnia prawie całkowitą kontrolę nad stroną kasy, więc jest to łatwy sposób na edycję kasy WooCommerce bez znajomości kodowania i tylko za około 50 do 100 USD rocznie.

W tym samouczku pokażemy, jak dostosowywanie kasy ogólnie działa z kreatorem stron za pomocą Elementora.

Krok 1: Otwórz wyznaczoną stronę kasy w Elementor

Aby edytować kasę WooCommerce w Elementorze, musisz przejść do strony kasy automatycznie utworzonej przez WooCommerce. Znajdziesz to w menu Strony > Wszystkie strony .

Otwórz stronę z etykietą „Strona kasy”, a następnie kliknij Edytuj za pomocą Elementora .

Krok 2: Usuń skrócony kod do kasy WooCommerce

WooCommerce automatycznie dodało swoje „WooCommerce checkout” do edytora, który renderuje domyślny moduł kasy WooCommerce.

Celem jest zamiana tego na moduł kasy z twojego kreatora stron. Usuń więc krótki kod do kasy WooCommerce.

Krok 3: Upuść widżet Elementor Checkout

Teraz nadszedł czas, aby znaleźć widżet kasy w kreatorze stron. Elementor oferuje jedną o nazwie Kasa , którą można znaleźć za pomocą paska wyszukiwania lub przeglądając nagłówek WooCommerce. Kliknij i przeciągnij widżet kasy na pustą stronę, gdzie jest napisane „Przeciągnij widżet tutaj”.

Uwaga: widżet kasy może nie być widoczny, jeśli nie uaktualniono do wersji Premium Elementora. Tak jest w przypadku większości kreatorów stron.

Krok 4: Dostosuj treść, styl i zaawansowane funkcje

Po przeciągnięciu na widżet kasy Elementor renderuje podgląd kasy. Następnie możesz kliknąć te zakładki po lewej stronie, aby dostosować każdy aspekt kasy:

Na przykład możesz przełączyć Układ ogólny do jednej kolumny i dostosować tekst zastępczy dla pola imienia.

Inne zakładki dostosowywania obejmują:

• Szczegóły płatności
• Dodatkowe informacje
• Twoje zamówienie
• Kupon
• Zapłata

Istnieją również nieskończone sposoby edycji kasy WooCommerce w zakładce Styl .

Skorzystaj z tych zakładek:

• Sekcje
• Typografia
• Formularze
• podsumowanie zamowienia
• Przycisk zakupu

Jako przykład zamieniliśmy niebieski przycisk Kup na zielony.

Wreszcie, karta Zaawansowane oferuje jeszcze bardziej zaawansowane narzędzia do edycji:

• Układy
• Efekty ruchu
• Transformacje
• Tła
• Granice
• Maski
• Reakcja na coś
• Atrybuty
• niestandardowe CSS

Dopóki trzymasz się strony wcześniej ustawionej jako „Strona kasy” dla WooCommerce i zamieniasz krótki kod kasy WooCommerce na widżet kasy kreatora stron, możesz zapisać zmiany i dokończyć proces!

Metoda 3: Zainstaluj wtyczkę konfiguratora, aby edytować pola

Istnieje wiele wtyczek dostosowywania kasy WooCommerce, takich jak:

Większość wtyczek WooCommerce do kasy zapewnia dodatkowe narzędzia do dostosowywania do modyfikowania i dodawania pól, ale jest kilka, które całkowicie przeprojektują projekt, na przykład wtyczka Multi-step Checkout.

Sugerujemy zapoznanie się ze wszystkimi zalecanymi wtyczkami powyżej, ale przejdziemy przez krótki samouczek z wtyczką Checkout Field Editor, aby pomóc Ci zrozumieć, jak edytować kasę WooCommerce za pomocą wtyczki.

Krok 1: Zainstaluj i aktywuj wtyczkę Checkout Field Editor

Zainstaluj wtyczkę Checkout Field Editor, a następnie przejdź przez proces aktywacji wtyczki.

Po aktywacji wtyczka dodaje nową kartę na WordPress, do której możesz uzyskać dostęp, przechodząc do WooCommerce > Formularz kasy .

Krok 2: Edytuj bieżące pola

Wtyczka wyświetla wszystkie bieżące pola w kasie WooCommerce, z wyjątkiem wtyczki teraz łączy się z domyślną kasą WooCommerce, dzięki czemu masz pełną kontrolę nad polami.

Możesz edytować:

• Pola rozliczeniowe
• Pola wysyłkowe
• Dodatkowe pola

Aby edytować pola kasy WooCommerce, kliknij Edytuj obok pola, które chcesz zmienić. W tym przykładzie zmodyfikujemy pole Nazwa firmy .

W oknie Edytuj pole możesz modyfikować opcje pola, takie jak:

• Etykieta
• Symbol zastępczy
• Domyślna wartość
• Klasa
• Walidacja

Możliwe jest również odznaczenie pola Wymagane , dzięki czemu klienci nie muszą wypełniać tego pola. Możesz także wyłączyć to pole, aby w ogóle nie było wyświetlane w kasie. Pamiętaj, aby kliknąć Zapisz i zamknij .

Wtyczka zwykle zapisuje wszystko po tym, ale możesz ponownie kliknąć przycisk Zapisz zmiany , aby upewnić się, że działa.

Jak widać, usunęliśmy pole Nazwa firmy z obszaru kasy.

I zniknął z kasy frontendowej.

Możesz także edytować coś w rodzaju tekstu zastępczego . W takim przypadku jest to ten sam proces otwierania danego pola i zmiany ustawień.

Pole Imię w naszej kasie zawiera teraz nowy tekst zastępczy.

Krok 3: Dodaj nowe pole do kasy WooCommerce

Aby dodać zupełnie nowe pole, kliknij przycisk Dodaj pole .

Wybierz Typ pola, wybierając spośród opcji takich jak:

• Tekst
• Numer
• Ukryty
• Hasło
• Telefon
• Pole wyboru
• Miesiąc
• URL
• i wiele więcej

Jako przykład utworzymy pole Numer i poprosimy klientów o wpisanie numeru lojalnościowego. Możesz także określić elementy, takie jak symbole zastępcze, wartości domyślne i czy jest to pole wymagane.

Upewnij się, że zaznaczyłeś pole Włączone , a następnie kliknij Zapisz i zamknij .

Krok 4: Wyświetl wyniki

Na zapleczu zobaczysz nowe pole kasy na dole listy. Domyślnie jest umieszczony na końcu, ale możesz kliknąć i przeciągnąć, aby zmienić kolejność.

Nowe pole pojawia się również w module kasowym frontendu.

Stwórz idealną stronę kasy już dziś

Zalecamy rozpoczęcie od domyślnych ustawień kasy WooCommerce, aby sprawdzić, czy pomagają one osiągnąć pożądane wyniki. W przypadku bardziej zaawansowanych edycji rozważ użycie pól niestandardowych. A do zaawansowanych, ale stosunkowo łatwych do wdrożenia dostosowań, użyj jednego z sugerowanych kreatorów stron.

Jakie są Twoje główne pytania dotyczące edycji kasy WooCommerce? Podziel się swoimi przemyśleniami w komentarzach!