Jak stworzyć fantastyczny sklep internetowy z WooCommerce, Divi i SiteGround (2023)

Ponad 74 miliony witryn korzysta z platformy WordPress w celu hostowania swoich blogów, sprzedaży produktów lub po prostu pisania codziennych przemyśleń, aby świat mógł je zobaczyć. Kiedy zaczynasz budować swój strona e-commerce z pewnością masz wiele możliwości wyboru, a WordPress jest z tym powiązany.

Który z wyróżniających się platformy e-commerce wybierzesz? Czy planujesz wybrać motyw do sprzedaży swoich produktów, czy może jest ktoś, komu możesz zapłacić za zbudowanie witryny od zera? Do licha, co w ogóle planujesz sprzedawać za pośrednictwem swojej witryny e-commerce?

Nota wydawcy: Ten post został pierwotnie opublikowany 15 stycznia 2015 r. i został całkowicie odnowiony i zaktualizowany pod kątem dokładności i kompleksowości.

Jeśli szukasz struktury frontendowej i backendowej, aby rozpocząć sprzedaż online, masz do wyboru tysiące lub miliony motywów WordPress. Prawie tak samo z hostingiem (ale wolimy SiteGround or BlueHost).

Najlepsze motywy obejmują szybkie i łatwe narzędzia do zarządzania e-commerce, dzięki którym możesz przesyłać produkty i zarządzać takimi rzeczami, jak rabaty, nagrody, przyciski i strony produktów. Twój motyw jest także pierwszą rzeczą, którą zobaczą ludzie odwiedzający Twoją witrynę. Prowadzi ich przez proces i naprawdę decyduje o tym, czy ktoś jest zadowolony z doświadczenia, czy nie.

Krótko mówiąc, motywy WordPress są kluczowe, a Divi Motyw WordPress od Elegant Themes to dość ładnie wyglądająca opcja, którą warto rozważyć. Można go zastosować do standardowej witryny biznesowej, ale zawiera także integracje do sprzedaży e-commerce i szybkich procesów sprzedażowych. Nauczmy się, jak stworzyć sklep internetowy za pomocą Divi Motyw WordPressa.

Najpierw zdobądź domenę i hosting

💡Pierwszym krokiem w każdym procesie tworzenia witryny internetowej jest wykupienie konta hostingowego, nazwy domeny i zainstalowanie WordPressa na stronie. Divi nie jest inaczej. Istnieje wiele sposobów na zdobycie hostingu i nazw domen, ale osobiście tak myślę SiteGround to jedna z najbezpieczniejszych i niezawodnych opcji. (Więcej szczegółów znajdziesz w naszym kompleksowym SiteGround przeglądu).

To, co jest naprawdę fajne, to to SiteGround oferuje specjalistyczną zarządzane WooCommerce Hosting pakiet usług obejmujący prawie wszystko, czego potrzebujesz, aby rozpocząć sprzedaż online. W ramach pakietu możesz zadowolić się albo StartUp Plan dla początkujących, Plan GrowBig dla rozwijających się przedsiębiorstw, lub GoGeek dla ustalonych WooCommerce sklepy.

Każdy z nich oferuje zaawansowane funkcje optymalizacji WooCommerce miejsce za rozsądną cenę.

To powiedziawszy, kolejna usługa hostingowa, którą gorąco polecamy Divi WooCommerce sklepy jest BlueHost. Chociaż funkcje tutaj nie są zgodne SiteGround'', nadal dostajesz WooCommerce-skoncentrowany hosting za pośrednictwem pakietu e-commerce WordPress. Plany mogą wygodnie obsłużyć a Divi WooCommerce store, ale niestety nie otrzymasz usług zarządzanych.

???? A teraz dla jasności przejdźmy dalej SiteGround...

Jak zacząć?

Idź do SiteGround zarządzane WooCommerce hosting wybierz idealny plan i kliknij Pobierz plan.

