Hur man skapar en online e-handelswebbplats med WordPress

E-handel är röd het eftersom det gör det otroligt enkelt att tjäna 6 siffror i månaden utan att skapa en tegel- och murbrukverksamhet med vansinnigt höga omkostnader.


Men problemet för många är de dyra månatliga avgifterna för de flesta e-handelsplattformar som Shopify. Om du precis börjar vill du ha en billigare lösning så att du kan spendera mer på saker som marknadsföring och reklam.

Den goda nyheten är att du inte behöver betala höga månatliga avgifter med Shopify för att kunna sälja produkter online. Om du letar efter ett Shopify-alternativ eller ett eBay-alternativ kommer denna steg-för-steg-tutorial att lämna dig en fantastisk online-butik gratis.

Allt du behöver är ett webbhotellkonto och lite ansträngning och du kommer att kunna skapa en e-handelswebbplats på nolltid.


Låt oss börja!

Saker du behöver:

  • värd. Jag rekommenderar SiteGround.
  • EN domän namn.
  • WordPress Theme. För denna handledning använder vi gratis Astra Theme.
  • WordPress Page Builder. För detta använder vi den kostnadsfria Elementor-sidbyggaren.
  • WooCommerce, den bästa WordPress-plugin för e-handel.

Steg 1. Köp en webbhotell och domännamn.

Om du är ny inom hela denna webbplats som bygger webbplats, låt mig först klargöra vad en webbhotell och domännamn är och varför du behöver dem.

Vad är ett värd- och domännamn?

En webbhotell är en plats på internet där din webbplats kommer att bo. Det är som ett fysiskt hus där dina grejer kan hittas. Domännamnet är å andra sidan adressen till din webbplats. Det är som din adress som du ger till människor så att de kan besöka dig hemma. “Facebook.com”, “Google.com” och “WordPress.com” är alla exempel på domännamn.

Du kan köpa ett domännamn på nästan alla webbplatser som säljer domännamn. Du måste bara leta efter det bästa priset. Men vad gäller webbhotell är det absolut viktigt att bara få värd från ett pålitligt företag. För om din webbhotell är långsam eller opålitlig kommer din webbplatshastighet och drifttid att drabbas, och det kommer i slutändan att skada din e-handelsföretag.

Siteground, My Preferred Web Hosting Service

Du kan använda valfri webbhotell av hög kvalitet för att skapa en e-handelswebbplats, men i denna handledning kommer vi att använda Siteground.

SiteGround är en mycket rekommenderad webbhotell på nätet eftersom de har tillgodosett WordPress-användare och ändå har prisvärda priser. De är mest kända för sin snabba prestanda och lika snabba stöd.

Här är SiteGrounds viktigaste funktioner:

  • Gratis SSL-certifikat
  • FAST Knowledgable Support
  • WordPress Staging miljö
  • Gratis webbplatsmigrationer
  • 30 dagar med säkerhetskopior

SiteGround är ett fast val för dina webbhotellbehov. De tillgodoser WordPress-webbplatser och erbjuder färre resurser än sina konkurrenter men högre tillförlitlighet.

Jag har gjort en fantastisk affär med dem för att ge 70% rabatt till alla som registrerar sig med den här länken. Så om du vill spara pengar på din webbhotell, klicka på den här länken och köp din hosting nu.

När du landar på deras hemsida ser du fyra olika typer av värd:

välj en siteground-plan

Välj WordPress-värd och klicka Komma igång. Då ser du tre prisplaner:

siteground wordpress värdpriser

Välj en enligt dina behov och budget. Du kan också kolla in deras jämförelse av varje värdplan för att få en bättre uppfattning om vilken plan som passar dina behov.

När du har bestämt dig för en plan klickar du på Få plan. Du kommer sedan att föras till en sida där du måste välja en domän. Om du redan har köpt ett domännamn, välj “Jag har redan ett domän”. Men om du inte har en, välj “Registrera en ny domän” för att köpa en domän direkt i Siteground.

välj en domän

När du har ett domännamn som du gillar och är tillgängligt klickar du på Fortsätt. Nästa steg är att tillhandahålla dina personliga och faktureringsuppgifter för att slutföra köpet. Ange dina uppgifter exakt och klicka Betala nu. Du har nu en pålitlig webbhotell och domännamn.

Steg två. Installera WordPress.

WordPress är ett öppet källkod, gratis verktyg som låter dig bygga webbplatser även om du inte har en aning om kodning. Det är det enklaste och mest kraftfulla webbplatshanteringssystemet hittills. Det finns massor av saker jag älskar med WordPress, och om du läser mer av mina självstudier eller tittar på mina videor kommer du att lära dig mer om varför jag tycker att WordPress är det bästa verktyget för att skapa webbplatser för icke-tekniker.

