Korzystanie z pakietu Divi's Fashion Layout Pack do tworzenia sklepu internetowego za pomocą WooCommerce

Nowy pakiet Fashion Layout firmy Divi ma świetną konfigurację dla każdego sklepu internetowego. Integracja modułu sklepu i organizacja układu strony daje Ci znaczący start. Ale aby ten układ działał jako funkcjonalny sklep internetowy, potrzebujemy wtyczki WooCommerce. Możesz być zaskoczony, jak dobrze współpracują ze sobą Divi i WooCommerce.

W tym samouczku pokażę, jak stworzyć sklep internetowy za pomocą pakietu układów Divi's Fashion za pomocą Woocommerce. Przeprowadzę Cię przez proces prawidłowego konfigurowania układów do dostosowania, jak ożywić stronę sklepu dzięki integracji Woocommerce oraz kilka wskazówek, jak używać elementów układu i dostosowywania motywów do stylizacji stron Woocommerce.

Ustawić

Ze względu na czas zamierzam rozpocząć ten samouczek z pewnymi już wykonanymi krokami.

1. Zainstaluj i aktywuj motyw Divi
2. Zainstaluj i aktywuj WooCommerce
3. Pobierz pakiet Fashion Layout Pack i zaimportuj plik Fashion_All.json do biblioteki motywów Divi.
4. Utwórz nowe strony dla każdego układu.
5. Stwórz swoje główne menu.

Jeśli jesteś zdezorientowany konfiguracją wymienioną powyżej, możesz znaleźć bardziej szczegółowe instrukcje, jak prawidłowo skonfigurować układ, sprawdzając te 10 kroków, aby użyć pakietu układu do nowego projektu.

Po wykonaniu powyższych 5 kroków możesz zacząć.

Zajawka

Oto rzut oka na niektóre strony WooCommerce, które będziesz tworzyć.

Korzystanie z pakietu Divi's Fashion Layout Pack do tworzenia sklepu internetowego za pomocą WooCommerce

Subskrybuj nasz kanał YouTube

Zmień swój globalny kolor akcentu

Na początek zmienimy globalny kolor akcentu dla motywu Divi. Zmiana globalnego koloru akcentującego w celu dopasowania do układu jest zawsze dobrym pomysłem, ale jest to również najłatwiejszy sposób na dopasowanie stron WooCommerce do schematu kolorów bez konieczności używania niestandardowego CSS. Zauważysz, że ten akcentujący kolor jest używany do stylizowania elementów na każdej ze stron WooCommerce, takich jak strona pojedynczego produktu, strona koszyka itp.

Aby zmienić globalny kolor akcentu, przejdź do Konfiguratora motywu i przejdź do Ustawienia ogólne > Ustawienia układu i znajdź opcję Kolor akcentu motywu na dole.

Używam tego różowego koloru z układu: #fc7086

Następnie po zmianie zapisz i opublikuj ustawienia oraz odśwież stronę, aby umożliwić uaktualnienie innych ustawień w module dostosowywania przez akcent kolorystyczny.

Zaktualizuj ustawienia typografii w konfiguratorze motywów

Ponieważ WooCommerce używa domyślnych ustawień dostosowywania motywów do stylizowania tekstu na każdej ze swoich stron, upewnij się, że pasujesz do typografii używanej w układach z ustawieniami typografii w dostosowywaniu motywów.

Aby zaktualizować typografię, przejdź do Divi > Dostosowywanie motywu > Ustawienia ogólne > Typografia i zaktualizuj następujące elementy:

Rozmiar tekstu ciała: 16px
Wysokość linii ciała: 1,9
Rozmiar tekstu nagłówka: 42
Styl czcionki nagłówka: B
Czcionka nagłówka: Playfair Display
Czcionka ciała: Poppins
Body Link Color: [jeśli zaktualizowałeś swój globalny kolor akcentu, ten kolor powinien pojawić się tutaj]

Ustaw stronę sklepu WooCommerce

WooCommerce pozwala ustawić, która strona ma być Twoją podstawową stroną sklepu. Ta strona powinna zawierać wszystkie kategorie produktów, aby użytkownicy wiedzieli, co ma do zaoferowania Twój sklep. Ponieważ nasz układ zawiera stronę sklepu, przejdźmy dalej i stwórzmy naszą podstawową stronę sklepu.

Z pulpitu nawigacyjnego WordPress przejdź do WooCommerce > Ustawienia i kliknij kartę Produkty u góry strony. W menu bezpośrednio pod zakładką wybierz Wyświetl . Następnie wybierz stronę sklepu do strony „Sklep”, którą utworzyłeś z nowym układem strony sklepu z pakietu układów mody.

