Jak vytvořit fantastický online obchod s WooCommerce, Divi a SiteGround (2023)

Více než 74 milionů webů závisí na platformě WordPress, kde mohou hostovat své blogy, prodávat své produkty nebo jen psát své každodenní úvahy, aby je svět viděl. Když začnete budovat svůj webové stránky elektronického obchodu určitě máte spoustu možností a WordPress s tím souvisí.

Který z těch nejvýraznějších platformy elektronického obchodování vyberete si? Plánujete použít téma pro prodej svých produktů nebo existuje někdo, komu můžete zaplatit za vytvoření webu od začátku? Sakra, co vůbec plánuješ prodávat přes svůj web elektronického obchodu?

Poznámka redakce: Tento příspěvek byl původně publikován 15. ledna 2015 a byl kompletně přepracován a aktualizován pro přesnost a úplnost.

Existují tisíce až miliony témat WordPress, ze kterých si můžete vybrat, když hledáte frontendovou a backendovou strukturu, abyste mohli začít prodávat online. Téměř to samé s hostingem (ale preferujeme SiteGround or Bluehost).

Mezi nejlepší témata patří rychlé a snadné nástroje pro správu elektronického obchodu, takže můžete nahrávat produkty a spravovat věci, jako jsou slevy, odměny, tlačítka a stránky produktů. Vaše téma je také první věcí, kterou lidé uvidí, když navštíví váš web. Provádí je celým procesem a skutečně nese rozdíl mezi tím, zda je někdo s touto zkušeností spokojen nebo ne.

Stručně řečeno, témata WordPress jsou zásadní a Divi Téma WordPress od Elegant Themes je poměrně pěkně vypadající možnost, kterou byste měli zvážit. Může být použit pro standardní obchodní web, ale také zahrnuje integrace pro prodej elektronického obchodu a rychlé prodejní procesy. Pojďme se naučit, jak vytvořit internetový obchod s Divi Téma WordPress.

Získejte svou doménu a hosting jako první

????Prvním krokem v jakémkoli procesu vytváření webových stránek je získání hostingového účtu, názvu domény a instalace WordPressu na web. Divi není jiné. Existuje spousta způsobů, jak získat hosting a názvy domén, ale osobně si myslím SiteGround je jednou z nejbezpečnějších a nejspolehlivějších možností. (Další podrobnosti najdete v našem komplexním SiteGround recenze).

Co je opravdu skvělé, je to SiteGround nabízí specializované se podařilo WooCommerce Hosting balíček služeb se vším, co potřebujete, abyste mohli začít prodávat online. V rámci balíčku se můžete spokojit buď s StartUp Plán pro začátečníky, GrowBig plán pro rostoucí podniky, popř GoGeek pro zavedené WooCommerce obchodů.

Každá z nich nabízí pokročilé funkce pro optimalizaci vašeho WooCommerce stránky za rozumnou cenu.

To znamená, že další hostingová služba, kterou bychom vřele doporučili Divi WooCommerce obchody je Bluehost. I když funkce zde neodpovídají SiteGround's, stále dostanete WooCommerce-zaměřený hosting prostřednictvím svého balíčku elektronického obchodu WordPress. Plány pohodlně zvládnou a Divi WooCommerce obchod, ale bohužel nezískáte spravované služby.

???? Nyní, v zájmu jasnosti, pojďme dále SiteGround...

Jak začít

Přejít na SiteGround Managed WooCommerce hosting stránku, vyberte ideální plán a klikněte Získejte plán.

Podle mého názoru je Plán GoGeek se zdá jako nejvhodnější možnost, protože podporuje neomezené WooCommerce webové stránky s pokročilými možnostmi elektronického obchodování. Kromě většího výkonu serveru získáte mimo jiné prioritní podporu, zavádění WordPress, zálohování na vyžádání a zdroje super chacher, stejně jako bezplatné přenosy stránek a Cloudflare CDN.

???? A pokud jde o povolenky na zdroje, tento plán zahrnuje:

• 6GB poštovní schránka
• 1 GB úložiště databáze
• SSD úložiště
• Neměřený přenos dat
• Úložný prostor 30GB
• Až 100,000 XNUMX návštěv měsíčně

