Hur man skapar en fantastisk online-butik med WooCommerce, Divi och SiteGround (jul 2020)

Ö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: Detta inlägg publicerades ursprungligen den 15 januari 2015 och har helt förbättrats och uppdaterats för noggrannhet och fullständighet.

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 som du kan överväga. Den kan användas för en vanlig företagswebbplats, men den innehåller också integrationer för e-handel och snabba försäljningsprocesser. Låt oss lära dig att skapa en onlinebutik med Divi WordPress-temat.

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 tycker personligen att SiteGround är ett av de säkraste och pålitliga alternativen. (För mer information, kolla in vår omfattande SiteGround recension).

Det som verkligen är coolt är att SiteGround erbjuder en specialiserad hanterade 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 är en annan värdtjänst vi rekommenderar för Divi WooCommerce-butiker Bluehost. Även om funktionerna här inte stämmer överens med SiteGround, får du fortfarande WooCommerce-fokuserad värd via 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 Hosting 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änsade 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 har en domän väljer du det andra alternativet och anger dess detaljer. I annat fall kan du fortsätta med ny domännamnregistrering till $ 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 sin växande popularitet bland WooCommerce-handlare. Men tack och lov visar det sig att de kan acceptera PayPal-betalningar, dock indirekt.

Om detta är ditt föredragna läge, låt dig därför bara fälten vara tomma och kontakta SiteGrounds försäljningsagenter genom 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.

För att minimera dataöverföringsavståndet mellan Siteground-servrar och besökarna på din WooCommerce-webbplats väljer du datacenterplatsen som är närmast ditt målmarknadsområde.

Välj sedan alla extra tilläggstjänster som du vill inkludera i ditt paket, och voila! Det är allt som krävs för att skapa ett 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 WordPress-installationsprocessen tar några sekunder eftersom det hela automatiseras. Och efter att allt är konfigurerat kommer SiteGround att ge dig rätt domännamn för åtkomst om du vill ändra saker på baksidan av din webbplats.

Skapa din webbutik 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 för eleganta teman. Och intressant är Divi Elegant temaär flaggskeppsprodukten.

Så, vad är så speciellt med detta tema? Och finns det något enastående med Divis WooCommerce?

Till skillnad från vanliga WordPress-teman är Divi mer ett omfattande paket. Det betyder att den kombinerar standardtemafunktioner med extra funktionaliteter som är praktiska för Divi WooCommerce-butiker.

vad är divi

Men gör mig inte fel. Även om Divis WooCommerce-stöd är det huvudsakliga fokuset här, kan temat mycket mer än så. I huvudsak kan Divi sömlöst integreras med alla typer av webbplatser tack vare sitt breda utbud av webbplatslayouter. Inte bara e-handel.

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

Faktum är att Divi utvecklades för nybörjare. Så du kan förvänta dig att hitta en snygg kontrollpanel utan nästan ingen inlärningskurva. Det tar bara några minuter att få tag på hela Divis ekosystem, ställa in det och anpassa Divis WooCommerce-layouter.

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

  • Utbud 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 helt funktionella Divi WooCommerce-butiker.
  • Enkel WordPress-integration. Divi är ett av få externa WordPress-teman som kan installeras sömlöst utan komplicerade tweaks.
  • E-handelsoptimerade WooCommerce-mallar.

Divi Dra och släpp sidbyggare

Som vi har sagt, kommer Divi i två olika smaker. När du betalar för medlemskap den Eleganta teman, du hittar det vanliga Divi Theme på instrumentpanelen, åtföljt av Divi WordPress Page Builder plugin.

Men det är värt att notera att denna byggare inte exklusivt är bunden till Divi-temat. Det kommer som ett extra plugin till varje tema som förvärvats från eleganta teman.

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 en Divi WooCommerce nybörjare skulle hoppas få.

divi-inställningar

Men gör inga misstag. Även om Divi Page Builder riktar sig till nybörjare är det 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 elementen i din Divi WooCommerce-butik. 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 om vi talar om en annan anmärkningsvärd bestämmelse här är Divis övergripande förenkling av layoutanpassningsprocessen. Om du till exempel vill införa ett nytt avsnitt, bör ett enda klick göras. Då dubblar, tar bort och sätter in moduler för din Divi WooCommerce-butik tar du bara några knappklick.

Under tiden kommer Divis redigeringsfönster att visa webbplatsens layoutändringar i realtid. Du kan spåra varje justering visuellt och se hur det påverkar den övergripande utsiktsdesignen för din Divi WooCommerce-butik.

Förutbestämda Divi WooCommerce webbplatslayout

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

För att vara mer exakt erbjuder Divi ungefär 7-8 olika fördesignade layouter på varje webbplatspaket. Med tanke på att var och en är fullt byggd kan du enkelt anta layouterna utan att omarbeta deras underliggande struktur. Du bara ett par tweaks här och där.

