Utworzenie strony kasy WooCommerce zazwyczaj wiąże się ze znacznym dostosowaniem pliku szablonu PHP w zapleczu i znaczną ilością niestandardowego CSS. Jednak ta procedura stała się zabawna i prosta dzięki modułom Woo firmy Divi ! Kiedy używasz Divi do aktualizacji strony WC Checkout, krótki kod WC przekształca się w strukturalny układ dynamicznych modułów Woo Checkout, które są gotowe do stylizacji wizualnej przy użyciu zaawansowanych wbudowanych opcji projektowych. Zapewnia to pełną kontrolę nad projektem strony kasy.
Ten przewodnik nauczy Cię, jak używać Divi do tworzenia całkowicie unikalnej strony kasy WooCommerce. Najpierw utworzymy stronę kasy WooCommerce, wykorzystując dynamiczne moduły Woo dostępne dla strony kasy. Następnie, kiedy skończysz, pokażemy Ci, jak zastosować projekt strony kasy do szablonu strony kasy w Theme Builder. Tak więc, niezależnie od tego, czy chcesz zmodyfikować samą stronę kasy, czy opracować szablon strony kasy, Divi Cię obejmuje. Będziesz na dobrej drodze do tworzenia atrakcyjnych wizualnie stron kasy w mgnieniu oka.
Podgląd projektu
Tak będzie wyglądał nasz projekt.
WooCommerce Sprawdź stronę i dział
Kiedy zainstalujesz WooCommerce w swojej witrynie Divi, zbuduje ona podstawowe strony WC, takie jak strona koszyka na zakupy, strona koszyka, proces kasy i strona konta. Następnie zawartość strony jest wdrażana za pomocą krótkiego kodu w edytorze bloków WordPress zaplecza.
Twórz niesamowite strony internetowe
Z najlepszym darmowym kreatorem stron Elementor
Zacząć teraz
Jeśli włączysz Divi Builder na tej stronie kasy, każdy ze składników treści strony WooCommerce Checkout zostanie załadowany jako moduły Divi Woo, które można wykorzystać do dostosowania strony.
Moduły Woo do projektowania strony kasy w Divi
Divi ma kilka podstawowych modułów do dodawania interaktywnej zawartości do szablonu strony. Niektóre z nich zawierają moduły Woo dostosowane do strony kasy.
Następujące moduły są niezbędne do utworzenia strony lub szablonu realizacji transakcji:
Tytuł posta: Â Podczas tworzenia szablonu strony kasy, będzie to dynamicznie wyświetlał tytuł strony kasy.
Powiadomienie Woo: Â Ten moduł może być przypisany do wielu rodzajów stron (koszyk, produkt i kasa). W razie potrzeby będzie dynamicznie wyświetlać użytkownikowi ważne powiadomienia.
Woo Checkout Billing: Â Ten moduł wyświetla formularz szczegółów płatności, który jest używany podczas procesu kasowania.
Woo Checkout Shipping: Â Ten moduł wyświetla formularz szczegółów wysyłki, który pojawia się podczas procesu realizacji transakcji.
Informacje o kasie Woo: Â Ten moduł pokazuje formularz dodatkowych informacji, który jest używany podczas procesu kasowania.
Szczegóły kasy Woo: Â Ten moduł wyświetla szczegóły zamówienia podczas kasy, w tym kupowane produkty i ich ceny.
Płatność przy kasie Woo: Â Ten moduł wyświetla wybór rodzaju płatności i szczegóły formy płatności podczas kasy.
Kolejna opcja modułu woo:
Woo Breadcrumb: Â Zostanie wyświetlony pasek nawigacyjny WooCommerce Breadcrumb.
Utwórz stronę kasy lub szablon
Jak wcześniej wspomniano, możemy łatwo stworzyć niestandardową stronę kasy WooCommerce za pomocą modułów Divi Woo. Możesz jednak użyć tego samego procesu projektowania, aby utworzyć niestandardowy szablon realizacji transakcji. Ten samouczek utworzy niestandardowy układ strony kasy dla strony kasy. Następnie, korzystając z narzędzia Divi Theme Builder, pokażemy Ci, jak wykorzystać niestandardowy układ strony kasy, aby utworzyć szablon strony kasy.
Używanie Divi do tworzenia układu strony kasy WooCommerce
Celem tego samouczka WooCommerce Checkout Page jest opracowanie niestandardowego układu strony dla WooCommerce Checkout Page, która w WooCommerce nosi nazwę WooCommerce Checkout Page. Na końcu lekcji pokażemy, jak bez wysiłku zapisać i zaimportować ten układ strony kasy do Theme Buildera, aby zbudować nowy szablon strony kasy.
Edycja strony kasy WooCommerce
Kliknij, aby edytować stronę kasy WooCommerce z pulpitu nawigacyjnego WordPress. Strona będzie domyślnie zawierać krótki kod używany do tworzenia treści strony kasy.
Kliknij opcję Użyj Divi Builder u góry edytora stron.
Wybierz edycję za pomocą kreatora Divi.
Zaczynać od początku
Jak wcześniej wspomniano, strona załaduje się ze wszystkimi dostosowywanymi modułami Divi (w tym kluczowymi modułami Woo), które składają się na zawartość strony kasy. Oczywiście, jeśli chcesz, możesz użyć istniejącego układu i zacząć zmieniać moduły już tam. Ale w tym przewodniku zaczniemy od zera.
Przejdź do menu opcji na dole strony i wybierz TAK dla przycisku Wyczyść układ (ikona kosza), aby wyczyścić układ.
Tło sekcji
Aby rozpocząć, dodaj kolor tła do nowej zwykłej sekcji w następujący sposób:
- Kolor tła: #264653
Wiersz i kolumna
Następnym krokiem będzie dodanie do tej sekcji wiersza z jedną kolumną.
Tworzenie tytułu dynamicznej strony realizacji transakcji
Aby tytuł strony był dynamiczny dla strony kasy, dodaj do kolumny moduł tytułu posta.
Treść tytułu posta
W ustawieniach tytułu posta zaktualizuj elementy, aby wyświetlały tylko tytuł w następujący sposób:
- Pokaż tytuł: TAK
- Pokaż meta: NIE
- Pokaż wyróżniony obraz: NIE
Tekst tytułu posta
Aby nadać styl tekstowi tytułu posta, zaktualizuj następujące elementy na karcie projektu:
- Czcionka tytułu: DM Serif Display
- Kolor tekstu tytułu: #e9c46a
- Rozmiar tekstu tytułu: 80px (komputer), 60px (tablet), 42px (telefon)
- Wysokość wiersza tytułu: 1,2 em
Dynamiczny moduł powiadomień Woo
Zawsze dobrym pomysłem jest umieszczenie modułu Woo Notice na górze strony, aby zobaczyć powiadomienia podczas interakcji ze stroną kasy. Pamiętaj, że tworzymy powiadomienia, które będą wyświetlane tylko wtedy, gdy jest to wymagane.
Aby dodać moduł Woo Notice, przejdź do modułu tytułu posta i kliknij, aby dodać nowy moduł Woo Notice.
Typ i tło strony z uwagami Woo
Następnie zaktualizuj typ strony i kolor tła powiadomienia Woo w następujący sposób:
- Typ strony: Strona kasy
- Kolor tła: #2a9d8f
Tekst tytułu
Na karcie projektu zaktualizuj następujące ustawienia.
- Czcionka tytułu: Roboto
- Grubość czcionki tytułu: średnia
- Kolor tekstu tytułu: #e9c46a
- Rozmiar tekstu tytułu: 14px
- Wysokość wiersza tytułu: 1,8 em
- Kolor tekstu linku: #f4a261
Pola powiadomień Woo
Pola i nazwy pól dla przedmiotów, takich jak formularz logowania i kod kuponu, są zawarte w informacjach na stronie realizacji transakcji. Aby zmienić styl etykiet pól dla tych pól, wprowadź następujące zmiany:
- Kolor wskaźnika pola wymaganego: #e9c46a
- Czcionka etykiety pola: Roboto
- Grubość czcionki etykiety pola: pogrubiona
- Kolor zastępczy: #e9c46a
- Kolor tła pól: przezroczysty
- Kolor tekstu pól: #e9c46a
- Kolor tekstu ostrości pól: #e9c46a
- Dopełnienie pól: 12px góra, 12px dół
- Szerokość obramowania pól: 1px
- Kolor obramowania pól: rgba (255,255,255,0.32)
Przycisk powiadomienia Woo
Czas dostosować przyciski.
- Użyj niestandardowych stylów dla przycisku: TAK
- Rozmiar tekstu przycisku: 14px
- Kolor tekstu przycisku: #e9c46a
- Kolor tła przycisku: #2a9d8f
- Szerokość obramowania przycisku: 1px
- Kolor obramowania przycisku: #e9c46a
- Promień obramowania przycisku: 0px
- Odstępy między przyciskami: 1px
- Czcionka przycisku: Roboto
- Grubość czcionki przycisku: pogrubiona
- Styl czcionki przycisku: TT
- Wypełnienie przycisków: 12px góra, 12px dół, 24px po lewej, 24px po prawej
Formularz powiadomienia Woo
W grupie opcji Formularz można nadać styl każdemu formularzowi powiadomienia. Zaktualizuj następujące elementy, aby nadać formularzom jasną ramkę:
- Zaokrąglone rogi formularza: 0px
- Szerokość obramowania formularza: 1px
- Kolor obramowania formularza: rgba (255,255,255,0.32)
Cień Woo Notice Box
Aby dodać wzór przypominający górną krawędź na pasku powiadomień woo, zaktualizuj opcje cieniowania w następujący sposób:
- Cień pudełka: zobacz zrzut ekranu
- Pozycja pozioma cienia pudełka: 0px
- Pozycja pionowa cienia pudełka: 3px
- Kolor cienia: #999e75
Moduł rozliczeniowy Woo Checkout
Teraz, gdy mamy już nagłówek strony i powiadomienia, możemy dodać zawartość Woo Checkout Billing, która jest kolejnym istotnym elementem strony kasy.
Przed dodaniem materiału rozliczeniowego utwórz nowy wiersz z układem kolumn trzy piąte-dwie piąte.
Dodaj moduł rozliczeniowy Woo Checkout w kolumnie 1.
Tekst tytułu płatności Woo Checkout
W module Woo Checkout Billing otwórz ustawienia i dostosuj następujące elementy w zakładce projekt.
- Czcionka tytułu: DM Serif Display
- Kolor tekstu tytułu: #fff
- Rozmiar tekstu tytułu: 30px (komputer), 24px (tablet), 18px (telefon)
- Wysokość wiersza tytułu: 1.4em
Pola rozliczeniowe i etykiety pól Woo Checkout
Podobnie jak moduł powiadomień, moduł ten zawiera opcje stylizacji pól i etykiet pól. Ponieważ chcemy, aby wszystkie nasze pola i etykiety pól były spójne na całej stronie, możemy skopiować style pól i etykiet pól z modułu Notice i wkleić je do modułu Woo Checkout Billing.
Oto jak się do tego zabrać:
- Otwórz ustawienia modułu powiadomień u góry strony.
- Na karcie projektu kliknij prawym przyciskiem myszy grupę opcji Etykiety pól.
- Z menu prawego przycisku myszy wybierz „Kopiuj style etykiet pól”.
Wklej skopiowany styl w nowo dodanym module.
I będzie to wyglądało mniej więcej tak.
Powiadomienie o formularzu rozliczeniowym Woo Checkout
Powiadomienie o formularzu odpowiada za dynamiczne wyświetlanie wszelkich powiadomień lub błędów podczas wypełniania formularza. Aby zmienić styl powiadomienia o formularzu, przejdź do ustawień rozliczeń Woo Checkout i wprowadź następujące zmiany:
- Kolor tła powiadomienia formularza: #e58991
- Wypełnienie formularza powiadomienia: 8px góra, 8px dół
- Czcionka powiadomienia o formularzu: Roboto
- Rozmiar tekstu powiadomienia formularza: 14px
Odstępy i obramowanie rozliczeń Woo Checkout
Aby zakończyć projekt, dodajmy trochę wyściółki i jasne obramowanie modułu w następujący sposób:
- Padding: 16px góra, 16px dół, 16px po lewej, 16px po prawej
- Szerokość obramowania: 1px
- Kolor obramowania: rgba (255,255,255,0.1)
Woo Checkout Shipping i Woo Checkout Information
Moduł Woo Checkout Shipping i moduł Woo Checkout Information są niezbędnymi komponentami do tworzenia szablonu strony kasy. Przed zakończeniem kasy moduł Woo Checkout Shipping wyświetla formularz wymagany do wprowadzenia szczegółów wysyłki. Ponadto moduł informacji o kasie Woo wyświetla formularz zgłoszeniowy, który umożliwia użytkownikom podanie dodatkowych informacji przed dokonaniem transakcji.
Dodawanie modułów
Teraz przejdź dalej i dodaj moduł wysyłki Woo do kasy.
Dodaj również moduł informacyjny Woo Checkout.
Każdy moduł woo (informacje o wysyłce i kasie) musi wyglądać jak moduł rozliczeniowy Woo. Możemy skopiować style, których potrzebujemy dla każdego z nich, do każdego z nich. Skopiujmy i wklejmy projekt tutaj.
Moduł szczegółów kasy Woo
Teraz, gdy zaprojektowaliśmy naszą wysyłkę i dodatkowe informacje, jesteśmy gotowi, aby dodać zawartość Woo Checkout Details. Jest to kolejny ważny element strony kasy, który wyświetla szczegóły zamówienia zakupu. Zawiera listę produktów, sumy częściowe i całkowitą cenę zakupu. Pokazuje również wszelkie zastosowane oszczędności kuponów i można je wypłacić za pomocą linku.
Dodaj nowy moduł Szczegóły płatności Woo do szczegółów płatności w kolumnie 2 tego samego wiersza.
Woo Szczegóły realizacji transakcji Tekst tytułu
Zaktualizuj ustawienia tekstu tytułu w następujący sposób:
- Czcionka tytułu: DM Serif Display
- Grubość czcionki tytułu: pogrubiona
- Kolor tekstu tytułu: #e9c46a
- Rozmiar tekstu tytułu: 24px (komputer), 22px (tablet), 18px (telefon)
- Wysokość wiersza tytułu: 1.4em
Etykieta kolumny szczegółów kasy Woo
Nadajmy styl etykietom kolumn:
- Czcionka etykiety kolumny: Roboto
- Grubość czcionki etykiety kolumny: pogrubiona
- Kolor tekstu etykiety kolumny: #ddb17c
Tekst główny szczegółów kasy Woo
Aby nadać styl tekstowi głównemu, który jest przeznaczony dla elementów w każdej kolumnie na liście, zaktualizuj następujące elementy:
- Czcionka ciała: Roboto
- Kolor tekstu ciała: #fff
Na karcie linku zaktualizuj kolor tekstu linku:
- Kolor tekstu linku: #e0816b
Obramowanie tabeli szczegółów transakcji Woo
W przypadku tego projektu całkowicie usuniemy obramowanie stołu. Aby to zrobić, zaktualizuj następujące elementy:
- Szerokość obramowania tabeli: 0px
Komórka tabeli szczegółów transakcji Woo
Aby nadać styl komórkom tabeli w tabeli, zaktualizuj następujące elementy:
- Dopełnienie komórek tabeli: pozostało 0 pikseli
- Styl obramowania komórki tabeli: brak
Wypełnienie i obramowanie szczegółów kasy Woo
Aby zachować spójność projektu modułu z innymi modułami, zaktualizuj dopełnienie i obramowanie w następujący sposób:
- Padding: 16px góra, 16px dół, 16px po lewej, 16px po prawej
- Szerokość obramowania: 1px
- Kolor obramowania: rgba (255,255,255,0.1)
Moduł płatności Woo Checkout
Jesteśmy gotowi, aby dodać zawartość Woo Checkout Details, teraz, gdy zbudowaliśmy naszą wysyłkę i dodatkowe informacje. To kolejna kluczowa część strony kasy, która wyświetla szczegóły zamówienia zakupu. Zawiera listę produktów, sumy częściowe i ostateczną cenę zakupu. Wyświetla również wszystkie zastosowane oszczędności kuponów i można je wycofać, klikając łącze.
Dodaj nowy moduł Szczegóły realizacji transakcji Woo do szczegółów realizacji transakcji w kolumnie 2 tego samego wiersza.
Dokonaj następujących korekt.
- Kolor tła powiadomienia formularza: #E58991
- Czcionka powiadomienia o formularzu: Roboto
- Grubość czcionki informacji w formularzu: pogrubiona
- Rozmiar czcionki w formularzu: 16px
- Ustawienie przycisku: Jak poprzednio
- Odstępy: 0px (góra, dół, lewo, prawo)
Ostateczny wynik
Oto jak wygląda nasza ostateczna strona kasy.
Zawijanie
Dzięki solidnemu kreatorowi stron Divi i intuicyjnym modułom Woo, tworzenie niestandardowego szablonu strony kasy WooCommerce jest znacznie uproszczone i rozszerzone. Ten samouczek skupiał się na włączeniu podstawowych części, które składają się na stronę kasy. Należy jednak pamiętać, że wszystkie inne unikalne moduły i funkcje Divi są dostępne, aby przenieść strony kasy na wyższy poziom. Powinno to pomóc w poprawie umiejętności projektowania Divi i, co ważniejsze, doprowadzić do większej liczby konwersji.
