Hur man skapar en fantastisk onlinebutik med WooCommerce, Divi och SiteGround (2023)

Över 74 miljoner webbplatser är beroende av WordPress-plattformen för att vara värd för sina bloggar, sälja sina produkter eller bara skriva sina dagliga upptäckter för världen att se. När du börjar bygga din e-handelswebbplats du har verkligen många val att göra, och WordPress binder till detta.

Vilken av framstående e-handelsplattformar kommer du att välja? Planerar du att ta tag i ett tema för att sälja dina produkter eller finns det någon du kan betala för att bygga webbplatsen från början? Heck, vad planerar du till och med att sälja via din e-handelswebbplats?

Redaktörens anmärkning: Det här inlägget publicerades ursprungligen den 15 januari 2015 och har totalrenoverats och uppdaterats för noggrannhet och omfattning.

Det finns tusentals till miljoner WordPress-teman att välja mellan när du letar efter frontend- och backend-strukturen för att börja sälja online. Nästan samma sak med värd (men vi föredrar SiteGround or Bluehost).

De bästa teman inkluderar snabba och enkla e-handelshanteringsverktyg så att du kan ladda upp produkter och hantera saker som rabatter, belöningar, knappar och produktsidor. Ditt tema är också det första som människor kommer att se när de besöker din webbplats. Det leder dem genom processen och bär verkligen skillnaden mellan att någon är nöjd med upplevelsen eller inte.

Kort sagt är WordPress-teman avgörande och Divi WordPress-tema från eleganta teman är ett ganska snyggt alternativ för dig att överväga. Den kan användas för en vanlig företagswebbplats, men den innehåller också integrationer för e-handelsförsäljning och snabba försäljningsprocesser. Låt oss lära oss hur man skapar en onlinebutik med Divi WordPress-tema.

Skaffa din domän och värd först

????Det första steget i alla webbplatser skapar processen är att ta ett värdkonto, domännamn och installera WordPress på webbplatsen. Divi är inte annorlunda. Det finns många sätt att få värd och domännamn, men jag tror personligen SiteGround är ett av de säkraste och mest pålitliga alternativen. (För mer information, kolla in vårt omfattande SiteGround översyn).

Det som är riktigt coolt är det SiteGround erbjuder en specialiserad förvaltade WooCommerce värd servicepaket med nästan allt du behöver för att börja sälja online. I paketet kan du nöja dig med antingen StartUp Plan för nybörjare, GrowBig Plan för växande företag, eller GoGeek för etablerade WooCommerce butiker.

Var och en av dessa erbjuder avancerade funktioner för att optimera din WooCommerce webbplats till ett rimligt pris.

Som sagt, en annan värdtjänst vi rekommenderar starkt för Divi WooCommerce butiker är Bluehost. Även om funktionerna här inte matchar upp till SiteGroundDu får fortfarande WooCommerce-fokuserad hosting genom sitt WordPress-e-handelspaket. Planerna kan bekvämt hantera en Divi WooCommerce butik, men tyvärr får du inte hanterade tjänster.

👉 Nu, för tydlighetens skull, låt oss fortsätta med SiteGround.

Hur kommer du igång?

Gå till SiteGround Hanterad WooCommerce värd Välj en idealisk plan och klicka på Få plan.

Enligt min mening är GoGeek Plan verkar vara det mest lämpliga alternativet eftersom det stöder obegränsat WooCommerce webbplatser med avancerade e-handelsfunktioner. Förutom mer serverkraft får du prioriterat stöd, WordPress-iscensättning, on-demand-backup och superchacher-resurser, liksom gratis webbplatsöverföringar och Cloudflare CDN, bland andra fasta funktioner.

👉 Och när det gäller resursersättningar rymmer denna plan:

• 6 GB brevlåda
• 1 GB databaslagring
• SSD-lagring
• Oövervakad dataöverföring
• 30GB-lagringsutrymme
• Upp till 100,000 XNUMX månatliga besök

