Jak zrobić witrynę eCommerce za pomocą WordPress i Elementora 2020

W tym samouczku uczę Cię, jak stworzyć witrynę e-commerce za pomocą WordPress i Elementora 2020, którą możesz w pełni dostosować.

WordPress to najczęściej używana platforma CMS do tworzenia wszelkiego rodzaju witryn internetowych, w tym witryn eCommerce. Nauczysz się również używać kreatora stron Elementor do tworzenia niesamowitych stron internetowych, które są obecnie numerem 1 i najpopularniejszym kreatorem stron dla WordPress. WordPress kontroluje ponad 1/3 internetu. Większość dużych firm e-commerce, takich jak Sony, Bata, eBay i wiele innych, używa if do rozwoju i utrzymania swojej witryny. A najlepsze w korzystaniu z WordPressa jest to, że nie musisz uczyć się żadnego języka kodowania ani żadnego innego żargon techniczny, aby stworzyć swoją stronę internetową. Jest to prosta platforma typu „przeciągnij i upuść”, która daje wiele wbudowanych szablonów i układów, co pomaga w tworzeniu atrakcyjnej, przyjaznej dla użytkownika strony internetowej. Dostarczę również gotowe szablony, które możesz łatwo zaimportować i sprawić, że Twoja witryna e-commerce będzie działać w ciągu kilku minut.

Samo przejście przez cały ten samouczek sprawi, że będziesz gotowy do stworzenia własnej strony internetowej bez żadnej pomocy z zewnątrz. Ten samouczek pomógł wielu ludziom stworzyć swoją stronę internetową i uzyskać przewagę nad konkurencją w tej brutalnej branży e-commerce. Przejdź więc przez ten łatwy i zrozumiały samouczek i zdobądź umiejętność, która pomoże ci przez całe życie. Cały proces został uczony w podejściu krok po kroku, a wszystkie infografiki i reprezentacje obrazkowe są podane tak, aby było jak najłatwiejsze do zrozumienia.

Zacznijmy więc tworzyć witrynę eCommerce za pomocą WordPress i Elementora 2020

Wprowadzenie do witryny e-commerce

Powyższy obraz jest przykładem strony głównej lub strony docelowej typowej witryny e-commerce. Strony docelowe są bardzo istotne dla konwersji i sprzedaży w witrynie e-commerce. Strona docelowa powinna więc być atrakcyjna, zawierać banery i powiadomienia o wyprzedażach i obniżonych cenach lub o nowościach, zwłaszcza dla witryn e-commerce. Aby uzyskać konwersję, musisz położyć nacisk na najbardziej sprzedające się produkty na stronie docelowej i zapewnić łatwe powiązanie z tymi produktami. Możesz wyświetlić swoje kategorie produktów na stronie docelowej i podać do nich link.

Na górze mamy nagłówek, który zawiera naszą lokalizację, numer telefonu, nasze numery kontaktowe po lewej i po prawej stronie mamy ikony naszych serwisów społecznościowych Facebook, Twitter, YouTube itp. Poniżej mamy sklep przycisk, który prowadzi do strony zakupów produktów w naszej witrynie. Ponadto mamy przycisk Konto, po kliknięciu którego użytkownicy mogą przejść do swojego osobistego pulpitu nawigacyjnego, aby uzyskać dostęp do swoich informacji i zakupów oraz zarządzać nimi. Na samym nagłówku mamy również logo naszej firmy. W środku mamy nasz link do naszych stron, a mianowicie. Strona główna, O nas, Sklep, Moje konto i Kontakt.

Następnie masz wszystkie swoje produkty i banery, które nauczysz się tworzyć w tym tutorialu, pokazane w bardzo atrakcyjny sposób . Następnie mamy również sekcję Newsletter, w której użytkownicy mogą subskrybować Twoją witrynę, a nie powiadomienia i maile o produktach, ofertach, kuponach itp. Poniżej mamy naszą stopkę, zawierającą informacje o nas i przycisk subskrypcji e-mail.

Jak widać na obrazku, strona sklepu zawiera listę wszystkich produktów dostępnych na naszej stronie, gdzie użytkownicy mogą sprawdzić dowolny produkt, klikając na niego. Na pasku bocznym mamy filtr cenowy, listę kategorii, recenzje oraz reklamy wideo naszych produktów. Pod każdym produktem znajduje się również formularz recenzji i powiązane produkty. Następnie mamy stronę O nas wyświetlającą opis Twojej firmy oraz informacje o Twoim zespole. Następnie mamy stronę Kontakt, na której użytkownicy mogą skontaktować się z nami za pomocą formularza kontaktowego. Następnie mamy pulpit nawigacyjny Moje konto, który będzie miał osobisty pulpit nawigacyjny dla każdego klienta, który zawiera jego dane osobowe, dotyczące zakupu i płatności.

Możesz zobaczyć stronę koszyka po zakupie, jak widać na obrazku, gdzie możesz zmienić szczegóły zakupu, sprawdzić całkowitą kwotę i przejść do płatności. Następnie odwiedzający mogą sprawdzić, wypełniając dane wysyłki i płacąc za zakup. W tym samouczku nauczymy się tworzyć wszystkie te strony krok po kroku, aby Twoja witryna była całkowicie gotowa do rozpoczęcia działalności.

Uzyskaj hosting i zainstaluj WordPress i Elementor

• Zakup domeny NameHero

Pierwszą rzeczą, którą musimy zrobić, aby stworzyć witrynę, jest uzyskanie nazwy domeny i hostingu dla Twojej witryny. Musisz wybrać dobry hosting, ponieważ cała Twoja witryna będzie oparta i obsługiwana na Twojej witrynie hostingowej, więc musisz sprawdzić i porównać różne hostingi na podstawie kryteriów takich jak niezawodność, wsparcie techniczne, przestrzeń, zabezpieczenia, projekt, możliwości SEO itp.

Na rynku jest kilku dostawców hostingu i większość z nich ma różne oferty. Wypróbowałem wiele z nich i ostatecznie zdecydowałem się na NameHero dla wszystkich moich stron internetowych. Używam go osobiście i porównałem do 22 innych hostingów i uznałem je za najlepsze. Jak widać na obrazku, mają 4 różne opcje i polecam opcję Plus Cloud dla witryny e-commerce. Możesz użyć mojego linku, aby uzyskać zniżkę. www.namehero.com/darrelwilson

Po zamówieniu planu będziesz mógł wybrać nazwę swojej domeny, czyli nazwę swojej strony internetowej. Możesz wybrać dowolną nazwę. Możesz wybrać swoją domenę zgodnie ze swoimi potrzebami, aby polubić .net, .biz itp. Następnym i ostatnim krokiem jest wypełnienie informacji o koncie i szczegółach płatności. Zdecydowanie zaleca się, aby uzyskać ochronę ID w polu wyboru dodatku, ponieważ chroni ona przed spamerami. Dokończ zakup, klikając kolejne strony i przechodząc do procesu płatności.

• Zainstaluj WordPressa

Aby zainstalować WordPress na swoim hostingu, przejdź do „Strefy klienta” na stronie hostingu, kliknij „Cloud Web Hosting”. Następnie masz Moje produkty i usługi, gdzie zobaczysz pakiet Plus Cloud z nazwą Twojej domeny, kliknij przycisk Aktywny obok niego, jak widać na obrazku. Następnie po lewej stronie zobaczysz przycisk „Przejdź do cpanel” i kliknij go. Na następnej stronie, jak widać na obrazku, przewiń w dół do kategorii oprogramowania i kliknij „WordPress Manager by Softaculous”.

