Hoe om 'n fantastiese aanlynwinkel te skep met WooCommerce, Divi en SiteGround (Julie 2021)

Meer as 74 miljoen webwerwe is afhanklik van die WordPress-platform om hul blogs te huisves, hul produkte te verkoop of om hul daaglikse besprekings vir die wêreld te skryf. As u begin met die bou van u e-handelswebwerf u het beslis baie keuses om te maak, en WordPress hou hiermee verband.

Watter een van die belangrikste e-handelsplatforms sal u kies? Beplan u 'n tema om u produkte te verkoop, of is daar iemand wat u kan betaal om die webwerf van nuuts af te bou? Heck, wat beplan u om op u e-handelswebwerf te verkoop?

Nota van die redakteur: Hierdie pos is oorspronklik op 15 Januarie 2015 gepubliseer en is heeltemal opgeknap en opgedateer vir akkuraatheid en omvattendheid.

Daar is duisende tot miljoene WordPress-temas om van te kies as u op soek is na die frontend- en backend-struktuur om aanlyn te begin verkoop. Byna dieselfde met hosting (maar ons verkies SiteGround or BlueHost).

Die beste temas bevat vinnige en maklike bestuurshulpmiddele vir e-handel sodat u produkte kan oplaai en dinge soos afslag, belonings, knoppies en produkbladsye kan bestuur. U tema is ook die eerste ding wat mense sal sien as hulle u webwerf besoek. Dit lei hulle deur die proses en dra regtig die verskil tussen iemand wat tevrede is met die ervaring of nie.

In kort, WordPress-temas is deurslaggewend, en die Divi WordPress-tema van elegante temas is 'n redelik mooi opsie om na te dink. Dit kan gebruik word vir 'n standaard besigheidswebwerf, maar dit bevat ook integrasies vir e-handel verkoop en vinnige verkoopprosesse. Kom ons leer hoe om 'n aanlynwinkel met die Divi WordPress-tema.

Kry eers u domein en hosting

💡Die eerste stap in enige proses van die skepping van 'n webwerf is om 'n gasheerrekening, domeinnaam en WordPress op die webwerf te installeer. Divi is nie anders nie. Daar is baie maniere om hosting- en domeinname te kry, maar ek dink persoonlik SiteGround is een van die veiligste en betroubaarste opsies. (Vir meer besonderhede, kyk na ons volledige inligting SiteGround hersien).

Wat regtig cool is, is dit SiteGround bied 'n gespesialiseerde bestuur WooCommerce hosting dienspakket met omtrent alles wat u nodig het om aanlyn te begin verkoop. Binne die pakket kan u besluit om óf die StartUp Plan vir beginners, GrowBig Plan vir groeiende ondernemings, of GoGeek vir gevestig WooCommerce winkels.

Elk van hierdie bied gevorderde funksies vir die optimalisering van u WooCommerce webwerf teen 'n redelike prys.

Dit gesê, 'n ander hosting diens waarvoor ons sterk aanbeveel Divi WooCommerce winkels is BlueHost. Alhoewel die funksies hier nie ooreenstem met nie SiteGround's, kry jy nog steeds WooCommerce-gerigte hosting deur middel van sy WordPress e-handelspakket. Die planne kan gemaklik hanteer a Divi WooCommerce winkel, maar ongelukkig kry u nie bestuurde dienste nie.

???? Laat ons nou, ter wille van die duidelikheid, voortgaan SiteGround...

Hoe kom u aan die gang?

Gaan na die SiteGround Bestuur WooCommerce Hosting kies 'n ideale plan en klik Kry plan.

Na my mening is die GoGeek Plan lyk die geskikste opsie aangesien dit onbeperk ondersteun WooCommerce webwerwe met gevorderde e-handel-vermoëns. Afgesien van meer bedienerkrag, kry u prioriteitsteun, WordPress-opstelling, back-up op aanvraag en superchacher-hulpbronne, sowel as gratis webwerfoordragte en Cloudflare CDN, onder andere soliede funksies.

???? Wat die toelae vir hulpbronne betref, is hierdie plan die volgende:

  • 6 GB posbus
  • 1 GB databasisberging
  • SSD berging
  • Ongemeterde data-oordrag
  • 30GB stoorplek
  • Tot 100,000 maandelikse besoeke

Hou in gedagte dat hierdie diens begin by $ 11.95 per maand, en dit lyk baie soos u 'n gewone WordPress-webwerf op 'n BlueHost-gasheerrekening sou installeer.

