Så här installerar du och skapar en ny WordPress WooCommerce-tema

WooCommerce är den mest populära och "mest anpassningsbara e-handelsplattformen för att bygga din online-verksamhet." Du kan ladda ner WooCommerce gratis, men du börjar verkligen se sin kraft när du börjar använda WordPress WooCommerce-plugins och teman.

Men behöver du verkligen använda ett WooCommerce-tema?

Medan det inte krävs, rekommenderar jag det starkt.

Inte bara är WooCommerce-teman eCommerce-centrerad genom design, hela temat är centrerat kring WooCommerce-stilar. Den CSS som WooCommerce använder för att definiera hur produkterna visas används sedan av WordPress WooCommerce-temat för att verkligen dra allt tillsammans för vissa av de vackraste designade eCommerce-butikskorten.

För att inte tala om det faktum att installera och skapa ett nytt WordPress WooCommerce-tema är det inte svårare än att skapa något annat WordPress-tema.

Låt mig visa dig hur man gör det.

Så här installerar du och skapar en ny WordPress WooCommerce-tema

Om du redan har WooCommerce installerad, så är det bra! Om inte, rekommenderar jag starkt Rachel McCollins Beginners Guide till WooCommerce. Detta kommer att introducera dig till WooCommerce och ta dig igenom alla steg som behövs för att få ditt online-butikshopp på gång.

Låt oss nu börja med hur man installerar och skapar ett nytt WordPress WooCommerce-tema.

Steg 1: Installera Dummy Data

Om du redan har lagt till dina produkter i WooCommerce rekommenderar jag att du hoppa över det här steget och börja med steg 2.

Installera dummy-data lägger till fiktiva produkter i ditt butiksfront för att hjälpa dig att visualisera din butik med produkter. När du har slutfört installationen och konfigurerat ditt nya WordPress WooCommerce-tema, vill du radera det Allt Dummy data innan du lägger till dina produkter. Annars riskerar du att oavsiktligt radera din egen produktinformation.

Dummy-data ingår i ditt WooCommerce-plugin. Om du har installerat WooCommerce i WordPress-administratören, fortsätt och hämta pluginprogrammet från WordPress Plugin Directory till din dator. Det här blir enklare än att logga in i din FTP, gå in i din plugin katalog och ladda ner dummy data därifrån.

När din nedladdning är klar, pakka ut filen så att du är redo att importera din dummy-data.xml-fil.

Gå till din Verktyg och klicka på Importera:

Låt inte "WooCommerce Tax Rates (CSV)" förvirra dig. Detta kan göras senare om du vill. För WooCommerce Dummy Data, vill du välja Wordpress.

Mer än troligt kommer du inte att ha WordPress Importer plugin installerat, så fortsätt och Installera nu.

När du har installerat, fortsätt och Aktivera Plugin & Run Importör.

Kommer du ihåg var du hämtade och släppte ut WooCommerce-plugin? Bra! Nu måste du klicka Välj FIL och gör din väg till det.

Dummy-uppgifterna ska finnas i din uppackade mapp: (woocommerce.version.number)> woocommerce> dummy-data.

Öppna mappen Dummy-data, välj dummy-data.xml, och du är redo att ladda upp filen och importera.

Det här är det sista du behöver göra innan du importerar alla dummy-data.

En del av detta är personlig preferens, men här är vad jag gör (skärmdump längre ner):

Importera standard författaren "wooteam" istället för att skapa en ny författare eller använda en författare som redan existerar. På så sätt vet du vilket innehåll som importerades / skapades i den här processen baserat på författarnamnet (jag rekommenderar att du tar bort författaren när du tar bort dummy-data efter att du har installerat och konfigurerat ditt nya WordPress WooCommerce-tema).

Jag rekommenderar också att du Hämta och importera bilagor så att du har bilder som är associerade med varje produkt (igen, du vill se till att mediet tas bort när du är klar med dummy-data).

När du har gjort dessa val, skicka in:

Besök dinwebsite.com/shop/ och du bör se en helt importerad testbutik:

Ja! Du gjorde det!

Det är inte särskilt väl utformat, är det? Bra vi ska installera ett snyggt WordPress WooCommerce-tema som Savoy.

(OBS! När du är färdig att installera och konfigurera ditt tema, glöm inte att ta bort produkterna och bilderna från dummy data importen innan du börjar lägga till egna produkter.)