Moim zdaniem Plan GoGeek wydaje się najbardziej odpowiednią opcją, ponieważ obsługuje nieograniczoną liczbę WooCommerce strony internetowe z zaawansowanymi możliwościami e-commerce. Oprócz większej mocy serwera, zyskujesz priorytetowe wsparcie, instalację WordPress, tworzenie kopii zapasowych na żądanie i zasoby Super Chacher, a także bezpłatne transfery witryn i Cloudflare CDN, a także inne solidne funkcje.

???? Jeśli chodzi o przydziały zasobów, plan ten uwzględnia:

• Skrzynka pocztowa 6 GB
• 1 GB miejsca na dane
• Dysk SSD
• Transfer danych bez pomiaru Un
• Przestrzeń dyskowa 30GB
• Do 100,000 XNUMX odwiedzin miesięcznie

Należy pamiętać, że cena tej usługi zaczyna się od 11.95 USD miesięczniei jest bardzo podobny do instalacji zwykłej witryny WordPress na koncie hostingowym BlueHost.

Pamiętaj jednak, że jest to specjalna cena dla początkujących. Spodziewaj się, że w przyszłych odnowieniach wzrośnie do 34.95 USD, co nadal jest rozsądną opłatą, jeśli weźmiesz pod uwagę wszystkie funkcje, które zyskasz na dłuższą metę.

Teraz, gdy już wybierzesz preferowany plan, SiteGround przekieruje Cię na stronę rejestracji domeny. Jeśli posiadasz już domenę, wybierz drugą opcję i wprowadź jej dane. W przeciwnym razie kontynuuj rejestrację nowej nazwy domeny za 15.95 USD rocznie.

Następny jest ostatni etap, w którym przed utworzeniem konta wybierasz preferowane opcje hostingu, a także wprowadzasz dane do płatności i dane osobowe.

Cóż, oczywiście, są to podstawowe rzeczy, z którymi miałeś do czynienia już wiele razy. Zatem nie powinieneś mieć żadnych trudności z wprowadzeniem numeru telefonu, kraju, imienia i nazwiska, adresu e-mail, hasła do konta itp.

Część dotycząca płatności wymaga podania danych karty kredytowej. Możesz kontynuować jedno i drugie Odkryj, MasterCard or Visa.

Jednakże, co dość ciekawe, SiteGround nie wymienia systemu PayPal, pomimo jego rosnącej popularności wśród WooCommerce kupcy. Ale na szczęście okazuje się, że mogą akceptować płatności PayPal, choć pośrednio.

Jeśli jest to Twój preferowany tryb, po prostu pozostaw pola puste i skontaktuj się SiteGroundagentów sprzedaży za pośrednictwem narzędzia czatu na żywo. Pomogą Ci ukończyć proces za pośrednictwem PayPal.

Ostatnia sekcja zawiera kilka opcji usługi hostingowej, w tym preferowaną lokalizację centrum danych oraz okres subskrypcji.

Teraz, aby zminimalizować odległość między transferem danych Sitegroundserwery i Twoje WooCommerce odwiedzających witrynę, wybierz lokalizację centrum danych najbliższą docelowemu obszarowi rynku.

Następnie wybierz dodatkowe usługi, które chcesz uwzględnić w swoim pakiecie i voila! To wszystko, czego potrzeba, aby skonfigurować Siteground konta.

Gdy już skończysz, zaloguj się na swoje konto i przejdź bezpośrednio do obszaru cPanel. Znajdziesz domyślny automatyczny instalator WordPress. Wybierz go, wprowadź dane logowania do WordPress i naciśnij przycisk instalacji.

Cóż, zauważysz, że proces instalacji WordPressa zajmuje kilka sekund, ponieważ wszystko jest zautomatyzowane. A gdy już wszystko zostanie skonfigurowane, SiteGround poda odpowiednią nazwę domeny, do której będziesz mieć dostęp, jeśli chcesz zmienić elementy na zapleczu swojej witryny.

Tworzenie sklepu internetowego za pomocą Divi

