Jak stworzyć oś czasu przepływu koszyka WooCommerce w Divi

WooCommerce to jedna z najpopularniejszych wtyczek eCommerce dla WordPress. Aby w tym pomóc, Divi wydało szereg nowych modułów zorientowanych na Woo, które zapewniają większą swobodę podczas tworzenia standardowych stron WooCommerce. W dzisiejszym poście omówimy tworzenie osi czasu koszyka WooCommerce dla Divi . Zaprojektujemy wizualne przedstawienie podróży użytkownika w tym okresie. Droga użytkownika od sklepu do kasy powinna być widoczna w widoczny sposób.

Podgląd projektu

Zanim przejdziemy od razu do projektowania, sprawdźmy, jak będzie wyglądał nasz projekt po zakończeniu. Oto podgląd strony koszyka.

Tak też będzie wyglądać nasza strona kasy.

Aby pobrać szablon, kliknij tutaj i pobierz plik. Następnie rozpakuj go.

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz

Zainstaluj szablon

Przejdź do Divi Theme Builder w zapleczu witryny WordPress, aby przesłać szablon.

Następnie w prawym górnym rogu pojawi się ikona z dwiema strzałkami. Przełącz ikonę.

Kliknij „Importuj szablony Divi Theme Builder” po przesłaniu pliku JSON pobranego z tego posta na kartę importu.

Po przesłaniu pliku zauważysz nowy szablon koszyka, kasy i sklepu. Gdy tylko chcesz aktywować szablony, zapisz swoje modyfikacje w Divi Theme Builder.

Utwórz oś czasu koszyka WooCommerce

Następna sekcja naszego posta na blogu pokaże, jak odtworzyć oś czasu koszyka WooCommerce dla Divi, jeśli szukasz nieco większego wyzwania. Procedury opisane w tym przewodniku mogą służyć do tworzenia unikalnej dla Ciebie osi czasu koszyka. Wykorzystaj to jako motywację do kolejnych przedsięwzięć WooCommerce i Divi! Tak będzie wyglądać oś czasu koszyka WooCommerce, którą będziemy budować:

Zacznijmy teraz, gdy mamy wizualną reprezentację tego, co będziemy tworzyć!

Konfiguracja kreatora motywów Divi

Te szablony, które będziemy rozwijać, będą miały wpływ na strony kasy i koszyka WooCommerce. Tym samym zaczynamy pracę nad naszym projektem w Divi Theme Builder.

Na karcie Dodaj nowy szablon kliknij znak plus.

Wybierz opcję Utwórz nowy szablon.

Następnie wyświetli się okno modalne z listą wszystkich różnych przypisań, które możesz dołączyć do nowego szablonu, który tworzysz. W tym przypadku stworzymy szablon strony koszyka sklepu WooCommerce. Przejdź więc do nagłówka WooCommerce w polu modalnym i kliknij Koszyk. Po wybraniu wybierz opcję Utwórz szablon. W ten sposób tagujemy stronę koszyka nowo skonstruowanym szablonem.

Aby opracować szablon kasy, zastosujemy podobną procedurę. Na karcie Dodaj nowy szablon kliknij znak plus.

Wybierz ponownie opcję Utwórz nowy szablon.

Musimy przewinąć okno modalne w dół i wybrać Kasę z nagłówka WooCommerce, aby uzyskać dostęp do strony kasy. Po wybraniu wybierz opcję Utwórz szablon.

Możemy teraz zapisać nasze szablony koszyka i kasy po ich utworzeniu. U góry Divi Theme Builder wybierz zielony przycisk Zapisz zmiany.

Budowanie przepływu koszyka WooCommerce

Zabawa zaczyna się teraz! Zaczniemy szkicować harmonogram przepływu koszyka na stronie koszyka. Aby to osiągnąć, otwieramy szablon koszyka, który właśnie stworzyliśmy i wybieramy przycisk Dodaj niestandardowy korpus.