Spowoduje to otwarcie instalatora WordPress, kliknij przycisk Zainstaluj teraz. Otworzy się strona konfiguracji zawierająca wersję, nazwę domeny i katalog, jak widać na obrazku. PROSZĘ USUNĄĆ WSZYSTKO NAPISANE W KATALOGU. RÓWNIEŻ NA PROTOKOLE WYBIERZ 'https:/'. W ustawieniach witryny możesz zmienić nazwę i opis witryny. Możemy to zrobić później. Wpisz swoje dane administratora, takie jak nazwa użytkownika, hasło i e-mail, które będą Twoimi danymi logowania do WordPressa. Na następnej stronie przewiń szablony, ponieważ ich nie używamy, i kliknij „Zainstaluj”. Kliknij link administratora podany na następnej stronie, a Twój nowy WordPress zostanie utworzony i będzie dostępny w Internecie. Jesteś teraz na pulpicie WordPress, jak na obrazku, gdzie możesz edytować swoją witrynę.

• Ustawienia ogólne WordPress

Zanim zaprojektujesz swoją stronę, pozwól nam nauczyć się zmieniać Twoje ustawienia w panelu WordPress. Na pulpicie WordPress zobaczysz kilka kart po lewej stronie strony, jak widać na obrazku. Jedną z najważniejszych jest zakładka „Ustawienia”, w której znajdziesz ogólne ustawienia WordPressa. Zmień swój permalink z „Dzień i imię” na „Nazwa posta”, aby adres Twojej witryny był łatwiejszy do zrozumienia. Jest to również bardzo ważne dla Twojego SEO. Kolejna zakładka na pulpicie WordPress to „Użytkownicy”, w której dostosowujesz swój profil i wygląd pulpitu WordPress. Kliknij „Zapisz zmiany”, aby je zaktualizować.

Aby ponownie zalogować się do WordPressa po wylogowaniu, musisz wpisać swój adres URL w pasku adresu, a następnie „/wp-admin”, co spowoduje przejście do strony logowania WordPress, gdzie możesz umieścić swoją nazwę użytkownika i hasło, aby się zalogować.

Tworzenie stron i menu

Utworzyłeś już działającą stronę internetową, która nadal nie jest kompletna. Teraz musisz dodać strony do swojej witryny. Na pulpicie WordPress kliknij zakładkę „Strony” i wybierz opcję „Dodaj nowy”. Możesz to również zrobić, klikając przycisk „Dodaj nowy” u góry strony. Gdy to zrobisz, pulpit nawigacyjny otworzy edytor stron, jak pokazano na poniższym obrazku, w którym możesz utworzyć nową stronę. Tutaj możesz umieścić nazwę strony i zaprojektować układ strony. Kliknij przycisk „Opublikuj”, a Twoja strona zostanie utworzona. W tym samouczku stworzymy podstawowe strony, takie jak Strona główna, O nas i Kontakt, które są wymagane przez każdą witrynę internetową. Na razie nie wchodzimy w treść stron, co zrobimy później. Możesz wyświetlić te strony, klikając widok pod nazwą strony w panelu WordPress.

Po utworzeniu oddzielnych stron musisz utworzyć menu, aby móc poruszać się po tych stronach. Tworzenie menu za pomocą WordPressa jest bardzo proste. Po prostu przejdź do pulpitu nawigacyjnego, znajdź kartę „Wygląd” i kliknij „Menu”. Spowoduje to otwarcie edytora menu, w którym możesz tworzyć i nazywać swoje menu, jak widać na poniższym obrazku. Po utworzeniu menu możesz przypisać do niego różne strony witryny. Zawsze możesz zmienić chronologię pozycji menu i utworzyć menu rozwijane, umieszczając jeden element pod drugim, przeciągając i upuszczając.

Teraz powinieneś wybierz z listy rozwijanej. Robisz to tak, że za każdym razem, gdy ktoś odwiedza Twoją witrynę, zawsze jest kierowany na Twoją stronę główną. Bezpośrednie przejście na inną stronę, taką jak O nas, Kontakt lub najnowsze posty, nie będzie miało sensu dla widzów.

Pobierz Elementora

Teraz musimy kupić naszego kreatora stron Elementor pro, którego będziemy używać do tworzenia stron internetowych naszej witryny e-commerce. Możesz go kupić za pomocą mojego linku.www.darrelwilson.com/elementor.Z ich strony możesz sprawdzić różne dostępne pakiety. Nie możemy korzystać z darmowej wersji, ponieważ potrzebujemy kreatora motywów i usług budowniczych Woocommerce. Gdy kupisz pakiet, otworzy się on na twoim koncie, jak pokazano na obrazku, z którego musisz kliknąć „Pobierz wtyczkę”, a zip zostanie pobrany.

Następnie musisz przesłać go na swoją witrynę WordPress. Przejdź do pulpitu nawigacyjnego na swoim WordPressie, kliknij „Wtyczki” na pasku narzędzi po lewej stronie, kliknij „Dodaj nowy”, a Twoja wtyczka dodawania otworzy się, jak pokazano na obrazku. Kliknij „Prześlij wtyczkę” i wybierz plik zip Elementora i zainstaluj go. Kliknij „Aktywuj wtyczkę”, a nowy przycisk „Elementor” zostanie utworzony na pasku narzędzi WordPress. Przejdź tam i kliknij „Połącz i aktywuj”.

Zainstaluj motywy WordPress

Teraz zainstalujmy motyw WordPress na naszej stronie. WordPress zapewnia mnóstwo wstępnie zaprojektowanych motywów do wyboru, aby wygląd Twojej witryny. W zakładce „Wygląd” pulpitu WordPress znajdziesz przycisk „Motyw”, z którego możesz zainstalować motyw. Możesz wybrać dowolny motyw z dostępnych opcji. Na potrzeby tego samouczka użyjemy motywu Astry, który można znaleźć w popularnym menu. Kliknij „Aktywuj” pod nazwą motywu. „Najlepszą częścią korzystania z tego motywu jest to, że zawiera on wszystkie podstawowe ustawienia i funkcje wymagane do działania witryny i jest bardzo kompatybilny z narzędziem do tworzenia stron Elementor.

Edytuj strony za pomocą Elementora

Teraz nauczmy się edytować nasze strony za pomocą Elementora. Przejdź do strony głównej swojej witryny WordPress i kliknij „Edytuj stronę” w górnym czarnym wierszu, który otworzy edytor stron. Najpierw zmieńmy ustawienia strony po prawej stronie, jak pokazano na obrazku. Zmień układ treści na „Rozciąganie na całą szerokość” i wybierz „Wyłącz tytuł”, ponieważ chcemy to ustawienie dla naszej strony głównej.

Teraz kliknij „Edytuj za pomocą Elementora”, aby otworzyć Edytor Elementora, jak pokazano na obrazku. Zróbmy tutaj krótki samouczek edytora Elementor. Aby dodać nową sekcję do strony, kliknij przycisk Plus i wybierz żądany układ kolumn. Aby dodać elementy, kliknij 9 kropek na pasku narzędzi po lewej stronie, co da ci listę elementów jak na obrazku. Możesz przeciągać i upuszczać dowolne z tych elementów na stronie i edytować je.

Po kliknięciu dowolnego modułu na stronie po lewej stronie pojawi się jego pasek narzędzi edycji. Tutaj na obrazku edytujemy nagłówek, więc pojawił się „Edytuj nagłówek”, który zawiera 3 zakładki. 1. to ^Content , który daje różne opcje zawartości elementu. ^Drugi to Styl, w którym możesz zaprojektować styl, taki jak kolor, rozmiar, czcionka itp. elementu. A ^trzeci to Advanced, gdzie możesz umieszczać animacje i inne rzeczy. Podobnie możesz dodać, edytować i stylizować pole tekstowe w ten sam sposób pod nagłówkiem.

Możesz dodać przycisk i podać link do dowolnej innej strony internetowej, która otworzy się po kliknięciu. Możesz zmienić ustawienie na „Otwórz nowe okno”, aby użytkownicy nie opuszczali naszej witryny. Możesz także wybrać ikonę dla swojego przycisku z Galerii ikon. Wszystko to będzie na pasku narzędzi „Edytuj przycisk” po lewej stronie, jak pokazano na obrazku.