Co jest Divi?

Ok, jeśli tego nie próbowałeś, założę się, że już o tym słyszałeś. Divi nie jest zwyczajne WooCommerce temat. W rzeczywistości jest to jeden z najpopularniejszych motywów WordPress w eleganckich motywach. I co ciekawe, Divi is Elegancki motywsztandarowy produkt firmy.

Co zatem takiego specjalnego jest w tym motywie? I czy jest w tym coś wyjątkowego Divi'S WooCommerce?

Cóż, w przeciwieństwie do typowych motywów WordPress, Divi to bardziej kompleksowy pakiet. Oznacza to, że łączy w sobie standardowe funkcje motywu z dodatkowymi funkcjami, które są przydatne Divi WooCommerce sklepy.

Nie zrozum mnie jednak źle. Chociaż Divi'S WooCommerce wsparcie jest tutaj głównym celem, motyw może znacznie więcej. W istocie Divi można bezproblemowo zintegrować z dowolnym typem witryny, dzięki szerokiej gamie układów stron internetowych. Nie tylko e-commerce.

Następnie, aby to uzupełnić, Divi posiada własny, intuicyjny kreator stron WordPress plugin. Możesz go używać do dowolnego dostosowywania swojego Divi WooCommerce przechowywać bez żadnego kodowania.

W rzeczywistości, Divi został opracowany dla początkujących. Możesz więc spodziewać się schludnego panelu sterowania, który prawie nie wymaga uczenia się. Ogarnięcie całości zajmuje tylko kilka minut Divi ekosystemu, skonfiguruj go i dostosuj Divi'S WooCommerce układy.

???? W rezultacie będziesz mógł na tym zarobić Divi:

• Szereg dostosowywalnych układów dla dowolnego typu witryny WordPress, w tym WooCommerce sklepy online.
• Łatwy w użyciu Kreator Stron, który zapewnia wiele elementów witryny i możliwości projektowania.
• Elastyczny proces dostosowywania bez jakiejkolwiek formy kodowania. Nawet nowicjusze mogą wygodnie skonfigurować i dostosować w pełni funkcjonalny Divi WooCommerce sklepy.
• Prosta integracja z WordPressem. Divi to jeden z niewielu zewnętrznych motywów WordPress, który można zainstalować bezproblemowo, bez żadnych skomplikowanych poprawek.
• Zoptymalizowany pod kątem e-commerce WooCommerce szablony.

Divi Przeciągnij i upuść program budujący strony

Jak powiedzieliśmy, Divi występuje w dwóch różnych smakach. Kiedy płacisz za członkostwo w dniu Eleganckie motywy, znajdziesz normę Divi Motyw na desce rozdzielczej, któremu towarzyszy Divi Kreator stron WordPress plugin.

Warto jednak zauważyć, że ten konstruktor nie jest związany wyłącznie z Divi Temat. Występuje jako dodatek plugin do każdego motywu pobranego z Elegant Themes.

Powiedział, że Divi WordPress Page Builder to edytor „przeciągnij i upuść” z zaawansowanymi możliwościami dostosowywania. Umożliwia przenoszenie i definiowanie elementów, kolumn, wierszy i modułów bez żadnego doświadczenia w kodowaniu. Innymi słowy, jest to typ budowniczego a Divi WooCommerce początkujący chciałby to osiągnąć.

Ale nie dajcie się zwieść. Chociaż Divi Kreator Stron jest przeznaczony dla początkujących, jest to edytor ułatwiający pracę także doświadczonym programistom. Mogą systematycznie łączyć jego funkcje wizualne z kontrolkami CSS, aby przesyłać swoje Divi WooCommerce strony internetowe na wyższy poziom.

Jednak pomyśl o tym nie potrzebujesz programisty, aby zaprojektować wszystkie elementy w swoim Divi WooCommerce sklep. Możesz polegać wyłącznie na funkcjonalnościach wizualnych.

I wiesz co?