Tänk på att denna tjänst börjar på $ 11.95 per månad, och det liknar mycket hur du installerar en vanlig WordPress-webbplats på ett BlueHost-värdkonto.

Men kom ihåg att det är ett specialpris för nybörjare. Räkna med att det kommer att öka till $ 34.95 i framtida förnyelser, vilket fortfarande är en rimlig avgift om du tar hänsyn till alla funktioner du får på lång sikt.

När du väl har valt din önskade plan, SiteGround kommer att leda dig till dess domänregistreringssida. Om du redan äger en domän, välj det andra alternativet och ange dess detaljer. Annars, fortsätt med ny domännamnsregistrering för $15.95 per år.

Nästa är det sista steget, där du väljer dina önskade värdalternativ, samt anger din betalningsinformation och personliga detaljer innan du skapar kontot.

Det är naturligtvis grundläggande saker du har hanterat många gånger tidigare. Så du bör inte ha några svårigheter att ange ditt telefonnummer, land, namn, e-postadress, kontolösenord etc.

Betalningsdelen kräver att du anger dina kreditkortsuppgifter. Du kan fortsätta med endera Upptäck, MasterCard or Visa.

Men ganska intressant, SiteGround listar inte PayPal, trots dess växande popularitet bland WooCommerce köpmän. Men tack och lov visar det sig att de kan acceptera PayPal-betalningar, men indirekt.

Om detta är ditt föredragna läge, lämna därför bara fälten tomma och kontakta SiteGrounds försäljningsagenter via livechattverktyget. De hjälper dig att slutföra processen via PayPal.

Det sista avsnittet innehåller flera alternativ för din webbhotell, inklusive din önskade datacenterplats, plus prenumerationsperioden.

Nu, för att minimera dataöverföringsavståndet mellan Sitegrounds servrar och din WooCommerce webbplatsens besökare, välj den datacenterplats som ligger närmast ditt målmarknadsområde.

Välj sedan vilka extra tilläggstjänster du vill inkludera i ditt paket och voila! Det är allt som krävs för att ställa in en Siteground konto.

När du är klar loggar du in på ditt konto och går direkt till ditt cPanel-område. Du hittar ett standardinstallationsprogram för WordPress. Så välj det, ange dina inloggningsinformation för WordPress och tryck på installationsknappen.

Tja, du kommer att märka att installationsprocessen för WordPress tar några sekunder eftersom det är automatiserat. Och när allt är klart, SiteGround kommer att ge dig rätt domännamn för åtkomst om du vill ändra saker på baksidan av din webbplats.

Skapa din onlinebutik med Divi

Vad är Divi?

Okej, om du inte har provat det, jag slår vad om att du redan har hört talas om det. Divi är inget vanligt WooCommerce tema. Det är faktiskt ett av de mest populära WordPress-teman på eleganta teman. Och intressant, Divi is Elegant temaär flaggskeppsprodukten.

Så, vad är det som är så speciellt med detta tema? Och finns det något utestående om DiviÄr WooCommerce?

Till skillnad från typiska WordPress-teman, Divi är mer av ett omfattande paket. Det betyder att den kombinerar standard temafunktioner med extra funktioner som är praktiska för Divi WooCommerce butiker.

Missförstå mig inte. Fastän DiviÄr WooCommerce support är huvudfokus här, temat kan mycket mer än så. I huvudsak, Divi kan integreras sömlöst med alla typer av webbplatser tack vare det stora utbudet av webbplatslayouter. Inte bara e-handel.

För att sedan fylla på det, Divi kommer med sin egen intuitiva WordPress-sidbyggare plugin. Du kan använda den för att fritt anpassa din Divi WooCommerce lagra utan kodning alls.

