Domyślna strona koszyka WooCommerce działa, ale jest podstawowa i często nie pasuje do Twojego stylu.
Podczas testowania różnych kreatorów stron odkryliśmy, że SeedProd sprawia, że tworzenie niestandardowej strony koszyka jest zaskakująco łatwe, bez konieczności pisania ani jednej linijki kodu.
Przeanalizowaliśmy funkcje WooCommerce SeedProd i stwierdziliśmy, że dostosowywanie strony koszyka jest zarówno prostsze, jak i potężniejsze, niż się spodziewaliśmy. To, co kiedyś wymagało programisty, teraz można zrobić za pomocą kilku kliknięć, korzystając z interfejsu typu „przeciągnij i upuść”.
W tym przewodniku pokażemy Ci dokładnie, jak stworzyć niestandardową stronę koszyka WooCommerce bez żadnego kodowania.
💡Szybka odpowiedź: Utwórz niestandardową stronę koszyka w 6 krokach
Zanim przejdziemy do szczegółów, oto szybki przegląd głównych kroków, które będziesz wykonywać:
- Zainstaluj i aktywuj wtyczkę SeedProd Pro.
- Utwórz nową stronę docelową i wybierz szablon początkowy.
- Zaprojektuj podstawowy układ strony z nagłówkiem i kolumnami.
- Przeciągnij i upuść główny blok „Koszyk” WooCommerce na swoją stronę.
- Dodaj elementy zwiększające konwersję, takie jak opinie klientów lub licznik czasu.
- Opublikuj stronę i przypisz ją jako stronę koszyka w ustawieniach WooCommerce.
Dlaczego warto stworzyć niestandardową stronę koszyka WooCommerce w WordPress?
WooCommerce zawiera wbudowaną stronę koszyka. Wystarczy zainstalować i aktywować ten wtyczkę, a Twój sklep internetowy automatycznie zacznie korzystać z domyślnej strony koszyka.
Kiedy Twoi odwiedzający mają przedmioty w swoich koszykach, są bardzo blisko dokonania zakupu. Jednak badania pokazują, że prawie siedem na dziesięciu klientów porzuci swoje koszyki i nigdy nie wróci.
Mając to na uwadze, Twoja strona koszyka powinna robić wszystko, co możliwe, aby zabezpieczyć sprzedaż.
Zastępując domyślny wygląd niestandardową stroną koszyka, często można poprawić wskaźniki konwersji w Twoim sklepie internetowym.
Nawet proste dostosowanie strony za pomocą własnego brandingu i niestandardowego logo może poprawić doświadczenie klienta i zwiększyć współczynniki konwersji.
Mając to na uwadze, pokażemy, jak dostosować stronę koszyka WooCommerce bez kodowania. Oto szybki przegląd wszystkich rzeczy, które omówimy w następnych sekcjach:
- How to Create a Custom WooCommerce Cart Page in WordPress (Step-by-Step)
- Samouczek wideo
- Bonus Tip: How to Further Improve WooCommerce Cart Page Conversions
Zacznijmy od razu!
Jak stworzyć niestandardową stronę koszyka WooCommerce w WordPress
Najłatwiejszym sposobem tworzenia niestandardowych stron dla Twojego sklepu WooCommerce jest użycie SeedProd.
Jest to najlepszy kreator stron WordPress i zawiera ponad 300 profesjonalnie zaprojektowanych szablonów. Obejmują one szablony eCommerce do tworzenia stron sprzedażowych i stron do zbierania zapisów na listy e-mail.
Co więcej, SeedProd oferuje pełne wsparcie WooCommerce i zawiera specjalne bloki WooCommerce, które pozwalają prezentować Twoje najlepiej sprzedające się produkty, najpopularniejsze artykuły, najnowsze promocje i inne.
Kilka naszych marek partnerskich zbudowało całe swoje strony internetowe przy użyciu wtyczki i otrzymało świetne opinie od swoich użytkowników na temat nowych projektów. Aby dowiedzieć się więcej, zapoznaj się z naszą recenzją SeedProd.
Krok 1: Zainstaluj i aktywuj SeedProd Pro
Teraz pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.
Uwaga: Istnieje bezpłatna wersja SeedProd, ale w tym przewodniku użyjemy wersji Pro, ponieważ ma ona wbudowane bloki WooCommerce, których potrzebujemy. Integruje się również ze wszystkimi usługami e-mail marketingu, których możesz już używać, aby uzyskać więcej sprzedaży i konwersji.
Po aktywacji przejdź do SeedProd » Ustawienia i wprowadź swój klucz licencyjny.
Te informacje znajdziesz na swoim koncie na stronie SeedProd. Po wprowadzeniu licencji kliknij przycisk „Zweryfikuj klucz”.
Krok 2: Utwórz nową stronę docelową
Po wykonaniu tej czynności przejdź do SeedProd » Strony docelowe i kliknij przycisk „Dodaj nową stronę docelową”.
Po tym musisz wybrać szablon strony koszyka.
Szablony SeedProd są zorganizowane według różnych typów kampanii, takich jak strony w budowie i strony 404. Możesz kliknąć na zakładki u góry ekranu, aby filtrować szablony według typu kampanii.
Kiedy znajdziesz szablon, którego chcesz użyć, najedź na niego kursorem i kliknij ikonę „Zaznaczenie”.
W tym samouczku użyjemy „Szablonu pustego”, ponieważ pozwala nam to dodać tylko te sekcje, które chcemy.
Na następnym ekranie nazwiesz swoją stronę koszyka.
SeedProd automatycznie utworzy adres URL na podstawie tytułu strony, ale możesz zmienić ten adres URL na dowolny inny.
Gdy będziesz zadowolony z wprowadzonych informacji, kliknij przycisk „Zapisz i rozpocznij edycję strony”.
Krok 3: Zaprojektuj układ strony koszyka
Spowoduje to załadowanie kreatora stron SeedProd. Jest to prosty edytor typu przeciągnij i upuść, który wyświetla podgląd Twojej niestandardowej strony koszyka po prawej stronie i niektóre ustawienia po lewej.
💡 Wskazówka eksperta: Jeśli projektowanie strony koszyka wydaje się zbyt pracochłonne, możesz skorzystać z Kreatora AI SeedProd, aby ułatwić sobie pracę. Wystarczy opisać słowami, jakiego rodzaju stronę koszyka chcesz, a AI wygeneruje dla Ciebie niestandardową stronę koszyka.
Ponadto możesz korzystać z funkcji AI wtyczki, aby automatycznie generować treści i obrazy, oszczędzając jeszcze więcej czasu.
Aby zacząć, zapoznaj się z naszym poradnikiem jak stworzyć stronę WordPress za pomocą AI.
Na początek dodamy obrazek na górze strony. Zalecamy użycie obrazka, który wygląda jak zwykły nagłówek Twojego sklepu, ponieważ zachowa to spójność Twojej marki.
Chcemy, aby obraz nagłówka wypełniał całą szerokość strony koszyka, więc kliknijmy pierwszy układ w polu „Wybierz swój układ”.
Spowoduje to utworzenie układu pełnoekranowego.
Teraz wybierz blok „Obraz” w menu po lewej stronie i przeciągnij go na układ.
Aby przesłać swój obraz, kliknij, aby wybrać blok „Obraz”.
W menu po lewej stronie kliknij „Użyj własnego obrazu” i wybierz obraz z biblioteki multimediów lub prześlij nowy plik z komputera.
Ustawienia po lewej stronie pozwalają na dalsze dostosowanie obrazu. Na przykład możesz dodać tekst alternatywny obrazu i zmienić rozmiar obrazu.
Gdy będziesz zadowolony z wyglądu nagłówka, możesz kliknąć ikonę „Dodaj kolumny” w sekcji „Przeciągnij nowy blok tutaj”.
Możesz teraz wybrać układ, którego chcesz użyć dla głównego obszaru strony koszyka.
Kliknij układ treści i paska bocznego.
Pozwala to na utworzenie sekcji dla Twojego koszyka oraz obszaru, w którym możesz wyświetlać opinie klientów, aby zwiększyć konwersje.
Krok 4: Dodaj bloki WooCommerce dla koszyka
W menu po lewej stronie przewiń do sekcji „WooCommerce”. Tutaj znajdź blok „Koszyk” i przeciągnij go na swój układ.
Następnie możesz dostosować każdą część koszyka za pomocą menu po lewej stronie.
Obejmuje to zmianę czcionek, kolorów, przycisków i innych elementów.
Gdy będziesz zadowolony z wyglądu obszaru koszyka, czas dodać blok opinii klientów.
Jest to forma dowodu społecznościowego, która pomaga kupującym czuć się pewniej w swojej decyzji, pokazując, że inni ludzie mieli pozytywne doświadczenia z Twoimi produktami.
Po prostu znajdź blok „Referencje” i przeciągnij go na swój układ.
Teraz możesz zmienić wygląd referencji w swoim sklepie internetowym.
Na przykład w menu po lewej stronie zobaczysz ustawienia, aby zmienić kolor dymka komentarza, zmienić wyrównanie i dodać więcej opinii klientów.
Inną świetną wskazówką jest umieszczenie oceny gwiazdkowej pod Twoją opinią.
Aby to zrobić, po prostu znajdź blok „Ocena gwiazdkowa” i przeciągnij go pod blok opinii.
Krok 5: Dodaj elementy zwiększające konwersję
Niedobór może zachęcić klientów do zakupu teraz, zamiast czekać i ryzykować, że coś przegapią. Mając to na uwadze, możesz dodać licznik czasu, który będzie odliczał minuty do wygaśnięcia koszyka odwiedzającego.
Aby stworzyć to poczucie pilności, znajdź blok „Odliczanie” i przeciągnij go na górę swojego koszyka.
Chcemy wyświetlać każdemu odwiedzającemu świeży licznik, dlatego chcesz otworzyć menu rozwijane „Typ licznika” i wybrać „Licznik odwiedzin (wieczny)”.
Zapewnia to, że odliczanie rozpoczyna się od nowa dla każdej osoby, tworząc prawdziwe i osobiste poczucie pilności.
Domyślnie czasomierz rozpoczyna się od 30 minut, ale można to zmienić, wpisując nową liczbę w sekcji „Ustaw czasomierz na”.
Chcemy poinformować kupujących, że ich koszyk wygaśnie, gdy licznik osiągnie 0, więc dodajmy nad nim blok „Nagłówek”.
Następnie możesz wpisać tekst, który chcesz wyświetlić kupującym.
Możesz zachęcić ludzi do dodawania większej liczby produktów do koszyka, tworząc sekcję popularnych produktów.
Aby promować najlepiej sprzedające się produkty w Twoim sklepie, po prostu przeciągnij i upuść blok „Najlepiej sprzedające się produkty” na swój układ.
Domyślnie ten blok wyświetli Twoje najpopularniejsze produkty, ale możesz użyć ustawień, aby wyświetlić produkty w promocji, najnowsze produkty i inne.
Aby to zrobić, po prostu otwórz menu rozwijane „Typ” i wybierz nową opcję.
Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat wyświetlania popularnych produktów w WooCommerce.
Krok 6: Opublikuj swoją niestandardową stronę koszyka
Gdy będziesz zadowolony z wyglądu strony koszyka, czas ją opublikować. Kliknij strzałkę w dół obok „Zapisz”, a następnie wybierz opcję „Opublikuj”.
Następnie musisz zmienić adres URL koszyka w ustawieniach WooCommerce.
Po prostu przejdź do WooCommerce » Ustawienia, a następnie przejdź do zakładki „Zaawansowane”.
W tej zakładce chcesz otworzyć menu rozwijane „Strona koszyka” i zacząć wpisywać adres URL swojej niestandardowej strony.
Gdy pojawi się właściwa strona, po prostu kliknij ją, aby ją wybrać.
Samouczek wideo
Jeśli jesteś bardziej wzrokowcem, możesz zapoznać się z naszym samouczkiem wideo na temat tworzenia niestandardowej strony koszyka WooCommerce:
Dodatkowa wskazówka: Jak dalej poprawić konwersje na stronie koszyka WooCommerce
Po utworzeniu niestandardowej strony koszyka WooCommerce istnieje wiele sposobów na zmniejszenie liczby porzuconych koszyków i zwiększenie sprzedaży. Pomaga to zarobić więcej pieniędzy z istniejącego ruchu.
Oto kilka prostych sposobów, aby to zrobić.
1. Śledź swoje konwersje
Porzucanie koszyków to duży problem dla wszystkich sklepów internetowych. W rzeczywistości badania pokazują, że prawie 70% osób, które dodają produkty do koszyka, nie dokonuje zakupu. (Źródło: Statystyki porzucania koszyków)
Śledzenie konwersji pomaga zrozumieć, co działa na Twojej stronie koszyka, a co nie. Następnie możesz użyć SeedProd do dopracowania niestandardowej strony koszyka, aby więcej klientów dokończyło zakupy.
Najprostszym sposobem śledzenia konwersji WooCommerce jest użycie MonsterInsights, najlepszej wtyczki Google Analytics dla WordPress.
Jest wyposażona w dodatek eCommerce, który umożliwia śledzenie konwersji za pomocą zaledwie kilku kliknięć, dzięki czemu możesz przeglądać dane bez pisania kodu i opuszczania pulpitu.
Aby śledzić konwersje koszyka WooCommerce, zapoznaj się z naszym przewodnikiem krok po kroku, jak skonfigurować śledzenie konwersji WooCommerce.
2. Zmniejsz porzucanie koszyka dzięki wyskakującym okienkom czasowym w WooCommerce
Możesz również zmniejszyć liczbę porzuconych koszyków za pomocą wyskakującego okienka czasowego. Najprostszym i najskuteczniejszym sposobem na zrobienie tego jest użycie OptinMonster, najlepszej wtyczki wyskakujących okienek WordPress do generowania leadów i optymalizacji konwersji.
Jego unikalna technologia Exit-Intent® wyświetla wyskakujące okienka dokładnie wtedy, gdy kupujący ma zamiar opuścić stronę koszyka. Możesz nawet użyć tego oprogramowania, aby zaoferować kupującym specjalny kod rabatowy, jeśli dokonają zakupu teraz.
OptinMonster posiada potężny zestaw funkcji targetowania i personalizacji.
Na przykład, jeśli już zaoferowałeś kupującemu kupon, możesz zamiast tego wyświetlić mu okno informacyjne. Na przykład, możesz zachęcić go do kontaktu i zadawania pytań dotyczących Twoich produktów.
OptinMonster pozwala na tworzenie różnych kampanii, w tym wyskakujących okienek, pełnoekranowych mat powitalnych, pływających pasków, pól przewijania i wysuwanych okienek.
Na przykład, jeśli klient doda produkt do koszyka i nie dokończy zakupu, możesz zaoferować mu kupon na ten konkretny produkt za pomocą wysuwanego paska.
Więcej szczegółów znajdziesz w naszym przewodniku, jak stworzyć wyskakujące okienko WooCommerce, aby zwiększyć sprzedaż.
3. Zwiększ sprzedaż dzięki powiadomieniom o aktywności społecznościowej w WooCommerce
Powiadomienia o aktywności społecznościowej pokazują wszystkie produkty, które kupujący kupują w czasie rzeczywistym. Może to uspokoić kupujących, że jesteś popularną, godną zaufania witryną, a także wykorzystać FOMO (strach przed przegapieniem), aby zachęcić ich do zakupu.
Najprostszym sposobem na dodanie powiadomień o dowodzie społecznym do strony koszyka jest użycie TrustPulse. Jest to najlepsza wtyczka dowodu społecznego dla WordPress i WooCommerce i udowodniono, że zwiększa konwersje nawet o 15%.
Nasi partnerscy producenci używają go do wyświetlania zakupów na żywo w swoich sklepach, co poprawiło ich współczynniki konwersji. Więcej szczegółów na temat jego funkcji znajdziesz w naszej recenzji TrustPulse.
Możesz dodać wtyczkę do swojej witryny w zaledwie kilka minut i zacząć wyświetlać bańkę powiadomienia za każdym razem, gdy ktoś kupi produkt, rozpocznie bezpłatny okres próbny i nie tylko.
Więcej szczegółów znajdziesz w naszym przewodniku na temat jak używać FOMO na swojej stronie WordPress.
Mamy nadzieję, że ten artykuł pomógł Ci stworzyć niestandardową stronę koszyka WooCommerce bez pisania kodu. Możesz również zapoznać się z naszym przewodnikiem krok po kroku, jak dostosować stronę logowania WooCommerce oraz naszym wyborem najlepszych wtyczek WooCommerce dla Twojego sklepu.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Dennis Muthomi
This guide couldn’t have come at a better time! I’ve implemented custom cart pages across several online stores, and combining SeedProd’s customization with social proof elements has been a game-changer.
One client’s cart abandonment rate dropped by 23% after we added a clean, branded design with testimonials and the TrustPulse notifications. The countdown timer feature mentioned in the article is particularly effective – it creates just enough urgency without being pushy.
Definitely SHARING this comprehensive guide to my colleagues
Pismai Peeters
Proszę, nie używaj słowa „po prostu” w swoich postach. Jeśli nie wiesz, jak coś zrobić i szukasz rozwiązania, to nigdy nie jest to „po prostu”.... To mnie denerwuje i sprawia, że czuję się głupio, czym nie jestem.
Wsparcie WPBeginner
Thank you for your feedback, we will look to improve our phrasing. Everyone has their own knowledge so what can be simple to one person can be complex to another. Our goal is to try to make the steps involved as simple as possible for our users
Admin
Mrteesurez
Wygląd i styl domyślnej strony koszyka WooCommerce nie jest atrakcyjny w większości motywów, dlatego ważne jest, aby nauczyć się ją stylizować lub stworzyć niestandardową, która będzie zgodna z projektem motywu.
Pozwoli to na usunięcie zbędnych elementów ze strony. Dobrze, że Seedprod jest w stanie to zrobić. Dziękuję za poradnik.