Divi próbuje nawet znacznie ułatwić cały proces poprzez etykietowanie i kodowanie kolorami modułów układu.

A skoro już o tym mowa, mamy tu do czynienia z kolejnym godnym uwagi przepisem Diviogólne uproszczenie procesu dostosowywania układu. Jeśli na przykład chcesz wprowadzić nową sekcję, wystarczy jedno kliknięcie. Następnie duplikuj, usuwaj i wstawiaj moduły dla swojego Divi WooCommerce sklep zajmie Ci tylko kilka kliknięć przycisku.

Tymczasem DiviOkno edycji będzie wyświetlać zmiany układu Twojej witryny w czasie rzeczywistym. Będziesz w stanie wizualnie śledzić każdą pojedynczą korektę i zobaczyć, jak wpływa ona na ogólny wygląd Twojego projektu Divi WooCommerce sklep.

Wstępnie zaprojektowany Divi WooCommerce Układy witryny

Aby uchronić Cię przed boleśnie wymagającym procesem tworzenia strony internetowej od zera, Divi Motyw WordPress zawiera wiele wstępnie zaprojektowanych szablonów witryn. A ponieważ możesz potrzebować różnych opcji układu tego samego szablonu, Divi oferuje projekty swoich stron internetowych w formie kompleksowych pakietów. W rezultacie otrzymujesz różne układy i kolory szablonów.

Cóż, żeby być bardziej precyzyjnym, Divi zapewnia około 7-8 różnych wstępnie zaprojektowanych układów w każdym pakiecie stron internetowych. Biorąc pod uwagę, że każdy z nich jest w pełni zbudowany, można łatwo dostosować układy bez konieczności gruntownego przerabiania ich podstawowej struktury. Wystarczy kilka poprawek tu i tam.

Teraz znajdź idealny dla siebie WooCommerce sklepie internetowym, po prostu przewiń różne kategorie witryn na stronie Divi Temat. Możesz też użyć słów kluczowych, aby przeszukać wszystkie opcje na raz.

Ogólnie rzecz biorąc, znalezienie odpowiedniego nie zajmuje dużo czasu Divi układ sklepu internetowego. Wystarczy to zintegrować z WooCommerce, a będziesz na dobrej drodze do skonfigurowania atrakcyjnej witryny e-commerce WordPress.

Idąc dalej, zauważysz jedną szczególnie wyjątkową rzecz Divi nie skupia się wyłącznie na wyglądzie. The WooCommerce układy dołączone do Divi Motyw został zbudowany z myślą o funkcjonalności.

Zatem oprócz typowych stron sklepu, takich jak realizacja transakcji, produkty i koszyk, Divi domyślnie zawiera moduły e-commerce. Mówiąc dokładniej, otrzymujesz sekcje takie jak polecane produkty, produkty przecenione i wiele więcej.

Is Divi Odpowiedni dla WooCommerce?

Biorąc wszystko pod uwagę, Divi jest coraz bardziej popularny, ponieważ jest to zasadniczo kompleksowe rozwiązanie tematyczne WordPress.

W połączeniu, Divi Kreator Stron i Divi Motyw oferuje prawie wszystko, czego potrzebujesz do skonfigurowania dowolnego typu witryny WordPress. A to obejmuje w pełni funkcjonalny WooCommerce sklep ze wszystkimi podstawowymi funkcjami handlu elektronicznego.

???? W skrócie, Divi to opcja warta rozważenia dla Ciebie WooCommerce witryna, ponieważ:

