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

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?

Redakteursnota: Hierdie boodskap 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 Ground 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 twee 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 die verkoop van e-handel en vinnige verkoopprosesse. Kom ons leer hoe om 'n aanlynwinkel met die Divi WordPress-tema te skep.

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. twee is nie anders nie. Daar is baie maniere om hosting- en domeinname te kry, maar ek dink persoonlik dat SiteGround een van die veiligste en betroubaarste opsies is. (Vir meer besonderhede, kyk na ons uitgebreide SiteGround review).

Wat regtig cool is, is dat SiteGround 'n gespesialiseerde bied bestuurde 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 gevestigde WooCommerce-winkels.

Elk van hierdie opsies bied gevorderde funksies om u WooCommerce-webwerf te optimaliseer teen 'n billike prys.

Dit gesê, is nog 'n gasheerdiens wat ons vir Divi WooCommerce-winkels aanbeveel BlueHost. Alhoewel die funksies hier nie ooreenstem met SiteGround's nie, kry u steeds die WooCommerce-hosting deur sy WordPress-e-handelspakket. Die planne kan 'n Divi WooCommerce-winkel gemaklik hanteer, maar ongelukkig kry u nie bestuurde dienste nie.

???? Laat ons nou, met die oog op die duidelikheid, voortgaan met SiteGround ...

Hoe kom u aan die gang?

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

Na my mening is die GoGeek Plan lyk soos die mees geskikte opsie, aangesien dit onbeperkte WooCommerce-webwerwe met gevorderde e-handelsfunksies ondersteun. 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, Ground 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, Ground lys nie PayPal nie, ondanks die groeiende gewildheid onder WooCommerce-handelaars. Maar gelukkig blyk dit dat hulle PayPal-betalings kan aanvaar, hoewel indirek.

As dit u voorkeurmodus is, los dan die velde leeg en kontak die verkoopsagente van SiteGround via die regstreekse chat-instrument. Dit help u om die proses deur PayPal te voltooi.

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

Om nou die data-oordragafstand tussen Siteground se bedieners en besoekers van u WooCommerce-webwerf te verminder, kies die ligging van die datasentrum wat die naaste aan u teikenmarkarea is.

Kies dan enige ekstra bykomende dienste wat u in u pakket wil insluit, en voila! Dit is al wat nodig is om 'n Siteground-rekening op te stel.

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.

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

Skep 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. twee is geen gewone WooCommerce-tema nie. Dit is trouens een van die gewildste WordPress-temas oor elegante temas. En interessant genoeg is Divi Elegante temase vlagskipproduk.

Wat is so spesiaal aan hierdie tema? En is daar iets uitstaande aan Divi's WooCommerce?

In teenstelling met tipiese WordPress-temas, is Divi meer 'n omvattende pakket. Dit beteken dat dit standaardtema-funksies kombineer met ekstra funksionaliteite wat nuttig is vir Divi WooCommerce-winkels.

wat is divi

Moet my egter nie verkeerd doen nie. Alhoewel Divi se WooCommerce-ondersteuning hier die hooffokus is, is die tema baie meer as dit. In wese kan Divi naadloos met elke soort webwerf geïntegreer word, danksy sy wye verskeidenheid webwerf-uitlegte. Nie net e-handel nie.

Dan kom Divi met sy eie intuïtiewe WordPress-bladsybouer-inprop. U kan dit gebruik om u Divi WooCommerce-winkel vrylik aan te pas sonder om te kodering.

In werklikheid is Divi ontwikkel vir beginners. U kan dus verwag om 'n netjiese bedieningspaneel met bykans geen leerkurwe te vind nie. Dit neem net 'n paar minute om die hele Divi-ekosisteem te haal, dit op te stel en Divi se WooCommerce-uitlegte aan te pas.

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

  • Verskeie aanpasbare uitlegte vir enige soort 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 Divi WooCommerce-winkels volledig funksioneel en aanpas.
  • Reguit WordPress-integrasie. Divi is een van die min eksterne WordPress-temas wat naatloos geïnstalleer kan word sonder enige ingewikkelde aanpassings.
  • WooCommerce-sjablone vir e-handel geoptimaliseer.

Divi sleep- en bladsybouer

Soos ons al gesê het, kom Divi in ​​twee verskillende smake. Wanneer u betaal vir lidmaatskap op Elegante temas, u vind die standaard Divi-tema op die dashboard, vergesel van die Divi WordPress Page Builder-inprop.

Maar dit is opmerklik dat hierdie bouer nie uitsluitlik aan die Divi-tema gekoppel is nie. Dit is 'n bykomende inprop vir elke tema wat verkry word van Elegante temas.

Dit gesê, die Divi WordPress Page Builder is 'n sleep-en-drop-redigeerder met gevorderde aanpassingsvermoëns. 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 wat 'n Divi is WooCommerce beginner sou hoop om te kry.

divi-instellings

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

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

En weet jy wat?

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

En hiervan gepraat, is nog 'n noemenswaardige bepaling Divi se algehele vereenvoudiging van die uitleg-aanpassingsproses. As u byvoorbeeld 'n nuwe afdeling wil bekendstel, moet u dit met 'n enkele klik doen. Deur die duplisering, verwydering en invoeging van modules vir u Divi WooCommerce-winkel, sal u slegs enkele knoppies klik.

Intussen sal Divi se redigeringsvenster intyds vertoon. U kan elke aanpassing visueel opspoor en sien hoe dit die algemene vooruitsigte van u Divi WooCommerce-winkel beïnvloed.

