Hvordan lage en fantastisk nettbutikk med WooCommerce, Divi og SiteGround (2023)

Over 74 millioner nettsteder er avhengige av WordPress-plattformen for å være vertskap for bloggene deres, selge produktene sine eller bare skrive sine daglige innslag for verden å se. Når du begynner å bygge din netthandel du har helt sikkert mange valg å ta, og WordPress knytter seg til dette.

Hvilken av standout e-handelsplattformer vil du velge? Planlegger du å ta et tema for å selge produktene dine, eller er det noen du kan betale for å bygge siden helt fra grunnen av? Pokker, hva planlegger du selv å selge via nettstedet ditt for e-handel?

Redaktørens merknad: Dette innlegget ble opprinnelig publisert 15. januar 2015 og har blitt fullstendig oppdatert og oppdatert for nøyaktighet og omfattende.

Det er tusenvis til millioner WordPress-temaer å velge mellom når du ser etter frontend- og backend-strukturen for å begynne å selge på nettet. Nesten det samme med hosting (men vi foretrekker SiteGround or Bluehost).

De beste temaene inkluderer raske og enkle styringsverktøy for netthandel, slik at du kan laste opp produkter og administrere ting som rabatter, belønninger, knapper og produktsider. Temaet ditt er også det første folk vil se når de besøker nettstedet ditt. Det guider dem gjennom prosessen og bærer virkelig forskjellen mellom at noen er fornøyd med opplevelsen eller ikke.

Kort sagt, WordPress-temaer er avgjørende, og Divi WordPress-tema fra elegante temaer er et ganske pent alternativ for deg å vurdere. Den kan brukes til et standard bedriftsnettsted, men det inkluderer også integrasjoner for salg av e-handel og raske salgsprosesser. La oss lære å lage en nettbutikk med Divi WordPress-tema.

Få ditt domene og hosting først

????Det første trinnet i en hvilken som helst prosess for opprettelse av nettsteder er å ta tak i en hostingkonto, et domenenavn og installere WordPress på nettstedet. Divi er ikke annerledes. Det er mange måter å få hosting og domenenavn på, men jeg tror personlig SiteGround er et av de mest sikre og pålitelige alternativene. (For mer informasjon, sjekk ut vårt omfattende SiteGround anmeldelse).

Det som er kult er det SiteGround tilbyr en spesialisert fikk til WooCommerce Hosting servicepakke med stort sett alt du trenger for å begynne å selge på nettet. I pakken kan du nøye deg med enten StartUp Plan for nybegynnere, GrowBig Plan for voksende virksomheter, eller GoGeek for etablert WooCommerce butikker.

Hver av disse tilbyr avanserte funksjoner for å optimalisere din WooCommerce nettstedet til en rimelig pris.

Når det er sagt, en annen hostingtjeneste vi vil anbefale for Divi WooCommerce butikker er Bluehost. Selv om funksjonene her ikke stemmer overens med SiteGroundDu får det fortsatt WooCommerce-fokusert hosting gjennom sin WordPress e-handelspakke. Planene kan komfortabelt håndtere en Divi WooCommerce butikk, men dessverre får du ikke administrerte tjenester.

👉 For klarhets skyld, la oss fortsette med SiteGround...

Hvordan kommer du i gang?

Gå til SiteGround Forvaltes WooCommerce Hosting velg en ideell plan og klikk på Få plan.

Etter min mening er GoGeek Plan virker som det mest passende alternativet siden det støtter ubegrenset WooCommerce nettsteder med avanserte netthandelsmuligheter. Bortsett fra mer serverkraft, får du prioritert støtte, WordPress-iscenesettelse, sikkerhetskopiering på forespørsel og superchacher-ressurser, samt gratis nettstedoverføringer og Cloudflare CDN, blant andre solide funksjoner.

👉 Og for ressurspenger, rommer denne planen:

• 6 GB postkasse
• 1 GB databaselagring
• SSD lagring
• Uovervåket dataoverføring
• 30GB lagringsplass
• Opptil 100,000 XNUMX månedlige besøk