• można dostosować WooCommerce stronę internetową za pomocą edytora wizualnego typu „przeciągnij i upuść”.
• Divi umożliwia zapisanie poprawek jako elementów globalnych we wszystkich układach.
• Zawiera ponad 20 dobrze zaprojektowanych, gotowych układów stron internetowych.
• Możesz łatwo wyeksportować układy, a następnie wykorzystać je na innych stronach internetowych.
• Możesz zaprojektować swój WooCommerce przechowuj z wieloma kolumnami, wierszami i elementami treści.
• Wszystkie kategorie WooCommerce układy zostały zoptymalizowane pod kątem urządzeń mobilnych.
• Tak jak MS Word, edytowanie treści tekstowej jest tak proste, jak kliknięcie, a następnie pisanie.
• Cały proces dostosowywania witryny jest śledzony w czasie rzeczywistym, co zapewnia podgląd na żywo wszystkich zmian projektowych.
• WooCommerce układy zawierają główne strony i moduły sklepów internetowych.

Krok 1: Zarejestruj się, korzystając z eleganckich motywów, aby uzyskać dostęp Divi

Zacznij od przejścia do Strona produktu Eleganckie motywy dla Divi Motyw WordPressa. Na tej stronie dostępna jest opcja demonstracyjna motywu i przycisk szybkiego pobierania. Elegant Themes sprzedaje swoje motywy przy użyciu rocznej lub jednorazowej struktury płatności, co jest wygodne dla programistów posiadających wiele witryn klienckich lub osób prowadzących wiele witryn e-commerce. Tak naprawdę nie można kupić tylko jednego motywu, ale Plan osobisty za 67 USD rocznie jest podobny do kwoty, jaką możesz zapłacić za zwykły motyw, i możesz wstrzymać roczne płatności, jeśli nie chcesz już wsparcia. Zanim zdecydujesz się na płatność, możesz pobawić się motywem.

Krok 2: Zainstaluj Divi na Twojej witrynie WordPress

Po zarejestrowaniu się kliknij przycisk pobierania motywu. Spowoduje to umieszczenie motywu w postaci pliku zip na komputerze. Przejdź do karty Wygląd na zapleczu witryny WordPress i kliknij opcję Motywy.

Krok 3: Kliknij przycisk Dodaj nowy

Kliknij przycisk Prześlij motyw. Znajdź i prześlij plik zip motywu. Przejdź przez proces, aby całkowicie aktywować motyw, a następnie powinieneś zobaczyć motyw na interfejsie swojej witryny.

Krok 4: Skonfiguruj swój WooCommerce Sklep

Jeśli pójdziesz do Divi Strona dokumentacji motywu znajdziesz prawie wszystkie narzędzia i funkcje, z którymi możesz pracować nad tym motywem, ale my skupimy się przede wszystkim na skonfigurowaniu witryny e-commerce. Opona Divi motyw Jest w pełni kompatybilny z WooCommerce dzięki czemu możesz wyświetlić wszystkie swoje produkty z tego.

Niesamowite jest to, że jest to inicjał SiteGround rejestracja jest już zainstalowana WooCommerce na swojej stronie WordPress, więc nie musisz się martwić o jego instalację lub konfigurację. Powinien być już dostępny na Twoim pulpicie nawigacyjnym.

Krok 5: Dodaj swoje pierwsze produkty do WooCommerce

Technicznie rzecz biorąc, witryna e-commerce jest już skonfigurowana, ale chcemy dodać kilka produktów, aby w interfejsie wyglądała jak witryna e-commerce. Przejdź do panelu WordPress, kliknij kartę Produkty pod WooCommerce i kliknij element Dodaj produkt.

Krok 6

Spowoduje to wyświetlenie nowej strony produktu, którą należy wypełnić. Wygląda bardzo podobnie do dowolnego edytora stron WordPress, z tą różnicą, że możesz dodać nazwę produktu, opis i wyróżniony obraz, aby ludzie mogli zobaczyć, jak produkt wygląda w Twojej witrynie.

Krok 7: Poznaj WooCommerce Zakładka Charakterystyka

Jeśli przewiniesz w dół poniżej obszaru opisu, znajdziesz wszystkie możliwe WooCommerce funkcja do zabawy. Możesz swobodnie modyfikować takie rzeczy, jak numery SKU, zapasy, ceny, wysyłka i atrybuty. Funkcje są zbyt obszerne, abym je tutaj wszystkie opisał, ale możesz przejść do WooCommerce strona dokumentacji aby zrozumieć wszystko, co możesz skonfigurować w swojej witrynie e-commerce.

