Sådan opretter du en fantastisk online butik med WooCommerce, Divi og SiteGround (maj 2020)

Over 74 millioner websteder er afhængige af WordPress-platformen for at være vært for deres blogs, sælge deres produkter eller bare skrive deres daglige mønstre for verden at se. Når du kommer i gang med at bygge din e-handelswebsted du har bestemt masser af valg at tage, og WordPress knytter sig til dette.

Hvilken af ​​standout e-handelsplatforme vil du vælge? Planlægger du at gribe fat i et tema for at sælge dine produkter, eller er der nogen, du kan betale for at bygge stedet fra bunden? Heck, hvad planlægger du endda at sælge via dit e-handelswebsted?

Redaktørens note: Dette indlæg blev oprindeligt offentliggjort den 15. januar 2015 og er helt opdateret og opdateret for nøjagtighed og forståelse.

Der er tusinder til millioner af WordPress-temaer at vælge imellem, når du kigger efter frontend- og backend-strukturen for at begynde at sælge online. Næsten det samme med hosting (men vi foretrækker det SiteGround or Bluehost).

De bedste temaer inkluderer hurtige og lette e-handelsstyringsværktøjer, så du kan uploade produkter og administrere ting som rabatter, belønninger, knapper og produktsider. Dit tema er også den første ting, som folk vil se, når de besøger dit websted. Det guider dem gennem processen og bærer virkelig forskellen mellem nogen at være tilfredse med oplevelsen eller ej.

Kort sagt, WordPress-temaer er afgørende, og Divi WordPress-tema fra elegante temaer er en temmelig flot mulighed, som du kan overveje. Det kan bruges til et almindeligt forretningswebsted, men det inkluderer også integrationer til e-handel og hurtige salgsprocesser. Lad os lære, hvordan man opretter en online shop med Divi WordPress-temaet.

Hent dit domæne og hosting først

💡Det første trin i enhver webstedsoprettelsesproces er at gribe en hosting-konto, domænenavn og installere WordPress på webstedet. Divi er ikke anderledes. Der er masser af måder at få hosting og domænenavne på, men jeg synes personligt, at SiteGround er en af ​​de mest sikre og pålidelige muligheder. (For flere detaljer, se vores omfattende SiteGround review).

Det, der virkelig er cool, er, at SiteGround tilbyder en specialiseret administreret WooCommerce hosting servicepakke med stort set alt hvad du har brug for for at begynde at sælge online. I pakken kan du nøjes med enten StartUp Plan for begyndere, GrowBig Plan til voksende virksomheder eller GoGeek til etablerede WooCommerce-butikker.

Hver af disse tilbyder avancerede funktioner til optimering af dit WooCommerce-websted til en rimelig pris.

Når det er sagt, er en anden hostingtjeneste, som vi stærkt vil anbefale til Divi WooCommerce-butikker, være BlueHost. Selvom funktionerne her ikke stemmer overens med SiteGround's, får du stadig WooCommerce-fokuseret hosting gennem sin WordPress-e-handelspakke. Planerne kan komfortabelt håndtere en Divi WooCommerce-butik, men desværre får du ikke administrerede tjenester.

???? Lad os fortsætte med SiteGround for klarhedens skyld ...

Hvordan kommer du i gang?

Gå til SiteGround-administreret WooCommerce-hosting vælg en ideel plan, og klik på Få plan.

Efter min mening er GoGeek Plan virker som den mest passende mulighed, da det understøtter ubegrænsede WooCommerce-websteder med avancerede e-handelsfunktioner. Bortset fra mere serverstyrke, får du prioriteret support, WordPress iscenesættelse, on-demand backup og superchacher ressourcer samt gratis webstedsoverførsler og Cloudflare CDN blandt andre solide funktioner.

???? Og hvad angår ressourcegodtgørelser, rummer denne plan:

  • 6 GB postkasse
  • 1 GB databaselagring
  • SSD-opbevaring
  • Uovervåget dataoverførsel
  • 30GB lagerplads
  • Op til 100,000 månedlige besøg

Husk på, at denne service starter ved $ 11.95 pr. måned, og det ligner meget, hvordan du installerer et almindeligt WordPress-sted på en BlueHost-hosting-konto.