Maar onthou, dit is 'n spesiale prys vir beginners. Verwag dat dit sal toeneem tot $ 34.95 vir toekomstige hernuwings, wat steeds 'n redelike bedrag is as u al die funksies wat u oor die lang termyn kry, oorweeg.

Nadat u u voorkeurplan gekies het, SiteGround sal u na die domeinregistrasie-bladsy lei. As u reeds 'n domein het, kies die tweede opsie en voer die besonderhede in. Andersins, gaan voort met die registrasie van 'n nuwe domeinnaam teen $ 15.95 per jaar.

Die volgende fase is die laaste fase, waar u die keuse van u aanbiedingsopsies kies, sowel as u betalingsinligting en persoonlike besonderhede verstrek voordat u die rekening skep.

Wel, dit is natuurlik basiese dinge wat u al vele kere vantevore hanteer het. U moet dus nie probleme ondervind om u telefoonnommer, land, naam, e-pos, rekeningwagwoord, ens. In te voer nie.

Die betalinggedeelte vereis dat u u kredietkaartbesonderhede invul. U kan aangaan met een van die twee Ontdek, MasterCard or Visa.

En tog interessant, SiteGround PayPal noem nie, ondanks die toenemende gewildheid daarvan onder WooCommerce handelaars. Maar gelukkig blyk dit dat hulle PayPal-betalings kan aanvaar, hoewel indirek.

As dit u voorkeurmodus is, laat dan net die velde leeg en kontak SiteGroundse verkoopsagente deur middel van die live chat-instrument. Hulle sal u help om die proses deur PayPal te voltooi.

Die laaste afdeling bevat verskillende opsies vir u gasheerdiens, insluitend u voorkeurdatasentrumligging, plus die intekeningperiode.

Nou, om die data-oordragafstand tussen Sitegroundse bedieners en u WooCommerce besoekers van die werf, kies die ligging van die datasentrum wat die naaste aan u teikenmarkgebied is.

Kies dan enige ekstra byvoegingsdienste wat u in u pakket wil insluit, en voila! Dit is al wat nodig is om 'n Siteground rekening.

Sodra u klaar is, meld u rekening in en gaan direk na u cPanel-gebied. U sal 'n standaardinstelling van WordPress vind. Kies dit, voer u WordPress-aanmeldbesonderhede in en klik op die installeer-knoppie.

Wel, u sal sien dat die WordPress-installasieproses 'n paar sekondes duur, aangesien dit alles outomaties is. En nadat alles opgestel is, SiteGround gee u die regte domeinnaam om toegang te verkry as u dinge aan die agterkant van u webwerf wil verander.

Maak u aanlynwinkel met Divi

Wat is Divi?

Ok, as u dit nog nie probeer het nie, is ek seker dat u dit al gehoor het. Divi is geen gewone nie WooCommerce tema. Dit is trouens een van die gewildste WordPress-temas op Elegante temas. En, interessant, Divi is Elegante temase vlagskipproduk.

So, wat is so spesiaal aan hierdie tema? En is daar iets uitstaande aan? Divi'N WooCommerce?

Wel, anders as tipiese WordPress-temas, Divi is meer 'n omvattende pakket. Dit beteken dat dit standaardtematiese kenmerke kombineer met ekstra funksies wat handig te pas kom Divi WooCommerce winkels.

Wat is divi

Moet my egter nie verkeerd verstaan ​​nie. Alhoewel Divi'N WooCommerce ondersteuning is hier die belangrikste fokus, die tema kan veel meer as dit. In wese, Divi kan soomloos met enige soort webwerf geïntegreer word, danksy die wye verskeidenheid webwerf-uitlegte. Nie net e-handel nie.

Dan om dit af te vul, Divi kom met sy eie intuïtiewe plugin vir WordPress-bladsye. U kan dit gebruik om u Divi WooCommerce stoor sonder enige kodering.

In werklikheid, Divi is ontwikkel vir beginners. U kan dus verwag om 'n netjiese beheerpaneel te vind met byna geen leerkurwe nie. Dit neem net 'n paar minute om die geheel te laat val Divi ekosisteem, stel dit op en pas dit aan Divi'N WooCommerce uitlegte.