Zamierzamy wybrać przycisk Utwórz niestandardową treść, który pojawia się w polu modalnym, tak jak robiliśmy to podczas tworzenia tych szablonów i ich przypisań.

Nowa sekcja i wiersz

Teraz, gdy jesteśmy w Divi Builder, utworzymy nowy wiersz. W tym wierszu będzie pięć kolumn.

Do kolumn 1, 3 i 5 nowego wiersza dodaj trzy moduły Blurb.

Postępuj zgodnie z ustawieniami modułu blurb:

Pierwsza notka (kolumna 1)

• Tytuł: Sklep
• Treść: pozostaw puste
• Użyj ikony: Tak
• Ikona: Zobacz zrzut ekranu poniżej
• Adres URL łącza modułu: /sklep (lub Twój niestandardowy link do strony sklepu)

Druga notka (kolumna 3)

• Tytuł: Recenzja
• Treść: pozostaw puste
• Użyj ikony: Tak
• Ikona: Zobacz zrzut ekranu poniżej
• Adres URL łącza modułu: /cart (lub Twój niestandardowy link do strony koszyka)

Trzecia notka (kolumna 5)

• Tytuł: Kasa
• Treść: pozostaw puste
• Użyj ikony: Tak
• Ikona: Zobacz zrzut ekranu poniżej
• Adres URL łącza modułu: /checkout (lub Twój niestandardowy link do strony kasy)

W tym momencie nasza oś czasu WooCommerce będzie wyglądać następująco:

Bez względu na to, na które strony trafią klienci, wymagamy prostego dostępu do naszych modułów Blurb, ponieważ tworzymy szablony dla strony koszyka i kasy. Zdolność użytkownika końcowego—twojego klienta—do płynnego poruszania się między różnymi etapami realizacji transakcji jest kluczowym elementem osi czasu WooCommerce. Najpierw wprowadzimy ustawienia modułu pierwszego komunikatu, sklepu, aby dodać link do domyślnych stron sklepu, koszyka i kasy.

Bez względu na to, na które strony trafią klienci, wymagamy prostego dostępu do naszych modułów Blurb, ponieważ tworzymy szablony dla strony koszyka i kasy. Zdolność użytkownika końcowego—twojego klienta—do płynnego poruszania się między różnymi etapami realizacji transakcji jest kluczowym elementem osi czasu WooCommerce. Najpierw wprowadzimy ustawienia modułu pierwszego komunikatu, sklepu, aby dodać link do domyślnych stron sklepu, koszyka i kasy.

Każdy moduł Blurb otrzyma linki do normalnych stron WooCommerce. Dokonaj niezbędnych zmian we wszelkich niestandardowych linkach, które mogłeś ustanowić dla tych stron w instalacji WooCommerce. Najpierw zaczynamy od modułu Shop Blurb. Wpisujemy /shop w polu Adres URL łącza modułu. To jest standardowy adres URL strony sklepu WooCommerce. Pamiętaj, aby zastąpić ten adres URL spersonalizowanym adresem URL, jeśli go zaktualizowałeś.

Aby zapisać zmiany, kliknij przycisk zielonego znacznika wyboru. Przechodzimy do modułu recenzji Blurb. Link do strony koszyka jest dostarczany przez ten moduł. Ponownie wybierana jest zakładka Łącze, a adres URL łącza modułu /koszyk jest dodawany do adresu URL modułu.

Połączymy się ze standardowym linkiem do strony kasy WooCommerce, którym jest /checkout, dla ostatniego modułu Blurb, modułu Blurb kasy.

Moduły opisu stylu

Następnie rozpocznie się stylizacja naszych nowo dodanych modułów Blurb. Na modułach zastosujemy style aktywowania. Poprawia to wygodę użytkownika osi czasu koszyka WooCommerce (UX). Chcemy innego koloru modułu Blurb, który reprezentuje stronę, na której się teraz znajdujemy. Chcemy również, aby ikona zmieniała kolor i powiększała się, gdy na nią najeżdżamy.

Stylizacja modułu Blurb