Siteground kommer faktiskt med en klick på WordPress som gör allt det hårda arbetet med att installera och ställa in WordPress för dig.

När du har slutfört ditt värdköp ser du en skärm med en länk “Fortsätt till kundområdet”. Klicka på det så kommer du till en sida där du kan ställa in ditt nya värdkonto. Under Ställ in din webbplats, Välj Starta en ny webbplats.

Du kommer då att se en lista med programvara som du kan installera. Välj WordPress.

installera wordpress

Du måste då ange administrationsinloggningsuppgifter för din nya webbplats som din e-postadress, användarnamn och lösenord. Se till att skydda dessa detaljer eftersom du kommer att använda dessa för att logga in på din webbplats.

När det är klart klickar du på Bekräfta > Komplett installation. Och du har nu en live, självhostad WordPress-webbplats.

För att börja anpassa din webbplats måste du logga in på WordPress-backend. För att göra det, gå till din Siteground-instrumentbräda och växla till Mina konton flik. Klicka på Installation och här ser du domännamnet som du registrerade. Tvärs över är en grön Gå till Admin Portal knapp. Klicka på den här knappen för att gå till din WordPress inloggningssida.

gå till wordpress admin dashboard

WordPress-inloggningssidor har vanligtvis dessa format: yourdomain.com/wp-admin och yourdomain.com/wp-login. Kom ihåg din webbadress för inloggningssida så att du nästa gång kan komma åt den genom att direkt skriva in URL: en i adressfältet och utan att behöva logga in på Siteground längre.

WordPress-inloggningssidan ser ut så här:

wordpress inloggningssida

Ange ditt användarnamn och lösenord här för att logga in på din webbplats för första gången.

Steg 3. Installera Astra Theme och Astra Sites.

Astra Theme är det tema som vi kommer att använda för att få vår e-handelswebbplats så snygg och professionell ut så snabbt som möjligt. Du kan använda andra teman om du föredrar det, men för den här tutorialen kommer vi att följa Astra Theme.

Astra är ett gratis WordPress-tema som har utmärkt hastighet och enkelhet. Koppla ihop det med Astra Sites (gratis plugin), och vem som helst kan ha en vacker webbplats med några musklick. Det finns också en Pro-version tillgänglig som gör Astra till det perfekta temat.

Här är de funktioner som jag älskar mest om Astra:

  • Ett av de snabbaste teman tillgängliga
  • Över 100 startarsidor (de flesta är 100% gratis)
  • Flexibel Mega-menyfunktion
  • Kraftfullt tilläggspaket
  • Omfattande WooCommerce-support

Astra Theme är ett utmärkt val för alla WordPress webbdesignprojekt. Det är faktiskt temat som jag använder på den här webbplatsen och alla mina webbplatsprojekt.

Jag har fullt förtroende för utvecklaren och har varit mycket imponerad av hur väl kodat temat är.

Men mer än så är temat så enkelt att använda på grund av all vård och tanke som har gått in på det. I de flesta situationer konfigurerar den sig själv baserat på de verktyg du använder.

Gå till om du vill installera Astra Utseende > Tema > Lägg till ny. Sök efter Astra, klicka Installera, och Aktivera.

installera astra-tema

En annan sak som jag älskar Astra är att det har ett plugin som heter Astra Starter Sites med ett bibliotek med förbyggda gratis- och premiummallar. Du kan använda dessa mallar för din egen webbplats med bara några klick. Vi kommer att använda en Astra Site-mall för att minska tiden för skapandet av webbplatsen till hälften.

När du har installerat Astra ser du det här meddelandet på instrumentpanelen:

Astra-webbplatser kommer igång

Klick Komma igång. Detta kommer att installera Astra Starter Sites för dig.

Välja din sidbyggare

Du blir sedan frågad vilken sidbyggare du föredrar, och i den här självstudien kommer jag att använda Elementor. Elementor är en WordPress-sidbyggare som har tagit WordPress-webbdesign med storm. Den hade den djupaste funktionen, men är ändå väldigt lätt att använda och behärska. Elementor är den mest fullständiga gratis sida byggare. Det finns också ett Pro-tillägg för att lägga till ytterligare utvecklarfunktioner.

Viktiga elementor-funktioner:

  • Live Front End Page Editor
  • Funktioner för anpassning av webbplatser
  • Mall & blockera bibliotek
  • Omfattande mobila responsiva alternativ
  • Kraftfullaste Popup Builder
  • PRO: Skapa anpassade sidhuvuden
  • PRO: Skapa layouter för posttyp