Teraz zamiast projektować każdy element osobno, możemy użyć gotowych szablonów i zablokować, klikając ikonę folderu na Elementorze. Z biblioteki możesz wybrać całą stronę lub określone sekcje lub bloki. Dostępne są wszystkie kategorie bloków zgodnie z potrzebami. Jako stronę docelową wybierz dowolny blok z kategorii Bohater. W przykładzie wybrałem Dźwięk przyszłości.

Budowanie strony głównej

Teraz stwórzmy stronę podobną do Homepage, którą widzieliśmy we wstępie, używając tego bloku. Najpierw zmieńmy tło na całą sekcję. Aby edytować całą sekcję, kliknij sześć kropek u góry sekcji, jak pokazano na obrazku. Teraz zobaczysz pasek narzędzi „Edytuj sekcję”, z którego możesz użyć opcji Styl na kartę, aby zmienić tło. Oto LINK DO DARMOWYCH OBRAZÓW DEMO, których możesz użyć w swojej witrynie e-commerce. Następnie prześlij te obrazy do Elementora i wybierz obraz tła. Możesz zmienić nakładkę tła, jeśli wygląda na ciemną.

Teraz możesz edytować elementy bloku, tak jak to zrobiliśmy wcześniej. Zmień tekst, kolor, czcionkę, topografię itp. Możesz użyć duplikatu, klikając niebieski przycisk w prawym górnym rogu elementu. Możesz dodać separator między polami tekstowymi i nadać mu dowolny styl, korzystając z opcji „Edytuj separator”. Teraz edytuj przycisk zgodnie z naszym projektem, na przykład dodając lub zmniejszając Padding, aby zmienić przestrzeń wokół niego. Później połączymy ten przycisk z naszą stroną Sklepu, możesz również dodać do niego ikonę. Możesz zmienić styl i animację, gdy najedziesz na nie kursorem na pasku narzędzi „Przycisk edycji”, jak pokazano na obrazku.

Następnie umieść animowany nagłówek z sekcji Pro Elements, przewijając w dół pasek narzędzi elementu. Możesz zmienić styl, kształt, kolor, topografię nagłówka itp. za pomocą paska narzędzi „Edytuj animowany nagłówek”, jak pokazano na obrazku. Możesz sprawdzić wszystkie elementy i style oraz zaprojektować rzeczy tak, jak chcesz. W znalezieniu idealnego projektu jest wiele prób i błędów. Kliknij przycisk „Aktualizuj”, aby zastosować te zmiany w swojej witrynie.

Następnie na stronie docelowej musimy stworzyć sekcje, które prowadzą do różnych kategorii, takich jak sekcja dla kobiet, sekcja dla mężczyzn i nowości. Dodaj nową sekcję 3-kolumnową, dodaj nagłówek, tekst i przycisk w nich. Możesz utworzyć jeden i duplikować dwa razy, aby zaoszczędzić czas i wysiłek. Znowu będziesz musiał edytować tekst, style, tło itp. tej sekcji, tak jak to zrobiliśmy z powyższą sekcją. Możesz użyć podanych przeze mnie obrazów jako tła dla wszystkich 3 kategorii. Korzystając z edytora tekstu, aby zakończyć linię i przejść do następnej linii, tak jak to robimy w sekcji damskiej, użyj <br> jak pokazano na obrazku.

Tutaj nie mamy żadnych szablonów ani bloków w tej sekcji, więc będziesz musiał stworzyć i stylizować każdą sekcję od zera, co może wyglądać na długie zadanie za ^pierwszym razem, ale możesz użyć wszystkich metod przeciągania i upuszczania oraz sztuczek, takich jak powielanie, takie jako skopiuj przycisk „Kup teraz” wykonany w powyższej sekcji i po prostu zmień styl przycisku lub najedź kursorem zamiast tworzyć od zera. Będziesz musiał zobaczyć wszystkie opcje na pasku narzędzi Edytuj dla każdego elementu, aby dowiedzieć się, który z nich najlepiej pasuje do Twojego gustu. To będzie świetne ćwiczenie dla Twojego zmysłu artystycznego. Aby zmienić odstępy zawartości wewnątrz kolumny, kliknij ikonę Edytuj kolumnę w lewym górnym rogu kolumny, aby otworzyć pasek narzędzi „Edytuj kolumnę”, w którym możesz zmienić dopełnienie w sekcja zaawansowana, jak widać na obrazku poniżej.

Możesz powielić kolumny wierszy, a następnie edytować tekst i tło dla pozostałych dwóch kategorii sekcji męskiej i nowoprzybyłych, aby nie trzeba było ich ponownie stylizować. Należy inaczej stylizować obraz tła i kolor tekstu w każdej sekcji, aby każda kategoria była wyraźnie widoczna. Jeśli pierwszy ma ciemny obraz tła z jasnym kolorem tekstu, następny powinien być przeciwny. Wszystkie te techniki poznasz, gdy zaczniesz projektować i sam zobaczysz te efekty. Użyj podkładki tła, aby podkreślić tekst nad obrazem, a także dostosuj położenie tekstu za pomocą przeciągania i upuszczania lub opcji wyrównania, aby nie zakrywał twarzy na obrazie tła. Możesz także zmienić położenie obrazu tła, używając opcji „Edytuj kolumnę”, jak wcześniej. Kliknij niebieski przycisk na górze sekcji, aby otworzyć „Edytuj sekcję” i możesz rozciągnąć szerokość sekcji do 100%.

Poniżej dodamy ikony. W tym celu najpierw dodaj nową sekcję i wstaw ramkę obrazu z paska narzędzi Elementor. Wybierz obraz ikony dla dostarczonych przeze mnie obrazów, jak pokazano na obrazku. Te pola z ikonami mają zachęcić do zakupu atrakcyjnych tytułów, takich jak „Bezpłatna wysyłka” oraz zapisania opisu i warunku w tekście poniżej. Dostosuj ramkę obrazu tak, jak chcesz, zmieniając położenie obrazu, rozmiar, kolor tytułu i opisu, tekstu itp. z paska narzędzi „Edytuj obraz”. Powiel go po zaprojektowaniu, aby nie musieć ponownie projektować wszystkich ikon. Następnie możesz edytować tekst każdego pola w żądanym celu. W sekcji zaawansowanej możesz dodać marginesy za pomocą Padding, aby strona nie wyglądała na zbyt przepełnioną.

Możesz dodać obramowania do kolumn, aby wyglądały jak chwytliwe. Kliknij przycisk „Edytuj kolumnę” iw kategorii „Styl” możesz dodać obramowanie i zaprojektować obramowanie. Możesz wybrać typ obramowania, szerokość, położenie, promień itp. Możesz wybrać obramowanie tylko z jednej lub więcej określonych stron, tak jak tutaj zrobiliśmy prawą granicę. Sprawdź wszystkie narzędzia do projektowania dostępne na pasku narzędzi i wybierz siebie. Im więcej zrobisz to sam, tym bardziej przyzwyczaisz się do wszystkich narzędzi i funkcji, a to będzie dla Ciebie szybsze i łatwiejsze.

Następnie dodamy sekcję „Nowy przyjazd”. Ale zanim dodamy rozdzielacz między tymi rzędami, wyglądają one wyraźnie i wyraźnie. Ponownie dodaj nową sekcję, dodaj „Divider” z paska narzędzi Elementor i zaprojektuj go za pomocą paska narzędzi „Edit Divider”, jak pokazano na obrazku. Dodaj tekst „New Arrival” w separatorze, który będzie używany jako nagłówek do następnej sekcji, więc zmień rozmiar, czcionkę itp. , Jak pokazano na obrazku , aby wyglądał atrakcyjnie.

Tworzenie produktów

Musimy teraz stworzyć produkty do sprzedaży w naszej witrynie e-commerce. Produkty mogą być proste lub zmienne, produkty proste nie mają możliwości wyboru, takich jak rozmiar, kolor lub styl, podczas gdy produkty zmienne mają różne możliwości wyboru, takie jak rozmiar lub kolor w ubraniach. Nauczymy się tworzyć je obie.

Woocommerce