• Kolor ikony: #eac989
• Kolor ikony po najechaniu kursorem: #9fa2ce
• Wyrównanie tekstu: środek

Tekst tytułu:

• Tekst nagłówka tytułu: H4

• Czcionka tytułu: Baskerville
• Grubość czcionki tytułu: pogrubiona
• Kolor tekstu tytułu: #354e7c

Przekształcać:

• Skala transformacji (komputer stacjonarny): 100%
• Skala transformacji (po najechaniu kursorem): 115%

Zastosujemy parametry projektowe do innych modułów Blurb w naszym rzędzie po zakończeniu konfigurowania ich dla pierwszego modułu Blurb.

Tylko moduły w naszej sekcji to obiekty, na które chcemy rozszerzyć nasze style. Należy o tym pamiętać, zwłaszcza jeśli pracujesz na stronie z istniejącą zawartością.

Stylizacja modułu opisu koszyka

Scenie, na której znajduje się nasz użytkownik, nadamy osobny kolor ikony, aby wskazać różne etapy procesu realizacji transakcji. Na przykład zmienimy kolor modułu Blurb odnoszącego się do etapu koszyka procesu, jeśli znajdują się one na stronie koszyka.

Moduł opisu strony koszyka:

• Kolor ikony (komputer stacjonarny): #f6c6c5
• Kolor ikony (po najechaniu kursorem): #9fa2ce

Dodaj dzielniki osi czasu

Zaczniemy od dodania i dostosowania naszych modułów dzielnika po zbudowaniu i nadaniu stylu naszemu modułowi Blurb. Druga i czwarta kolumna naszego wiersza zawiera moduł dzielnika.

Dzielniki stylu na osi czasu

Następnie dostosujemy moduły rozdzielacza. Wprowadź następujące zmiany w ustawieniach Dzielnika.

Widoczność:

• Pokaż rozdzielacz: tak

Linia:

• Kolor linii: #354e7c
• Styl linii: kropkowany
• Pozycja linii: wyśrodkowana w pionie

Rozmiar

• Waga rozdzielacza: 5px

Skopiujmy i wklejmy style z tego modułu dzielnika do drugiego modułu w naszym rzędzie, używając naprawdę sprytnej funkcji Divi. Następnie klikniemy prawym przyciskiem myszy moduł rozdzielacza, który został ukończony. Następnie wybierzemy Kopiuj ustawienia modułu. Następnie klikamy prawym przyciskiem myszy moduł dzielnika, który w tej chwili nie jest stylizowany. Ostatnim krokiem jest kliknięcie Wklej ustawienia modułu. Oszczędzanie czasu to zarabianie na czasie!

niestandardowe CSS

Nasza oś czasu koszyka WooCommerce wygląda obecnie tak:

Zamierzamy dodać trochę CSS do naszego wiersza, aby upewnić się, że nasze moduły rozdzielające są odpowiednio wyrównane i że nasz moduł osi czasu jest responsywny dla urządzeń mobilnych.

Musimy najpierw wprowadzić opcje wierszy dla naszej osi czasu koszyka WooCommerce, zanim będziemy mogli dodać nasz niestandardowy CSS. Następnie wybieramy kartę Zaawansowane. Na koniec dodamy następujący CSS do głównego elementu:

display:flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;

Teraz kliknij zielony znacznik wyboru, aby zapisać ustawienia.

Konfigurowanie strony kasy

Na naszej stronie koszyka położyliśmy podwaliny pod naszą oś czasu przepływu koszyka WooCommerce. Ale musimy zaktualizować nasz szablon strony kasy o naszą ukończoną pracę, aby zakończyć nasz harmonogram. Aby uprościć naszą procedurę na stronie kasy, użyjemy menu prawego przycisku myszy, które było jedną z oryginalnych funkcji Divi. Kontynuujmy!

Skopiuj oś czasu przepływu koszyka ze strony koszyka

Powrócimy do strony koszyka. Nie będziemy jednak używać Divi Builder do ciała.