I själva verket, Divi utvecklades för nybörjare. Så du kan förvänta dig att hitta en snygg kontrollpanel med nästan ingen inlärningskurva. Det tar bara några minuter att få en grepp om helheten Divi ekosystem, ställa in det och anpassa DiviÄr WooCommerce layouter.

👉 I slutändan kommer du därför att kunna dra nytta av Divi'S:

• Uppsättning av anpassningsbara layouter för alla typer av WordPress-webbplatser, inklusive WooCommerce onlinebutiker.
• Enkel att använda Page Builder, som ger en mängd webbplatselement och designfunktioner.
• Flexibel anpassningsprocess utan någon form av kodning. Även nybörjare kan bekvämt ställa in och justera fullt fungerande Divi WooCommerce butiker.
• Enkel WordPress-integration. Divi är ett av få externa WordPress-teman som kan installeras sömlöst utan några komplicerade tweaks.
• E-handel-optimerad WooCommerce mallar.

Divi Dra och släpp sidan Builder

Som vi har sagt, Divi finns i två olika smaker. När du betalar för medlemskap den Eleganta teman, du hittar standarden Divi Tema på instrumentpanelen, åtföljd av Divi WordPress sidbyggare plugin.

Men det är värt att notera att den här byggaren inte bara är knuten till Divi Tema. Det kommer som ett tillägg plugin till varje enskilt tema som förvärvats från Elegant Themes.

Som sagt, Divi WordPress Page Builder är en dra-och-släpp-redigerare med avancerade anpassningsfunktioner. Det låter dig flytta och definiera element, kolumner, rader och moduler utan någon kodningsupplevelse. Med andra ord är det typen av byggare a Divi WooCommerce nybörjare skulle hoppas få.

Men gör inget misstag. Även om Divi Page Builder riktar sig till nybörjare, det är en redaktör som också underlättar erfarna utvecklare. De kan systematiskt kombinera sina visuella funktioner med CSS-kontroller för att driva sina Divi WooCommerce webbplatser till nästa nivå.

Kom dock att tänka på det, du behöver inte en utvecklare för att designa alla element i din Divi WooCommerce lagra. Du kan bara lita på visuella funktioner.

Och vet du vad?

Divi till och med försöker göra hela processen mycket enklare genom att märka plus färgkodning av dess layoutmoduler.

Och talar om vilken annan anmärkningsvärd bestämmelse här är Divis övergripande förenkling av layoutanpassningsprocessen. Om du till exempel vill introducera ett nytt avsnitt bör ett enda klick göra. Kopiera sedan, ta bort och sätt in moduler för din Divi WooCommerce butiken tar bara några få knappklick.

Under tiden, DiviRedigeringsfönstret visar webbplatsens ändringar i realtid. Du kommer att kunna spåra varje enskild justering visuellt och se hur det påverkar den totala utsiktsdesignen för din Divi WooCommerce lagra.

Fördesignad Divi WooCommerce Webbplatslayouts

För att rädda dig från den smärtsamt krävande processen att skapa en webbplats från grunden, har Divi WordPress Theme kommer med en mängd förutformade webbplatsmallar. Och eftersom du kanske behöver olika layoutalternativ för samma mall, Divi erbjuder sin webbdesign som omfattande paket. Följaktligen får du olika malllayouter och färger.

För att vara mer exakt, Divi ger cirka 7-8 olika fördesignade layouter på varje enskilt webbplatspaket. Med tanke på att var och en är helt byggd kan du enkelt använda layouterna utan att omarbeta deras underliggande struktur. Du bara några justeringar här och där.

Nu för att hitta dig själv en perfekt för din WooCommerce webbutik, bläddra helt enkelt genom de olika webbplatskategorierna på Divi Tema. Eller använd alternativt nyckelord för att söka igenom alla alternativ på en gång.

Tja, allt i allt tar det inte lång tid att identifiera en lämplig Divi webbutiklayout. Du behöver bara integrera det med WooCommerce, och du är på väg att skapa en attraktiv WordPress-e-handelsplats.