divi-webbplatslayouter

Nu för att hitta dig själv perfekt för din WooCommerce onlinebutik, bläddra bara igenom de olika sidkategorierna på Divi Theme. Eller alternativt kan du använda 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 onlinebutiklayout. Du behöver bara integrera det med WooCommerce, och du är på väg att skapa en attraktiv WordPress-e-handelssajt.

Fortsätt, en särskilt framstående sak du kommer att märka är att Divi inte fokuserar på ser ensam. WooCommerce-layouterna som kommer med Divi Theme har också byggts med funktionalitet i åtanke.

Förutom typiska butikssidor som kassa, produkter och kundvagn inkluderar Divi e-handelsmoduler som standard. Mer specifikt får du avsnitt som presenterade produkter, objekt på försäljning och mycket mer.

Är Divi lämplig för WooCommerce?

Divi blir allt mer populärt eftersom det i grunden är en allt-i-ett WordPress-temalösning.

Kombinerat, Divi Page Builder och Divi Theme erbjudandet ger i stort sett allt du behöver för att ställa in alla typer av WordPress-webbplatser. Och det inkluderar en fullt funktionell WooCommerce-butik med alla grundläggande e-handelsfunktioner.

👉 Kort sagt är Divi ett alternativ som är värt att överväga för din WooCommerce-webbplats eftersom:

  • Du kan anpassa din WooCommerce-webbplats genom en dra-och-släpp-visuell redigerare.
  • Med Divi kan du spara dina tweaks som globala element över 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-butik 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 har primära onlinebutikssidor och moduler.

Steg 1: Registrera dig med eleganta teman för 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 temademono och en snabb nedladdningsknapp. Eleganta teman säljer sina teman med en årlig eller en engångsbetalningsstruktur som är trevligt för utvecklare med flera klientsajter eller personer som driver flera 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.

Divi WordPress-tema

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.

Wordpress nytt tema

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

Wordpress lägg till nytt tema

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.

Wordpress-temaöverföring

Steg 4: Ställ in din WooCommerce Store

Om du går till Divi Theme-dokumentationssida 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. Divi-temat är helt kompatibel med WooCommerce så att du kan visa alla dina produkter från det.

Det fantastiska är att den första SiteGround-registreringen redan har installerat WooCommerce på din WordPress-webbplats, så att du inte behöver oroa dig för att installera eller konfigurera den. Det borde redan finnas tillgängligt i din instrumentbräda.

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

Du har tekniskt sett redan e-handelswebbplatsen inställt, men vi vill faktiskt lägga till några produkter för att det ska se ut som en e-handelssajt på framsidan. Gå till din WordPress-instrumentpanel, klicka på fliken Produkter under WooCommerce och klicka på Lägg till produkt.

WooCommerce lägger till en ny 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.

E-handel lägg till ett nytt produktfält

Steg 7: Utforska WooCommerce-funktionerna

Om du bläddrar nedanför beskrivningsområdet hittar du alla möjliga WooCommerce-funktioner att leka med. Du kan ändra 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.

WooCommerce-funktioner

Steg 8: Skapa hemsidan

Hela poängen med detta är att skapa en hemsida eller en vanlig sida som innehåller alla dina produkter när folk 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-instrumentbräda.

Wordpress ny sida

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.

Sidbyggare wordpress

steg 10

Klicka på knappen Full breddhuvud.

Lägg till en rubrik

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.

Sidanpassning

steg 12

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

WordPress woocommerce-installation

steg 13

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

Tweak dessa knappar runt

steg 14

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

Wordpress e-handelsinställning

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.

Wordpress e-handelsinställning

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.

Wordpress e-handelsinställning

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 är igång med ett SiteGround-värdkonto.

När du går framåt kan du vara säker på att SiteGround kommer att hantera alla viktiga tekniska saker som WordPress-uppdateringar och WooCommerce säkerhet. Det är den grundläggande skillnaden mellan hanterad WooCommerce-värd och vanliga delade värdlösningar. Därför ger det dig den mycket efterfrågade tiden och utrymmet att fokusera på din WooCommerce-butikshantering.

Och som vi redan har sett bör det vara en bris med Divi-temat. 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 helt genom att byta till en annan layout som också kan hantera en WooCommerce-butik. Valet är ditt.

Om du har några frågor om hur du ställer in Divi WordPress-temat, vänligen meddela oss i kommentarerna nedan.

Divi
Betyg: 5.0 - Granskning av

Catalin Zorzini

Jag är en webbdesignblogger och startade detta projekt efter att ha tillbringat några veckor och kämpat för att ta reda på vilket är den bästa e-handelsplattformen för mig själv. Kolla in min nuvarande topp 10 e-handel byggare.