Do tworzenia produktów będziemy musieli dodać nową wtyczkę. Przejdźmy więc do pulpitu WordPress, kliknij „Wtyczki” na pasku narzędzi, a następnie kliknij „Dodaj nowy”, tak jak to zrobiliśmy wcześniej. W bibliotece wtyczek wyszukaj „Woocommerce”. Woocommerce to najlepsza wtyczka e-commerce z mojego osobistego doświadczenia. Kliknij „Zainstaluj” i kliknij Aktywuj. Teraz wtyczka Woocommerce otworzy się, jak pokazano na obrazku. Wypełnij formularz i kliknij „Kontynuuj”. Następnie wybierz swoją branżę, w tym samouczku tworzymy witrynę z modą i odzieżą. Następnie mamy typ produktów, w których podane są 2 opcje – Fizyczne i do pobrania, wybierz obie i kliknij „Kontynuuj”. Następnie otrzymasz kilka pytań, odpowiedz na nie i ponownie kliknij „Kontynuuj”.

Następnie musisz wybrać motyw dla swojej wtyczki, wybierz motyw „Astra”. Następnie da ci opcję aktywacji usług Jetpack, które będą dla nas pomocne, więc wybierz „Tak, proszę”, co przeniesie Cię na stronę konta Jetpack, wypełnij swoje dane i załóż konto. Zostaniesz przekierowany do pulpitu WordPress, ale nowy „Woocommerce” będzie dostępny na pasku narzędzi, jak pokazano na obrazku. Wszystkie te ustawienia podatkowe zrobimy później.

Teraz zacznijmy tworzyć produkty. Najpierw stworzymy prosty produkt Woman Green Shirt, jak pokazano na obrazku.

Kliknij „Produkty” na pasku narzędzi, co otworzy stronę „Dodaj nowy produkt”, jak pokazano na poniższym obrazku. Wpisz nazwę i opis produktu. Poniżej w Dane produktu wybierz 'Prosty produkt', ponieważ najpierw stworzymy prosty produkt. Umieść cenę regularną i cenę sprzedaży, które możesz zaplanować poniżej, jak pokazano na następnym obrazku. W tych terminach cena sprzedaży będzie obowiązywać automatycznie.

Następnie kliknij ustawienia „Inwentarz” poniżej Ogólne, gdzie możesz umieścić Dostępność zapasów. Możesz również zezwolić lub zabronić zamówień oczekujących tutaj, jeśli ustawisz „Nie zezwalaj”, żadne zamówienia nie zostaną przyjęte, jeśli produktu nie ma w magazynie. Ustaw „Próg niskiego stanu zapasów”, aby otrzymywać powiadomienia, gdy zapasy są niskie.

Następnie w kategorii „Wysyłka” podaj dane dotyczące wagi i wymiarów produktu w celu wysyłki. W 'Powiązanych'produktach możesz 'Upsells', które pokażą powiązane produkty i Cross-sells, które pokażą powiązane produkty w koszyku po zakupie oryginalnego produktu przez użytkownika. Dodaj powiązane produkty, które chcesz pokazać kupującym, kiedy kupują ten konkretny produkt. W kategorii „Zaawansowane” możesz dodać uwagę kupującym i aktywować recenzje.

Poniżej tych ustawień, jeśli przewiniesz w dół, zobaczysz „Krótki opis produktu”, jak na obrazku. Tutaj wpisz pełny opis zgodnie z naszym przykładowym produktem. Tutaj również możesz zaprojektować czcionkę i styl opisu. Po prawej stronie, jeśli widzisz obraz, znajduje się opcja „Obraz produktu”. Kliknij „Ustaw obraz produktu”, co otworzy stronę „Obraz produktu”, na której możesz wybrać i przesłać obraz swojego produktu. Poniżej „Zdjęcia produktu” znajduje się „Galeria produktów”, w której możesz umieścić inne zdjęcia swojego produktu pod różnymi kątami, aby lepiej zrozumieć widzów, jak pokazano na obrazku.

Powyżej masz „Kategorie produktów” na prawym pasku narzędzi, jak pokazano na obrazku. Tutaj możesz kategoryzować swoje produkty. Stwórzmy więc nową kategorię, klikając „Dodaj nową kategorię”. Wpisz nazwę „Kobiety” i kliknij Opublikuj. Teraz możesz zobaczyć swój produkt, klikając przycisk „Wyświetl produkt”. Pokaże, jak produkt będzie wyświetlany widzom po jego kliknięciu. Otworzy się nowe wyskakujące okienko produktu, w którym można wyświetlić produkt, a nawet powiększyć obrazy, aby uzyskać lepszy widok. Możesz ponownie edytować wszystko, co chcesz.

Jeśli nie podoba Ci się styl i motyw wyświetlanej strony, możesz go zmienić za pomocą opcji „Ustawienia Astry” na prawym pasku narzędzi , jak pokazano na obrazku . Na przykład, jeśli chcesz usunąć pasek boczny, kliknij „Pasek boczny” i wybierz „Bez paska bocznego”. Kliknij „Aktualizuj”, aby zapisać zmiany i możesz ponownie kliknąć Wyświetl produkt, aby zobaczyć zmiany. To był przykład, jak stworzyć prosty produkt. Korzystając z tej samej procedury, możesz dodać dowolną liczbę produktów i kategorii. Jeśli klikniesz przycisk Kategoria na stronie Produkt, otworzy się nowa strona kategorii, na której będą pokazane wszystkie produkty z tej kategorii. W tym momencie będzie to bardzo nijakie, ale później zaprojektujemy również tę stronę.

Następnie nauczmy się, jak stworzyć zmienny produkt. Ponownie musimy przejść do strony „Dodaj nowy produkt” jak wcześniej. Tym razem stwórzmy produkt zmienny dla mężczyzn. Podaj tytuł i opis produktu tak jak wcześniej. Pamiętaj, że nie jest to główny opis, ale dodatkowy mały opis, który znajduje się poniżej, główny opis należy wpisać w „Krótkim opisie produktu”. Tutaj zmienimy „Dane produktu” na „Produkt zmienny”. Wszystkie inne ustawienia, takie jak Zapasy, Wysyłka, Połączone produkty itp., są podobne do utworzonego wcześniej prostego produktu, więc możesz samodzielnie uzupełnić te szczegóły.

Teraz kliknij „Atrybuty”, gdzie dodamy nowe atrybuty lub cechy do naszego produktu. Kliknij „Dodaj”, aby to zrobić. Następnie, jak pokazano na obrazku, stworzymy nowe atrybuty produktu takie jak rozmiar, kolor itp. Najpierw wpiszmy Rozmiar w polu 'Nazwa'. W polu „Wartości” wpisz najpierw małe, a następnie symbol „|” (bez nawiasów). Naciśnij klawisz „Shift” + klawisz nad przyciskiem Enter, aby wpisać ten symbol, jak pokazano na obrazku, następnie wpisz Średni i ponownie ten sam symbol, a następnie Duży. Za pomocą tego symbolu możesz dodać dowolną liczbę zmiennych, takich jak S, M, L, XL itp. Zaznacz pole wyboru „Używane dla wszystkich odmian” i kliknij „Zapisz atrybut”.

Następnie dodamy kolejny atrybut. Kliknij ponownie przycisk „Dodaj”, wpisz „Kolor” w polu Nazwa, a w polu Wartość dodaj nazwy kolorów, które chcesz, oddzielone symbolem, którego użyliśmy w atrybucie Rozmiar. Tutaj piszemy „Biały|Niebieski” jako dwie dostępne opcje. Ponownie zaznacz pole Używane dla odmian i kliknij „Zapisz atrybuty”.

Teraz zastosujemy te atrybuty do naszych produktów. Kliknij „Odmiany” poniżej „Atrybuty”, wybierz „Utwórz odmiany ze wszystkich atrybutów” i kliknij „Przejdź”. Kliknij „Tak” w wyskakującym okienku, aby zweryfikować tę opcję. Który otworzy opcje, jak pokazano na obrazku. Możesz zobaczyć, że dodano 6 wariantów, łącząc 3 rozmiary z 2 kolorami, mianowicie mały biały, mały niebieski, średni biały, średni niebieski, duży biały i duży niebieski.