Mějte na paměti, že tato služba začíná na 11.95 $ měsíčněa je to velmi podobné tomu, jak byste nainstalovali běžný web WordPress na hostingový účet BlueHost.

Ale pamatujte, že je to speciální cena pro začátečníky. Očekávejte, že se při budoucích obnoveních zvýší na 34.95 $, což je stále přiměřený poplatek, pokud vezmete v úvahu všechny funkce, které získáte na dlouhou trať.

Nyní, jakmile si vyberete preferovaný plán, SiteGround přesměruje vás na stránku registrace domény. Pokud již doménu vlastníte, zvolte druhou možnost a zadejte její údaje. V opačném případě pokračujte registrací nového názvu domény za 15.95 USD ročně.

Další je poslední fáze, kde si před vytvořením účtu vyberete preferované možnosti hostování a také zadáte své platební údaje a osobní údaje.

No, samozřejmě, to jsou základní věci, které jste už mnohokrát řešili. Neměli byste mít tedy žádné potíže se zadáním svého telefonního čísla, země, jména, e-mailu, hesla k účtu atd.

Část platby vyžaduje zadání údajů o vaší kreditní kartě. Můžete pokračovat s oběma Objevte, MasterCard or Visa.

Nicméně, a poměrně zajímavé, SiteGround neuvádí PayPal, navzdory jeho rostoucí popularitě WooCommerce obchodníků. Naštěstí se však ukázalo, že mohou přijímat platby PayPal, i když nepřímo.

Pokud je to váš preferovaný režim, nechte pole prázdná a kontaktujte SiteGroundobchodní zástupci prostřednictvím nástroje pro živý chat. Pomohou vám dokončit proces prostřednictvím služby PayPal.

Poslední část obsahuje několik možností pro vaši hostingovou službu, včetně preferovaného umístění datového centra a období předplatného.

Nyní, aby se minimalizovala vzdálenost mezi přenosem dat Sitegroundservery uživatele a vaše WooCommerce návštěvníci webu, vyberte umístění datového centra, které je nejblíže vaší cílové oblasti trhu.

Pak si vyberte další doplňkové služby, které chcete zahrnout do svého balíčku, a voila! To je vše, co potřebujete k nastavení Siteground účtu.

Jakmile budete hotovi, přihlaste se ke svému účtu a přejděte přímo do oblasti cPanel. Najdete výchozí automatický instalátor WordPress. Vyberte jej, zadejte své přihlašovací údaje WordPress a stiskněte tlačítko instalace.

Všimnete si, že proces instalace WordPressu trvá několik sekund, protože je vše automatizované. A poté, co je vše nastaveno, SiteGround vám poskytne správný název domény, ke kterému budete mít přístup, pokud chcete změnit věci na backendu svého webu.

Vytvoření vašeho online obchodu s Divi

Co je Divi?

Dobře, pokud jste to nezkusili, vsadím se, že jste o tom již slyšeli. Divi není obyčejný WooCommerce téma. Je to ve skutečnosti jedno z nejoblíbenějších témat WordPress na Elegant Themes. A zajímavé je, Divi is Elegantní témavlajkový produkt společnosti .

Co je tedy na tomto tématu zvláštního? A je na tom něco výjimečného DiviJe WooCommerce?

Na rozdíl od typických témat WordPress, Divi je spíše uceleným balením. To znamená, že kombinuje standardní funkce tématu s dalšími funkcemi, které se hodí Divi WooCommerce obchodů.

Nechápejte mě však špatně. Ačkoli DiviJe WooCommerce podpora je zde hlavním zaměřením, téma toho dokáže mnohem víc. V podstatě, Divi lze hladce integrovat s jakýmkoli typem webu díky široké škále rozložení webových stránek. Nejen elektronický obchod.

Aby toho nebylo málo, Divi přichází s vlastním intuitivním tvůrcem stránek WordPress plugin. Můžete jej použít k volnému přizpůsobení vašeho Divi WooCommerce ukládat bez jakéhokoli kódování.

Ve skutečnosti, Divi byl vyvinut pro začátečníky. Můžete tedy očekávat, že najdete elegantní ovládací panel s téměř žádnou křivkou učení. Uvědomit si celek trvá jen pár minut Divi ekosystém, nastavte jej a přizpůsobte DiviJe WooCommerce rozvržení.