Men husk, det er en særlig pris for begyndere. Forvent, at det vil stige til $ 34.95 i fremtidige fornyelser, hvilket stadig er en rimelig afgift, hvis du overvejer alle de funktioner, du får over lang tid.

Når du først har valgt din foretrukne plan, SiteGround vil lede dig til dens domæneregistreringsside. Hvis du allerede ejer et domæne, skal du vælge den anden mulighed og indtaste dets oplysninger. Ellers skal du fortsætte med ny domænenavnsregistrering til $ 15.95 om året.

Dernæst er den sidste fase, hvor du vælger dine foretrukne hostingmuligheder samt indtaster dine betalingsinfo og personlige oplysninger, før du opretter kontoen.

Dette er selvfølgelig basale ting, du har håndteret mange gange før. Så du skulle ikke have nogen problemer med at indtaste dit telefonnummer, land, navn, e-mail, kontoadgangskode osv.

Betalingsdelen kræver, at du indtaster dine kreditkortoplysninger. Du kan fortsætte med enten Opdag MasterCard or Visa.

Dog temmelig interessant, SiteGround angiver ikke PayPal på trods af sin voksende popularitet blandt WooCommerce-handlende. Men heldigvis viser det sig, at de kan acceptere PayPal-betalinger, dog indirekte.

Hvis dette er din foretrukne tilstand, skal du bare lade felterne være tomme og kontakte SiteGround's salgsagenter gennem live chat-værktøjet. De hjælper dig med at gennemføre processen gennem PayPal.

Det sidste afsnit indeholder flere muligheder for din hostingtjeneste, herunder din foretrukne datacenterplacering plus abonnementsperioden.

For at minimere dataoverførselsafstanden mellem Sitegrounds servere og dit besøgende på WooCommerce-webstedet skal du vælge den datacenterplacering, der er tættest på dit målmarkedsområde.

Vælg derefter eventuelle ekstra tilføjelsestjenester, du gerne vil inkludere i din pakke, og voila! Det er alt, hvad det kræver for at oprette en Siteground-konto.

Når du er færdig, skal du logge ind på din konto og gå direkte til dit cPanel-område. Du finder et standard WordPress-automatisk installationsprogram. Så vælg det, indtast dine WordPress login detaljer, og tryk på installationsknappen.

Nå, du vil bemærke, at WordPress-installationsprocessen tager et par sekunder, da det hele er automatiseret. Og når alt er konfigureret, vil SiteGround give dig det rigtige domænenavn til at få adgang til, hvis du vil ændre ting på bagsiden af ​​dit websted.

Oprettelse af din online butik med Divi

Hvad er Divi?

Okay, hvis du ikke har prøvet det, ved jeg, at du allerede har hørt om det. Divi er ikke noget almindeligt WooCommerce-tema. Det er faktisk et af de mest populære WordPress-temaer på elegante temaer. Og interessant nok er Divi det Elegant tema's flagskibsprodukt.

Så hvad så specielt ved dette tema? Og er der noget fremragende ved Divis WooCommerce?

I modsætning til typiske WordPress-temaer er Divi mere en omfattende pakke. Det betyder, at det kombinerer standard-temafunktioner med ekstra funktionaliteter, der er nyttige for Divi WooCommerce-butikker.

hvad er divi

Gør mig dog ikke forkert. Selvom Divis WooCommerce-support er det primære fokus her, er temaet i stand til meget mere end det. I det væsentlige kan Divi integreres problemfrit med alle typer websteder takket være det store udvalg af webstedslayouts. Ikke kun e-handel.

Herefter kommer Divi med sit eget intuitive WordPress-sidebygger plugin. Du kan bruge det til frit at tilpasse din Divi WooCommerce-butik uden nogen kodning overhovedet.

Faktisk blev Divi udviklet til begyndere. Så du kan forvente at finde et pænt kontrolpanel uden næsten ingen læringskurve. Det tager kun et par minutter at få fat i hele Divi-økosystemet, opsætte det og tilpasse Divis WooCommerce-layout.

