Jak zrobić stronę internetową sklepu eCommerce za pomocą WordPress

Handel elektroniczny jest rozpalony, ponieważ sprawia, że ​​niezwykle łatwo jest zarobić 6 liczb miesięcznie, nie zakładając tradycyjnego biznesu z niesamowicie wysokimi kosztami ogólnymi.


Ale dla wielu problemem są wysokie miesięczne opłaty za większość platform e-commerce, takich jak Shopify. Jeśli dopiero zaczynasz, potrzebujesz bardziej przystępnego cenowo rozwiązania, które pozwoli Ci wydać więcej na marketing i reklamę.

Dobra wiadomość jest taka, że ​​nie musisz płacić wysokich miesięcznych opłat w Shopify, aby móc sprzedawać produkty online. Jeśli szukasz alternatywy Shopify lub alternatywy na eBayu, ten samouczek krok po kroku zapewni Ci niesamowity sklep internetowy za darmo.

Wszystko czego potrzebujesz to konto hostingowe i trochę wysiłku, a będziesz mógł szybko stworzyć stronę e-commerce.


Zacznijmy!

Rzeczy, których potrzebujesz:

  • Hosting. Polecam SiteGround.
  • ZA Nazwa domeny.
  • Motyw WordPress. W tym samouczku korzystamy z bezpłatnego motywu Astra.
  • Kreator stron WordPress. W tym celu korzystamy z bezpłatnego narzędzia do tworzenia stron Elementor.
  • WooCommerce, najlepsza wtyczka WordPress do e-commerce.

Krok 1. Kup hosting i nazwę domeny.

Jeśli dopiero zaczynasz przygodę z tworzeniem stron internetowych, pozwól mi najpierw wyjaśnić, czym jest hosting i nazwa domeny i dlaczego ich potrzebujesz.

Co to jest nazwa hostingu i domeny?

Hosting to miejsce w Internecie, w którym będzie mieszkała Twoja witryna. To jest jak fizyczny dom, w którym można znaleźć swoje rzeczy. Nazwa domeny to natomiast adres Twojej witryny. To jest twój adres, który podajesz ludziom, aby mogli odwiedzić cię w domu. „Facebook.com”, „Google.com” i „WordPress.com” to przykłady nazw domen.

Możesz kupić nazwę domeny w prawie wszystkich witrynach sprzedających nazwy domen. Musisz po prostu znaleźć najlepszą cenę. Ale jeśli chodzi o hosting witryn, absolutnie ważne jest, aby uzyskać hosting tylko od wiarygodnej firmy. Ponieważ jeśli twój hosting jest powolny lub zawodny, ucierpi prędkość i czas działania Twojej witryny, co ostatecznie zaszkodzi Twojej działalności e-commerce.

Siteground, My Preferred Web Hosting Service

Możesz użyć dowolnej usługi hostingowej wysokiej jakości, aby utworzyć witrynę handlu elektronicznego, ale w tym samouczku będziemy korzystać z Siteground.

SiteGround jest wysoce polecanym hostem internetowym, ponieważ zaspokajają potrzeby użytkowników WordPress, a jednocześnie mają przystępne ceny. Są najbardziej znane z szybkiej wydajności i równie szybkiego wsparcia.

Oto kluczowe funkcje SiteGround:

  • Darmowy certyfikat SSL
  • SZYBKA pomoc w zakresie wiedzy
  • WordPress Staging Environment
  • Darmowe migracje stron internetowych
  • 30 dni kopii zapasowych

SiteGround to solidny wybór dla Twoich potrzeb hostingowych. Obsługują witryny WordPress i oferują mniej zasobów niż ich konkurenci, ale większą niezawodność.

Zawarłem z nimi niesamowitą umowę, aby dać 70% zniżki każdemu, kto zarejestruje się za pomocą ten link. Więc jeśli chcesz zaoszczędzić pieniądze na swoim hostingu, kliknij ten link i kup teraz swój hosting.

Po przejściu na ich stronę główną zobaczysz cztery różne typy hostingu:

wybierz plan siteground

Wybierz hosting WordPress i kliknij Zaczynaj. Zobaczysz trzy plany cenowe:

siteground wordpress hosting cennik

Wybierz jeden według swoich potrzeb i budżetu. Możesz także sprawdzić ich porównanie każdego planu hostingowego aby dowiedzieć się, który plan najbardziej odpowiada Twoim potrzebom.

Po wybraniu planu kliknij Uzyskaj plan. Nastąpi przejście do strony, na której musisz wybrać domenę. Jeśli już kupiłeś nazwę domeny, wybierz „Mam już domenę”. Ale jeśli go nie masz, wybierz „Zarejestruj nową domenę”, aby kupić domenę bezpośrednio w Siteground.

wybierz domenę

Gdy masz nazwę domeny, którą lubisz i jest dostępna, kliknij Kontynuować. Następnym krokiem jest podanie danych osobowych i danych rozliczeniowych w celu sfinalizowania zakupu. Podaj swoje dane dokładnie i kliknij Zapłać teraz. Masz teraz niezawodny hosting i nazwę domeny.

Krok drugi. Zainstaluj WordPress.

WordPress jest darmowym narzędziem typu open source, które pozwala budować strony internetowe, nawet jeśli nie masz pojęcia o kodowaniu. To najłatwiejszy i najmocniejszy jak dotąd system zarządzania treścią witryny. W WordPress jest wiele rzeczy, które kocham, a jeśli przeczytasz więcej moich samouczków lub obejrzysz moje filmy, dowiesz się więcej o tym, dlaczego uważam, że WordPress jest najlepszym narzędziem do tworzenia stron internetowych dla nietechnicznych.