Husk at denne tjenesten starter på $ 11.95 per måned, og det er veldig likt hvordan du vil installere et vanlig WordPress-nettsted på en BlueHost-hostingkonto.

Men husk, det er en spesiell pris for nybegynnere. Regn med at den vil øke til 34.95 dollar i fremtidige fornyelser, noe som fremdeles er en rimelig kostnad hvis du vurderer alle funksjonene du får over lang tid.

Når du har valgt din foretrukne plan, SiteGround vil lede deg til domeneregistreringssiden. Hvis du allerede eier et domene, velg det andre alternativet og skriv inn detaljene. Ellers fortsett med registrering av nytt domenenavn til $15.95 i året.

Neste er den siste fasen, der du velger de foretrukne hostingalternativene dine, samt oppgir betalingsinfo og personlige detaljer før du oppretter kontoen.

Vel, selvfølgelig, dette er grunnleggende ting du har håndtert mange ganger før. Så du bør ikke ha noen problemer med å oppgi telefonnummer, land, navn, e-post, kontopassord osv.

Betalingsdelen krever at du oppgir kredittkortinformasjonen din. Du kan fortsette med begge Oppdag MasterCard or Visum.

Imidlertid, og ganske interessant, SiteGround viser ikke PayPal, til tross for den økende populariteten blant WooCommerce kjøpmenn. Men heldigvis viser det seg at de kan godta PayPal-betalinger, men indirekte.

Hvis dette er din foretrukne modus, er det bare å la feltene være tomme og kontakte SiteGroundsine salgsagenter gjennom live chat-verktøyet. De hjelper deg med å fullføre prosessen via PayPal.

Den siste delen inneholder flere alternativer for hosting-tjenesten din, inkludert ditt foretrukne datasenterplassering, pluss abonnementsperioden.

Nå, for å minimere dataoverføringsavstanden mellom Sitegroundservere og dine WooCommerce nettstedets besøkende, velg datasentrets beliggenhet som er nærmest målmarkedsområdet ditt.

Velg deretter ekstra tilleggstjenester du vil ha med i pakken din, og voila! Det er alt som trengs for å sette opp en Siteground konto.

Når du er ferdig, logger du på kontoen din og går rett til cPanel-området. Du finner et standard WordPress automatisk installasjonsprogram. Så velg det, skriv inn dine WordPress-påloggingsdetaljer og trykk på installeringsknappen.

Vel, du vil legge merke til at installasjonsprosessen for WordPress tar noen sekunder siden det hele er automatisert. Og etter at alt er satt opp, SiteGround vil gi deg riktig domenenavn å få tilgang til hvis du vil endre ting på baksiden av nettstedet ditt.

Opprette din nettbutikk med Divi

Hva er Divi?

Ok, hvis du ikke har prøvd det, vil jeg satse på at du allerede har hørt om det. Divi er ikke vanlig WooCommerce tema. Det er faktisk et av de mest populære WordPress-temaene på elegante temaer. Og interessant, Divi is Elegant tema's flaggskip produkt.

Så, hva er så spesielt med dette temaet? Og er det noe utestående med Divi'S WooCommerce?

Vel, i motsetning til typiske WordPress-temaer, Divi er mer en omfattende pakke. Det betyr at den kombinerer standard temafunksjoner med ekstra funksjoner som er nyttige for Divi WooCommerce butikker.

Ikke misforstå meg. Selv om Divi'S WooCommerce støtte er hovedfokus her, temaet er i stand til mye mer enn det. I hovedsak, Divi kan integreres sømløst med alle typer nettsteder, takket være det brede utvalget av nettstedsoppsett. Ikke bare e-handel.

Så for å toppe det, Divi kommer med sin egen intuitive WordPress-sidebygger plugin. Du kan bruke den til å fritt tilpasse din Divi WooCommerce lagre uten koding i det hele tatt.

Faktisk, Divi ble utviklet for nybegynnere. Så du kan forvente å finne et pent kontrollpanel med nesten ingen læringskurve. Det tar bare noen minutter å få tak i helheten Divi økosystemet, sett det opp og tilpasse Divi'S WooCommerce oppsett.