Elementor är den starkaste sidbyggaren som för närvarande finns. De släpper konsekvent nya funktioner som är i linje med nuvarande designtrender. Det betyder att du kommer att kunna hålla din webbplats relevant. Om du vill ha tillgång till avancerade funktioner kan du uppgradera till Elementor Pro, som jag tycker är ett otroligt värde med tanke på alla ytterligare moduler och strömfunktioner som den innehåller.

Välja ditt Astra-webbplatstema

När du har valt din sidbyggare kommer du att föras till biblioteket med Astra Sites-mallar. Det finns massor av vackra mallar som du kan använda. Ta dig tid att välja den mall du vill ha. Och notera att dessa mallar är helt redigerbara med den sidbyggare som du valde, vilket innebär att du kommer att kunna anpassa alla delar och delar av webbplatsen som rubrik, bilder, färger, logotyp, etc..

För den här tutorialen kommer jag att använda den anpassade utskriftsmallen eftersom den ser fantastisk ut och mycket e-handelsorienterad.

För att installera ett tema måste du bara klicka på det för att gå till förhandsgranskningen. Om du gillar det du ser klickar du på Importera tema -knappen och se till att alla rutorna är markerade.

Om du märker det finns en ruta som säger “Installera obligatoriska plugins”. Om du markerar den här rutan installeras alla nödvändiga plugins för att temat ska se exakt ut. För temaet Custom Printing kommer det att installera Elementor, WooCommerce och WPForms. Detta sparar mig så mycket tid eftersom jag inte kommer att behöva installera dessa plugins en efter en. Allt är gjort för mig.

importerar astra-webbplatstema

Det kan ta en stund att importera temat. Stäng inte din webbläsare eller tryck på Uppdatera. Vänta, och när det är klart ser du en blå Visa webbplats knapp. Klicka på den knappen för att gå till din webbplats som nu har det tema som du just importerade.

Steg 4. Anpassa din webbplats.

Din webbplats ser nu fantastisk ut, men du vill göra den till din egen. Det första du vill göra är att välja din färgpalett. Om du redan har din märkesfärg kommer det att bli enklare.

Att välja en färgpalett

En webbplats har normalt en uppsättning av tre färger: primär-, accent- och popfärgen. Den primära färgen är den dominerande färgen på din webbplats och troligen din märkesfärg. Accentfärgen används normalt på rubriker eller posttitlar om du vill att de ska se lite annorlunda ut för att dra ögonen mot dem. Slutligen bör popfärgen kontrastera resten av färgerna för att göra viktiga delar av webbplatsens framstående, som uppmaningsknappar.

För att välja en webbplatsens färgpalett använder jag två verktyg. Den första är Coolors.co där du kan bläddra runt i olika färgpaletter och välja vad du vill använda på din webbplats.

coolors hemsida

Om du ser en palett som du gillar, håll muspekaren över den, klicka Se, och du kommer att tas till ett nytt fönster där du ser Hex-koderna för varje färg.

färgpalett med hexkod

Dessa Hex-koder är vad du behöver för att använda dessa färger på din webbplats. Senare kommer jag att visa dig hur du använder dessa Hex-koder i WordPress-backend.

Ett annat coolt verktyg är Colorzilla, en Google Chrome-förlängning som låter dig få Hex-koden för vilken färg du ser på vilken webbplats som helst så att du kan använda den på egen hand. Om du vill få Colorzilla-förlängningen, Klicka här. Klicka sedan Lägg till i Chrome.

ColorZilla

Det kan ta ett tag, men när det är klart ser du den här ikonen i verktygsfältet:

colorzilla ikon

Så nu, om du ser en färg på en webbplats som du vill prova och använda på din egen webbplats, måste du bara klicka på den här ikonen och klicka på färgen du vill kopiera. Hex-koden kopieras sedan automatiskt, vilket du kan klistra in på din webbplats. Det är så enkelt. Detta är ett praktiskt verktyg som låter dig använda fantastiska färger med ett klick.

Anpassa typografi

Du vill också använda din egen typografi för att göra din webbplats sticker ut. Webbplatser har normalt 2-3 teckensnitt. Du har ett teckensnitt för rubriker eller meny, ett teckensnitt för kroppen och ett extra “pop-teckensnitt”. Precis som färger kan du inte använda något teckensnitt. Du måste se till att de ser bra ut tillsammans och skicka ut rätt meddelande om ditt varumärke.

Jag gillar att använda Fontpair.co som är en webbplats som visar hur två olika teckensnitt ser ut tillsammans.

med fontpairs.co

Om du ser något du gillar, notera bara vad det heter så att du kan gå till WordPress och lägga till det direkt där.