???? Nakonec tedy budete moci zúročit Divije:

• Řada přizpůsobitelných rozvržení pro jakýkoli typ webu WordPress, včetně WooCommerce online obchody.
• Snadno použitelný Page Builder, který poskytuje řadu prvků webových stránek a možností návrhu.
• Flexibilní proces přizpůsobení bez jakékoli formy kódování. Dokonce i nováčci mohou pohodlně nastavit a vyladit plně funkční Divi WooCommerce obchodů.
• Jednoduchá integrace WordPress. Divi je jedním z mála externích témat WordPress, které lze bez problémů nainstalovat bez jakýchkoli složitých úprav.
• Optimalizováno pro elektronický obchod WooCommerce šablony.

Divi Drag and Drop Page Builder

Jak jsme řekli, Divi přichází ve dvou různých příchutích. Když zaplatíte za členství na Elegantní motivy, najdete standard Divi Motiv na palubní desce doplněný o Divi Tvůrce stránek WordPress plugin.

Ale stojí za zmínku, že tento stavitel není vázán výhradně na Divi Téma. Přichází jako doplněk plugin na každý jednotlivý motiv získaný z Elegant Themes.

To znamená, že Divi WordPress Page Builder je editor přetahování s pokročilými možnostmi přizpůsobení. Umožňuje přesouvat a definovat prvky, sloupce, řádky a moduly bez jakýchkoli zkušeností s kódováním. Jinými slovy, je to typ stavitele a Divi WooCommerce začátečník by doufal, že se dostane.

Ale nenechte se mýlit. Ačkoliv Divi Page Builder cílí na začátečníky, je to editor, který také usnadňuje zkušeným vývojářům. Mohou systematicky kombinovat jeho vizuální funkce s ovládacími prvky CSS a prosazovat je Divi WooCommerce webové stránky na další úroveň.

Přemýšlejte však o tom, nepotřebujete vývojáře, aby navrhl všechny prvky ve vašem Divi WooCommerce uložit. Můžete se spolehnout pouze na vizuální funkce.

A víte co?

Divi dokonce se snaží celý proces značně usnadnit označením a barevným kódováním modulů rozvržení.

A když už jsme u toho, je zde další pozoruhodné ustanovení Divicelkové zjednodušení procesu přizpůsobení rozvržení. Pokud chcete například zavést novou sekci, stačí jediné kliknutí. Poté duplikování, odebírání a vkládání modulů pro vaše Divi WooCommerce obchod vám zabere jen několik kliknutí na tlačítka.

Mezitím, DiviOkno pro úpravy zobrazí změny rozložení vašeho webu v reálném čase. Budete moci vizuálně sledovat každou jednotlivou úpravu a uvidíte, jak ovlivní celkový vzhled vašeho návrhu Divi WooCommerce obchod.

Předurčeno Divi WooCommerce Rozvržení webových stránek

Abychom vás zachránili od bolestivě náročného procesu vytváření webových stránek od začátku, Divi Téma WordPress přichází s řadou předem navržených šablon stránek. A protože možná budete potřebovat různé možnosti rozvržení stejné šablony, Divi nabízí návrhy svých webových stránek jako komplexní balíčky. V důsledku toho získáte různé rozvržení šablony a barvy.

No, abych byl přesnější, Divi poskytuje asi 7-8 různých předem navržených rozvržení na každém balíčku webových stránek. Vzhledem k tomu, že každý z nich je plně postaven, můžete snadno přijmout rozvržení, aniž byste museli rozsáhle přepracovávat jejich základní strukturu. Stačí tu a tam pár úprav.

Nyní si najděte ten pravý pro vás WooCommerce online obchod, jednoduše procházejte různé kategorie stránek na Divi Téma. Případně můžete pomocí klíčových slov prohledat všechny možnosti najednou.

No, sečteno a podtrženo, identifikace vhodného netrvá dlouho Divi rozložení internetového obchodu. Stačí jej integrovat WooCommercea budete na cestě k nastavení atraktivního webu elektronického obchodu WordPress.

Pokračujeme, jedna obzvláště pozoruhodná věc, které si všimnete, je ta Divi nezaměřuje se pouze na vzhled. The WooCommerce rozvržení, která přicházejí s Divi Téma bylo vytvořeno s ohledem na funkčnost.