Att gå vidare, en särskilt enastående sak du kommer att märka är att Divi fokuserar inte på utseende ensam. De WooCommerce layouter som följer med Divi Tema har byggts med funktionalitet i åtanke också.

Så förutom vanliga butikssidor som kassa, produkter och kundvagn, Divi inkluderar e-handelsmoduler som standard. Mer specifikt får du sektioner som utvalda produkter, försäljningsartiklar och mycket mer.

Is Divi Lämplig för WooCommerce?

Med alla saker i åtanke, Divi blir allt populärare eftersom det i grunden är en allt-i-ett-WordPress-temalösning.

Kombinerat, den Divi Sidbyggare och Divi tema erbjuder ger i stort sett allt du behöver för att skapa någon typ av WordPress-webbplats. Och det inkluderar en fullt fungerande WooCommerce butik med alla de viktigaste e-handelsfunktionerna.

👉 I ett nötskal, Divi är ett alternativ värt att överväga för din WooCommerce webbplats eftersom:

• Du kan anpassa din WooCommerce webbplats genom att dra och släppa visuell redaktör.
• Divi låter dig spara dina tweaks som globala element i alla layouter.
• Det kommer med över 20 väl utformade förbyggda webbplatslayouter.
• Du kan enkelt exportera layouterna och därefter utnyttja dem på andra webbplatser.
• Du kan designa din WooCommerce lagra med flera kolumner, rader och innehållselement.
• Alla WooCommerce layouter har optimerats för mobila enheter.
• Precis som MS Word, att redigera textinnehåll är lika enkelt som att klicka och sedan skriva.
• Hela anpassningsprocessen för webbplatsen spåras i realtid, vilket ger en direkt förhandsvisning av alla designändringar.
• WooCommerce layouter kommer med primära webbutiksidor och moduler.

Steg 1: Registrera dig med eleganta teman att få tillgång till Divi

Börja med att gå till Elegant temas produktsida för Divi WordPress-tema. Denna sida erbjuder alternativet för en temademo och en snabb nedladdningsknapp. Eleganta teman säljer sina teman med en årlig eller engångsbetalningsstruktur, vilket är trevligt för utvecklare med flera klientsidor eller personer som driver många e-handelswebbplatser. Du kan egentligen inte köpa bara ett tema, men Personlig plan för 67 dollar per år liknar det du kan betala för ett vanligt tema, och du kan stoppa de årliga betalningarna om du inte vill ha stödet längre. Spela gärna med temat innan du förbinder dig till betalningen.

Steg 2: Installera Divi på din WordPress-webbplats

När du har registrerat dig klickar du på nedladdningsknappen för temat. Detta sätter temat som en zip-fil på din dator. Gå till fliken Utseende på baksidan av din WordPress-webbplats och klicka på alternativet Teman.

Steg 3: Klicka på knappen Lägg till ny

Klicka på knappen Ladda upp tema. Hitta och ladda upp teman zip-fil. Gå igenom processen för att aktivera temat helt och då bör du kunna se temat i framsidan av din webbplats.

Steg 4: Ställ in din WooCommerce HITTA BUTIK

Om du går till Divi Temadokumentationssida du hittar nästan alla verktyg och funktioner du kan arbeta med i temat, men vi kommer främst att fokusera på att skapa en e-handelswebbplats. Smakämnen Divi tema Är helt kompatibel med WooCommerce så att du kan visa alla dina produkter från det.

Det som är fantastiskt är att initialen SiteGround registrering redan installerad WooCommerce på din WordPress-webbplats så att du inte behöver oroa dig för att installera eller ställa in den. Det borde redan finnas tillgängligt i din instrumentpanel.

Steg 5: Lägg till dina första produkter till WooCommerce