Kliknij pierwszy, aby otworzyć jego ustawienia edycji, jak pokazano na obrazku. Najpierw musimy wgrać obraz tej odmiany. Kliknij „Prześlij obraz” i wybierz obraz z galerii. Następnie musisz podać cenę regularną tej odmiany. Jest to pole obowiązkowe, więc nawet jeśli ceny są takie same, musisz je tutaj wpisać. Ponownie możesz dodać cenę sprzedaży i zaplanować ją tak, jak w przypadku prostego produktu. Możesz uzupełnić informacje o stanie magazynowym i szczegóły wysyłki, tak jak to zrobiliśmy w Prostym produkcie.

Ponownie będziesz musiał wykonać ten sam proces dla innych odmian. Więc kliknij na nazwę odmiany, prześlij obraz i podaj cenę Small Blue i tak dalej i tak dalej. Tutaj umieszczamy tylko obraz i cenę wszystkich wymaganych odmian, ale możesz umieścić wszystkie inne szczegóły na swojej stronie internetowej zgodnie z własnymi warunkami. Nad nazwą odmian można zobaczyć opcję umieszczenia „Domyślnej wartości formularza”, w której można wybrać, która odmiana będzie wyświetlana jako domyślna w polu produktu, gdy użytkownicy oglądają produkt.

Inne ustawienia, takie jak Krótki opis produktu, będą podobne do prostego produktu, który zrobiliśmy wcześniej, więc wypełnij szczegóły zgodnie z Twoim produktem. To samo w przypadku obrazu produktu, gdzie należy umieścić obraz dla odmiany domyślnej, ponieważ zostanie on pokazany widzom jako pierwszy, gdy zobaczą produkt. Jako produkt domyślny należy umieścić najbardziej możliwą do sprzedaży odmianę. Nie musisz umieszczać galerii produktów dla produktów ze zmienną, ponieważ widoki będą mogły zobaczyć różne obrazy odmiany. Utwórz nową kategorię „Męska” i zaznacz jej pole wyboru, tak jak zrobiliśmy to w przypadku prostego produktu. Kliknij Opublikuj, aby zastosować te zmiany w witrynie.

Możesz teraz kliknąć Wyświetl produkt, aby zobaczyć, jak zobaczą go widzowie. Jak widać na obrazku, produkt się otworzy. Ponieważ jest to produkt zmienny, będziesz mieć listę atrybutów i ich wartości w ich rozwijanym polu. Możesz kliknąć te pola, aby zobaczyć różne odmiany tego produktu. Po kliknięciu zobaczysz obraz i ceny, które ustawisz dla odmiany. Ponownie możesz zmienić motyw strony produktu, jeśli ci się nie podoba, korzystając z ustawień Astry. Zmieńmy ustawienia i usuń pasek boczny i zmień układ treści na pełną szerokość, tak jak zrobiliśmy to w przypadku pojedynczego produktu, aby zachować spójność. Możesz stworzyć dowolną liczbę zmiennych produktów z dowolną liczbą odmian, ale będziesz musiał podać szczegóły każdej odmiany, tak jak to zrobiliśmy tutaj. Tak więc przy większej liczbie atrybutów i większej ich wartości będziesz mieć o wiele więcej odmian. Należy zauważyć, że cena produktu jest pokazana jako zakres, ponieważ pokazuje ceny o najniższej cenie i najbardziej kosztowną zmianę jako zakres. Więc nauczyliśmy się teraz, jak tworzyć zarówno proste, jak i zmienne produkty.

Teraz dodajmy te produkty do naszej strony głównej. Przejdź do swojej strony głównej i kliknij „Edytuj za pomocą Elementora”. Przewiń w dół do końca, gdzie stworzyliśmy dzielnik New Arrivals. Na pasku narzędzi Elementor po prawej stronie kliknij pasek „Widżety wyszukiwania” i wpisz produkt. Wybierz element Produkt i przeciągnij go i upuść w polu na swojej stronie poniżej dzielnika Nowości, a zobaczysz tam produkty.

Na pasku narzędzi „Edytuj produkty”, jak widać na obrazku, masz liczbę kolumn i wierszy produktów, które chcesz tutaj pokazać, aby nie wszystkie produkty były wyświetlane na tej stronie. Możesz również użyć kategorii stylów, aby zmienić odstęp między kolumnami i wierszami, wyrównania, obramowanie obrazu. Możesz również stylizować tytuł nazwy produktu, na przykład jego kolor, czcionkę, odstępy, topografię itp. To samo dotyczy gwiazdek oceny, zarówno wypełnionych, jak i pustych. Podobnie w przypadku ceny, możesz zmienić czcionkę, kolor, topografię itp. zarówno dla ceny zwykłej, jak i promocyjnej. Dalej jest przycisk, możesz zaprojektować przycisk w dowolny sposób, taki jak kolor tła, kolor tekstu, kolor obramowania i tak dalej. Korzystanie z Elementora sprawia, że ​​cała ta edycja jest tak łatwa. Wystarczy użyć wszystkich dostępnych narzędzi do edycji i bawić się nimi, a wszystkie wyniki będą na twoich oczach.

Masz również opcję „Sprzedaż flash”, którą możesz zaprojektować tak, aby pojawiała się, gdy masz wyprzedaż, która będzie wyświetlać baner flash nad produktem, gdy produkt jest wyprzedany. Użyj tego, aby przyciągnąć klientów swoimi produktami, gdy odwiedzają Twoją stronę główną. Wszystkie opcje projektowania są podobne do tego, czego nauczyliśmy się do tej pory, dzięki czemu możesz je wszystkie rozwijać i wybrać projekt, który najbardziej Ci odpowiada.

W opcji Zapytanie możesz wybrać produkty, które chcesz wyświetlić w tej sekcji. Na przykład, jeśli chcesz, aby w tej sekcji był wyświetlany tylko produkt damski, w polu Źródło wybierz „Najnowsze produkty”, ponieważ jest to sekcja nowości z menu rozwijanego i kliknij „Uwzględnij”. Następnie w polu 'include by' wpisz termin i wybierz opcję Termin, która będzie pasować do pola terminu. W polu terminu wpisz „Kobiety” i wybierz „Kategoria produktu: Damskie”, jak pokazano na obrazku. Kliknij Aktualizuj, aby wprowadzić efekt w swojej witrynie. W ten sposób możesz tworzyć sekcje wyświetlania produktów w dowolnej części swojej witryny.

Szablon e-commerce Elementor

Podałem Ci szablon strony e-commerce, który właśnie przygotowaliśmy layout przygotowany przez nas tutaj za darmo na mojej stronie pod tym linkiemhttps://darrelwilson.com/product/elementor-ecommerce-template-package. Download the template zip file from there and now let us learn how to import and export templates in Elementor. First, extract all the .json flies from the zip file. These are the templates for specific pages. Go back to your Elementor editor page and click on the folder icon next to the Add section icon on the page. This will open up the Template library and go to 'My templates' as shown in the image and click on Add templates. Here you can drag and drop those template files. Select the Homepage template and click on insert and your template will be loaded. You can edit the template according your taste but using the template, you won't have to create everything from scratch. Just remove the unwanted elements or sections and add new ones you like such as countdown, form etc. and style them the way you want.

Now let us create the other pages using our template. First, create a Menu for the rest of the pages. Woocommerce automatically adds the Shop, My Account, Cart and Checkout pages. Go the Appearance in WordPress and add these to the menu. Go to the About Us page, click on 'Edit Page, first disable the title and select Full Width in content layout. Now similar to Homepage template, insert the About Us template and edit the page as you want. You can add other pages too. Complete the website design using this process.

Theme Customizer