👉 Til slutt vil du derfor kunne dra nytte av Divi'S:

• Array av tilpassbare oppsett for alle typer WordPress-nettsteder, inkludert WooCommerce nettbutikker.
• Enkel å bruke Page Builder, som gir en rekke nettstedelementer og designfunksjoner.
• Fleksibel tilpasningsprosess uten noen form for koding. Selv nybegynnere kan komfortabelt sette opp og finjustere fullt funksjonelle Divi WooCommerce butikker.
• Enkel WordPress-integrasjon. Divi er et av de få eksterne WordPress-temaene som kan installeres sømløst uten kompliserte justeringer.
• E-handel-optimalisert WooCommerce maler.

Divi Dra og slipp sidebygger

Som vi har sagt, Divi kommer i to forskjellige smaker. Når du betaler for medlemskap på Elegante temaer, du finner standarden Divi Tema på dashbordet, ledsaget av Divi WordPress-sidebygger plugin.

Men det er verdt å merke seg at denne byggherren ikke er utelukkende knyttet til Divi Tema. Det kommer som et tillegg plugin til hvert enkelt tema anskaffet fra Elegant Themes.

Når det er sagt, Divi WordPress Page Builder er en dra-og-slipp-editor med avanserte tilpasningsfunksjoner. Det lar deg flytte og definere elementer, kolonner, rader og moduler uten noen kodingsopplevelse. Med andre ord, det er typen byggmester a Divi WooCommerce nybegynner håper å få.

Men gjør ingen feil. Selv om Divi Page Builder retter seg mot nybegynnere, det er en redaktør som også letter erfarne utviklere. De kan systematisk kombinere de visuelle funksjonene med CSS-kontroller for å presse sine Divi WooCommerce nettsteder til neste nivå.

Men tenk på det, du trenger ikke en utvikler for å designe alle elementene i din Divi WooCommerce oppbevare. Du kan stole på visuelle funksjonaliteter alene.

Og vet du hva?

Divi prøver til og med å gjøre hele prosessen mye enklere ved å merke pluss-koding av layoutmodulene.

Og når vi snakker om det, er det en annen bemerkelsesverdig bestemmelse her Divisin generelle forenkling av tilpasningsprosessen. Hvis du for eksempel vil introdusere en ny seksjon, bør et enkelt klikk gjøre det. Deretter dupliserer, fjerner og setter inn moduler for din Divi WooCommerce butikken tar bare noen få knappeklikk.

I mellomtiden, DiviRedigeringsvinduet for nettstedet viser endringene i layout i sanntid. Du vil være i stand til å spore hver eneste justering visuelt, og se hvordan det påvirker den generelle Outlook-designen til din Divi WooCommerce oppbevare.

Forutformet Divi WooCommerce nettstedet oppsett

For å redde deg fra den smertefullt krevende prosessen med å lage et nettsted fra bunnen av, har Divi WordPress Theme leveres med en rekke forhåndsdesignede sidemaler. Og siden du kanskje trenger forskjellige layoutalternativer for samme mal, Divi tilbyr sine nettsidesign som omfattende pakker. Derfor får du varierende maloppsett og farger.

For å være mer presis, Divi gir omtrent 7-8 forskjellige forhåndsdesignede oppsett på hver enkelt nettsidepakke. Tatt i betraktning at hver enkelt er fullbygd, kan du enkelt ta i bruk layoutene uten å omarbeide den underliggende strukturen. Du bare et par justeringer her og der.

Nå for å finne deg selv en perfekt for deg WooCommerce nettbutikk, bare bla gjennom de forskjellige sidekategoriene på Divi Tema. Alternativt kan du bruke nøkkelord for å søke gjennom alle alternativene samtidig.

Vel, alt i alt tar det ikke lang tid å identifisere en egnet Divi nettbutikkoppsett. Du trenger bare å integrere den med WooCommerce, og du vil være på vei til å sette opp et attraktivt WordPress netthandelsnettsted.