???? U kan dus uiteindelik gebruik maak van DiviIs:

  • Reeks van aanpasbare uitlegte vir enige WordPress-webwerf, insluitend WooCommerce aanlynwinkels.
  • Maklik om te gebruik Page Builder, wat 'n magdom webwerf-elemente en ontwerpfunksies bied.
  • Buigsame aanpassingsproses sonder enige vorm van kodering. Selfs beginners kan gemaklik funksioneel opstel en aanpas Divi WooCommerce winkels.
  • Reguit WordPress-integrasie. Divi is een van die min eksterne WordPress-temas wat naatloos geïnstalleer kan word sonder enige ingewikkelde aanpassings.
  • E-handel geoptimaliseer WooCommerce templates.

Divi Sleep-en-aflaai bladsybouer

Soos ons gesê het, Divi kom in twee verskillende geure voor. Wanneer u betaal vir lidmaatskap op Elegante temas, jy sal die standaard vind Divi Tema op die paneelbord, vergesel van die Divi WordPress Page Builder-inprop.

Maar dit is opmerklik dat hierdie bouer nie uitsluitlik aan die Divi Tema. Dit kom as 'n bykomende inprop vir elke tema wat u van Elegant Themes verkry.

Dit gesê, die Divi WordPress Page Builder is 'n sleep-en-neerlê-redakteur met gevorderde aanpassingsfunksies. Dit laat u toe om elemente, kolomme, rye en modules te skuif en te definieer sonder enige koderingservaring. Met ander woorde, dit is die tipe bouer a Divi WooCommerce beginner sou hoop om te kry.

divi instellings

Maar moet geen fout maak nie. Alhoewel die Divi Page Builder is gerig op beginners, dit is 'n redakteur wat ook ervare ontwikkelaars vergemaklik. Hulle kan sy visuele kenmerke stelselmatig kombineer met CSS-bedieningspanele om dit te versterk Divi WooCommerce webwerwe na die volgende vlak.

Kom dink daaraan, u het nie 'n ontwikkelaar nodig om al die elemente in u ontwerp te ontwerp nie Divi WooCommerce stoor. U kan alleen op visuele funksionaliteite staatmaak.

En weet jy wat?

Divi poog selfs om die hele proses baie makliker te maak deur etikette en kleure-kodering van die uitlegmodules daarvan.

En gepraat daarvan, is 'n ander noemenswaardige bepaling hier Divise algemene vereenvoudiging van die aanpassingsproses van die uitleg. As u byvoorbeeld 'n nuwe afdeling wil bekendstel, moet 'n enkele klik gedoen word. Kopieer, verwyder en voeg dan modules vir u in Divi WooCommerce winkel sal net 'n paar knoppies klik.

Intussen het Divise redigeringsvenster sal u werf se uitlegveranderings in realtime vertoon. U sal elke aanpassing visueel kan volg en sien hoe dit die algemene vooruitsigontwerp van u beïnvloed Divi WooCommerce winkel.

Voorontwerp Divi WooCommerce Webwerf-uitlegte

Om u te red van die pynlik veeleisende proses om 'n webwerf van nuuts af te skep, het die Divi WordPress-tema word voorsien van 'n aantal vooraf ontwerpte werfsjablone. En omdat u verskillende uitlegopsies van dieselfde sjabloon benodig, Divi bied sy webwerfontwerpe as omvattende pakkette aan. Gevolglik kry u verskillende sjabloonuitlegte en kleure.

Om presies te wees, Divi bied ongeveer 7-8 verskillende vooraf ontwerpte uitlegte op elke webwerfpakket. Aangesien elkeen volledig gebou is, kan u die uitleg maklik aanvaar sonder om die onderliggende struktuur deeglik te herwerk. Jy is net hier en daar 'n paar aanpassings.

divi webwerf-uitlegte

Om nou 'n perfekte een vir u te vind WooCommerce aanlynwinkel, blaai eenvoudig deur die verskillende webwerfkategorieë op die Divi Tema. Of gebruik die sleutelwoorde om gelyktydig deur al die opsies te soek.

Wel, in die geheel neem dit nie lank om 'n geskikte te identifiseer nie Divi aanlyn winkel uitleg. U moet dit net integreer met WooCommerce, en u is op pad om 'n aantreklike WordPress-e-commerce-webwerf op te stel.

As u verder gaan, is dit veral iets wat u sal opmerk Divi konsentreer nie op die voorkoms alleen nie. Die WooCommerce uitlegte wat saam met die Divi Tema is ook gebou met funksionaliteit in gedagte.

Dus, benewens tipiese winkelbladsye soos afhandeling, produkte en wa, Divi sluit standaard e-handelsmodules in. Meer spesifiek, u kry afdelings soos gewilde produkte, te koop items en nog baie meer.