???? I sidste ende vil du derfor kunne drage fordel af Divi'S:

  • En række tilpassede layout til enhver type WordPress-websted, herunder WooCommerce-online butikker.
  • Enkel at bruge Page Builder, som giver en række webstedelementer og designfunktioner.
  • Fleksibel tilpasningsproces uden nogen form for kodning. Selv nybegyndere kan komfortabelt opsætte og finjustere fuldt funktionelle Divi WooCommerce-butikker.
  • Lige WordPress-integration. Divi er et af de få eksterne WordPress-temaer, der kan installeres problemfrit uden komplekse tweaks.
  • E-handelsoptimerede WooCommerce skabeloner.

Divi Træk og slip side-builder

Som vi har sagt, kommer Divi i to forskellige varianter. Når du betaler for medlemskab den Elegante temaer, finder du standard Divi Theme på instrumentbrættet, ledsaget af Divi WordPress Page Builder plugin.

Men det er værd at bemærke, at denne bygherre ikke udelukkende er bundet til Divi-temaet. Det kommer som et ekstra plugin til hvert enkelt tema, der er erhvervet fra elegante temaer.

Når det er sagt, er Divi WordPress Page Builder en drag-and-drop-editor med avancerede tilpasningsmuligheder. Det giver dig mulighed for at flytte og definere elementer, kolonner, rækker og moduler uden nogen kodningsoplevelse. Med andre ord, det er den type bygherre, en Divi personalized name jewellery nybegynder håber at få.

divi-indstillinger

Men gør ingen fejl. Selvom Divi Page Builder er rettet mod begyndere, er det en editor, der også letter erfarne udviklere. De kan systematisk kombinere dets visuelle funktioner med CSS-kontroller for at skubbe deres Divi WooCommerce-websteder til det næste niveau.

Kom dog til at tænke på det, behøver du ikke en udvikler til at designe alle elementerne i din Divi WooCommerce-butik. Du kan kun stole på visuelle funktionaliteter.

Og ved du hvad?

Divi forsøger endda at gøre hele processen meget lettere ved at mærke plus farvekode dets layoutmoduler.

Og hvis vi taler om, en anden bemærkelsesværdig bestemmelse her, er Divis samlede forenkling af layouttilpasningsprocessen. Hvis du f.eks. Vil introducere et nyt afsnit, skal du gøre et enkelt klik. Derefter duplikerer, fjerner og indsætter moduler til din Divi WooCommerce-butik kun et par klik på dig.

I mellemtiden viser Divis redigeringsvindue dit websteds layoutændringer i realtid. Du kan spore hver enkelt justering visuelt og se, hvordan det påvirker det overordnede outlook-design af din Divi WooCommerce-butik.

Forududviklet Divi WooCommerce webstedslayouts

Divi WordPress Theme leverer en række forudindstillede webstedsskabeloner for at redde dig fra den smerteligt krævende proces med at oprette et websted fra bunden. Og da du muligvis har brug for forskellige layoutindstillinger af den samme skabelon, tilbyder Divi sine webstedsdesign som omfattende pakker. Derfor får du forskellige skabelonlayouter og farver.

For at være mere præcis leverer Divi omkring 7-8 forskellige foruddesignede layouts på hver eneste websidepakke. I betragtning af, at hver enkelt er fuldt bygget, kan du nemt vedtage layouterne uden at omarbejde deres underliggende struktur. Du bare et par tweaks her og der.

divi-webside-layout

Nu for at finde dig selv den perfekte til din WooCommerce onlinebutik, skal du blot rulle gennem de forskellige stedskategorier på Divi Theme. Eller alternativt kan du bruge nøgleord til at søge gennem alle indstillinger på en gang.

Alt i alt tager det ikke lang tid at identificere en egnet Divi online butikslayout. Du skal bare integrere det med WooCommerce, og du er på vej til at oprette et attraktivt WordPress-e-handelssted.

Gå videre, en særlig fremragende ting, du vil bemærke, er, at Divi ikke fokuserer på udseende alene. WooCommerce-layouts, der følger med Divi-temaet, er også bygget med funktionalitet i tankerne.

Så ud over typiske butikssider som kassen, produkter og indkøbskurv inkluderer Divi som standard e-handelsmoduler. Mere specifikt får du sektioner som fremhævede produkter, varer på salg og meget mere.

Er Divi velegnet til WooCommerce?