Når du går videre, er en spesielt fremragende ting du vil legge merke til at Divi fokuserer ikke på utseende alene. De WooCommerce oppsett som følger med Divi Tema er også bygget med tanke på funksjonalitet.

Så i tillegg til typiske butikksider som kasse, produkter og handlevogn, Divi inkluderer e-handelsmoduler som standard. Mer spesifikt får du seksjoner som utvalgte produkter, salgssaker og mye mer.

Is Divi Egnet for WooCommerce?

Alt tatt i betraktning, Divi blir stadig mer populær fordi det i utgangspunktet er en alt-i-ett WordPress-temaløsning.

Kombinert, den Divi Sidebygger og Divi tema tilbud gir stort sett alt du trenger for å sette opp alle typer WordPress-nettsteder. Og det inkluderer en fullt funksjonell WooCommerce butikk med alle kjernene til netthandel.

👉 I et nøtteskall, Divi er et alternativ det er verdt å vurdere for din WooCommerce nettsted fordi:

• Du kan tilpasse WooCommerce nettstedet gjennom et dra-og-slipp-visuelt redigeringsprogram.
• Divi lar deg lagre tilpasningene dine som globale elementer på tvers av alle oppsett.
• Det leveres med over 20 godt designet forhåndsbygde nettstedoppsett.
• Du kan enkelt eksportere layoutene og deretter utnytte dem på andre nettsteder.
• Du kan designe din WooCommerce lagre med flere kolonner, rader og innholdselementer.
• Alle WooCommerce oppsett er optimalisert for mobile enheter.
• Akkurat som MS Word, redigering av tekstinnhold er så enkelt som å klikke og deretter skrive.
• Hele nettstedtilpasningsprosessen spores i sanntid, og gir derfor en direkte forhåndsvisning av alle designendringene.
• WooCommerce oppsett kommer med primære nettbutikksider og moduler.

Trinn 1: Registrer deg med elegante temaer å få tilgang til Divi

Begynn med å gå til Elegant Themes produktside for Divi WordPress-tema. Denne siden tilbyr muligheten for en temademonstrasjon og en hurtignedlastningsknapp. Elegant Themes selger temaene sine ved hjelp av en årlig eller engangs betalingsstruktur, noe som er fint for utviklere med flere klientsider eller personer som driver mange netthandelsnettsteder. Du kan egentlig ikke kjøpe bare ett tema, men Personlig plan for $ 67 per år tilsvarer det du kan betale for et vanlig tema, og du kan stoppe de årlige utbetalingene hvis du ikke vil ha støtte lenger. Spill gjerne rundt temaet før du forplikter deg til betalingen.

Trinn 2: Installer Divi på ditt WordPress-nettsted

Når du har registrert deg, klikker du på nedlastingsknappen for temaet. Dette setter temaet som en zip-fil på datamaskinen din. Gå til Utseende-fanen på baksiden av WordPress-nettstedet ditt, og klikk på Temaer-alternativet.

Trinn 3: Klikk på Legg til ny-knappen

Klikk på knappen Last opp tema. Finn og last opp tema zip-filen. Gå gjennom prosessen for å aktivere temaet fullstendig, og da bør du kunne se temaet på fronten av nettstedet ditt.

Trinn 4: Sett opp din WooCommerce Butikk

Hvis du går til Divi Temadokumentasjonsside du finner omtrent alle verktøy og funksjoner du kan jobbe med på temaet, men vi kommer til å fokusere først og fremst på å sette opp et netthandelsnettsted. De Divi tema er fullt kompatibel med WooCommerce slik at du kan vise alle produktene dine fra det.

Det som er kjempebra er at initialen SiteGround registreringen allerede installert WooCommerce på WordPress-nettstedet ditt, slik at du ikke trenger å bekymre deg for å installere eller konfigurere det. Det skal allerede være tilgjengelig i dashbordet ditt.

Trinn 5: Legg til dine første produkter til WooCommerce

Du har teknisk sett allerede e-handel nettstedet alt oppsett, men vi vil faktisk legge til noen produkter for å få det til å se ut som et e-handels nettsted på frontend. Gå til WordPress-dashbordet ditt, klikk på Produkter-fanen under WooCommerce og klikk på Legg til produkt.