Siteground faktycznie jest wyposażony w instalację WordPress za pomocą jednego kliknięcia, która wykonuje całą ciężką pracę związaną z instalowaniem i konfigurowaniem WordPress dla Ciebie.

Po zakończeniu zakupu hostingu zobaczysz ekran z linkiem „Przejdź do strefy klienta”. Kliknij to, aby przejść do strony, na której możesz skonfigurować nowe konto hostingowe. Pod Skonfiguruj swoją witrynę, Wybierz Uruchom nową stronę internetową.

Zobaczysz listę oprogramowania, które możesz zainstalować. Wybierz WordPress.

zainstaluj wordpress

Następnie musisz podać dane logowania administratora do nowej witryny, takie jak adres e-mail, nazwa użytkownika i hasło. Zabezpiecz te dane, ponieważ będziesz ich używać do logowania się na swojej stronie.

Po zakończeniu kliknij Potwierdzać > Zakończ konfigurację. Masz teraz własną, obsługiwaną przez siebie witrynę WordPress.

Aby rozpocząć dostosowywanie witryny, musisz zalogować się do zaplecza WordPress. Aby to zrobić, przejdź do pulpitu nawigacyjnego Siteground i przełącz się na Moje konta patka. Kliknij Instalacja kartę, a tutaj zobaczysz zarejestrowaną nazwę domeny. Po drugiej stronie jest zieleń Przejdź do portalu administracyjnego przycisk. Kliknij ten przycisk, aby przejść do strony logowania WordPress.

przejdź do pulpitu administratora wordpress

Strony logowania WordPress zwykle mają następujące formaty: twojadomena.com/wp-admin i twojadomena.com/wp-login. Zapamiętaj adres URL strony logowania, aby następnym razem móc uzyskać do niego dostęp, wpisując adres URL bezpośrednio w pasku adresu i bez konieczności logowania się do Siteground.

Strona logowania do WordPress wygląda następująco:

strona logowania do wordpress

Wprowadź swoją nazwę użytkownika i hasło, aby zalogować się na swojej stronie po raz pierwszy.

Krok 3. Zainstaluj Astra Theme i Astra Sites.

Astra Theme to motyw, którego będziemy używać, aby nasza strona e-commerce wyglądała świetnie i profesjonalnie jak najszybciej. Jeśli wolisz, możesz użyć innych motywów, ale w tym samouczku omówimy Astra Theme.

Astra to darmowy motyw WordPress, który ma doskonałą szybkość i prostotę. Sparuj go z Astra Sites (darmowa wtyczka), a każdy może mieć piękną stronę internetową za pomocą kilku kliknięć myszką. Dostępna jest również wersja Pro, dzięki której Astra jest idealnym motywem.

Oto funkcje, które najbardziej lubię w Astrze:

  • Jeden z najszybszych dostępnych motywów
  • Ponad 100 stron startowych (większość jest w 100% darmowa)
  • Elastyczna funkcja Mega Menu
  • Potężny pakiet dodatków
  • Rozbudowane wsparcie WooCommerce

Astra Theme to doskonały wybór do każdego projektu internetowego WordPress. W rzeczywistości jest to motyw, którego używam na tej stronie i we wszystkich moich projektach.

Mam pełne zaufanie do programisty i jestem pod dużym wrażeniem tego, jak dobrze zakodowany jest ten motyw.

Co więcej, ten temat jest tak prosty w użyciu ze względu na całą staranność i przemyślenia, które się w nim znalazły. W większości sytuacji konfiguruje się na podstawie używanych narzędzi.

Aby zainstalować Astrę, przejdź do Wygląd > Motyw > Dodaj nowe. Wyszukaj Astra, kliknij zainstalować, i Aktywuj.

instalowanie motywu Astry

Inną rzeczą, którą uwielbiam Astrę, jest fakt, że ma wtyczkę o nazwie Witryny startowe Astra z biblioteką gotowych szablonów bezpłatnych i premium. Możesz użyć tych szablonów do własnej witryny za pomocą kilku kliknięć. Użyjemy szablonu witryny Astra, aby skrócić czas tworzenia naszej witryny o połowę.

Po zainstalowaniu Astry zobaczysz ten komunikat na pulpicie nawigacyjnym:

Rozpocznij strony Astra

Kliknij Zaczynaj. Spowoduje to zainstalowanie stron startowych Astra.

Wybór programu budującego strony

Następnie zostaniesz zapytany o narzędzie do tworzenia stron, które wolisz, aw tym samouczku będę używać Elementora. Elementor to narzędzie do tworzenia stron WordPress, które szturmem podbiło projektowanie stron internetowych WordPress. Miał najgłębszy zestaw funkcji, ale jest bardzo łatwy w obsłudze i opanowaniu. Elementor to najbardziej wszechstronny darmowy program do tworzenia stron. Istnieje również dodatek Pro, aby dodać dodatkowe funkcje programistyczne.

Kluczowe cechy elementu:

  • Live Front End Editor strony
  • Funkcje personalizacji strony internetowej
  • Biblioteka szablonów i bloków
  • Rozbudowane mobilne opcje responsywne
  • Najpotężniejszy kreator wyskakujących okienek
  • PRO: Utwórz niestandardowe nagłówki / stopki
  • PRO: Utwórz układy typu postu