Steg 2: Installera ett WordPress WooCommerce-tema

Nu ska vi titta på hur man installerar WooCommerce-temat. Om du inte har hämtat ditt WordPress Commerce-tema redan, fortsätt och hämta det till din dator (se till att du vet var du hämtar den så att du kan komma åt den).

Det finns två olika sätt att installera ditt tema:

  1. Öppna din webbplats med FTP
  2. Från WordPress Admin

FTP Ditt tema

Om du är bekväm med att använda FTP, fortsätt och anslut till din server och ta dig till wp-innehåll> teman katalogen. Det är här du vill skicka ditt tema. Innan du skickar din unzipped mapp till din server, se till att du skickar ditt tema. Låt oss ta en närmare titt genom att använda vårt exempel WordPress-tema från ThemeForest.

När du har hämtat ner din nedladdning ser du att det finns ett antal olika mappar:


Inte alla teman du hämtar kommer att vara förpackade så här. Ibland är den zippade mappen du hämtar den aktuella temapappen. Det är alltid en bra idé att dubbelkontrollera, eftersom det varierar från plats till plats.

Den Savoy - minimalistiska AJAX WooCommerce-teman innehåller några extra saker som dokumentation, tillgångar etc. Om du tittar i temafiler-mappen för Savoy hittar du ditt tema (savoy.zip).

Om du installerar via FTP, fortsätt och ladda upp din uppackade temapapp (till exempel: "savoy") i temakatalogen. Om du inte är säker på att använda FTP eller föredrar att installera från WordPress-administratören, är det bra. Jag föredrar också att använda WordPress Admin.

Från WordPress Admin

Installera ett WordPress-tema från administratören kräver att temapappen zipas (themefolder.zip). Som vi diskuterade tidigare vill du se till att du jobbar med faktisk temalmapp och inte den mapp som ditt tema kan vara förpackat i.

Från WordPress-administratören, under Utseende, klick teman:

Lägg till nytt tema:

Ladda upp tema:

Kommer du ihåg var din tema zip-fil finns?

(Vårt exempel tema heter: savoy.zip)

Klick Välj FIL och gör din väg till det:

När du har installerat kan du besöka Utseende> Teman i din WordPress Admin för att se om det är installerat eller klicka för att aktivera det direkt.

Som du kan se (nedan) har Savoy-temat installerat framgångsrikt, så musen över och Aktivera:

Nu när ditt WordPress WooCommerce-tema har installerats och aktiverats, låt oss ställa in det.

Steg 3: Ställ in ett WordPress WooCommerce-tema

Inte alla teman är anpassade exakt samma. Hur ett tema utformas och utvecklas är en stor faktor, så det kan finnas vissa skillnader mellan denna handledning och vad du kanske står inför. Generellt sett bör det dock hjälpa dig att få ditt WordPress WooCommerce-temat upprättat, oavsett vilket WooCommerce-tema du använder från ThemeForest eller någon annanstans.

Rekommenderade / obligatoriska plugins

Efter installation och aktivering av Savoy-temat kommer du att bli underrättad om rekommenderade plugins:

Ibland meddelar ditt tema dig om rekommenderade plugins medan andra innehåller rekommendationer i dokumentationen. Det kan finnas tematekniska funktioner - till exempel valfria reglage - som inte är kodade in i temat, men är anpassade till.

Klicka på Börja installera plugins i Savoy-temat för att se listan över rekommenderade plugins:

Återigen varierar detta från tema till tema, men i det här fallet kanske du vill installera alla dessa.

Till exempel, medan Savoy rekommenderar kontaktformulär 7 och innehåller styling för det, kanske du inte vill använda det här pluginet för din kontaktformulär. Du kanske vill använda något som Gravity Forms eller Ninja Forms.

Ett plugin som Regenerate Thumbnails är ett utmärkt plugin att använda för dem som har en befintlig butik och har sina bilder konfigurerat för ett tidigare tema. Denna plugin kommer att gå igenom ditt WordPress Media Library och ändra storlek på alla dina bilder för att fungera med ditt nya tema. Du kanske eller inte vill göra det med dummy-data, och du kanske vill hoppa över det här pluginet helt och hållet (men jag rekommenderar att du gör det ändå, så att alla media är dimensionerade korrekt för teständamål).