Następnie zapisz zmiany.

Dodaj produkty do swojego Sklepu

Być może zauważyłeś, że Twoja strona sklepu, mimo że posiada dwa moduły sklepu, nie wyświetla żadnych produktów. Oczywiście najpierw musisz dodać produkty. Aby dodać nowy produkt do swojego sklepu, przejdź do pulpitu WordPress i wykonaj następujące kroki:

1. Przejdź do Produkty > Dodaj nowy
2. Wprowadź nazwę produktu
3. Wprowadź opis produktu
4. Wprowadź cenę produktu
5. Wprowadź krótki opis produktu
6. Dodaj trzy nowe kategorie (lato, polecane i na wyprzedaży)
7. Wybierz kategorię dla swojego Produktu (w tym przypadku będzie to Lato)
8. Dodaj obraz produktu
9. Publikuj/aktualizuj produkt

Przypisz kategorie do swoich produktów

Powtarzając powyższe kroki, aby utworzyć więcej nowych produktów, pamiętaj o przypisaniu do każdego z nich kategorii (nr 7 w krokach wymienionych powyżej). Do tego samouczka dodałem 6 produktów z kategorii „Lato”, 6 produktów z kategorii „Polecane” i 1 produkt z kategorii „Wyprzedaż”.

Zaktualizuj moduły sklepu na stronie sklepu

Teraz, gdy masz już utworzone produkty, możesz dodać je do swojej strony sklepu. Jak wspomniałem wcześniej, układ strony sklepu ma już wbudowane moduły sklepu. Jest jeden w sekcji Lato i jeden w sekcji Polecane.

Przejdź do strony sklepu i wdróż konstruktor wizualny. Następnie najedź na moduł sklepu (obecnie nie wyświetlający żadnych produktów) pod wierszem zawierającym nagłówek Summer Fashion i kliknij ustawienia modułu.

Zaktualizuj ustawienia, aby obejmowały tylko kategorię „Lato”.

Teraz powinieneś zobaczyć wszystkie produkty dodane z kategorią lato.

Następnie znajdź moduł sklepu pod nagłówkiem polecanych produktów i zaktualizuj ustawienia tak, aby obejmowały tylko kategorię Polecane.

Dodaj moduł sklepu, aby wyświetlić przedmioty „na wyprzedaży” na stronie sklepu

Ponieważ na stronie sklepu mamy dwie kategorie (polecane produkty i moda letnia), łatwo byłoby tworzyć dodatkowe kategorie i produkty za pomocą modułów już dostarczonych w układzie.

Stwórzmy kolejną sekcję, aby wyświetlić nasze produkty „Na wyprzedaży”.

Aby to zrobić, wdróż konstruktor wizualny i użyj opcji kliknięcia prawym przyciskiem myszy, aby skopiować całą sekcję wyświetlającą produkty mody letniej i wkleić ją bezpośrednio pod sekcją Polecane produkty.

Teraz wszystko, co musisz zrobić, to dokonać kilku aktualizacji.

W wierszu z nagłówkiem kliknij tekst w module tekstowym i zmień nagłówek na „Wyprzedaż” zamiast „Summer Fashion”.

Następnie zmień obraz w lewej kolumnie na bardziej zgodny z Twoimi produktami sprzedażowymi.

Na koniec zaktualizuj moduł sklepu, aby zawierał tylko kategorię „Wyprzedaż”.

Stylizuj swoje strony WooCommerce za pomocą układu mody

WooCommerce generuje własny zestaw stron WooCommerce automatycznie po zainstalowaniu wtyczki. Należą do nich:

Sklep – który jest miejscem na archiwum typu post dla Twoich produktów.
Koszyk – który wykorzystuje shortcode [woocommerce_cart] do generowania zawartości koszyka
Checkout – który wykorzystuje krótki kod [woocommerce_checkout] do wyświetlania informacji.
Moje konto – które wykorzystuje krótki kod [woocommerce_my_account], aby wyświetlić określone informacje o kliencie związane z jego kontem.

Ponieważ wybraliśmy już naszą stronę Sklepu, nie ma potrzeby dalszego projektowania. Ale w przypadku pozostałych 3 stron WooCommerce musimy je stylizować, aby pasowały do ​​​​projektu naszych innych układów stron.

Dodawanie nagłówka sekcji do koszyka i stron kasy

Przyjrzyjmy się najpierw stronie Koszyk. Oto jak to wygląda, zanim cokolwiek z nim zrobimy.

Zauważ, że ponieważ zaktualizowaliśmy nasz globalny kolor akcentów, nasze linki i przyciski już pasują do schematu kolorów. A ponieważ zaktualizowaliśmy nasze ustawienia typografii w konfiguratorze motywów, nagłówki i treść również pasują do naszego motywu.