Jag gillar också att använda WhatFont, ett Google Chrome-tillägg som berättar vilken typsnitt som används på någon webbplats. För att installera WhatFont, Klicka här Klicka sedan Lägg till i Chrome. Då ser du den här ikonen i verktygsfältet:

whatfont ikon

Om du vill veta namnet på ett teckensnitt klickar du bara på den här ikonen och håll muspekaren över texten. WhatFont kommer att berätta namnet på det här teckensnittet, och om du klickar på det ser du också teckensnittets storlek, färg, familj, stil, vikt och mer.

använder whatfont

Få en logotyp

Du behöver också en märkeslogotyp för att skilja din webbplats och fastställa din varumärkesidentitet. Det finns ett antal sätt att ta fram en logotyp. Du kan försöka göra det själv med ett fantastiskt designverktyg som heter Duk. Det är ganska populärt eftersom det gör design riktigt enkelt även för nybörjare.

Canva kommer med många logotypmallar som du kan ändra för att göra dina egna. Observera dock att om du vill exportera logotypen med en transparent bakgrund måste du uppgradera till Pro (som har en provperiod på en månad). Du kan alltid gå i Photoshop eller Photopea för att ta bort bakgrunden, men det lägger bara till ett extra steg i processen.

canva logotyper

Om du vill spara tid kan du bara hyra en frilanslogo-designer för att göra det åt dig. Du kan prova webbplatser som Fiverr.com eller 99design, men du måste vara försiktig när du väljer en artist baserat på deras stil, track record, recensioner, betyg och mer.

Anpassa din webbplats

Nu är det dags att använda dessa färger, typsnitt och logotyper på din webbplats. Om du är i WordPress backend-instrumentpanelen, gå till Utseende > Anpassa för att öppna tematilpassaren.

anpassa tema

Om du är på framsidan av din webbplats och det finns en svart stapel längst upp kan du klicka Anpassa för att öppna kundanpassningen.

anpassa tema

Så här ser tematilpassaren ut:

tema anpassare

Här kan du ladda upp din logotyp, ändra platsfärger och typografi, anpassa knappar och många fler. Ändringarna du gör här visas i realtid på din webbplats så att du omedelbart kan se hur det ser ut. Dessutom har varje tema olika anpassningsalternativ, så om du använder ett annat tema än Astra, kan du se olika alternativ här.

Gå till om du vill ändra dina webbplatsfärger i Astra Färger & bakgrund. Du har möjlighet att ändra basfärger, brödsmulor, sidhuvud och sidfotfärger.

färgbakgrundsredaktör

Basfärgerna är temat, länk, text och länk hover färg på din webbplats. Om du vill ändra till exempel temafärgen klickar du på Välj färg. Du ser två sätt att välja färg. Först kan du klistra in en Hex-kod i en ruta. Så om du hittade en färg på Coolors.co eller på andra platser kan du klistra in Hex-koden här. Du kan också välja en färg i ett inbyggt markeringsverktyg.

basfärgredigerare

För att ändra din webbplats typografi, gå tillbaka till anpassningens huvudmeny och klicka på Typografi. Du kommer att kunna ändra typografi för bas, bröd, innehåll och blogg.

typografi anpassare

Nästa är att lägga till din logotyp. Gå till om du vill ladda upp din logotyp Layout > Rubrik > Webbplatsidentitet. Under avsnittet Logo klickar du på Ändra logotyp knappen och ladda upp din logotyp.

ladda upp logotyp

Med Astra kan du också justera din logobredd så att du kan ändra hur stor eller liten du vill att den ska visas. Om du bläddrar nedåt kan du också ändra din webbplatstitel, lägga till en webbplats-taglinje och en webbplatsikon eller favicon.

Du kan göra mycket mer i anpassningsområdet för Astra som att ändra webbplatsens innehållsbredd, ändra blogginläggets struktur, anpassa sidfot och sidhuvud och mer. Utforska dina alternativ här för att se vad du gillar bäst för din webbplats.

När du är klar med anpassningen, glöm inte att klicka Publicera för att göra dina ändringar live på din webbplats.

Steg 5. Anpassa din webbplats med Elementor.

Just nu har du anpassat grunderna som att ändra platsens färg, typografi, lägga till en logotyp och allt det där. Nu är det dags att gå ner till de snygga detaljerna och börja använda Elementor (eller vilken sidbyggare du föredrar) för att helt ändra hur din webbplats ser ut.

Som jag nämnde tidigare kommer jag att använda Elementor i den här tutorialen för jag tycker helt enkelt att det är bäst, men du kan använda valfri sidbyggare som du är bekväm med.

Inuti Elementor kan du göra ganska mycket vad som helst med din webbplats utan att koda eller anställa en webbutvecklare. Lägga till element är en enkel dra-och-släpp-process.

