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

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 notat: Dette innlegget ble opprinnelig publisert 15. januar 2015 og har fullstendig fornyet og oppdatert for nøyaktighet og forståelse.

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 som du kan vurdere. Det kan brukes til et standard bedriftsnettsted, men det inkluderer også integrasjoner for netthandel og raske salgsprosesser. La oss lære å lage en nettbutikk med Divi WordPress-temaet.

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 personlig synes SiteGround er et av de mest sikre og pålitelige alternativene. (For mer informasjon, sjekk ut vårt omfattende SiteGround gjennomgang).

Det som virkelig er kult, er at SiteGround tilbyr en spesialisert administrert 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 etablerte WooCommerce-butikker.

Hver av disse tilbyr avanserte funksjoner for å optimalisere WooCommerce-nettstedet til en fornuftig pris.

Når det er sagt, er en annen hosting-tjeneste vi vil anbefale for Divi WooCommerce-butikker Bluehost. Selv om funksjonene her ikke samsvarer med SiteGround, får du fremdeles WooCommerce-fokusert hosting gjennom WordPress-e-handelspakken. Planene kan komfortabelt håndtere en Divi WooCommerce-butikk, men dessverre får du ikke administrerte tjenester.

👉 La oss fortsette med SiteGround for klarhetens skyld ...

Hvordan kommer du i gang?

Gå til SiteGround administrert 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 ubegrensede WooCommerce nettsteder med avanserte e-handelsfunksjoner. 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 sin domeneregistreringsside. Hvis du allerede eier et domene, velger du det andre alternativet og oppgir dets detaljer. Fortsett ellers fortsett med ny domenenavnsregistrering til $ 15.95 per år.

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-selgere. Men heldigvis viser det seg at de kan godta PayPal-betalinger, men indirekte.

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

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

Nå, for å minimere dataoverføringsavstanden mellom Sitegrounds servere og besøkende på WooCommerce-nettstedet, velger du datasenterplassen som er nærmest ditt målmarkedsområde.

Velg deretter eventuelle tilleggstjenester du vil inkludere 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 merke at installasjonen av WordPress tar noen sekunder siden det hele er automatisert. Og etter at alt er satt opp, vil SiteGround gi deg riktig domenenavn for å få tilgang til hvis du vil endre ting på baksiden av nettstedet.

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 noe vanlig WooCommerce-tema. Det er faktisk et av de mest populære WordPress-temaene på elegante temaer. Og interessant er det at Divi er det Elegant tema's flaggskip produkt.

Så, hva er så spesielt med dette temaet? Og er det noe enestående med Divis WooCommerce?

I motsetning til typiske WordPress-temaer, er Divi mer en omfattende pakke. Det betyr at den kombinerer standardtemafunksjoner med ekstra funksjonaliteter som kommer godt med for Divi WooCommerce-butikker.

hva er divi

Misforstå ikke. Selv om Divis WooCommerce-støtte er hovedfokuset her, er temaet i stand til mye mer enn det. I hovedsak kan Divi integreres sømløst med alle typer nettsteder, takket være det store utvalget av nettstedsoppsett. Ikke bare netthandel.

For å toppe det kommer Divi med sin egen intuitive WordPress-sidebygger-plugin. Du kan bruke den til å tilpasse Divi WooCommerce-butikken fritt uten koding i det hele tatt.

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

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

  • Utvalg 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 funksjonene i Divi WooCommerce.
  • Enkel WordPress-integrasjon. Divi er et av få eksterne WordPress-temaer som kan installeres sømløst uten kompliserte tweaks.
  • E-handelsoptimaliserte WooCommerce maler.

Divi Dra og slipp sidebygger

Som vi har sagt, kommer Divi i to forskjellige smaker. Når du betaler for medlemskap den Elegante temaer, du finner standard Divi Theme på dashbordet, ledsaget av Divi WordPress Page Builder plugin.

Men det er verdt å merke seg at denne byggherren ikke utelukkende er knyttet til Divi Theme. Det kommer som en ekstra plugin til hvert enkelt tema anskaffet fra Elegante temaer.

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

divi-innstillinger

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

Men tenk på det, du trenger ikke en utvikler for å designe alle elementene i Divi WooCommerce-butikken. 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 snakk om dette, en annen bemerkelsesverdig bestemmelse her, er Divis generelle forenkling av prosessen med tilpasning av layout. Hvis du for eksempel vil introdusere en ny seksjon, bør du gjøre et enkelt klikk. Så vil du duplisere, fjerne og sette inn moduler for Divi WooCommerce-butikken bare noen få knappeklikk.

I mellomtiden vil Divis redigeringsvindu vise nettstedets layoutendringer i sanntid. Du vil kunne spore hver enkelt justering visuelt, og se hvordan det påvirker den generelle utsiktsdesignen til Divi WooCommerce-butikken.

Forutbestemte Divi WooCommerce nettstedoppsett

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

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

divi-nettstedoppsett