Ale możemy zrobić trochę lepiej za pomocą zaledwie kilku kliknięć. Najpierw przejdź do strony sklepu, wdróż konstruktor wizualny i zapisz górną sekcję zawierającą nagłówek strony w bibliotece. Możesz nadać nazwę „sekcja nagłówka strony”.

Następnie przewiń w dół na dół strony i znajdź ostatnią sekcję zawierającą optin e-mail i dane kontaktowe, a następnie zapisz ją w swojej bibliotece pod nazwą „sekcja stopki strony”.

Teraz przejdź do edycji strony koszyka. W domyślnym edytorze stron wybierz, aby użyć Divi Builder, a następnie „Użyj Visual Builder”. Konstruktor powinien automatycznie umieścić krótki kod [woocommerce_cart] w module tekstowym w jednym wierszu kolumny zwykłej sekcji. Jeśli nie, będziesz musiał sam to stworzyć. Następnie kliknij niebieską ikonę plusa, aby dodać nową sekcję pod bieżącą, wybierz kartę "Dodaj z biblioteki". Następnie wybierz nowo utworzoną sekcję o nazwie „Sekcja nagłówka strony”.

Następnie przeciągnij tę sekcję na górę strony i zmień tekst tytułu na „Twój koszyk”. Otóż ​​to!

Możesz powtórzyć ten proces również dla strony kasy.

Projektowanie strony Moje konto za pomocą Divi Builder

Teraz, gdy wiesz, jak dodać nagłówek do tych stron WooCommerce, zrób to samo dla strony Moje konto. Tym razem możesz dodać sekcję stopki zapisaną w bibliotece na dole tej strony.

Możesz nadać tej stronie inny wygląd, aby było bardziej oczywiste, że jest to strona, która zarządza Twoim kontem. Więc zamiast różowego tła gradientowego dla sekcji nagłówka i stopki, przejdź do ustawień sekcji dla każdej z nich i zmień kolory gradientu tła na #9599e2 i #8bc6ec.

Użyj ustawień modułu tekstowego, aby nadać styl treści WooCommerce Shortcode

Ponieważ krótki kod WooCommerce znajduje się teraz w module tekstowym, możesz wykorzystać to na swoją korzyść, aby stylizować niektóre z tych elementów w ustawieniach modułu.

Zróbmy to dla naszej strony Moje konto. W konstruktorze wizualnym zaktualizuj ustawienia modułu tekstowego, który przechowuje zawartość shortcode w następujący sposób:

W zakładce projekt…

Rozmiar tekstu: 20px
Wysokość linii tekstu: 1,6 em

Teraz kliknij zakładkę linków pod sekcją Tekst, aby stylizować linki w następujący sposób:

Czcionka łącza: Poppins
Grubość czcionki łącza: pół pogrubiona
Rozmiar tekstu linku: 27px
Wysokość linii łącza: 1,5 em

Zapisz ustawienia

Teraz sprawdź swoją stronę Moje konto.

Używasz niestandardowego CSS do stylizowania stron archiwum WooCommerce?

Niektóre strony archiwum używane przez WooCommerce nie są generowane za pomocą shortcode, podobnie jak inne strony, dlatego nie można ich modyfikować za pomocą Divi Builder. Więc w przypadku tych stron musisz wydzielić niestandardowy CSS.

Spójrzmy na przykład na stronę Polecane kategorie.

Teraz otwórzmy Theme Customizer i kliknij Dodatkowy CSS i dodajmy:

.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;

}

.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
    font-size: 16px !important;
    color: #fd7792 !important;
    letter-spacing: 2px;
}

Spowoduje to stylizację listy rozwijanej sortowania, bułki tartej i czcionki ceny. Resztę tekstu można zmienić za pomocą ustawień Typografia w konfiguratorze motywu.

Końcowe przemyślenia

Tworzenie sklepu internetowego dla Twojej witryny jest znacznie łatwiejsze dzięki temu niesamowitemu pakietowi układów, WooCommerce i Divi Builder. Oczywiście istnieją pewne potrzeby, które nadal muszą zostać wykonane, a które wykraczają poza zakres tego artykułu. Na przykład nadal będziesz musiał zdecydować, której bramki płatności użyć, jak chcesz obsługiwać wysyłkę i inne bardziej specyficzne dla firmy elementy działań. Ale WooCommerce powinien być w stanie obsłużyć większość tego, czego potrzebujesz.

Jeśli już, to mam nadzieję, że ten post zainspirował Cię do samodzielnego stworzenia czegoś niesamowitego.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!