Elementor jest najsilniejszym obecnie dostępnym narzędziem do budowania stron. Konsekwentnie wypuszczają nowe funkcje zgodne z aktualnymi trendami projektowymi. Oznacza to, że będziesz w stanie utrzymać aktualność swojej witryny. Jeśli po drodze chcesz uzyskać dostęp do zaawansowanych funkcji, możesz uaktualnić do Elementor Pro, co moim zdaniem jest niesamowitą wartością, biorąc pod uwagę wszystkie dodatkowe moduły i funkcje zasilania, które obejmuje.

Wybór motywu witryny Astra

Po wybraniu narzędzia do tworzenia stron przejdziesz do biblioteki szablonów Witryn Astra. Istnieje mnóstwo pięknych szablonów, których możesz użyć. Nie spiesz się w wyborze odpowiedniego szablonu. Pamiętaj też, że szablony te można w pełni edytować za pomocą wybranego przez siebie narzędzia do tworzenia stron, co oznacza, że ​​będziesz mógł dostosować każdą część i element witryny, np. Nagłówek, obrazy, kolory, logo itp..

W tym samouczku zamierzam użyć szablonu drukowania niestandardowego, ponieważ wygląda niesamowicie i jest zorientowany na handel elektroniczny.

Aby zainstalować motyw, wystarczy kliknąć go, aby przejść do podglądu. Jeśli podoba Ci się to, co widzisz, kliknij Importuj motyw i upewnij się, że wszystkie pola są zaznaczone.

Jeśli zauważysz, pojawi się pole „Zainstaluj wymagane wtyczki”. Zaznaczenie tego pola spowoduje zainstalowanie wszystkich wymaganych wtyczek, aby motyw wyglądał dokładnie tak, jak jest. W przypadku niestandardowego motywu drukowania zainstaluje Elementor, WooCommerce i WPForms. To oszczędza mi dużo czasu, ponieważ nie muszę już instalować tych wtyczek jeden po drugim. Wszystko dla mnie zrobione.

importowanie motywu strony Astra

Importowanie motywu może chwilę potrwać. Nie zamykaj przeglądarki ani nie odświeżaj. Poczekaj, a kiedy to się skończy, zobaczysz niebieski Zobacz stronę przycisk. Kliknij ten przycisk, aby przejść do witryny, która ma właśnie zaimportowany motyw.

Krok 4. Dostosuj swoją stronę internetową.

Twoja witryna wygląda teraz oszałamiająco, ale będziesz chciał stworzyć własną. Pierwszą rzeczą, którą chcesz zrobić, to wybrać paletę kolorów. Jeśli masz już kolor marki, będzie to łatwiejsze.

Wybór palety kolorów

Witryna zwykle ma zestaw 3 kolorów: podstawowy, akcentujący i popowy. Kolor podstawowy to dominujący kolor Twojej witryny i najprawdopodobniej kolor Twojej marki. Kolor akcentu jest zwykle używany w nagłówkach lub tytułach postów, jeśli chcesz, aby wyglądały nieco inaczej i przyciągały do ​​nich oczy. Kolor popowy powinien kontrastować z pozostałymi kolorami, aby wyróżnić ważne elementy witryny, takie jak przyciski wezwania do działania.

Do wyboru palety kolorów witryny używam dwóch narzędzi. Pierwszy to Coolors.co gdzie możesz przeglądać różne palety kolorów i wybierać, czego chcesz używać w swojej witrynie.

strona główna coolerów

Jeśli zobaczysz paletę, którą lubisz, najedź na nią myszą, kliknij Widok, i zostaniesz przeniesiony do nowego okna, w którym zobaczysz kody szesnastkowe każdego koloru.

paleta kolorów z kodem szesnastkowym

Te kody szesnastkowe są tym, czego potrzebujesz, aby używać tych kolorów w swojej witrynie. Później pokażę ci, jak korzystać z tych kodów Hex na backendie WordPress.

Kolejnym fajnym narzędziem jest Colorzilla, rozszerzenie Google Chrome, które pozwala uzyskać kod szesnastkowy dowolnego koloru widocznego na dowolnej stronie internetowej, dzięki czemu można go używać samodzielnie. Jeśli chcesz uzyskać rozszerzenie Colorzilla, Kliknij tutaj. Następnie kliknij Dodaj do Chrome.

colorzilla

Może to chwilę potrwać, ale gdy to zrobisz, zobaczysz tę ikonę na pasku narzędzi:

ikona colorzilla

Tak więc teraz, jeśli zobaczysz kolor w dowolnej witrynie, którą chcesz wypróbować na swojej stronie internetowej, wystarczy kliknąć tę ikonę i kliknąć kolor, który chcesz skopiować. Kod szesnastkowy zostanie następnie automatycznie skopiowany, który można wkleić na wewnętrznej stronie swojej witryny. To takie proste. Jest to przydatne narzędzie, które pozwoli Ci używać świetnych kolorów jednym kliknięciem.

Dostosowywanie typografii

Chcesz również użyć własnej typografii, aby wyróżnić swoją witrynę. Strony internetowe zwykle mają 2-3 czcionki. Będziesz mieć czcionkę dla nagłówków lub menu, czcionkę dla treści i dodatkową „popową czcionkę”. Podobnie jak kolory, nie możesz użyć tylko dowolnej czcionki. Musisz upewnić się, że dobrze razem wyglądają i wysłać odpowiedni komunikat o Twojej marce.

Lubię używać Fontpair.co która jest witryną internetową, która pokazuje, jak wyglądają dwie różne czcionki.

using fontpairs.co