Alt i betragtning er Divi mere og mere populært, fordi det grundlæggende er en alt-i-en WordPress-temaløsning.

Kombineret Divi Page Builder og Divi-tema tilbyder giver stort set alt hvad du har brug for for at oprette en hvilken som helst WordPress-side. Og det inkluderer en fuldt funktionel WooCommerce-butik med alle de centrale e-handelsfunktioner.

???? Kort sagt er Divi en mulighed der er værd at overveje til dit WooCommerce-websted, fordi:

  • Du kan tilpasse dit WooCommerce-websted gennem en drag-and-drop-visuel editor.
  • Divi giver dig mulighed for at gemme dine justeringer som globale elementer på tværs af alle layouts.
  • Det leveres med over 20 veldesignede forudbyggede webstedslayouts.
  • Du kan nemt eksportere layoutene og derefter udnytte dem på andre websteder.
  • Du kan designe din WooCommerce-butik med flere kolonner, rækker og indholdselementer.
  • Alle WooCommerce-layouts er optimeret til mobile enheder.
  • Ligesom MS Word, redigering af tekstindhold er så simpelt som at klikke på og derefter skrive.
  • Hele webstedstilpasningsprocessen spores i realtid, hvilket giver en live preview af alle designændringer.
  • WooCommerce-layouts leveres med primære online-butiksider og moduler.

Trin 1: Tilmeld dig elegante temaer for at få adgang til Divi

Start med at gå til Elegant Temaes produktside til Divi WordPress-tema. Denne side giver mulighed for en temademono og en hurtig download-knap. Elegante temaer sælger sine temaer ved hjælp af en årlig eller engangsbetalingsstruktur, som er rart for udviklere med flere klientsider eller personer, der kører adskillige e-handelswebsteder. Du kan ikke købe bare et tema, men Personlig plan for $ 67 pr. år svarer til det, du muligvis betaler for et almindeligt tema, og du kan stoppe de årlige betalinger, hvis du ikke ønsker supporten mere. Du er velkommen til at lege med temaet, før du forpligter dig til betalingen.

Divi WordPress tema

Trin 2: Installer Divi på dit WordPress-sted

Når du har tilmeldt dig, skal du klikke på download-knappen til temaet. Dette sætter temaet som en zip-fil på din computer. Gå til fanen Udseende på bagsiden af ​​dit WordPress-sted, og klik på indstillingen Temaer.

Wordpress nyt tema

Trin 3: Klik på knappen Tilføj nyt

Wordpress tilføj et nyt tema

Klik på knappen Upload tema. Find og upload temaet zip-fil. Gå igennem processen for at aktivere temaet helt, og så skal du være i stand til at se temaet på fronten af ​​dit websted.

Wordpress-tema upload

Trin 4: Opsæt din WooCommerce Store

Hvis du går til Divi Theme-dokumentationsside finder du næsten alle værktøjer og funktioner, du kan arbejde med på temaet, men vi vil primært fokusere på at oprette et websted for e-handel. Divi-temaet er fuldt kompatibel med WooCommerce, så du kan vise alle dine produkter ud fra det.

Det, der er fantastisk, er, at den oprindelige SiteGround-tilmelding allerede har installeret WooCommerce på dit WordPress-websted, så du ikke behøver at bekymre dig om installation eller opsætning af det. Det skal allerede være tilgængeligt på dit betjeningspanel.

Trin 5: Føj dine første produkter til WooCommerce

Du har allerede teknisk set e-handelswebstedet opsat, men vi vil faktisk tilføje nogle produkter for at få det til at se ud som et e-handelssted på frontend. Gå til dit WordPress-dashboard, klik på fanen Produkter under personalized name jewellery og klik på Tilføj produkt.

WooCommerce tilføj et nyt produkt

Trin 6

Dette bringer en ny produktside op, som du kan udfylde. Det ligner meget enhver WordPress-sideditor, bortset fra at du kan tilføje et produktnavn, beskrivelse og et fremhævet billede, så folk kan se, hvordan produktet ser ud på dit websted.

E-handel tilføj et nyt produktfelt

Trin 7: Udforsk WooCommerce-funktionerne