Theme customizer is where we design the structure and theme of the website and not the actual webpages. For opening the theme customizer, click on the 'Customize' button next you website button and it will open the Theme Customizer dashboard. We have used the Astra theme in this tutorial. Let us create a logo for your website, go to Header, then Site Identity and select Logo and upload your Logo. You can get a logo from www.fiverr.com. In the same way you can edit your site icon. You can design your Primary Header here too as shown in the image. You can select the layout, width, colour, etc. of the Header. Also you can design and style your menu from here.

Same way, you can design the footer. You can add upto 4 footer widgets here and customize as you want as shown in the image. Select 'Widgets' on your WordPress toolbar and you will get 4 Widgets to add to your footer. When you click on it and then click on 'Add a widget', you will get a list of widgets. You will get a widget toolbar where you can edit the contents of widget such as title, description, image and also your social media links. Once you click publish, it will appear on the footer of your webpage.

From the Woocommerce option on the toolbar, we can customize the Checkout page as in the image. You can assign 'Terms and conditions' page and 'Privacy Policy' page from the toolbar for the customers but first you'll have to first create these pages and write the details as the legal requirements. Next select the page from the drop down below their respective box. You can add new fields in the Checkout form and make them 'Required' or Optional.

Next in the Woocommerce toolbar, you can customize your Product catalog as shown in the image.You can customize, how products are shown in the catalog, their design an also you can hide some of the components that you don't want show like for example Ratings by clicking on the eye icon next to its name. This will control how your products are shown on your Shop page and also on the products section anywhere on the website.

Here we are using the free version of Astra Theme customizer, but you can buy the pro version where you will get tons of different option and templates for your website. You can import entire customized websites from this service.

Plugins

Plugins are small apps for your website which helps creating and upgrading your website. You have to add plugins to your WordPress to help you create your website in way more efficient manner.To add a new plugin to your WordPress, go to your WordPress homepage and then click on plug-in from the Option list on the left side. It will open an 'Add plugin' page as shown in the image where different type of plugins are available to choose from. You can search for the type of plug-in that you need in the search box and you will find so many plugins to use for that specific purpose. It is like an app store on your mobile and just like your app store, you can check the usage, reviews and success of these plugins before installing. And all these plug-ins are available for free. And if you need any plugin later, you can always come back and install it here. You can add plugins for social media sites, translator and so many things. Just search for the plugin use you want, select the one you want, click on 'Install' and 'Activate'. For every plugin, a new option will be created on the toolbar from where you can add and edit elements.

Elementor Theme Builder

The Elementor theme builder allows you to create a custom Shop Page and Product Page using the page builder instead of the themes, so that these pages match the design of other pages of your website. Using Elementor page builder, you can edit any part of any page of your website unlike the themes which are preset and normally can't be edited. So now we are going to edit the Shop Page and Product Page that we created using the Woocommerce theme using Elementor theme builder and design it to match our demo website's design we saw in the beginning.

Go to your WordPress dashboard, click on 'Templates' and then select 'Theme Builder' from the list which will open the Theme Builder as shown in the image. Elementor allows us to build the theme of different parts of the site. So if want to have a different header, click on '+' icon on header. And you can select any header theme from the library and click 'Insert'. Your Header will be created and now you can edit anything in using the Edit Toolbar as we did earlier. You can the change the style of the Logo or the Menu or anything, just click on the part you want to edit and the edit toolbar will appear.

• Custom Header

Now you can add other elements on this header one by one as we did earlier, or you can insert another one or more blocks which contains similar elements and delete the common ones. For example, here as you can see in the image, we inserted a Header Block which has a bar for contact no, info and social icons. We can delete the rest of the elements of the block as we don't need them. Again you may not find the exact design of each element in the block templates, so you can now edit and style as you want to instead of creating and editing each element from scratch. This way you can create different part of your website very quickly.

Remember we have just created a part of website but it's not applied on our website yet. So when you click 'Publish', it will ask you where you want to display this template on your website. Here we created a header, so we will display it on entire website by click 'Entire Site' on 'Include' box as shown in the image. You can put different conditions by adding Include or Exclude conditions as to where you show this template.

• Custom Footer

Now you can do the same thing for footer as we did for the header and create a footer for your website using templates. You can edit the footer content to your pages by pasting the URL link of the page to its button using the editor as shown in the image. Here we have selected a footer block template with for columns and added link to various parts of our Shop, About, Contact Us and social media pages. You may design it anyway you want.

• Custom Shop Page

Now let us design a custom Shop Page using the Theme Builder. Elementor has very less themes for shop page so we will design from scratch. So we will have to create each element like for the banner we will have 2 text boxes and animated heading over a background image. Edit the elements and style the section as we learned earlier. Use all the styling features such as font, colours, size, shadows, margins, paddings, etc. to make the banner section look eye catchy like here in the example as shown in the image below.

Now we need to design our product section with a filter column in the side. So add a new section, and use the 2 column structure. On the right, add 'Products' from the toolbar and design it as we did on the Homepage or you can save the Homepage Template and insert it here. On the left, insert 'Sidebar' from the Elementor elements bar and select 'Woocommerce sidebar'. Right now, we haven't created a sidebar so we will have to exit to WordPress dashboard. But first click 'Publish' and in the condition include 'Shop page' to apply it to the website.

Go to 'Appearance' on the dashboard where we have all our widgets are shown as shown in the image. On the right, we have our Woocommerce Sidebar where we can place the 'Filter Products by Price' by drag and drop. You can add other filters too. Below it we will add 'Product Category', then 'Products' and the 'Video' on our sidebar. You can edit the title, contents and other stuff like link the URL of the video here. You can add as many widgets that you want from here.

If you want to edit the style of this sidebar, you can't use the Elementor editor as these are prepared by WordPress theme customizer. So in order to customize it, you will need click on 'Customize' button WordPress. Click on 'Global', then 'colours' where you can change the colours as in the image. Here we are customizing the WordPress theme which is the Astra theme that we are using, and not just the sidebar.

• Custom Category Page

Now we will design the category pages for our product. We are going to copy the template of page we created earlier and save to use it for all our Product Category pages. First, click on 'Edit with Elementor' on the top and select 'Product Archive' as shown in Image. Then, on the bottom left click on the button next to Update and select 'Save as a Template' as shown in the next Image. Give a name to the template like 'Main Shop Page Template' and click Save. Next select the given name and click on 'Export' and then 'Save File' to save this file to use this template on other pages or even other websites.

Now, go back to the Elementor theme builder and click on Add New. Here you have the Elementor templates but we will use the template we created, so click on 'My Templates' and click on 'Insert' next to the name of new template you created. Now we have to edit it using the tools which we have learned already. So change the Title text to 'Men's Product'. Next as this is Men's Category, you have to edit it to show only Men's Product. So click on the Product box and on the 'Query' button on the toolbar, write 'term' in the 'Include By' button and put 'Men' in the term box as we did earlier. Click on Publish and put the condition to put it only in 'Men's' in 'Products category' as you can see in the image below. You can go the website and on the Shop page, click on the Men's category on the sidebar and view the effect on the page. You will have to do the exact same process for Women's category page and any other category you want to put on your website too.

• Dostosowana strona produktu

Teraz dostosujemy naszą stronę produktu przy użyciu tej samej techniki. Jeśli teraz klikniesz dowolny produkt, wyświetli się strona produktu w domyślnym motywie, tak jak widzieliśmy podczas tworzenia produktów. Ponownie przejdź do kreatora Elementortheme i dodaj nowy motyw pojedynczego produktu, klikając ikonę + obok niego. Możesz użyć szablonów dostarczonych tutaj, ale zbudujemy jeden od podstaw dla tego samouczka. Więc najpierw dodaj sekcję 2 części i kliknij kartę elementów. Tutaj możesz zobaczyć wszystkie elementy, które są wykonane specjalnie dla Produktów, jak pokazano na obrazku, których nie widzimy podczas budowania strony.