Jeśli widzisz coś, co lubisz, po prostu zanotuj, jak się nazywa, aby przejść do WordPress i dodać go bezpośrednio tam.

Lubię też korzystać z WhatFont, rozszerzenia Google Chrome, które informuje, która czcionka jest używana w dowolnej witrynie. Aby zainstalować WhatFont, Kliknij tutaj następnie kliknij Dodaj do Chrome. Następnie zobaczysz tę ikonę na pasku narzędzi:

ikona whatfont

Jeśli chcesz poznać nazwę czcionki, po prostu kliknij tę ikonę i umieść kursor myszy nad tekstem. WhatFont poda ci nazwę tej czcionki, a jeśli ją klikniesz, zobaczysz również rozmiar czcionki, kolor, rodzinę, styl, wagę i inne.

używając whatfont

Potrzebujesz także logo marki, aby wyróżnić swoją witrynę i ustalić tożsamość marki. Istnieje wiele sposobów uzyskania logo. Możesz spróbować zrobić to sam, korzystając z niesamowitego narzędzia do projektowania o nazwie Canva. Jest dość popularny, ponieważ sprawia, że ​​projektowanie jest naprawdę łatwe nawet dla początkujących.

Canva zawiera wiele szablonów logo, które możesz modyfikować, aby tworzyć własne. Pamiętaj jednak, że jeśli chcesz wyeksportować logo z przezroczystym tłem, musisz uaktualnić do wersji Pro (która ma miesięczny bezpłatny okres próbny). Zawsze możesz przejść do Photoshopa lub Photopea aby usunąć tło, ale to tylko dodaje jeden dodatkowy krok do procesu.

logo Canva

Jeśli chcesz zaoszczędzić czas, możesz po prostu zatrudnić niezależnego projektanta logo, który zrobi to za Ciebie. Możesz wypróbować witryny takie jak Fiverr.com lub 99design, ale musisz być ostrożny przy wyborze wykonawcy na podstawie jego stylu, historii, recenzji, ocen i innych.

Dostosowywanie witryny

Teraz nadszedł czas, aby używać tych kolorów, czcionek i logo w swojej witrynie. Jeśli jesteś w panelu zaplecza WordPress, przejdź do Wygląd > Dostosuj aby otworzyć dostosowywanie motywu.

dostosuj motyw

Jeśli znajdujesz się na froncie witryny i na górze jest czarny pasek, możesz kliknąć Dostosuj aby otworzyć dostosowywanie.

dostosuj motyw

Tak wygląda dostosowywanie motywu:

dostosowywanie motywu

Tutaj możesz przesłać swoje logo, zmienić kolory i typografię witryny, dostosować przyciski i wiele innych. Wprowadzone tutaj zmiany są wyświetlane w czasie rzeczywistym w Twojej witrynie, dzięki czemu możesz od razu zobaczyć, jak to wygląda. Ponadto każdy motyw ma różne opcje dostosowywania, więc jeśli używasz innego motywu niż Astra, możesz zobaczyć tutaj różne opcje.

W Astra, aby zmienić kolory witryny, przejdź do Kolory i tło. Możesz zmienić kolory podstawowe, bułkę tartą, kolory nagłówka i stopki.

kolorowy edytor tła

Kolory podstawowe to kolor motywu, łącza, tekstu i najechania linkiem w witrynie. Jeśli chcesz zmienić na przykład Kolor motywu, kliknij Wybierz kolor. Zobaczysz dwa sposoby wyboru koloru. Najpierw możesz wkleić kod Hex w polu. Jeśli więc znalazłeś kolor w Coolors.co lub w innym miejscu, możesz wkleić tutaj kod Hex. Możesz także wybrać kolor we wbudowanym narzędziu wyboru.

podstawowy edytor kolorów

Aby zmienić typografię witryny, wróć do głównego menu dostosowywania i kliknij Typografia. Będziesz mógł zmieniać typ podstawowy, bułkę tartą, treść i blog.

konfigurator typografii

Następnie dodajesz swoje logo. Aby przesłać swoje logo, przejdź do Układ > nagłówek > Tożsamość witryny. W sekcji Logo kliknij Zmień logo przycisk i prześlij swoje logo.

prześlij logo

Astra pozwala również dopasować szerokość logo, abyś mógł zmienić jego wielkość lub wielkość. Jeśli przewiniesz w dół, możesz także zmienić tytuł witryny, dodać slogan witryny oraz ikonę witryny lub ikonę favicon.

Możesz zrobić znacznie więcej w obszarze dostosowywania Astry, np. Zmieniając szerokość treści witryny, zmieniając strukturę postów na blogu, dostosowując stopkę i nagłówek itp. Zapoznaj się z dostępnymi opcjami, aby zobaczyć, co lubisz najbardziej w swojej witrynie.

Po zakończeniu dostosowywania nie zapomnij kliknąć Publikować aby wprowadzić zmiany w witrynie.

Krok 5. Dostosowywanie witryny za pomocą Elementor.

W tym momencie masz podstawowe informacje o dostosowywaniu, takie jak zmiana koloru witryny, typografia, dodawanie logo i tak dalej. Teraz nadszedł czas, aby przejść do drobiazgowych szczegółów i zacząć używać Elementora (lub dowolnego programu do tworzenia stron, który wolisz), aby całkowicie zmienić wygląd witryny.

Jak wspomniałem wcześniej, w tym samouczku będę używać Elementora, ponieważ po prostu uważam, że jest najlepszy, ale możesz użyć dowolnego narzędzia do tworzenia stron, z którym czujesz się komfortowo.