Hvis du ruller ned under beskrivelsesområdet, finder du alle mulige WooCommerce-funktioner, du kan lege med. Du er velkommen til at ændre ting som SKU-numre, opgørelse, prisfastsættelse, forsendelse og attributter. Funktionerne er alt for store til at jeg kan skitsere dem alle her, men du kan gå til WooCommerce dokumentationsside at forstå alt, hvad du kan konfigurere på dit e-handelswebsted.

WooCommerce-funktioner

Trin 8: Opret hjemmesiden

Hele pointen med dette er at oprette en startside eller almindelig side, der indeholder alle dine produkter, når folk dukker op på dit websted. Derfor skal du gå til Pages> Tilføj nyt i venstre side af dit WordPress-dashboard.

Wordpress ny side

Trin 9: Tilføj en titel til din Divi-side

Opret en titel til din side. Klik på knappen Brug sidebygger øverst, og tryk på området Indsæt moduler for at inkludere en overskrift i fuld bredde. Du behøver ikke at vælge en header i fuld bredde, men vi skal til denne tutorial.

Page builder wordpress

Trin 10

Klik på knappen Fuld breddehoved.

Tilføj en overskrift

Trin 11

Udfyld oplysningerne om dit webstitstitel, overskriftstekst og tekstfarve. Du kan endda ændre administrationsmærket, der hovedsageligt er til din egen reference. Tryk på knappen Gem, når du er færdig.

Tilpasning af header

Trin 12

Tryk på de tre søjler til venstre for overskriften modul for fuld bredde for at ændre flere indstillinger.

WordPress woocommerce-opsætning

Trin 13

Her kan du give overskriften en dejlig baggrundsfarve og endda inkludere en video til din virksomhed.

Træk disse knapper rundt

Trin 14

Nu, hvor overskriften er færdig, kan vi inkludere e-handelsmodulet ved at klikke på området Indsæt kolonner.

Wordpress e-handelsopsætning

Trin 15

Vælg hvor mange kolonner du vil have, og klik derefter på indstillingen Indsæt moduler, der vises. Vælg knappen Shop nær bunden.

Wordpress e-handelsopsætning

Trin 16

Du er velkommen til at ændre, hvordan du vil vise dine produkter. Så du vil måske vise dine seneste produkter sammen med 12 varer på siden, et par kolonner, og hvordan du vil have dem til at blive bestilt. Klik på knappen Gem.

Wordpress e-handelsopsætning

Trin 17: Vis og offentliggør

Når dette er afsluttet, kan du trykke på knappen Preview eller Publicer for at se ændringer på frontend. Som du kan se, vises produkterne pænt, og du kan altid gå tilbage til at ændre dine produkter eller butiksindstillinger på WordPress-backend. Tillykke!

Hvis du har spørgsmål til opsætning af Divi WordPress tema, giv os besked i kommentarfeltet nedenfor.

Konklusion

Og det er alt, hvad det kræver for at få din Divi WooCommerce online butik op og kører ved hjælp af en SiteGround-hosting-konto.

Når du bevæger dig fremad, kan du være sikker på, at SiteGround vil håndtere alle de kritiske tekniske ting som WordPress-opdateringer og personalized name jewellery sikkerhed. Det er den grundlæggende forskel mellem administreret WooCommerce-hosting og regelmæssige delte hosting-løsninger. Derfor giver det dig den meget tiltrængte tid og plads til at fokusere på din WooCommerce-butiksstyring.

Og som vi allerede har set, skulle det være en leg med Divi-temaet. Du kan altid få adgang til dit Divi WooCommerce-layout fra din WordPress-backend for at tilpasse det yderligere. Hvis du ønsker det, kan du endda ændre hele designet helt ved at skifte til et andet layout, der også kan håndtere en WooCommerce-butik. Det er dit valg.

Hvis du har spørgsmål til opsætning af Divi WordPress-temaet, så lad os vide det i kommentarfeltet nedenfor.

Divi
Bedømmelse: 5.0 - Gennemgang af

Catalin Zorzini

Jeg er blogger af webdesign og startede dette projekt efter at have brugt et par uger på at kæmpe for at finde ud af, hvad der er den bedste e-handelsplatform for mig selv. Tjek min nuværende top 10 e-handel byggere.