Takže kromě typických stránek obchodu, jako je pokladna, produkty a košík, Divi ve výchozím nastavení obsahuje moduly elektronického obchodu. Konkrétněji získáte sekce jako doporučené produkty, položky ve výprodeji a mnoho dalšího.

Is Divi Vhodné pro WooCommerce?

Konec konců, Divi je stále populárnější, protože se v zásadě jedná o řešení tématu WordPress typu vše v jednom.

Kombinované, Divi Tvůrce stránek a Divi Theme nabízí téměř vše, co potřebujete k nastavení jakéhokoli typu webu WordPress. A to včetně plně funkčního WooCommerce obchod se všemi základními funkcemi elektronického obchodu.

???? Ve zkratce, Divi je pro vás možnost, která stojí za zvážení WooCommerce web, protože:

• Můžete přizpůsobit své WooCommerce webové stránky prostřednictvím přetahovacího vizuálního editoru.
• Divi umožňuje uložit vaše vylepšení jako globální prvky napříč všemi rozvrženími.
• Dodává se s více než 20 dobře navrženými předpřipravenými rozvrženími webových stránek.
• Rozvržení můžete snadno exportovat a následně je využít na jiných webových stránkách.
• Můžete si navrhnout svůj WooCommerce úložiště s více sloupci, řádky a prvky obsahu.
• Vše WooCommerce rozvržení byla optimalizována pro mobilní zařízení.
• Stejně jako MS Word, úpravy textového obsahu jsou stejně jednoduché jako klikání a psaní.
• Celý proces přizpůsobení webu je sledován v reálném čase, což následně poskytuje živý náhled na všechny změny návrhu.
• WooCommerce rozvržení přicházejí s primárními stránkami internetového obchodu a moduly.

Krok 1: Zaregistrujte se s elegantními motivy, ke kterým získáte přístup Divi

Začněte tím, že půjdete na Produktová stránka Elegant Themes pro Divi WordPress téma. Tato stránka nabízí možnost demo tématu a tlačítko rychlého stažení. Elegant Themes prodává svá témata pomocí roční nebo jednorázové platební struktury, což je příjemné pro vývojáře s více klientskými weby nebo pro lidi, kteří provozují mnoho webových stránek elektronického obchodu. Opravdu si nemůžete koupit jen jedno téma, ale Osobní plán za 67 $ ročně je podobné tomu, co byste mohli platit za běžné téma, a pokud už podporu nechcete, můžete zastavit roční platby. Než se zavážete k platbě, klidně si s tématem pohrajte.

Krok 2: Instalace Divi na vašem webu WordPress

Jakmile se zaregistrujete, klikněte na tlačítko stažení motivu. Tím se motiv uloží do počítače jako soubor zip. Přejděte na kartu Vzhled na backendu vašeho webu WordPress a klikněte na možnost Motivy.

Krok 3: Klikněte na tlačítko Přidat nový

Klikněte na tlačítko Nahrát motiv. Najděte a nahrajte soubor zip motivu. Projděte procesem k úplné aktivaci motivu a poté byste měli být schopni vidět motiv na frontendu vašeho webu.

Krok 4: Nastavte svůj WooCommerce Obchod

Pokud jdete na Divi Stránka dokumentace tématu najdete téměř všechny nástroje a funkce, se kterými můžete na tématu pracovat, ale my se zaměříme především na vytvoření webové stránky elektronického obchodu. Jedno Divi téma Je plně kompatibilní s WooCommerce takže z toho můžete zobrazit všechny své produkty.

Úžasné je, že ta počáteční SiteGround registrace již nainstalována WooCommerce na vašem webu WordPress, takže se nemusíte starat o jeho instalaci nebo nastavení. Měl by být již k dispozici na vašem řídicím panelu.

Krok 5: Přidejte své první produkty do WooCommerce

Technicky již máte celý web elektronického obchodu nastaven, ale my chceme skutečně přidat některé produkty, aby to na frontendu vypadalo jako web elektronického obchodu. Přejděte na svůj řídicí panel WordPress a klikněte na kartu Produkty pod WooCommerce a klikněte na položku Přidat produkt.