Wewnątrz Elementora możesz robić praktycznie wszystko ze swoją witryną bez kodowania lub zatrudniania programisty. Dodawanie elementów to prosty proces przeciągania i upuszczania.

Istnieją dwa sposoby edycji strony za pomocą Elementora. Po pierwsze, jeśli korzystasz z backendu WordPress, kliknij Strony powinieneś zobaczyć listę wszystkich stron swojej witryny, w tym tych, które zostały automatycznie utworzone za pomocą szablonu witryny Astra. Strony utworzone za pomocą konkretnego narzędzia do tworzenia stron (np. Elementor) będą oznaczone jako takie:

strony

Aby edytować stronę za pomocą narzędzia do tworzenia stron, najedź na nią myszą i kliknij Edytuj za pomocą (narzędzie do tworzenia stron). W moim przypadku tak będzie Edytuj za pomocą Elementora.

edytuj za pomocą elementora

Po kliknięciu zostaniesz przeniesiony do elementu Elementor.

Innym sposobem jest przejście do interfejsu witryny, przejście do strony, którą chcesz edytować, i kliknięcie Edytuj za pomocą elementora na czarnym pasku u góry:

edytuj za pomocą elementora

Każdy z nich przeniesie Cię do Elementora. Będąc w Elementorze, będziesz mógł używać różnych obrazów jako nagłówka, zmieniać teksty, zmieniać ikony i nie tylko. Możesz zacząć od zmiany tekstu i obrazu w nagłówku, aby pasował do Twojej firmy. Oto kilka rzeczy, które możesz zrobić z tekstami w Elementor:

edycja tekstów w elementorze

Jak widać, możesz zmienić tekst bezpośrednio w obszarze edycji treści, zmienić rozmiar, wagę, kolor i rodzinę typografii. Możesz także dodawać animacje, takie jak proste przejścia, powiększanie i inne. Istnieje mnóstwo rzeczy, które możesz zrobić tutaj, aby dodać przypraw do swojej witryny.

Chcesz również zmienić obrazy swojej witryny, aby pasowały do ​​charakteru Twojej firmy. Zmiana obrazów w Elementor jest bardzo łatwa. Wystarczy kliknąć obraz, a opcje pojawią się na lewym pasku bocznym. Możesz przesłać nowy obraz, zmienić jego rozmiar, dodać ramkę lub cień, dodać animację i wiele więcej.

edycja obrazów w elementorze

Wewnątrz Elementora możesz również zmieniać teksty przycisków, dostosowywać obszar referencji, dodawać więcej elementów / bloków, takich jak teksty, obrazy, przyciski, filmy i więcej.

Elementor Pro ma o wiele więcej funkcji, takich jak możliwość dodawania formularzy (co zwykle wymaga wtyczki innej firmy), możliwość przesyłania własnych czcionek, dodawania suwaków, dodawania tabel cen i cenników, dostosowywania nagłówków i stopek ( co jest niedostępne dla większości programów budujących strony) i wiele więcej.

Jeśli chcesz kupić Elementor Pro i jednocześnie uzyskać bezpłatny dostęp do moich kursów Elementor Pro, kliknij ten link tutaj.

Krok 5. Skonfiguruj WooCommerce.

Czas skonfigurować WooCommerce, czyli wtyczkę WordPress, która zmienia każdą witrynę internetową w sklep internetowy. Pozwala dodawać produkty, akceptować płatności online, tworzyć kupony, ustawiać koszty wysyłki i podatki i wiele więcej.

WooCommerce został już dla mnie zainstalowany przez motyw Custom Print Astra Site, więc teraz muszę wejść i go skonfigurować. Jeśli nie masz jeszcze zainstalowanego WooCommerce, po prostu przejdź do Wtyczki > Dodaj nowe i wyszukaj WooCommerce.

Pierwszą rzeczą, którą musimy zrobić, to iść WooCommerce > Ustawienia. Zobaczysz 7 kart: Ogólne, Produkty, Wysyłka, Płatności, Konta i prywatność, E-maile i Zaawansowane.

Najpierw spójrzmy na Generał patka. Na tej karcie możesz ustawić adres sklepu, kraje, w których będziesz sprzedawać i wysyłać, oraz włączyć stawki podatkowe.

ustawienia ogólne woocommerce

Jeśli przewiniesz w dół, zobaczysz również opcje, aby włączyć kupony i dostosować sposób wyświetlania cen w witrynie, w tym walutę, gdzie będzie wyświetlana itp..

Dalej jest Produkty zakładka, w której można ustawić opcje związane z produktem. Możesz ustawić, która strona będzie Twoją stroną Sklepu, co dzieje się, gdy użytkownicy dodają produkt do koszyka, ustalają wymiary produktu, włączają i konfigurują recenzje klientów oraz włączają gwiazdki.

ustawienia produktu woocommerce

W górnej części tej sekcji masz również opcje dotyczące Inwentarz i Produkty do pobrania. Jeśli zaznaczysz pole obok w sekcji Zapasy Włącz zarządzanie zapasami, zobaczysz listę opcji, które pomogą Ci zarządzać zapasami. Na przykład możesz ustawić niski próg zapasów, aby po osiągnięciu tego poziomu zapasów wysyłane było powiadomienie. Możesz także ukryć przedmioty magazynowe na swojej stronie.

ustawienia ekwipunku woocommerce