Krok 8: Utwórz stronę główną

Cały sens tego polega na tym, żeby utwórz stronę główną lub zwykła strona zawierająca wszystkie Twoje produkty, gdy ludzie odwiedzą Twoją witrynę. Dlatego powinieneś przejść do Strony > Dodaj nowy po lewej stronie pulpitu nawigacyjnego WordPress.

Krok 9: Dodaj tytuł dla swojego Divi Strona

Utwórz tytuł swojej strony. Kliknij przycisk Użyj Kreatora Stron u góry i dotknij obszaru Wstaw moduły, aby dołączyć nagłówek o pełnej szerokości. Nie musisz wybierać nagłówka o pełnej szerokości, ale w tym samouczku to zrobimy.

Krok 10

Kliknij przycisk Nagłówek o pełnej szerokości.

Krok 11

Podaj szczegółowe informacje dotyczące tytułu witryny, tekstu podtytułu i koloru tekstu. Możesz nawet zmienić etykietę administratora, która służy głównie do własnego użytku. Po zakończeniu naciśnij przycisk Zapisz.

Krok 12

Stuknij trzy paski po lewej stronie modułu nagłówka Pełna szerokość, aby zmienić więcej ustawień.

Krok 13

Tutaj możesz nadać nagłówkowi ładny kolor tła, a nawet dołączyć wideo dla swojej firmy.

Krok 14

Teraz, gdy nagłówek jest już gotowy, możemy dołączyć moduł e-commerce, klikając obszar Wstaw kolumny.

Krok 15

Wybierz liczbę kolumn, a następnie kliknij wyświetloną opcję Wstaw moduły. Wybierz przycisk Sklep u dołu.

Krok 16

Możesz dowolnie modyfikować sposób wyświetlania swoich produktów. Możesz więc pokazać swoje najnowsze produkty wraz z 12 pozycjami na stronie, kilkoma kolumnami i żądaną kolejnością. Kliknij przycisk Zapisz.

Krok 17: Wyświetl podgląd i opublikuj

Po zakończeniu możesz nacisnąć przycisk Podgląd lub Publikuj, aby wyświetlić zmiany w interfejsie użytkownika. Jak widać, produkty wyświetlają się ładnie i zawsze możesz wrócić, aby zmienić swoje produkty lub ustawienia witryny sklepowej na zapleczu WordPress. Gratulacje!

Jeśli masz jakiekolwiek pytania dotyczące konfiguracji Divi Motyw WordPress, daj nam znać w sekcji komentarzy poniżej.

Podsumowanie

I to wszystko, czego potrzeba, aby je zdobyć Divi WooCommerce sklep internetowy działający przy użyciu pliku a SiteGround konto hostingowe.

Idąc dalej, możesz być tego pewien SiteGround zajmie się wszystkimi krytycznymi sprawami technicznymi, takimi jak aktualizacje WordPress i WooCommerce bezpieczeństwo. Na tym polega podstawowa różnica między zarządzanymi WooCommerce hosting i zwykłe rozwiązania w zakresie hostingu współdzielonego. Dzięki temu zyskasz tak potrzebny czas i przestrzeń, aby skupić się na swoich sprawach WooCommerce kierownictwo sklepu.

I jak już widzieliśmy, z tym powinno być łatwo Divi temat. Zawsze możesz uzyskać dostęp do swojego Divi WooCommerce układ z zaplecza WordPress, aby dostosować go jeszcze bardziej. Jeśli chcesz, możesz nawet zmienić cały projekt, przechodząc na inny układ, który może obsłużyć WooCommerce sklep również. Wybór nalezy do ciebie.

Jeśli masz jakiekolwiek pytania dotyczące konfiguracji Divi Motyw WordPress, daj nam znać w sekcji komentarzy poniżej.