Krok 6

Otevře se vám nová produktová stránka, kterou můžete vyplnit. Vypadá velmi podobně jako jakýkoli editor stránek WordPress, kromě toho, že můžete přidat název produktu, popis a doporučený obrázek, aby lidé viděli, jak produkt na vašem webu vypadá.

Krok 7: Prozkoumejte The WooCommerce Funkce

Pokud se posunete dolů pod oblast popisu, najdete vše možné WooCommerce funkce na hraní. Neváhejte upravit věci, jako jsou čísla SKU, inventář, ceny, doprava a atributy. Funkce jsou příliš rozsáhlé na to, abych je zde všechny nastínil, ale můžete přejít na WooCommerce dokumentace abyste porozuměli všemu, co můžete na svém webu elektronického obchodu nastavit.

Krok 8: Vytvořte domovskou stránku

Smyslem toho všeho je vytvořit domovskou stránku nebo běžná stránka, která obsahuje všechny vaše produkty, když se lidé objeví na vašem webu. Proto byste měli přejít na Stránky > Přidat nový na levé straně hlavního panelu WordPress.

Krok 9: Přidejte název pro svůj Divi Strana

Vytvořte název pro svou stránku. Klikněte na tlačítko Použít Tvůrce stránek nahoře a klepnutím na oblast Vložit moduly zahrňte záhlaví v plné šířce. Nemusíte si vybrat záhlaví v plné šířce, ale my se na to chystáme pro tento tutoriál.

Krok 10

Klepněte na tlačítko Záhlaví plné šířky.

Krok 11

Vyplňte podrobnosti pro název webu, text podnadpisu a barvu textu. Můžete dokonce změnit štítek správce, který je hlavně pro vaši vlastní referenci. Po dokončení stiskněte tlačítko Uložit.

Krok 12

Klepnutím na tři pruhy nalevo od modulu záhlaví Full Width změníte další nastavení.

Krok 13

Zde můžete dát záhlaví pěknou barvu pozadí a dokonce přidat video pro vaši společnost.

Krok 14

Nyní, když je záhlaví kompletní, můžeme zahrnout modul elektronického obchodu kliknutím na oblast Vložit sloupce.

Krok 15

Vyberte požadovaný počet sloupců a poté klikněte na možnost Vložit moduly, která se zobrazí. Vyberte tlačítko Obchod v dolní části.

Krok 16

Neváhejte upravit, jak chcete své produkty zobrazovat. Možná budete chtít zobrazit své nedávné produkty spolu s 12 položkami na stránce, několika sloupci a způsobem, jakým je chcete objednat. Klikněte na tlačítko Uložit.

Krok 17: Náhled a publikování

Po dokončení můžete kliknout na tlačítko Náhled nebo Publikovat a zobrazit změny na frontendu. Jak můžete vidět, produkty se zobrazují pěkně a vždy se můžete vrátit a změnit své produkty nebo nastavení obchodu na backendu WordPress. Gratulujeme!

Pokud máte nějaké dotazy ohledně nastavení Divi WordPress téma, dejte nám prosím vědět v sekci komentářů níže.

Proč investovat do čističky vzduchu?

A to je vše, co potřebujete k získání svého Divi WooCommerce provozování internetového obchodu pomocí a SiteGround hostingový účet.

Vpřed, můžete si být jisti SiteGround zvládne všechny důležité technické věci, jako jsou aktualizace WordPress a WooCommerce bezpečnostní. To je zásadní rozdíl mezi spravovanými WooCommerce hosting a běžná sdílená hostingová řešení. Poskytuje vám tedy tolik potřebný čas a prostor, abyste se mohli soustředit na sebe WooCommerce vedení prodejny.

A jak jsme již viděli, měla by to být hračka Divi téma. Vždy máte přístup ke svému Divi WooCommerce rozvržení z vašeho backendu WordPress, abyste jej mohli dále přizpůsobit. Pokud si budete přát, můžete dokonce celý design úplně změnit posunutím na jiné rozložení, které zvládne a WooCommerce obchod také. Volba je na tobě.

Pokud máte nějaké dotazy ohledně nastavení Divi Téma WordPress, dejte nám prosím vědět v sekci komentářů níže.