Co do Produkty do pobrania ma to zastosowanie tylko wtedy, gdy sprzedajesz treści do pobrania w swojej witrynie, więc jeśli sprzedajesz produkty czysto fizyczne, możesz je pominąć. Możesz poprosić kupujących o zalogowanie się przed pobraniem produktów. Możesz również dać dostęp do plików do pobrania po dokonaniu płatności.

opcje produktu do pobrania

Następna karta to Wysyłka . Jest to istotne tylko wtedy, gdy sprzedajesz produkty fizyczne, które zostaną wysłane do kupujących. Wewnątrz tej zakładki znajdują się trzy podsekcje: Strefy wysyłki, opcje wysyłki i klasy wysyłki.

W Strefach wysyłki musisz dodać strefy wysyłki i przypisać dostępne metody wysyłki do tych stref. To zajmie trochę czasu, jeśli wysyłasz do kilku krajów.

strefy wysyłki

Jeśli potrzebujesz dodatkowej pomocy w strefach wysyłki, możesz sprawdzić strefę wysyłki WooCommerce dokumentacja.

Dalej jest Opcje wysyłki Sekcja. W tej sekcji możesz kontrolować sposób wyświetlania stawek za wysyłkę w swojej witrynie i ustawić domyślny lub wymagany cel wysyłki.

opcje wysyłki

Ostatnia sekcja w Wysyłce to Klasy wysyłki. Za pomocą klas wysyłkowych możesz przypisać różne stawki wysyłkowe do grupy produktów, na przykład cięższych produktów, które wymagają większej wysyłki.

klasy wysyłki

Aby ustawić stawki wysyłki, przejdź do Strefy wysyłki i utwórz lub edytuj istniejącą metodę wysyłki, taką jak „Stała opłata”.

dodaj koszt wysyłki

Po kliknięciu Edytować, pojawi się wyskakujące okienko. Tutaj możesz dodać zryczałtowaną stawkę wysyłkową i dodatkowy koszt dla właśnie utworzonej klasy wysyłki.

koszt wysyłki klasy wysyłkowej

Jeśli potrzebujesz dodatkowej pomocy w konfigurowaniu ustawień wysyłki, możesz sprawdzić WooCommerce dokumentacja do wysyłki.

Teraz przejdźmy do Płatności. Na tej karcie możesz włączyć lub wyłączyć bramki płatnicze, takie jak PayPal, bezpośredni przelew bankowy, płatność przy odbiorze i inne. Po włączeniu metody kliknij Ustawiać połączyć swoje konta i zacznij akceptować płatności.

Metody Płatności

Jeśli chcesz móc akceptować płatności Stripe, możesz zainstalować wtyczkę o nazwie WooCommerce Stripe Payment Gateway. Po prostu idź do Wtyczki > Dodaj nowe i poszukaj wtyczki. Zainstalowanie i aktywacja tej wtyczki włączy metodę płatności Stripe w WooCommerce, ale musisz wejść WooCommerce > Ustawienia > Płatności skonfigurować.

w Konta i prywatność możesz skonfigurować ustawienia związane z tworzeniem konta i prywatnością użytkowników. Możesz zezwolić gościom na dokonywanie zakupów bez tworzenia konta, ustawić swoją stronę prywatności i strony zasad oraz wybrać czas przechowywania danych użytkownika.

konta i prywatność

Dalej jest E-maile zakładka, w której zobaczysz listę e-maili, które WooCommerce automatycznie wysyła na podstawie określonych warunków. Na przykład wiadomość e-mail można wysłać na wybrany adres e-mail za każdym razem, gdy zostanie złożone nowe zamówienie. Możesz także wyświetlać wiadomości e-mail z aktualizacjami na temat zamówień klientów, takich jak zamówienia zwrócone lub zrealizowane.

powiadomienia e-mailowe

Wreszcie zaawansowane karta, która zastąpiła kartę API, pozwala skonfigurować więcej szczegółów technicznych, takich jak konfiguracje stron, na których można powiedzieć WooCommerce, która strona będzie działała jako strona koszyka lub strona kasy.

konfiguracja strony woocommerce

Jeśli przewiniesz w dół, będziesz mógł zmodyfikować to, co WooCommerce nazywa punktami końcowymi, które są dodatkami do adresu URL, co pozwala im wyświetlać różne treści bez potrzeby tworzenia nowej strony.

Krok 6. Dodaj produkty.

Po zakończeniu podstawowych ustawień WooCommerce nadszedł czas na dodanie produktów. Motyw witryny Astra, którego użyliśmy w tym samouczku, jest już dostarczany z przykładowymi produktami i tak wygląda strona produktu na interfejsie:

strona produktu

Przyjrzyjmy się teraz, jak możemy to zmienić i dodać własne produkty na zapleczu.

Aby dodać nowy produkt lub edytować istniejący, wystarczy kliknąć opcję menu Produkty na lewym pasku bocznym w desce rozdzielczej WordPress. Zobaczysz listę wszystkich posiadanych produktów. Alternatywnie, jeśli znajdujesz się na froncie strony produktu, możesz kliknąć Edytuj produkt na czarnym pasku u góry strony. Spowoduje to przejście bezpośrednio do edytora produktów.

edytor produktu

Tutaj możesz zmienić tytuł i opis produktu. Jeśli przewiniesz w dół, zobaczysz sekcję o nazwie Dane produktu. Tutaj spędzasz większość swojego czasu. Tutaj możesz wybrać typ produktu, a stamtąd możesz skonfigurować inne ustawienia produktu.