Najpierw dodaj bułkę tartą, która jest jak kategoryzacja produktu. Teraz możesz edytować styl bułki tartej, taki jak kolor, rozmiar, wypełnienie itp. Za pomocą paska narzędzi , jak widać na obrazku. Po prawej stronie dodaj element „Tytuł produktu” z paska bocznego i zaprojektuj jego styl, korzystając z paska narzędzi, jak wcześniej. Następnie dodajmy zdjęcie produktu w ten sam sposób. Kliknij element Obraz produktu i edytuj jego styl za pomocą paska narzędzi. Następnie podobnie dodaj krótki opis. Możesz dodać separator między tytułem a opisem. Następnie musimy umieścić kategorię produktu. W tym celu wybierz element „Meta produktu” i upuść go pod opisem, a także dostosuj go. Następnie dodaj element „Cena” poniżej i możesz ponownie zmienić jego styl. Następnie umieść przycisk „Dodaj do koszyka” pod ceną. Ponieważ jest to produkt zmienny, automatycznie poda opcje wariacji. Następnie możesz dodać ikony społecznościowe i formularze recenzji, dodatkowe informacje itp. Elementy, które chcesz. Kliknij „Opublikuj” po zakończeniu dodawania i projektowania elementów, które chcesz umieścić na stronie produktu. W warunku na wyświetlanej stronie uwzględnij „Wszystkie produkty”, aby nadać efekt tego szablonu wszystkim utworzonym przez siebie produktom. Jeśli chcesz, możesz tworzyć różne motywy dla różnych kategorii produktów, wystarczy zmienić warunek, aby uwzględnić go tylko w tej konkretnej kategorii. Wszystkie nasze strony produktów zostaną zaktualizowane do tego szablonu, ponieważ zastosowaliśmy go do wszystkich produktów.

• Niestandardowa strona kasy i koszyka

Teraz zaprojektujemy dostosowane strony kasy i koszyka. Strony kasy i koszyka nie są dostępne w kreatorze motywów, więc będziemy je edytować za pomocą Elementora. Przejdź do strony Koszyk i kliknij Edytuj za pomocą Elementora. Tak jak każdą inną stronę, możesz edytować i stylizować ją tak, jak chcesz, za pomocą elementów Elementora. Możesz teraz samodzielnie edytować tekst, ikony, przyciski kuponów itp. oraz stylizować czcionkę, kolor, topografię itp. Ale edycja części aktualnego motywu, takiej jak tytuł Koszyk, nie jest możliwa w przypadku Elementora. Aby edytować, musisz edytować go samodzielnie w WordPressie, więc kliknij „Edytuj stronę” i w prawym dolnym rogu zaznacz pole wyboru „Wyłącz tytuł” ​​w sekcji Wyłącz, jak pokazano na obrazku, tak jak zrobiliśmy to wcześniej podczas projektowania motyw wordpress.

Możesz edytować i projektować stronę kasy i używać w ten sam sposób. W ten sam sposób możesz zaprojektować stronę „Moje konto” swoich klientów, ponieważ domyślny motyw tej strony nie wygląda zbyt dobrze. Możesz go edytować za pomocą Elementora. Podałem też link wcześniej, w którym umieściłem również plik zip z szablonami wszystkich tych stron, abyś mógł szybko zaprojektować.

Ustawienia Woocommerce

Do tej pory nauczyłeś się tworzyć strony za pomocą Elementora i Theme Buildera, a tworzenie Twojej witryny jest zakończone. Teraz musimy poznać ustawienia Woocommerce, aby ta strona działała. Przejdź do pulpitu WordPress, kliknij Woocommerce i wybierz „Ustawienia”, co otworzy zakładkę ustawień ogólnych Woocommerce, jak pokazano na obrazku.

• Ustawienia główne

Tutaj możesz umieścić swój adres i wybrać kraje, w których chcesz sprzedawać, włączyć podatki, włączyć kody kuponów. Zaznacz wszystkie te pola, aby je włączyć. Poniżej możesz zmienić walutę w zależności od kraju.

• Zakładka produktów

Następna zakładka to zakładka Produkt w górnym rzędzie Ustawień, w której znajdziesz wiele ustawień, z których większość jest bardzo specyficzna, tutaj nie będziemy używać, z wyjątkiem sekcji recenzji, w której możesz włączyć recenzje i oceny w postaci gwiazdek produktów, możesz także pokazać zweryfikowany tag użytkownika prawdziwym kupującym w recenzjach, jak pokazano na obrazku. Możesz również umieścić szczegóły dotyczące wysyłki produktów, takie jak waga, wymiary itp.

• Zakładka podatku

Następnie w zakładce podatki, gdzie możesz włączyć lub wyłączyć automatyczne obliczanie podatku. Obliczanie podatków może być bardzo skomplikowane w zależności od kraju i firmy, więc automatyczne obliczanie może nie działać w Twoim przypadku. Masz jednak możliwość ustawienia podatków dla innego adresu wysyłki i na podstawie pozycji w koszyku. Podałem link do strony www.taxjar.com, gdzie można uzyskać bezpłatne i płatne usługi, które pomogą Ci w obliczeniu podatku. Możesz również wybrać wyświetlanie cen z lub bez podatków w różnych punktach, na przykład w sklepie, powinieneś pokazywać cenę bez podatku oraz w koszyku i kasie, ogólnie powinna zawierać podatek.

• Zakładka Wysyłka

Następna zakładka to „Wysyłka”. Najpierw kliknij „Dodaj strefę wysyłki”, dodaj nazwę strefy, określone regiony strefy i skonfiguruj stawki wysyłki dla różnych metod wysyłki, jak pokazano na obrazku. Tutaj zastosowaliśmy metodę ryczałtowej stawki, w której umieściliśmy ryczałtową stawkę w wysokości 5 USD, a druga to metoda bezpłatnej wysyłki. Kliknij przycisk Edytuj poniżej, aby dodać warunek dotyczący minimalnej kwoty zamówienia lub wymogu kuponu. Tutaj mamy wybrane minimalne zamówienie 50 USD. Dla każdej z nich możesz dodać wiele stref oraz wiele metod wysyłki i stawek. Masz również domyślną lokalizację dla lokalizacji nieobjętych żadną z Twoich stref, dla których nie podaliśmy żadnych konkretnych stawek. Więc tutaj ustawiliśmy domyślną stawkę 10 USD dla tych stref.

• Zakładka Konta i Prywatność

Zakładka „Konta i prywatność”, w której możesz wybrać opcję utworzenia konta klienta przed zakupem lub zezwolić im najpierw na kupowanie bez konta, a następnie utworzyć konto w momencie realizacji transakcji, a także różne inne opcje tworzenia konto, takie jak nazwa użytkownika, hasła itp., które możesz sprawdzić na sobie, ponieważ są one bardzo oczywiste. Możesz również dodać politykę prywatności zgodnie z wymogami prawa tutaj. Masz również opcje dotyczące czasu, w którym dane osobowe użytkowników zostaną usunięte w ramach Przechowywanie danych osobowych.

• Karta e-mail

Mamy również zakładkę „E-mail”, w której znajdują się ustawienia dotyczące wszystkich automatycznych wiadomości e-mail, które będziesz otrzymywać i wysyłać do klientów ze strony internetowej, na przykład w przypadku nowego lub anulowanego zamówienia. Tutaj możesz edytować format wiadomości e-mail, którą otrzymasz lub wyślesz do klienta we wszystkich takich sytuacjach. Możesz dodać wtyczkę w tym celu, aby otrzymywać wiadomości e-mail lepszej jakości. Przejdź do wtyczek i zainstaluj „Kadence Woocommerce Email designer” i. Za pomocą tej wtyczki możesz zaprojektować treść wiadomości e-mail, nagłówek, stopkę, tekst itp., Używając ich niestandardowych stylów, które można tutaj edytować, przechodząc do wtyczki na pasku bocznym Woocommerce, jak pokazano na obrazku.

• Płatności

Teraz przejdziemy do zakładki „Płatności”, gdzie możemy wybrać metody płatności dozwolone dla naszych klientów. Dostępnych jest wiele opcji, ale włączymy tutaj „Stripes” i „PayPal”, klikając przycisk włączania, jak pokazano na obrazku poniżej.