Is Divi Geskik vir WooCommerce?

Alles in ag genome, Divi word toenemend gewild omdat dit in wese 'n alles-in-een WordPress-temaprobleem is.

Gekombineer, die Divi Bladsybouer en Divi tema aanbieding bied bykans alles wat u nodig het om enige WordPress-webwerf op te stel. En dit sluit 'n ten volle funksionele in WooCommerce stoor met al die kernfunksies vir e-handel.

???? In 'n neutedop, Divi is 'n opsie wat die moeite werd is om te oorweeg vir u WooCommerce webwerf omdat:

  • U kan u WooCommerce webwerf deur middel van 'n visuele redakteur met sleep en sleep.
  • Divi stel u in staat om u aanpassings as globale elemente in al die uitlegte te stoor.
  • Dit bevat meer as 20 goed ontwerpte voorafgeboude webwerf-uitlegte.
  • U kan die uitlegte maklik uitvoer en dit dan op ander webwerwe gebruik.
  • U kan u ontwerp WooCommerce stoor met verskeie kolomme, rye en inhoudselemente.
  • Almal WooCommerce uitlegte is geskik vir mobiele toestelle.
  • Net soos MS Word, teksredigering is so eenvoudig soos klik en tik.
  • Die hele proses van aanpassing van webwerwe word intyds opgespoor, wat 'n direkte voorskou bied van al die ontwerpwysigings.
  • WooCommerce uitlegte bevat primêre aanlynwinkelbladsye en -modules.

Stap 1: Aanmelding met elegante temas om toegang tot te kry Divi

Begin deur na die Elegante temas-produkbladsy vir die Divi WordPress-tema. Hierdie bladsy bied die opsie vir 'n temademonstrasie en 'n vinnige aflaaiknoppie. Elegant Temas verkoop sy temas met behulp van 'n jaarlikse of eenmalige betalingstruktuur, wat goed is vir ontwikkelaars met verskeie kliëntewebwerwe of mense wat talle e-handelswebwerwe bedryf. U kan nie net een tema koop nie, maar die Persoonlike plan vir $ 67 per jaar is soortgelyk aan wat u vir 'n gewone tema kan betaal, en u kan die jaarlikse betalings stop as u nie meer die steun wil hê nie. Speel gerus met die tema voordat u tot die betaling verbind.

Divi WordPress tema

Stap 2: Installeer Divi op u WordPress-werf

Sodra u aangesluit het, klik op die aflaai-knoppie vir die tema. Dit plaas die tema as 'n zip-lêer op u rekenaar. Gaan na die blad Voorkoms op die agterkant van u WordPress-webwerf, en klik op die Tema-opsie.

Wordpress nuwe tema

Stap 3: Klik op die Voeg 'n nuwe knoppie toe

Wordpress voeg 'n nuwe tema by

Klik op die Upload-tema-knoppie. Soek en laai die tema-zip-lêer op. Gaan deur die proses om die tema volledig te aktiveer en dan moet u die tema aan die voorkant van u webwerf kan sien.

Wordpress tema oplaai

Stap 4: Stel u WooCommerce Store

As jy na die Divi Tema dokumentasie bladsy vind u byna elke instrument en funksie waarmee u die tema kan werk, maar ons gaan veral fokus op die opstel van 'n e-handelswebwerf. Die Divi tema volledig versoenbaar is met WooCommerce sodat u al u produkte daaruit kan vertoon.

Wat wonderlik is, is dat die eerste SiteGround aanmelding reeds geïnstalleer WooCommerce op u WordPress-webwerf, sodat u nie hoef te bekommer oor die installering of instelling daarvan nie. Dit behoort reeds in u paneelbord beskikbaar te wees.

Stap 5: Voeg u eerste produkte by WooCommerce

U het tegnies reeds die e-handelswerf al opgestel, maar ons wil eintlik produkte byvoeg sodat dit lyk soos 'n e-handelswerf op die frontend. Gaan na u WordPress-paneelbord, klik op die blad Produkte onder WooCommerce en klik op die item Voeg produk toe.

WooCommerce voeg nuwe produk by

stap 6

Dit skep 'n nuwe produkbladsy wat u kan invul. Dit lyk baie soos enige WordPress-bladsyredakteur, behalwe dat u 'n produknaam, beskrywing en 'n voorgestelde prentjie kan byvoeg, sodat mense kan sien hoe die produk op u webwerf lyk.

E-handel voeg 'n nuwe produkvelde by