Kliknij prawym przyciskiem myszy Custom Body szablonu koszyka. Następnie wybierz Kopiuj z menu prawego przycisku myszy.

Teraz wkleimy pracę, którą wykonaliśmy w ramach szablonu koszyka, do szablonu kasy po jego zduplikowaniu. W szablonie strony kasy klikamy prawym przyciskiem myszy przycisk Dodaj niestandardową treść, aby to osiągnąć. Po zakończeniu w menu pojawi się opcja Wklej. Aby skopiować Custom Body z szablonu strony kasy do szablonu strony koszyka, kliknij Wklej.

Możesz teraz zobaczyć, że zarówno szablon strony kasy, jak i szablon koszyka mają niestandardową treść. Umożliwi nam to przyspieszenie procedury projektowania serwisu. Dziękuję, Divi. Klikniemy zielony przycisk Zapisz zmiany u góry kreatora, aby zapisać nasze modyfikacje w szablonie kasy.

Zaktualizuj stronę kasy

Po skróceniu procesu projektowania, wprowadźmy ostatnie poprawki na stronie kasy, aby upewnić się, że bezproblemowo integruje się z resztą naszego projektu. Aby edytować niestandardową treść szablonu strony kasy, najpierw kliknij ikonę ołówka.

Ikona stylu kasy

Zacznij stylizować naszą ikonę kasy już teraz. Ustawienia modułu przycisku kasy zostaną otwarte po kliknięciu symbolu koła zębatego.

Przejdź do karty Projekt modułu Ustawienia modułu. Należy kliknąć tytuł „Ikona obrazu &”. Kolor ikony zostanie zmieniony. Dlatego wybierz ikonę zakraplacza i wprowadź wartość szesnastkową #f6c6c5. W rezultacie ikona przyjmie kolor bieżącej strony, czyli różowy.

Zaktualizuj ikonę koszyka

Konieczne będzie cofnięcie się i zmiana koloru ikony koszyka. W tym celu wrócimy do ustawień modułu. Następnie wybieramy ikonę koła zębatego symbolu wózka.

Ponownie przejdziemy do karty Projektowanie ustawień modułu. Następnie wybierz narzędzie Kroplomierz z sekcji Ikona obrazu &. Następnie wprowadź #eac989 w formacie szesnastkowym.

Po opuszczeniu Divi Builder nie zapomnij zapisać swoich ustawień i całej swojej żmudnej pracy.

Marge Wszyscy razem

Podczas gdy oś czasu koszyka jest głównym tematem tego samouczka, szablon wymaga również użycia dodatkowych modułów WooCommerce. Te dodatkowe moduły WooCommerce muszą zostać dodane do każdej strony szablonu, aby Twój sklep był kompletny.

Szablon strony koszyka

• Produkty Woo Cart: Spowoduje to wyświetlenie koszyka WooCommerce
• Woo Cart Totals: Zaprezentuj sumę częściową, podatki i więcej dzięki temu modułowi

Szablon strony kasy

• Moduł powiadomień Woo: Używamy tego modułu do wyświetlania wszelkich błędów, informacji lub powiadomień związanych z wymeldowaniem
• Woo Checkout Billing: Ten moduł pokoloruje szczegóły rozliczeniowe Twoich klientów
• Woo Szczegóły transakcji: W przeciwieństwie do sum koszyka, ten moduł pokaże rzeczywiste nazwy produktów, ilość i więcej
• Woo Checkout Billing: Aby pokazać dostępne metody płatności, dodaliśmy ten moduł do strony kasy

Podsumowanie

Oś czasu koszyka zapewnia klientom wizualne przedstawienie ich podróży po Twojej witrynie. Masz możliwość dostosowania i dodania nowego komponentu do swojego sklepu WooCommerce za pomocą Divi . Możesz zastosować to, czego się tutaj nauczyłeś, na swoich własnych klientach i osobistych stronach internetowych dzięki narzędziom Divi. Jeśli korzystasz z tego samouczka poza klasą, daj mi znać!