WooCommerce pozwala dodawać następujące rodzaje produktów:

  • Fizyczne, do pobrania, wirtualne. Produkt wirtualny nie musi być pobierany. Przykładem jest spotkanie lub sesja coachingowa jeden na jednego.
  • Prosty produkt. To jest jeden produkt.
  • Zgrupowany produkt. To jest pakiet różnych produktów.
  • Produkt zewnętrzny. Produkty kupowane poza Twoją witryną, takie jak link partnerski.
  • Produkt zmienny. Produkt zmienny ma różne warianty, takie jak kolory i rozmiary.
typy produktów

Ilekroć tworzysz nowy produkt, pierwszym krokiem jest wybór jego rodzaju. Każdy typ ma inny zestaw opcji. Na przykład produkt do pobrania będzie miał następujące opcje:

opcje produktu do pobrania

Po lewej stronie tej sekcji zobaczysz więcej opcji dotyczących zapasów, wysyłki, powiązanych produktów i innych.

W Inwentarz, będziesz mógł dodać kod SKU, podać określoną liczbę zapasów dla tego konkretnego produktu, ustawić stan zapasów i więcej.

W Wysyłka , możesz określić wagę i wymiary produktu, a także przypisać klasę wysyłki, którą utworzyliśmy w poprzednim kroku.

wysyłka w danych produktu

W Powiązane produkty, możesz przypisać produktowi upsell i cross-sell do produktu. Upsell to produkt, który polecasz zamiast obecnego produktu, ponieważ ma wyższą cenę. Sprzedaż krzyżowa to produkty, które polecisz w koszyku na podstawie bieżącego produktu. Jeśli chcesz dodać wyprzedaż lub sprzedaż krzyżową, wpisz nazwę produktu w odpowiednich polach.

powiązane produkty

Możesz także dodać atrybuty do swoich produktów w Atrybuty Sekcja. Może to być rozmiar, kolor, waga itp. Ponadto, jeśli tworzysz produkt zmienny, musisz najpierw dodać tutaj atrybut. Jeśli chcesz dowiedzieć się więcej na temat tworzenia produktu zmiennego, sprawdź Przewodnik WooCommerce tutaj.

Jeśli przewiniesz w dół Dane produktu zobaczysz obszar, w którym możesz dodać krótki opis produktu. Ten opis pojawi się obok Twojego produktu i blisko ceny. Mów krótko i słodko. Możesz dodać zdjęcie produktu po prawej stronie. Jeśli masz więcej zdjęć produktów, możesz dodać je w Galeria produktów Sekcja.

krótki opis i zdjęcie produktu

Ważne jest również, aby ustawić widoczność katalogu, który można znaleźć w górnej części strony poniżej Publikować. W niektórych przypadkach możesz chcieć ukryć niektóre produkty, ponieważ być może oferujesz je jako sprzedaż krzyżową z ekskluzywną zniżką. Tutaj możesz to zrobić.

widoczność katalogu

Gdy skończysz wszystko tutaj, kliknij Aktualizacja aby zapisać wszystkie zmiany.

Jeśli chcesz dowiedzieć się więcej o różnych typach produktów i o tym, jak prawidłowo je tworzyć, to Przewodnik WooCommerce to świetne miejsce na rozpoczęcie. Dodawaj kolejne produkty do swojej witryny, wykonując dokładnie te same kroki, które pokazałem tutaj, dopóki nie zbudujesz list produktów.

Krok 7. Dostosuj swoje kasy.

WooCommerce to świetna wtyczka, którą widzieliście do tej pory, ale powszechną skargą na nią jest brak opcji kasy. Nie będzie można zmienić wyglądu stron kasy i nie można za jego pomocą utworzyć ścieżki sprzedaży. Lejek sprzedaży to świetny sposób na zwiększenie wartości zakupu klienta, więc jeśli nie masz go w swojej witrynie, naprawdę zostawiasz pieniądze na stole.

Jeśli chcesz utworzyć lejek sprzedaży dla swojej witryny e-commerce, najlepszą wtyczką, która może pomóc, są CartFlows. Jest to wtyczka WordPress do tworzenia ścieżek, która pozwala tworzyć piękne i wysoce skuteczne ścieżki bezpośrednio w WordPress.

przepływy koszyków

Jeśli chcesz dowiedzieć się więcej o tym, jak utworzyć lejek sprzedaży za pomocą CartFlows, możesz sprawdzić ten samouczek, który stworzyłem.

Krok 8. Bądź na bieżąco z rezygnacją z koszyka.

Zanim zakończę ten samouczek, dodaję jeszcze jedną rzecz dotyczącą porzucania koszyków. W e-handlu faktem jest, że wielu klientów porzuci koszyki bez sfinalizowania zakupu.

Może to wynikać z wielu powodów. Mogły być rozproszone, moc lub połączenie zniknęły, pojawiło się coś pilnego. Cokolwiek to jest, wiele z tych porzuconych koszyków traci sprzedaż, jeśli nic z tym nie zrobisz.

Na szczęście istnieje wtyczka o nazwie Odzyskiwanie porzucenia koszyka WooCommerce wtyczka, która śledzi i automatycznie wysyła kolejne wiadomości e-mail do klientów z porzuconymi koszykami – wszystko za DARMO!

Jeśli użyłeś motywu witryny Astra, którego tutaj użyłem, ta wtyczka zostałaby już dla Ciebie zainstalowana. Ale jeśli nie, możesz go zainstalować, przechodząc do Wtyczki > Dodaj nowe i poszukaj wtyczki.

Stworzy nową opcję w WooCommerce o nazwie Porzucenie koszyka. Po kliknięciu tego przycisku zobaczysz przegląd liczby porzuconych koszyków, liczby odzyskanych i liczby utraconych.