Stap 7: Verken die WooCommerce Kenmerke

As u onder die beskrywingsarea afrol, vind u alle moontlike WooCommerce funksie om mee rond te speel. Wysig gerus dinge soos SKU-nommers, voorraad, pryse, versending en eienskappe. Die funksies is heeltemal te groot vir my om hulle almal hier uiteen te sit, maar u kan na die WooCommerce dokumentasie bladsy om alles te verstaan ​​wat u op u e-handelswebwerf kan opstel.

WooCommerce kenmerke

Stap 8: Skep die tuisblad

Die hele punt hiervan is om skep 'n tuisblad of gewone bladsy wat al u produkte bevat wanneer mense op u webwerf verskyn. Daarom moet u na Bladsye> Nieuw byvoeg aan die linkerkant van u WordPress-paneelbord gaan.

Wordpress nuwe bladsy

Stap 9: Voeg 'n titel vir u Divi bladsy

Skep 'n titel vir u bladsy. Klik op die Use Page Builder-knoppie aan die bokant en tik op die Insert Modules-gebied om 'n volledige kopbreedte in te voeg. U hoef nie 'n kopbal met volledige breedte te kies nie, maar ons gaan dit doen.

Bladsybouer wordpress

stap 10

Klik op die Full Width Header-knop.

Voeg 'n kop by

stap 11

Vul die besonderhede in vir u werftitel, teks onderopskrif en tekskleur. U kan selfs die admin-etiket verander, wat hoofsaaklik vir u eie verwysing is. Klik op die Stoor-knoppie as u klaar is.

Aanpassing van die kopstuk

stap 12

Tik op die drie balkies aan die linkerkant van die volledige breedte-kopmodule om meer instellings te verander.

WordPress woocommerce setup

stap 13

Hier kan u die kop 'n mooi agtergrondkleur gee en selfs 'n video vir u onderneming insluit.

Tik hierdie knoppies rond

stap 14

Noudat die koptekst voltooi is, kan ons die e-handelsmodule insluit deur op die Invoeg kolomme-area te klik.

Wordpress-e-handelsopstelling

stap 15

Kies hoeveel kolomme u wil hê, en klik dan op die Insert Modules-opsie wat verskyn. Kies die winkelknoppie onderaan.

Wordpress-e-handelsopstelling

stap 16

Verander u hoe u u produkte wil vertoon. U wil dus moontlik u onlangse produkte wys, saam met 12 items op die bladsy, 'n paar kolomme en hoe u dit wil bestel. Klik op die Stoor-knoppie.

Wordpress-e-handelsopstelling

Stap 17: Voorbeeld en publikasie

Sodra dit voltooi is, kan u op die Voorbeeld of Publiseer-knoppie klik om veranderinge aan die voorkant te sien. Soos u kan sien, verskyn die produkte mooi, en u kan altyd teruggaan om u produkte of winkelfrontinstellings op die WordPress-backend te verander. Baie geluk!

As u enige vrae het oor die opstel van die Divi WordPress tema, laat ons asseblief weet in die kommentaar afdeling hieronder.

Gevolgtrekking

En dit is al wat nodig is om u te kry Divi WooCommerce aanlynwinkel met 'n SiteGround hosting rekening.

As u vorentoe beweeg, kan u daarop gerus wees SiteGround sal al die kritieke tegniese dinge soos WordPress-opdaterings en WooCommerce sekuriteit. Dit is die fundamentele verskil tussen bestuur WooCommerce hosting en gereelde oplossings vir gedeelde hosting. Dit gee u dus die broodnodige tyd en ruimte om op u te fokus WooCommerce winkelbestuur.

En soos ons reeds gesien het, behoort dit 'n briesie te wees met die Divi tema. U kan altyd toegang tot u Divi WooCommerce uitleg vanaf u WordPress-agterkant om dit verder aan te pas. As u wil, kan u die hele ontwerp selfs heeltemal verander deur na 'n ander uitleg te skuif wat 'n WooCommerce stoor ook. Die keuse is joune.

As u enige vrae het oor die opstel van die Divi WordPress-tema, laat weet ons asseblief in die kommentaar hieronder.

Divi
Waardering: 5.0 - Hersiening deur

Catalin Zorzini

Ek is 'n webontwerpblogger en het hierdie projek begin nadat ek 'n paar weke lank gesukkel het om uit te vind wat dit is die beste e-handelsplatform vir myself. Kyk na my stroom top 10 e-handelaars vir e-handelaars.