Det finns två sätt att redigera en sida med Elementor. Först, om du är i WordPress-backend, klicka på sidor och du bör se en lista över alla sidor på din webbplats inklusive de som automatiskt skapades med Astra-webbplatsmallen. Sidor som gjordes med en specifik sidbyggare (t.ex. Elementor) kommer att märkas som sådana:

sidor

Om du vill redigera en sida med din sidbyggare håller du musen över den och klickar Redigera med (sidbyggare). I mitt fall kommer det att vara det Redigera med Elementor.

redigera med elementor

När du klickar på det tas du in i Elementor.

Ett annat sätt är om du är på framsidan av din webbplats, gå till den sida du vill redigera och klicka på Redigera med elementor på den svarta stapeln överst:

redigera med elementor

Endera av dessa kommer dig in i Elementor. När du är inne i Elementor kan du använda olika bilder för din rubrik, ändra texter, ändra ikoner och mer. Du kan börja med att ändra texter och bild i rubriken så att de passar ditt företag. Här är några saker du kan göra med texter i Elementor:

redigera texter i elementor

Som du kan se kan du ändra texten direkt i innehållsredigeringsområdet, ändra storlek, vikt, färg och typografifamilj. Du kan också lägga till animationer som enkla blekningar, zoomning och mer. Det finns massor av saker du kan göra här för att lägga till krydda på din webbplats.

Du vill också ändra webbplatsens bilder så att de matchar ditt företag. Att ändra bilderna på Elementor är mycket enkelt att göra. Du måste bara klicka på bilden så kommer alternativen att visas i den vänstra sidofältet. Du kan ladda upp en ny bild, ändra storlek, lägga till en kant eller skugga, lägga till en animering med mera.

redigera bilder i elementor

Inuti Elementor kan du också ändra knapptexter, anpassa vittnesmålområdet, lägga till fler element / block som texter, bilder, knappar, videor och mer.

Elementor Pro kommer med mycket fler funktioner som möjligheten att lägga till formulär (som vanligtvis kräver ett tredjeparts plugin), möjligheten att ladda upp dina egna teckensnitt, lägga till skjutreglage, lägga till pristabeller och prislistor, anpassa dina sidhuvuden och sidfot ( vilket är utanför gränserna för de flesta sidbyggare), och så mycket mer.

Om du vill köpa Elementor Pro och samtidigt få gratis tillgång till mina Elementor Pro-kurser, klicka på den här länken här.

Steg 5. Ställ in WooCommerce.

Det är nu dags att ställa in WooCommerce, som är WordPress-plugin som förvandlar alla webbplatser till en onlinebutik. Det låter dig lägga till produkter, acceptera betalningar online, skapa kuponger, ställa in frakt och beskattning och så mycket mer.

WooCommerce var redan installerat för mig av Custom Print Astra Site-temat, så nu måste jag gå in och ställa in det. Om du inte har installerat WooCommerce än, gå till plugins > Lägg till ny och sök efter WooCommerce.

Det första vi måste göra är att gå till WooCommerce > inställningar. Du kommer att se 7 flikar: Allmänt, Produkter, Frakt, Betalningar, Konton och Sekretess, E-post och Avancerat.

Låt oss först titta på Allmän flik. På den här fliken kan du ange din butiksadress, i vilka länder du ska sälja och skicka, och aktivera skattesatser.

woocommerce allmänna inställningar

Om du bläddrar nedåt ser du också alternativ för att aktivera kuponger och anpassa hur priserna visas på din webbplats inklusive valutan, där den kommer att visas, etc..

Nästa är Produkter fliken där du kan ställa in produktrelaterade alternativ. Du kan ställa in vilken sida som ska vara din butiksida, vad som händer när besökare lägger till en produkt i kundvagnen, ställer in produktdimensioner, aktivera och konfigurera kundrecensioner och aktivera stjärnbetyg.

produktinställningar för woocommerce

I den övre delen av detta avsnitt har du också alternativ för Lager och Nedladdningsbara produkter. Om du markerar rutan bredvid i inventeringsavsnittet Aktivera lagerhantering, ser du en lista med alternativ som hjälper dig att hantera ditt lager. Du kan till exempel ställa in den låga lagertröskeln så att när ditt lager når det numret får du ett meddelande. Du kan också välja att dölja lagervaror från din webbplats.

lagerinställningar woocommerce

När det gäller Nedladdningsbara produkter avsnittet är detta endast relevant om du säljer nedladdningsbart innehåll på din webbplats, så om du säljer rent fysiska produkter kan du hoppa över den här. Du har möjlighet att kräva att köpare loggar in innan du kan ladda ner dina produkter. Du kan också ge tillgång till nedladdningar efter betalning.