zamówienia, które można odzyskać

Możesz także dostosować kolejne wiadomości e-mail wysyłane przez WooCommerce, przechodząc do Kolejne wiadomości e-mail najedź myszką na wiadomość e-mail, którą chcesz edytować, i kliknij Edytować.

kolejne wiadomości e-mail

Nastąpi przeniesienie do edytora e-mail:

dostosowywanie kolejnych wiadomości e-mail

Podsumowanie

Tworzenie strony internetowej WordPress e-commerce może wydawać się skomplikowane i przytłaczające, ale mam nadzieję, że rzuciłem na nią trochę światła i pokazałem, jak możesz to zrobić samemu z niewielką pomocą. Jestem podekscytowany, aby usłyszeć o twoich historiach sukcesu, a jeśli potrzebujesz pomocy, możesz skontaktować się ze mną w sekcji komentarzy poniżej.

SiteGround

SiteGround jest wysoce polecanym hostem internetowym, ponieważ zaspokajają potrzeby użytkowników WordPress, a jednocześnie mają przystępne ceny. Są najbardziej znane z szybkiej wydajności i równie szybkiego wsparcia.

Kluczowe cechy strony:

  • Darmowy certyfikat SSL
  • SZYBKA pomoc w zakresie wiedzy
  • WordPress Staging Enviroment
  • Darmowe migracje stron internetowych
  • Codzienne kopie zapasowe

SiteGround to solidny wybór dla Twoich potrzeb hostingowych. Obsługują witryny WordPress i oferują mniej zasobów niż ich konkurenci, ale większą niezawodność.

Sprawdź SiteGround

Motyw Astra

Astra to darmowy motyw WordPress, który koncentruje się na szybkości. Opcjonalnie możesz kupić wersję Pro za 59 USD, która dodaje dodatkowe ustawienia i opcje.

Najważniejsze cechy Astra:

  • Nie temat Fastes, ale to nie garbić się
  • Wiele bezpłatnych stron demonstracyjnych
  • Elastyczna funkcja Mega Menu
  • Opcje układów niestandardowych
  • Wsparcie WooCommerce
  • Wsparcie LearnDash

Astra Theme to dobry wybór dla każdego projektu internetowego WordPress. Przypuszczam, że największym pytaniem jest, czy w dzisiejszych czasach trzeba kupić motyw, ponieważ twórcy stron robią te same rzeczy, do których potrzebny byłby motyw. Na przykład Elementor ma darmowy motyw Hello, który pozwala kreatorowi stron wykonać całą pracę.

Nadal istnieje kilka dobrych powodów, aby kupić profesjonalny motyw, ale dla większości osób najprawdopodobniej będzie w porządku z darmowym motywem.

Dla mnie jednak myślę, że Astra Theme nie nadąża za aktualnymi trendami i już go nie polecam.

Dostępne są znacznie lepsze nowoczesne motywy, które oferują wbudowane konstruktory nagłówków i stopek w porównaniu do 3 układów, a także bardziej elastyczne układy stron i postów.

Sprawdź motyw Astra

Elementor

Elementor to narzędzie do tworzenia stron WordPress, które szturmem podbiło projektowanie stron internetowych WordPress. Ma najgłębszy zestaw funkcji, ale jest bardzo łatwy w obsłudze i opanowaniu. Elementor to najbardziej wszechstronny darmowy program do tworzenia stron. Istnieje również dodatek Pro, aby dodać dodatkowe funkcje programistyczne.

Kluczowe cechy elementu:

  • Live Front End Editor strony
  • Funkcje personalizacji strony internetowej
  • Biblioteka szablonów i bloków
  • Rozbudowane mobilne opcje responsywne
  • Najpotężniejszy kreator wyskakujących okienek
  • PRO Utwórz niestandardowe nagłówki / stopki
  • PRO Utwórz układy typu postu

Elementor jest najsilniejszym obecnie dostępnym narzędziem do budowania stron. Konsekwentnie wypuszczają nowe funkcje zgodne z aktualnymi trendami projektowymi. Oznacza to, że będziesz w stanie utrzymać aktualność swojej witryny.

Elementor Pro to niesamowita wartość, biorąc pod uwagę wszystkie dodatkowe moduły i funkcje zasilania, które obejmuje.

Gdybym dzisiaj rozpoczynał nowy projekt strony internetowej, Elementor byłby twórcą stron, który wybrałbym. Uważam, że to musi mieć narzędzie do budowania stron WordPress, które jest przyjemnością w użyciu.

Sprawdź elementor

CartFlows

CartFlows to narzędzie do tworzenia lejków sprzedażowych dla WordPress. Umożliwia szybkie i łatwe budowanie ścieżek sprzedaży za pomocą wybranego przez ciebie programu budującego strony.

Najważniejsze funkcje Cart Cart:

  • Profesjonalnie zaprojektowane szablony
  • 5 guzków zamówienia lokalizacji
  • Upsells One Click
  • Użyj preferowanego narzędzia do tworzenia stron
  • Rozszerzalne w przeciwieństwie do ścieżek klikających
  • Liczniki czasu i testy podziału

Jeśli potrzebujesz narzędzia do tworzenia ścieżek sprzedaży dla WordPress i nie masz nic przeciwko hostowaniu siebie lub korzystaniu z zarządzanego hostingu WordPress, to CartFlows jest świetną opcją, ponieważ jest bardzo łatwy w użyciu, ale bardzo wydajny.

Sprawdź CartFlows

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map