Sådan oprettes en fantastisk onlinebutik med WooCommerce, Divi og SiteGround (2023)

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 blevet fuldstændig moderniseret og opdateret for nøjagtighed og omfattende.

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 ret flot mulighed for dig at overveje. Det kan bruges til et almindeligt forretningswebsted, men det inkluderer også integrationer til e-handel og hurtige salgsprocesser. Lad os lære at oprette en onlinebutik med Divi WordPress-tema.

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 mange måder at få hosting og domænenavne på, men jeg tror personligt SiteGround er en af ​​de mest sikre og pålidelige muligheder. (For flere detaljer se vores omfattende SiteGround gennemgå).

Hvad der er virkelig sejt er det SiteGround tilbyder en specialiseret lykkedes 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 for etablerede WooCommerce butikker.

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

Når det er sagt, en anden hostingtjeneste, vi stærkt vil anbefale til Divi WooCommerce butikker er BlueHost. Selvom funktionerne her ikke stemmer overens med SiteGround's, du får 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 for klarhedens skyld fortsætte med SiteGround...

Hvordan kommer du i gang?

Gå til SiteGround Managed WooCommerce Hosting vælg en ideel plan, og klik på Få plan.

Efter min mening er GoGeek Plan virker som den mest egnede mulighed, da den understøtter ubegrænset 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 dirigere dig til dens domæneregistreringsside. Hvis du allerede ejer et domæne, skal du vælge den anden mulighed og indtaste dets detaljer. Ellers fortsæt med registrering af nyt domænenavn 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 viser ikke PayPal på trods af dens voksende popularitet blandt WooCommerce købmænd. Men heldigvis viser det sig, at de kan acceptere PayPal-betalinger, men indirekte.

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

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

Nu for at minimere dataoverførselsafstanden mellem Sitegroundservere og dine WooCommerce websteds besøgende, 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 medtage i din pakke, og voila! Det er alt, hvad der kræves 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 sat op, SiteGround vil give dig det korrekte domænenavn, du har adgang til, hvis du vil ændre ting på backend på dit websted.

Oprettelse af din onlinebutik 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 almindeligt WooCommerce tema. Det er faktisk et af de mest populære WordPress-temaer på elegante temaer. Og interessant nok Divi is Elegant tema's flagskibsprodukt.

Så hvad er der så specielt ved dette tema? Og er der noget udestående ved Divi's WooCommerce?

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

Forstå mig dog ikke forkert. Selvom Divi's WooCommerce støtte er det primære fokus her, temaet er i stand til meget mere end det. I det væsentlige Divi kan integreres problemfrit med alle typer websteder takket være dens brede vifte af webstedslayouter. Ikke kun e-handel.

Så for at fylde det, Divi kommer med sin egen intuitive WordPress-sidebygger plugin. Du kan bruge den til frit at tilpasse din Divi WooCommerce gemme uden nogen kodning overhovedet.

I virkeligheden, Divi blev udviklet til begyndere. Så du kan forvente at finde et pænt kontrolpanel med næsten ingen indlæringskurve. Det tager kun få minutter at få fat på det hele Divi økosystem, opsæt det og tilpas Divi's WooCommerce layouts.

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

• Array af tilpassede layouter til enhver form for WordPress-websted, inklusive 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.
• Enkel WordPress-integration. Divi er et af de få eksterne WordPress-temaer, der kan installeres problemfrit uden nogen komplekse tweaks.
• E-handel-optimeret WooCommerce skabeloner.

Divi Træk og slip sidebygger

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

Men det er værd at bemærke, at denne bygherre ikke udelukkende er bundet til Divi Tema. Det kommer som en ekstra plugin til hvert enkelt tema erhvervet fra Elegant Themes.

Når det er sagt, Divi WordPress Page Builder er en træk-og-slip-editor med avancerede tilpasningsfunktioner. Det giver dig mulighed for at flytte og definere elementer, kolonner, rækker og moduler uden nogen kodningsoplevelse. Med andre ord er det typen af ​​bygherre a Divi WooCommerce nybegynder håber at få.

Men tag ikke fejl. Selvom Divi Page Builder er målrettet mod begyndere, det er 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, du behøver 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 taler om, en anden bemærkelsesværdig bestemmelse her er Divi's overordnede forenkling af layouttilpasningsprocessen. Hvis du f.eks. Vil introducere et nyt afsnit, skal et enkelt klik gøre. Derefter duplikeres, fjernes og indsættes moduler til din Divi WooCommerce butik tager kun et par knap klik.