nedladdningsbara produktalternativ

Nästa flik är Frakt. Detta är endast relevant om du säljer fysiska produkter som kommer att skickas ut till köpare. Inne i den här fliken finns tre underavsnitt: Fraktzoner, fraktalternativ och fraktklasser.

I Fraktzoner kommer du att behöva lägga till fraktzoner och tilldela tillgängliga leveransmetoder till dessa zoner. Det kommer att ta ett tag om du levererar till flera länder.

frakt zoner

Om du behöver mer hjälp med fraktzoner kan du kolla in WooCommerces fraktzon dokumentation.

Nästa är Frakt alternativ sektion. I det här avsnittet kan du kontrollera hur fraktpriser visas på din webbplats och ställa in en standard eller önskad leveransdestination.

frakt alternativ

Det sista avsnittet i frakt är Fraktklasser. Med fraktklasser kan du tilldela olika fraktpriser till en grupp produkter, till exempel tyngre produkter som behöver mer porto.

fraktklasser

Gå till om du vill ställa in fraktpriser Fraktzoner och skapa eller redigera en befintlig leveransmetod som “Flat Rate”.

lägg till en fraktkostnad

När du klickar Redigera, ett popup-fönster visas. Här kommer du att kunna lägga till den fasta fraktfrekvensen och den extra kostnaden för fraktklassen du just skapade.

fraktkostnad för en fraktklass

Om du behöver mer hjälp med att konfigurera dina leveransinställningar kan du kolla in WooCommerce’s dokumentation för frakt.

Låt oss nu gå vidare betalningar. På den här fliken kan du aktivera eller inaktivera betalningsportar som PayPal, direkt banköverföring, kontanter vid leverans och mer. När du aktiverar en metod klickar du på Uppstart för att länka dina konton och börja acceptera betalningar.

Betalningsmetoder

Om du vill kunna acceptera Stripe-betalningar kan du installera ett plugin som heter WooCommerce Stripe Payment Gateway. Gå bara till plugins > Lägg till ny och sök efter plugin-programmet. Installering och aktivering av detta plugin aktiverar Stripe betalningsmetod i WooCommerce, men du måste gå in på WooCommerce > inställningar > betalningar att ställa in det.

I Konton och integritet fliken, kommer du att kunna konfigurera inställningar relaterade till kontoskapande och användarskydd. Du kan välja att tillåta gäster att köpa utan att skapa ett konto, ställa in din sekretessida och policysidor och välja hur länge användardata ska bevaras.

konton och integritet

Nästa är E-post där du ser en lista med e-postmeddelanden som WooCommerce automatiskt skickar baserat på vissa villkor. Till exempel kan ett e-postmeddelande skickas till en e-postadress som du väljer när en ny beställning görs. Du kan också se e-postmeddelanden med uppdateringar om kundernas beställningar som återbetalade eller slutförda beställningar.

e-postmeddelanden

Slutligen, Avancerad fliken, som ersatte API-fliken, låter dig konfigurera fler tekniska detaljer som sidinställningar där du kan berätta för WooCommerce vilken sida som ska fungera som din vagnssida eller kassasida.

sidinställning woocommerce

Om du bläddrar nedåt kan du ändra vad WooCommerce kallar som slutpunkter som är bilagor till URL: en som gör att de kan visa olika innehåll utan att behöva en ny sida.

Steg 6. Lägg till produkter.

När du är klar med de grundläggande WooCommerce-inställningarna är det nu dags att lägga till produkter. Astra Site-temat som vi använde i den här tutorialen levereras redan med exempelprodukter, och så ser en produktsida ut på framsidan:

produktsida

Låt oss nu titta på hur vi kan ändra detta och lägga till våra egna produkter på backend.

För att lägga till en ny produkt eller redigera en befintlig produkt, klicka bara på menyalternativet Produkter på den vänstra sidofältet i WordPress-instrumentpanelen. Då ser du en lista över alla produkter du har. Alternativt, om du är på framsidan av en produktsida, kan du klicka Redigera produkten på den svarta fältet högst upp på sidan. Detta tar dig direkt i produktredigeraren.

produktredaktör

Det är här du kan ändra produktens titel och produktbeskrivning. Om du bläddrar nedåt ser du ett avsnitt som heter Produktdata. Det är här du kommer att spendera det mesta av din tid. Här kan du välja typ av produkt och därifrån kan du konfigurera andra produktinställningar.

Med WooCommerce kan du lägga till dessa typer av produkter:

  • Fysisk, nedladdningsbar, virtuell. En virtuell produkt behöver inte nödvändigtvis laddas ner. Ett exempel är en möte eller en-till-en coaching session.
  • Enkel produkt. Det här är en produkt.
  • Grupperad produkt. Detta är ett paket med olika produkter.
  • Extern produkt. Produkter som köps utanför din webbplats som en anknuten länk.
  • Variabel produkt. En variabel produkt har variationer som färger och storlekar.