En plugin som Envato Toolkit är dock väldigt viktig för teman som köpts genom ThemeForest, så att du får meddelande om teman uppdateringar.

Jag rekommenderar att du installerar alla rekommenderade plugins när du kommer igång. Du kan alltid ta bort ett plugin senare om du inte behöver det, medan om du inte installerar ett plugin som behövs kan du bli frustrerad eftersom temat inte fungerar eller gör något du tyckte om demo.

När du har installerat allt, några eller inga av de rekommenderade och / eller nödvändiga pluginsna, glöm inte att aktivera dem:

Om du använder ett tema som köpts från ThemeForest, till exempel vårt exempeltema Savoy, glöm inte att ange ditt marknadsplatsens användarnamn och hemliga API-nyckel i Envato WordPress Toolkit för att säkerställa korrekt teman uppdateringar.

Anpassa

Det här är en del av installationen och inställningen av ditt WordPress WooCommerce-tema när det blir riktigt roligt och du börjar se din webbplats komma till liv.

Du kan komma åt WordPress Customizer från menyn i WordPress: Utseende> Anpassa. Eller gå till Teman-sidan under Utseende> Teman och klicka sedan på Anpassa knapp:

Välkommen till WordPress Customizer:

Här kommer vi att göra några tweaks innan vi går in i djupare konfiguration.

Det första du kommer att se är Site Identity. Här kan du ändra din webbplatstitel och tagg.

Ibland är det här du kan lägga till en anpassad rubrikbild och / eller webbplatsikon (detta varierar från tema till tema).

Därefter konfigurerar du menyerna:

Om det här är en ny WooCommerce-inställning eller om du inte har skapat några sidor kan det inte hända att du "anpassar" ännu. Med WooCommerce installerat, läggs det automatiskt till några sidor som jag är säker på att du vill ha lagt till i din meny direkt.

Du kan enkelt lägga till och skapa en ny meny:

När du har lagt till en meny (eller flera) kan du välja var du vill att menyn ska visas såväl som de olika menyalternativen (till exempel anpassade länkar, inlägg, sidor, produkter etc.).

Detta ger dig mycket flexibilitet med hur du vill att din WooCommerce-webbplats ska fungera. Var inte rädd för att leka med det eller ändra det senare.

Innan vi lämnar WordPress Customizer, vill du berätta för WordPress att göra frontsidan till din butik:

markera Framsidan visas som En statisk sida och välj Framsida att vara din affär sida. Shop-sidan skapades automatiskt när du installerade WooCommerce-plugin.

När det gäller inlägg sidan beror det på var eller inte du vill ha en blogg på din WooCommerce-webbplats. Om så är fallet måste du skapa en bloggsida och välja den på den här sidan av WordPress Customizer eller i WordPress Admin Inställningar> Läsning.

Resultaten

Med någon grundläggande konfiguration kan du se hur bra din webbutik kan se ut med ett WordPress WooCommerce-tema:

De enskilda produktsidorna ser fantastiska ut:

Det innehåller även relaterade produkter:

Den Savoy - minimalistiska AJAX WooCommerce-teman låter dig enkelt finjustera många element på din webbplats och kan gå långt bakom allt jag har tagit med i denna handledning (var noga med att läsa igenom temat dokumentation för att lära dig mer om ditt tema specifikt). Jag visade bara dig ändringar som kunde göras inom WordPress Customizer och kan vanligtvis göras på nästan alla teman du kanske använder.

Slutsats

Du kan tydligt se hur enkelt dessa första steg i konfigurationen av ditt nya WordPress WooCommerce-tema kan vara och hur bra det ser ut - helt enkelt genom att använda ett WordPress-tema som är utformat speciellt för WooCommerce.

Det finns många användbara WordPress WooCommerce-plugins tillgängliga på CodeCanyon och några vackert utformade och effektiva WordPress WooCommerce-teman på ThemeForest.

Titta på några av de mest sålda ThemeForest WooCommerce teman kan vara ett bra ställe att börja (Savoy är fortfarande min favorit). Jag är säker på att du hittar något som passar din e-handelsbutik perfekt. Eller bläddra igenom vår presenterade showcase för att hitta precis den rätta för din butik: 

Vad använder du WooCommerce för att sälja?