Trinn 6

Dette får opp en ny produktside som du kan fylle ut. Den ser veldig lik hvilken som helst WordPress-sideditor, bortsett fra at du kan legge til et produktnavn, beskrivelse og et omtalt bilde slik at folk kan se hvordan produktet ser ut på nettstedet ditt.

Trinn 7: Utforsk The WooCommerce Egenskaper

Hvis du ruller ned under beskrivelsesområdet, finner du alle mulige WooCommerce funksjon å leke med. Du er velkommen til å endre ting som SKU-nummer, varelager, priser, frakt og attributter. Funksjonene er altfor store til at jeg kan skissere dem alle her, men du kan gå til WooCommerce dokumentasjonsside å forstå alt du kan konfigurere på e-handelsnettstedet ditt.

Trinn 8: Lag hjemmesiden

Hele poenget med dette er å opprett en hjemmeside eller vanlig side som inneholder alle produktene dine når folk dukker opp på nettstedet ditt. Derfor bør du gå til Sider> Legg til nytt på venstre side av WordPress-dashbordet.

Trinn 9: Legg til en tittel for din Divi Side

Lag en tittel for siden din. Klikk på Bruk sidebygger-knappen øverst, og trykk på Sett inn moduler-området for å inkludere en topptekst i full bredde. Du trenger ikke å velge en topptekst i full bredde, men vi skal til denne opplæringen.

Trinn 10

Klikk på knappen Full breddehode.

Trinn 11

Fyll ut detaljene for nettstedstittelen, teksttekst og tekstfarge. Du kan til og med endre administrasjonsetiketten, som hovedsakelig er for din egen referanse. Trykk på Lagre-knappen når du er fullført.

Trinn 12

Trykk på de tre stolpene til venstre for toppmodulen Full bredde for å endre flere innstillinger.

Trinn 13

Her kan du gi overskriften en fin bakgrunnsfarge og til og med ta en video for selskapet ditt.

Trinn 14

Nå som overskriften er fullført, kan vi inkludere e-handelsmodulen ved å klikke på Sett inn kolonner-området.

Trinn 15

Velg hvor mange kolonner du vil ha, og klikk deretter på alternativet Sett inn moduler som vises. Velg Butikk-knappen nær bunnen.

Trinn 16

Endre gjerne hvordan du vil vise produktene dine. Så det kan være lurt å vise de nyeste produktene dine, sammen med 12 artikler på siden, noen få kolonner og hvordan du vil at de skal bestilles. Klikk på Lagre-knappen.

Trinn 17: Forhåndsvis og publiser

Når dette er fullført, kan du trykke på knappen Forhåndsvisning eller Publiser for å se endringer på fronten. Som du ser, vises produktene pent, og du kan alltid gå inn for å endre innstillingene for produktene eller butikken på WordPress-backend. Gratulerer!

Hvis du har spørsmål om å sette opp Divi WordPress tema, vennligst gi oss beskjed i kommentarfeltet nedenfor.

konklusjonen

Og det er alt som trengs for å få din Divi WooCommerce nettbutikk i gang med en SiteGround vertskonto.

Fremover kan du være trygg på det SiteGround vil håndtere alle kritiske tekniske ting som WordPress-oppdateringer og WooCommerce sikkerhet. Det er den grunnleggende forskjellen mellom administrert WooCommerce hosting og vanlige løsninger for delt hosting. Derfor gir det deg den sårt tiltrengte tiden og plassen til å fokusere på din WooCommerce butikkledelse.

Og som vi allerede har sett, bør det være en lek med Divi tema. Du kan alltid få tilgang til din Divi WooCommerce layout fra WordPress-backend for å tilpasse den ytterligere. Hvis du ønsker det, kan du til og med endre hele designet ved å skifte til en annen layout som kan håndtere en WooCommerce butikk også. Valget er ditt.

Hvis du har spørsmål om å sette opp Divi WordPress-tema, vennligst gi oss beskjed i kommentarfeltet nedenfor.