Nå for å finne deg selv en perfekt en for din WooCommerce nettbutikk, blar du ganske enkelt gjennom de forskjellige stedskategoriene på Divi Theme. Eller 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 det med WooCommerce, og du er på vei til å sette opp et attraktivt WordPress-e-handelssted.

Når du går videre, er en spesielt fremragende ting du vil merke at Divi ikke fokuserer på utseende alene. WooCommerce-layoutene som følger med Divi Theme, er også bygget med funksjonalitet i tankene.

Så i tillegg til typiske butikksider som kassa, produkter og handlekurv, inkluderer Divi netthandelmoduler som standard. Mer spesifikt får du seksjoner som kjennetegnet produkter, salg til salgs og mye mer.

Er Divi egnet for WooCommerce?

Alt i betraktning blir Divi stadig mer populært fordi det i grunnen er en alt-i-ett WordPress-temaløsning.

Kombinert, Divi Page Builder og Divi tema Tilbudet gir stort sett alt du trenger for å sette opp en hvilken som helst WordPress-side. Og det inkluderer en fullt funksjonell WooCommerce-butikk med alle de viktigste e-handelsfunksjonene.

👉 I et nøtteskall er Divi et alternativ som er verdt å vurdere for WooCommerce-siden fordi:

  • Du kan tilpasse WooCommerce-nettstedet ditt gjennom en dra-og-slipp-visuell redigerer.
  • Divi lar deg lagre tweaks som globale elementer i alle oppsettene.
  • 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-butikk 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 leveres med primære nettbutikkesider og moduler.

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

Begynn med å gå til Elegant Themes produktside for Divi WordPress-temaet. Denne siden tilbyr alternativet for en temademono og en hurtig nedlastningsknapp. Elegante temaer selger temaene ved å bruke en årlig eller engangsbetalingsstruktur som er fin for utviklere med flere klientsider eller personer som driver flere netthandelnettsteder. 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.

Divi WordPress-tema

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.

Wordpress nytt tema

Trinn 3: Klikk på Legg til ny-knappen

Wordpress legger til nytt tema

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.

Wordpress temaopplasting

Trinn 4: Konfigurer WooCommerce Store

Hvis du går til Divi Theme dokumentasjonsside 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. Divi-temaet er fullt kompatibel med WooCommerce, slik at du kan vise alle produktene dine fra det.

Det som er fantastisk er at den første SiteGround-registreringen allerede har installert WooCommerce på WordPress-nettstedet, slik at du ikke trenger å bekymre deg for å installere eller konfigurere det. Det skal allerede være tilgjengelig i oversikten.

Trinn 5: Legg de første produktene dine til WooCommerce

Du har teknisk sett allerede e-handelsnettstedet oppsett, men vi vil faktisk legge til noen produkter for at det skal se ut som et netthandelsnettsted i front. Gå til WordPress-oversikten, klikk på kategorien Produkter under WooCommerce og klikk på Legg til produkt.

WooCommerce legger til nytt 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.

E-handel legg til et nytt produktfelt

Trinn 7: Utforsk funksjonene i WooCommerce

Hvis du blar nedover under beskrivelsesområdet, finner du alle mulige WooCommerce-funksjoner du kan leke med. Endre ting som SKU-nummer, varebeholdning, priser, frakt og attributter. Funksjonene er altfor store for at jeg skal skissere dem alle her, men du kan gå til WooCommerce dokumentasjonsside å forstå alt du kan konfigurere på e-handelsnettstedet ditt.

WooCommerce-funksjoner

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.

Wordpress ny side

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.

Sidebygger wordpress

Trinn 10

Klikk på knappen Full breddehode.

Legg til en overskrift

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.

Tilpasning av topptekst

Trinn 12

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

WordPress woocommerce-oppsett

Trinn 13

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

Finpusse disse knappene

Trinn 14

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

Wordpress e-handelsoppsett

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.

Wordpress e-handelsoppsett

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.

Wordpress e-handelsoppsett

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 er i gang og bruker en SiteGround-hostingkonto.

Når du beveger deg fremover, kan du være trygg på at SiteGround vil håndtere alle viktige tekniske ting som WordPress-oppdateringer og WooCommerce sikkerhet. Det er den grunnleggende forskjellen mellom administrert WooCommerce-hosting og vanlige delte hostingløsninger. Derfor gir det deg den mye tiltrengte tid og rom til å fokusere på WooCommerce-butikkadministrasjonen.

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

Hvis du har spørsmål om konfigurering av Divi WordPress-temaet, vennligst gi oss beskjed i kommentarfeltet nedenfor.

Divi
Vurdering: 5.0 - Gjennomgang av

Catalin Zorzini

Jeg er en webdesignblogger og startet dette prosjektet etter å ha brukt noen uker på å slite med å finne ut hvilket den beste e-handelsplattformen for meg selv. Sjekk ut strømmen min topp 10 e-handel byggherrer.