Voorafgestelde Divi WooCommerce-webwerwe-uitlegte

Om u te red van die pynlik veeleisende proses om 'n webwerf van nuuts af te skep, kom die Divi WordPress Theme met 'n magdom voorontwerpte webwerf-sjablone. En aangesien u verskillende uitlegopsies van dieselfde patroon benodig, bied Divi sy webwerfontwerpe as uitgebreide pakkette. Gevolglik kry u verskillende sjabloonuitlegte en kleure.

Om noukeuriger te wees, Divi bied ongeveer 7-8 verskillende vooraf ontwerpte uitlegte op elke webwerfpakket. As u in ag neem dat elkeen volledig gebou is, kan u die uitlegte maklik aanvaar sonder om hul onderliggende struktuur breedvoerig te verwerk. Julle net 'n paar aanpassings hier en daar.

divi-webwerf-uitlegte

Om nou 'n perfekte een vir u WooCommerce-aanlynwinkel te vind, blaai eenvoudig deur die verskillende kategorieë vir die Divi-tema. Of gebruik alternatiewelik sleutelwoorde om tegelyk deur al die opsies te soek.

Wel, in die geheel neem dit nie lank om 'n geskikte te identifiseer nie twee aanlynwinkeluitleg. U hoef dit net met WooCommerce te integreer, en u is op pad om 'n aantreklike WordPress-e-handelswebwerf op te stel.

As u verder gaan, is een van die besonderse dinge wat u opmerk, dat Divi nie net op uitsigte fokus nie. Die WooCommerce-uitlegte wat met die Divi-tema gepaardgaan, is ook gebou met funksionaliteit in gedagte.

Dus, benewens tipiese winkelbladsye soos afrekening, produkte en wa, sluit Divi standaard e-handelsmodules in. Meer spesifiek, u kry afdelings soos voorgestelde produkte, artikels wat te koop is, en nog baie meer.

Is Divi geskik vir WooCommerce?

Wat alles in ag geneem word, word Divi toenemend gewild omdat dit fundamenteel 'n alles-in-een-WordPress-temaløsning is.

Die gekombineerde Divi Page Builder en Divi Tema aanbiedings bied omtrent alles wat u nodig het om enige tipe WordPress-webwerf op te stel. En dit bevat 'n volledig funksionele WooCommerce-winkel met al die kern-e-handelsvaardighede.

???? In 'n neutedop is Divi 'n opsie wat u moet oorweeg vir u WooCommerce-webwerf, want:

  • U kan u WooCommerce-webwerf aanpas deur middel van 'n sleep-en-drop-visuele redakteur.
  • Met Divi kan u u tweaks as globale elemente oor alle uitlegte 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 WooCommerce-winkel met verskeie kolomme, rye en inhoudelemente ontwerp.
  • Alle uitlegte van WooCommerce is geoptimaliseer 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 Divi te kry

Begin deur na die Elegante temas-produkbladsy vir die Divi WordPress-tema. Hierdie bladsy bied die opsie vir 'n temodemonstrasie en 'n vinnige aflaai-knoppie. Elegante 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 bestuur. 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-webwerf

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-winkel op

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 is ten volle versoenbaar met WooCommerce, sodat u al u produkte hiervan kan vertoon.

Wat verstommend is, is dat die aanvanklike SiteGround-aanmelding WooCommerce reeds op u WordPress-webwerf geïnstalleer het, sodat u nie hoef te bekommer oor die installering of instelling daarvan nie. Dit moet reeds in u instrumentpaneel beskikbaar wees.

Stap 5: Voeg u eerste produkte by WooCommerce

U het die e-handelswebwerf tegnies al opgestel, maar ons wil eintlik 'n paar produkte byvoeg sodat dit soos 'n e-handelswebwerf aan die voorkant lyk. Gaan na u WordPress-dashboard, klik op die Produk-oortjie onder WooCommerce en klik op die item Voeg produk toe.

WooCommerce voeg nuwe produkte 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-funksies

As u onder die beskrywingsgebied afrol, sal u elke moontlike WooCommerce-funksie vind om mee te speel. Verander gerus dinge soos SKU-nommers, voorraad, pryse, gestuur en attribute. Die funksies is te groot vir my om almal hier te kan omskryf, maar u kan na die WooCommerce dokumentasie bladsy om alles te verstaan ​​wat u op u e-handelswebwerf kan opstel.

WooCommerce-funksies

Stap 8: Skep die tuisblad

Die hele punt hiervan is om skep 'n tuisblad of gereelde bladsy met al u produkte wanneer mense op u webwerf verskyn. Daarom moet u na Pages> Nuwe byvoeg aan die linkerkant van u WordPress-dashboard.

Wordpress nuwe bladsy

Stap 9: Voeg 'n titel vir u Divi-bladsy by

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-opstelling

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 twee WooCommerce-aanlynwinkel is aan die gang met 'n SiteGround-gasheerrekening.

As u vorentoe beweeg, kan u gerus wees dat SiteGround alle belangrike tegniese dinge soos WordPress-opdaterings en WooCommerce sekuriteit. Dit is die fundamentele verskil tussen bestuurde WooCommerce-hosting en gereelde oplossings vir gedeelde hosting. Daarom gee dit u die nodige tyd en ruimte om op u WooCommerce-winkelbestuur te fokus.

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

Laat weet ons in die kommentaar-afdeling hieronder as u vrae het oor die opstel van die Divi WordPress-tema.

twee
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 huidige top 10 e-handelaars vir e-handelaars.