1. PayPal

Teraz najpierw skonfigurujmy ustawienia płatności PayPal, więc kliknij „Konfiguruj”, aby otworzyć stronę ustawień PayPal, na której możesz umieścić tytuł, opis pola płatności i konta e-mail PayPal, a następnie kliknąć „Zapisz zmiany ', aby zintegrować swoją witrynę z systemem PayPal. Jeśli nie masz konta PayPal, możesz je utworzyć, przechodząc na ich stronę internetową i rejestrując się za darmo. Musisz tylko zarejestrować się za pomocą adresu e-mail, który umieścisz w polu e-mail PayPal, jak pokazano na obrazku. Jest to jedna z najpopularniejszych dostępnych metod płatności.

2. Naszywka

Następnie ustawimy płatności za pomocą pasków. Więc kliknij przycisk „Zarządzaj” obok niego. Ta sama droga do ustawień PayPal, najpierw umieść tytuł, opis pola płatności. Następnie masz testowy klucz do publikacji i testowy klucz tajny. Możesz wejść na www.stripe.com i tam założyć darmowe konto, wystarczy mieć konto bankowe, aby założyć konto. Możesz zintegrować swoje konto stripe ze swoją stroną internetową po jej utworzeniu, która jest bezpłatną usługą. W tym celu, po zalogowaniu się na swoje konto stripe, kliknij „Programiści” i wybierz „Klucze API”, jak pokazano na obrazku. Skopiuj klucz do publikowania, który pojawia się w Twojej witrynie w polu klucza do publikowania, a klucz tajny w polu klucza tajnego. Kliknij „Zapisz zmiany”, a teraz Twoja witryna jest gotowa do przyjmowania płatności kartą kredytową z dowolnego miejsca na świecie po bardzo niskiej opłacie transakcyjnej. Robimy to, ale nadal mamy włączony przycisk Przeglądanie danych testowych na naszym koncie stripe, a na stronie ustawień Woocommerce zaznaczyliśmy pole „Włącz tryb testowy”, ale kiedy będziesz gotowy do uruchomienia swojego systemu płatności, wyłącz je .

Możesz teraz przetestować swoją witrynę, składając zamówienie i kupując coś, a także możesz dokonać płatności, aby sprawdzić, czy wszystko jest w porządku. Na stronie Moje konto klienci będą mieli swój osobisty pulpit nawigacyjny, w którym mogą sprawdzić, edytować lub anulować swoje zamówień, edytuj ich adres wysyłki i rozliczeniowy, skonfiguruj metody płatności i dane konta. Widok wszystkich ich wcześniejszych zamówień będzie również wyświetlany na liście zamówień wraz z ich statusem.

Optymalizacja pod kątem urządzeń mobilnych

Optymalizacja mobilna oznacza sprawienie, by strona wyglądała na bardziej przyjazną dla urządzeń mobilnych. Optymalizacja mobilna jest bardzo ważna w dzisiejszym scenariuszu, ponieważ a) wiele osób korzysta z urządzeń mobilnych do surfowania po Internecie oraz b) Zgodnie z nowym algorytmem Google, jeśli Twoja strona nie jest zoptymalizowana pod kątem urządzeń mobilnych, obniżą Twoją pozycję, co może być katastrofalne dla Twojej ruch na stronie i SEO.

Optymalizacja mobilna jest cicha prosta dzięki edytorowi Elementor. Wróćmy ponownie do pulpitu nawigacyjnego Elementor. Na dole paska narzędzi znajdziesz przycisk „Tryb responsywny”, po kliknięciu którego otworzy się rozwijana lista zawierająca 3 opcje, mianowicie. Komputer stacjonarny, tablet i telefon komórkowy. Do tej pory projektowaliśmy naszą stronę internetową w oparciu o to, jak będzie wyglądała dla przeglądarek stacjonarnych. Teraz kliknij „Tablet”, aby zobaczyć, jak będzie wyglądał w przeglądarce tabletu. Podobnie możesz to sprawdzić również w trybie „Mobile”. Możesz edytować stronę internetową, jeśli coś wydaje się niesprawne lub nie jest atrakcyjne wizualnie.

Tutaj, jak widać na obrazku, pierwszy tytuł jest za duży dla trybu tabletu, a „50% ZNIŻKI” jest za mały, więc będziesz musiał go dostosować. Sprawdź wszystkie elementy stron, aby zobaczyć, czy coś wymaga przeprojektowania. Wszystkie te zmiany zostaną zastosowane w trybie tabletu po kliknięciu Aktualizuj. To samo dotyczy trybu mobilnego. Dostosuj rozmiar tekstów nagłówków, wyrównanie przycisków, banerów i nagłówków.

Możesz wyłączyć niektóre z potrzebnych sekcji w wersji mobilnej lub tabletowej, jeśli uważasz, że nie jest to dla nich ważne. W tym celu wybierz sekcję, którą chcesz ukryć, przejdź do kategorii zaawansowanej na pasku narzędzi „Edytuj sekcję”, kliknij „Responsywny” i w sekcji Widoczność możesz ukryć sekcję na komputerze, tablecie lub w wersji mobilnej, jak pokazano w obraz. To samo, co można zrobić z innymi sekcjami lub elementami. Możesz zaprojektować wszystko inaczej dla trybu tabletu lub telefonu komórkowego, takie jak obrazy tła, rozmiar czcionki lub cokolwiek innego.

Formularz kontaktowy

Teraz przejdźmy do przodu i dowiedz się, jak utworzyć stronę „Kontakt”, na której odwiedzający mogą wpisać informacje kontaktowe, które zostaną przesłane bezpośrednio do Twojego e-maila. Podstawowy projekt strony możesz wykonać samodzielnie za pomocą edytora Elementor lub narzędzia Theme Customizer. Jedyną ważną rzeczą jest formularz kontaktowy widoczny na obrazku. Wyszukujesz formularz na pasku narzędzi Elementora, przeciągasz go i upuszczasz w sekcji, a następnie możesz edytować tekst i projekt formularza za pomocą paska narzędzi „Edytuj formularz”, co do tej pory, jak sądzę, możesz zrobić sam. Istnieje wiele zaawansowanych ustawień w pasku narzędzi Edytuj formularz, które nie są tutaj omawiane, ale podstawowy formularz, który możesz utworzyć.

Kupony

Aby dodać kupony do swojej witryny, kliknij „+ Nowy” na górnym pasku obok przycisku Dostosuj i wybierz Kupony. Kupony na bocznym pasku narzędzi WordPressa znajdują się w sekcji „Marketing”, jak pokazano na obrazku. Tutaj możesz dodać nowy kod kuponu, wybrać rodzaj rabatu jako zniżkę procentową, stałą zniżkę koszyka lub stałą zniżkę na produkt, podać kwotę lub procent zniżki i datę ważności kuponu. W sekcji „Ograniczenia użytkowania” możesz umieścić warunki, takie jak minimalne wydatki, indywidualne użycie lub w połączeniu z innymi kuponami, uwzględnić lub wykluczyć produkty lub kategorie produktów z kuponu. W ramach Limit użytkowania możesz wybrać, ile razy ten kupon może być wykorzystany lub ograniczyć go do określonego produktu i ograniczyć użycie przez pojedynczego klienta. Kliknij Opublikuj, aby zastosować ten kupon na stronie internetowej i przetestować go na stronie Koszyk, stosując kod kuponu podczas dokonywania zakupu.

Mam nadzieję, że ten poradnik przyniósł czytelnikom korzyści i teraz możesz samodzielnie stworzyć stronę internetową od podstaw. Jeśli potrzebujesz pomocy, możesz odwiedzić moją stronę internetową i moją stronę na Facebooku i zostawić komentarz. Mam mnóstwo innych zasobów dotyczących tworzenia stron internetowych i korzystania z Elementora, które możesz sprawdzić. Dziękujemy za przeczytanie tego samouczka, a Twoje opinie i zapytania są zawsze mile widziane.