Du har tekniskt sett redan e-handelsplatsen inställd, men vi vill faktiskt lägga till några produkter så att det ser ut som en e-handelsplats på frontend. Gå till din WordPress-instrumentpanel, klicka på fliken Produkter under WooCommerce och klicka på Lägg till produkt.

steg 6

Detta ger en ny produktsida som du kan fylla i. Det ser mycket ut som alla WordPress-sidredigerare, förutom att du kan lägga till ett produktnamn, en beskrivning och en bild som visas så att folk kan se hur produkten ser ut på din webbplats.

Steg 7: Utforska WooCommerce Egenskaper

Om du rullar ner under beskrivningsområdet hittar du alla möjliga WooCommerce funktion att leka med. Ändra gärna saker som SKU-nummer, lager, prissättning, frakt och attribut. Funktionerna är alldeles för stora för att jag ska kunna beskriva dem alla här, men du kan gå till WooCommerce dokumentationssida för att förstå allt du kan konfigurera på din e-handelswebbplats.

Steg 8: Skapa hemsidan

Hela poängen med detta är att skapa en hemsida eller vanlig sida som innehåller alla dina produkter när människor dyker upp på din webbplats. Därför bör du gå till Sidor> Lägg till nytt på vänster sida av din WordPress-instrumentpanel.

Steg 9: Lägg till en titel för din Divi Sida

Skapa en titel för din sida. Klicka på knappen Använd sidbyggare längst upp och tryck på området Infoga moduler för att inkludera en rubrik i full bredd. Du behöver inte välja en rubrik i full bredd, men vi kommer till den här handledning.

steg 10

Klicka på knappen Full breddhuvud.

steg 11

Fyll i detaljerna för din webbplatstitel, rubriktext och textfärg. Du kan till och med ändra administratörsetiketten, som främst är för din egen referens. Tryck på Spara-knappen när du är klar.

steg 12

Klicka på de tre staplarna till vänster om huvudmodulen Full Width för att ändra fler inställningar.

steg 13

Här kan du ge rubriken en fin bakgrundsfärg och även inkludera en video för ditt företag.

steg 14

Nu när rubriken är klar kan vi inkludera e-handelsmodulen genom att klicka på Infoga kolumner.

steg 15

Välj hur många kolumner du vill ha och klicka sedan på alternativet Infoga moduler som visas. Välj knappen Shop längst ner.

steg 16

Du kan ändra hur du vill visa dina produkter. Så du kanske vill visa dina senaste produkter, tillsammans med 12 artiklar på sidan, några kolumner och hur du vill att de ska beställas. Klicka på Spara.

Steg 17: Förhandsgranska och publicera

När detta är klart kan du trycka på knappen Förhandsvisning eller Publicera för att se ändringar på frontend. Som du kan se, dyker upp produkterna snyggt, och du kan alltid gå in igen för att ändra dina produkter eller butiker i inställningar på WordPress-backend. Grattis!

Om du har några frågor om hur du ställer in Divi WordPress tema, snälla meddela oss i kommentarfältet nedan.

Slutsats

Och det är allt som krävs för att få din Divi WooCommerce onlinebutik igång med en SiteGround värdkonto.

Framåt kan du vara säker på det SiteGround kommer att hantera alla viktiga tekniska saker som WordPress-uppdateringar och WooCommerce säkerhet. Det är den grundläggande skillnaden mellan hanterad WooCommerce hosting och regelbundna lösningar för delad hosting Därför ger det dig den välbehövliga tiden och platsen att fokusera på din WooCommerce butiksledning.

Och som vi redan har sett borde det vara en bris med Divi tema. Du kan alltid komma åt din Divi WooCommerce layout från din WordPress-backend för att anpassa den ytterligare. Om du vill kan du till och med ändra hela designen genom att byta till en annan layout som kan hantera en WooCommerce lagra också. Valet är ditt.

Om du har några frågor om hur du ställer in Divi WordPress-tema, låt oss veta i kommentarfältet nedan.