produkttyper

När du skapar en ny produkt är det första steget att välja typ. Varje typ har en annan uppsättning alternativ. Till exempel har en nedladdningsbar produkt följande alternativ:

nedladdningsbara produktalternativ

På vänster sida av det här avsnittet ser du fler alternativ för lager, frakt, länkade produkter och mer.

I Lager, kan du lägga till SKU, tillhandahålla ett visst antal lager för just den här produkten, ställa in lagerstatus och mer.

I Frakt, Du kan ange produktens vikt och dimensioner samt tilldela en fraktklass som vi skapade i föregående steg.

frakt i produktdata

I Länkade produkter, Du kan tilldela en försäljning och korsförsäljning till en produkt. En försäljning är en produkt som du rekommenderar istället för den aktuella produkten eftersom den har ett högre pris. Korsförsäljning är produkter du rekommenderar i kundvagnen baserat på den aktuella produkten. Om du vill lägga till en försäljning eller korsförsäljning skriver du namnet på produkten i motsvarande rutor.

länkade produkter

Du kan också lägga till attribut till dina produkter i attribut sektion. Det kan vara storlek, färg, vikt osv. Om du skapar en variabel produkt måste du också lägga till ett attribut här först. Om du vill lära dig mer om hur du skapar en variabel produkt, kolla in WooCommerces guide här.

Om du bläddrar nedåt Produktdata i rutan ser du ett område där du kan lägga till en kort produktbeskrivning. Denna beskrivning kommer att visas bredvid din produkt och nära priset. Håll den kort och söt. Du kan lägga till en produktbild på höger sida. Om du har fler produktbilder kan du lägga till dem i Produktgalleri sektion.

kort beskrivning och produktbild

Det är också viktigt att ställa in katalogens synlighet som finns längst upp på sidan under Publicera. I vissa fall kanske du vill dölja vissa produkter eftersom du kanske erbjuder dem som korsförsäljning med ett exklusivt rabatterat pris. Det är här du kan göra det.

katalogens synlighet

När du är klar med allt här klickar du på Uppdatering för att spara alla dina ändringar.

Om du vill lära dig mer om de olika produkttyperna och hur du kan skapa dem på rätt sätt, gör detta WooCommerce guide är ett bra ställe att börja. Fortsätt lägga till fler produkter till din webbplats med exakt samma steg som jag visade dig här tills du bygger upp dina produktlistor.

Steg 7. Anpassa dina utcheckningar.

WooCommerce är ett bra plugin som du hittills har sett, men ett vanligt klagomål mot det är avsaknaden av kassalternativ. Du kan inte ändra hur kassasidorna ser ut och du kan inte skapa en försäljningstratt med det. En försäljningstratt är ett bra sätt att öka kundens inköpsvärde, så om du inte har det på din webbplats lämnar du verkligen pengar på bordet.

Om du vill skapa en försäljningstratt för din e-handelswebbplats är den bästa plugin som kan hjälpa CartFlows. Det är en trattbyggare WordPress-plugin som låter dig skapa vackra och mycket effektiva trattar direkt i WordPress.

cartflows

Om du vill lära dig mer om hur man skapar en försäljningstratt med CartFlows kan du kolla in den här handledning som jag gjorde.

Steg 8. Håll dig uppe i vagnens övergivande.

Innan jag avslutar denna handledning, låt mig bara lägga till en sak till om vagnens övergivande. Det är ett faktum i e-handel att många kunder kommer att överge sina vagnar utan att slutföra köpet.

Detta kan bero på många skäl. De kan ha varit distraherade, makten eller anslutningen släpptes, något som brådde upp. Oavsett vad det är så är många av dessa övergivna vagnar förlorade försäljningar om du inte gör något åt ​​det.

Lyckligtvis finns det ett plugin som heter WooCommerce Cart Abandonment Recovery plugin som håller reda på och automatiskt skickar uppföljningsmail till kunder med övergivna vagnar – allt GRATIS!

Om du använde Astra Site-temat som jag använde här, skulle detta plugin redan ha installerats för dig. Men om inte, kan du installera det genom att gå till plugins > Lägg till ny och sök efter plugin-programmet.

Det kommer att skapa ett nytt alternativ under WooCommerce som heter Vagnens övergivande. Om du klickar på detta kommer du att kunna se en översikt över hur många övergivna vagnar du har, hur många som har återhämtat sig och hur många som går förlorade.

återhämtningsbara beställningar vagnens övergivande