I mellemtiden DiviRedigeringsvindue viser dit websteds layoutændringer i realtid. Du vil være i stand til at spore hver enkelt justering visuelt og se, hvordan det påvirker det overordnede design af din Divi WooCommerce butik.

Foruddesignet Divi WooCommerce Website Layouts

For at redde dig fra den smertefulde krævende proces med at oprette et websted fra bunden, er Divi WordPress-tema leveres med en række foruddesignede webstedsskabeloner. Og da du muligvis har brug for forskellige layoutmuligheder for den samme skabelon, Divi tilbyder sit webstedsdesign som omfattende pakker. Derfor får du forskellige skabelonlayouts og farver.

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

Nu for at finde dig selv en perfekt til din WooCommerce onlinebutik, skal du blot rulle gennem de forskellige sidekategorier på Divi Tema. Alternativt kan du bruge nøgleord til at søge gennem alle indstillingerne på én gang.

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

Når du går videre, er en særlig fremragende ting, du vil bemærke, at Divi fokuserer ikke på udseende alene. Det WooCommerce layout, der følger med Divi Tema er også bygget med funktionalitet i tankerne.

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

Is Divi Egnet til WooCommerce?

Alt taget i betragtning, Divi bliver stadig mere populær, fordi det grundlæggende er en alt-i-en WordPress-temaløsning.

Kombineret, den Divi Side Builder og Divi Theme tilbyder giver stort set alt hvad du har brug for for at oprette enhver form for WordPress-websted. Og det inkluderer en fuldt funktionel WooCommerce butik med alle de centrale e-handelsfunktioner.

???? I en nøddeskal, Divi er en mulighed, der er værd at overveje for din WooCommerce websted fordi:

• Du kan tilpasse din WooCommerce websted gennem en træk og slip visuel editor.
• Divi giver dig mulighed for at gemme dine tweaks 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 gem 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 kommer med primære onlinebutiksider og -moduler.

Trin 1: Tilmelding med elegante temaer at få adgang til Divi

Start med at gå til Elegant Temaes produktside for Divi WordPress-tema. Denne side giver mulighed for en temademo og en hurtig download-knap. Elegante temaer sælger sine temaer ved hjælp af en årlig eller engangsbetalingsstruktur, hvilket er rart for udviklere med flere klientsider eller folk, der kører adskillige e-handelswebsteder. Du kan ikke rigtig købe kun 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.

Trin 2: Installer Divi på dit WordPress-websted

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.

Trin 3: Klik på knappen Tilføj nyt

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.

Trin 4: Konfigurer din WooCommerce Butik

Hvis du går til Divi Temadokumentationsside 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 tema Er fuldt kompatibel med WooCommerce så du kan vise alle dine produkter ud fra det.

Hvad der er fantastisk er, at det første SiteGround tilmelding allerede installeret WooCommerce på dit WordPress-websted, så du behøver ikke bekymre dig om installation eller opsætning. Det skulle allerede være tilgængeligt i dit dashboard.

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

Du har teknisk set allerede e-handelswebstedet klar, men vi vil faktisk tilføje nogle produkter for at få det til at ligne et e-handelswebsted på frontend. Gå til dit WordPress-dashboard, klik på fanen Produkter under WooCommerce og klik på Tilføj 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.

Trin 7: Udforsk WooCommerce Funktionalitet

Hvis du ruller ned under beskrivelsesområdet, finder du alle mulige WooCommerce funktion at lege med. Du er velkommen til at ændre ting som SKU-numre, lager, 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.

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 Sider> Tilføj nyt på venstre side af dit WordPress-dashboard.

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.

Trin 10

Klik på knappen Fuld breddehoved.

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.

Trin 12

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

Trin 13

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

Trin 14

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

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.

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.

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 i gang med en SiteGround hosting-konto.

Fremad kan du være sikker på det SiteGround vil håndtere alle de kritiske tekniske ting som WordPress-opdateringer og WooCommerce sikkerhed. Det er den grundlæggende forskel mellem administreret WooCommerce hosting og regelmæssige delte hostingløsninger. Derfor giver det dig den meget nødvendige tid og plads til at fokusere på din WooCommerce butiksledelse.

Og som vi allerede har set, burde det være en leg med Divi tema. Du kan altid få adgang til din 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 kan håndtere en WooCommerce opbevar også. Det er dit valg.

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