Du kommer också att kunna anpassa de e-postmeddelanden som WooCommerce skickar ut genom att byta till Uppföljningsmeddelanden fliken, håll musen över e-postmeddelandet som du vill redigera och klicka på Redigera.

uppföljande e-postmeddelanden

Du kommer sedan till e-postredigeraren:

anpassa uppföljningsmeddelanden

Avslutar

Att skapa en e-handel WordPress-webbplats kan verka komplicerad och överväldigande, men jag hoppas att jag kastar ett ljus på det och visade hur du kan göra allt själv med lite hjälp. Jag är glad att höra om dina framgångshistorier, och om du behöver hjälp kan du kontakta mig i kommentaravsnittet nedan.

Siteground

SiteGround är en mycket rekommenderad webbhotell på nätet eftersom de har tillgodosett WordPress-användare och ändå har prisvärda priser. De är mest kända för sin snabba prestanda och lika snabba stöd.

Viktiga SiteGround-funktioner:

  • Gratis SSL-certifikat
  • FAST Knowledgable Support
  • WordPress Staging Enviroment
  • Gratis webbplatsmigrationer
  • Dagliga säkerhetskopior

SiteGround är ett fast val för dina webbhotellbehov. De tillgodoser WordPress-webbplatser och erbjuder färre resurser än sina konkurrenter, men högre tillförlitlighet.

Kolla in SiteGround

Astra Theme

Astra är ett gratis WordPress-tema som fokuserar på hastighet. Valfritt kan du köpa Pro-versionen för $ 59 vilket lägger till några ytterligare inställningar och alternativ.

Viktiga funktioner i Astra-teman:

  • Inte Fastes-temat, men det är ingen slouch
  • Massor av gratis demo webbplatser
  • Flexibel Mega-menyfunktion
  • Alternativ för anpassade layouter
  • WooCommerce Support
  • LearnDash-support

Astra Theme är ett rättvist val för alla WordPress webbdesignprojekt. Jag antar att den största frågan är om du till och med behöver köpa ett tema i dag eftersom sidbyggare gör alla samma saker som du skulle behöva ett tema för. Till exempel har Elementor det gratis Hello-temat som låter din sidbyggare göra allt arbete.

Det finns fortfarande några goda skäl att köpa ett pro-tema, men för de flesta kommer det troligtvis att vara bra med ett gratis tema.

Men för mig tror jag att Astra Theme inte har hållit upp med de aktuella trenderna och jag rekommenderar inte längre det.

Det finns mycket bättre moderna teman tillgängliga som erbjuder inbyggda sidhuvud- och fotbyggare jämfört med att vara begränsade till 3 layouter, plus mer flexibla layouter för sidor och inlägg.

Kolla in Astra Theme

Elementor

Elementor är en WordPress-sidbyggare som har tagit WordPress-webbdesign med storm. Den har den djupaste funktionen, men är ändå väldigt lätt att använda och behärska. Elementor är den mest fullständiga gratis sida byggare. Det finns också ett Pro-tillägg för att lägga till ytterligare utvecklarfunktioner.

Viktiga elementor-funktioner:

  • Live Front End Page Editor
  • Funktioner för webbplatsanpassning
  • Mall & blockera bibliotek
  • Omfattande mobila responsiva alternativ
  • Kraftfullaste Popup Builder
  • PRO Skapa anpassade sidhuvuden
  • PRO Skapa posttyplayouter

Elementor är den starkaste sidbyggaren som för närvarande finns. De släpper konsekvent nya funktioner som är i linje med nuvarande designtrender. Det betyder att du kommer att kunna hålla din webbplats relevant.

Elementor Pro är ett otroligt värde med tanke på alla ytterligare moduler och strömfunktioner som den inkluderar.

Om jag startade ett nytt webbplatsprojekt idag, skulle Elementor vara den sidobyggare som jag skulle välja. Jag anser att det är ett måste ha WordPress-sidbyggare som är ett nöje att använda.

Kolla in Elementor

CartFlows

CartFlows är en försäljningstrattbyggare för WordPress. Det gör att du snabbt och enkelt kan bygga försäljningstrattor med hjälp av din sidbyggare.

Key CartFlows-funktioner:

  • Professionellt utformade mallar
  • 5 Platsbeställningsbumpar
  • One Click Upsells
  • Använd din önskade sidbyggare
  • Utdragbar till skillnad från klicktratlar
  • Nedräkningstimrar och delad testning

Om du vill ha en försäljningstrattbyggare för WordPress och har det bra med att vara värd för dig själv, eller använda hanterad WordPress-värd, så är CartFlows om ett bra alternativ eftersom det är superlätt att använda men ändå mycket kraftfullt.

Kolla in kundvagnen Flöden

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map