Hur man skapar en anpassad WooCommerce-varukorgssida (utan kodning)

Standardsidan för WooCommerce-varukorg fungerar, men den är grundläggande och matchar ofta inte din stil.

Under vår testning av olika sidbyggare upptäckte vi att SeedProd gör det förvånansvärt enkelt att skapa en anpassad kundvagnssida utan att röra en enda kodrad.

Vi har utforskat SeedProds WooCommerce-funktioner och funnit att anpassning av kundvagnsidan är både enklare och kraftfullare än vi förväntade oss. Det som tidigare krävde en utvecklare kan nu göras med bara några klick med deras dra-och-släpp-gränssnitt.

I den här guiden visar vi dig exakt hur du skapar en anpassad WooCommerce-varukorgssida utan någon kodning.

Varför skapa en anpassad WooCommerce-kundvagnssida i WordPress?

WooCommerce kommer med en inbyggd varukorgssida. Installera och aktivera bara detta plugin, så börjar din onlinebutik automatiskt använda standardvarukorgssidan.

När dina besökare har varor i sina kundvagnar är de mycket nära att genomföra ett köp. Forskning visar dock att nästan sju av tio kunder kommer att överge sina kundvagnar och aldrig komma tillbaka.

Med det i åtanke bör din varukorgssida göra allt möjligt för att säkra försäljningen.

Genom att ersätta standarddesignen med en anpassad kundvagnssida kan du ofta förbättra konverteringsgraden på din onlinebutik.

Även att bara anpassa sidan med din egen varumärkesprofil och anpassad logotyp kan förbättra kundupplevelsen och öka dina konverteringsgrader.

Med det i åtanke kommer vi att dela hur du kan anpassa din WooCommerce kundvagnssida utan kod. Här är en snabb översikt över allt vi kommer att täcka i följande avsnitt:

• Hur man skapar en anpassad WooCommerce-kundvagnssida i WordPress (steg-för-steg)
• Videohandledning
• Bonustips: Hur du ytterligare förbättrar konverteringar på WooCommerce-kundvagnssidan

Låt oss dyka rakt in!

Hur du skapar en anpassad WooCommerce-kundvagnssida i WordPress

Det enklaste sättet att skapa anpassade sidor för din WooCommerce-butik är att använda SeedProd.

Det är den bästa WordPress-sidbyggaren och kommer med mer än 300 professionellt designade mallar. Dessa inkluderar e-handelsmallar för att skapa försäljningssidor och lead-sidor.

Ännu bättre, SeedProd har fullt stöd för WooCommerce och kommer till och med med speciella WooCommerce-block som låter dig visa dina bästsäljande produkter, mest populära artiklar, senaste försäljningar och mer.

Flera av våra partner varumärken har byggt hela sina webbplatser med hjälp av pluginet och har fått bra feedback från sina användare på de nya designerna. För att lära dig mer, se vår SeedProd-recension.

Nu är det första du behöver göra att installera och aktivera pluginet. För mer information kan du se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, navigera till SeedProd » Inställningar och ange din licensnyckel.

Du hittar den här informationen under ditt konto på SeedProd-webbplatsen. Efter att ha angett licensen, klicka på knappen 'Verifiera nyckel'.

När du har gjort det vill du gå till SeedProd » Landningssidor och klicka på knappen 'Lägg till ny landningssida'.

Efter det måste du välja en mall för kundvagnssidan.

SeedProds mallar är organiserade i olika kampanxtyper, som "kommer snart" och 404-sidor. Du kan klicka på flikarna högst upp på skärmen för att filtrera mallar baserat på kampanystyp.

När du hittar en mall du vill använda, vill du sväva över den och klicka på 'Kryss'-ikonen.

För den här handledningen kommer vi att använda 'Blank Mall' eftersom den låter oss lägga till endast de sektioner vi vill ha.

På nästa skärm kommer du att namnge din varukorgssida.

SeedProd kommer automatiskt att skapa en URL baserad på sidans titel, men du kan ändra denna URL till vad du vill.

När du är nöjd med informationen du har angett, klickar vi på knappen 'Spara och börja redigera sidan'.

Detta laddar upp SeedProd sidbyggare. Det är en enkel dra-och-släpp-redigerare som visar en liveförhandsgranskning av din anpassade kundvagnssida till höger och vissa inställningar till vänster.

Till att börja med lägger vi till en bild högst upp på sidan. Vi rekommenderar att du använder en bild som ser ut som din butiks vanliga sidhuvud, eftersom detta kommer att hålla ditt varumärke på plats och konsekvent.

Vi vill att headerbilden ska fylla hela bredden på kundvagnssidan, så låt oss klicka på den första layouten i rutan ‘Välj din layout’.

Detta skapar en layout i full bredd.

Välj nu blocket 'Bild' i menyn till vänster och dra det till layouten.

För att ladda upp din bild, klicka för att välja blocket 'Bild'.

I menyn till vänster klickar vi på 'Använd din egen bild' och väljer antingen en bild från mediabiblioteket eller laddar upp en ny fil från din dator.

Inställningarna till vänster låter dig anpassa bilden ytterligare. Till exempel kan du lägga till bild alt-text och ändra bildens storlek.

När du är nöjd med hur sidhuvudet ser ut kan du klicka på ikonen 'Lägg till kolumner' i sektionen 'Dra ett nytt block här'.

Du kan nu välja den layout du vill använda för huvudområdet för kundvagnssidan.

Klicka på innehålls- och sidofältslayouten.

Detta låter dig skapa en sektion för din kundvagn och ett område där du kan visa kundrecensioner för att öka konverteringar.

I menyn till vänster vill du skrolla till sektionen 'WooCommerce'. Här hittar vi blocket 'Kundvagn' och drar det till din layout.

Därefter kan du anpassa varje del av kundvagnen med hjälp av menyn till vänster.

Detta inkluderar att ändra teckensnitt, färger, knappar och mer.

När du är nöjd med hur kundvagnsområdet ser ut är det dags att lägga till ett block för kundrecensioner. Detta är en form av socialt bevis som kommer att uppmuntra besökare att slutföra sitt köp.

Hitta bara blocket 'Testimonials' och dra det till din layout.

Du kan nu ändra hur vittnesmålen ser ut i din webbutik.

Till exempel, i menyn till vänster ser du inställningar för att ändra färgen på kommentarbubblan, ändra justeringen och lägga till fler kundrecensioner.

En annan bra idé är att visa ett stjärnbetyg under ditt vittnesmål.

För att göra detta, hitta helt enkelt blocket ’Stjärnbetyg’ och dra det under vittnesmålsblocket.

Knapphet kan uppmuntra dina kunder att göra ett köp nu, snarare än att vänta och riskera att missa något. Med det i åtanke kanske du vill lägga till en nedräkningstimer som räknar ner minuterna tills besökarens kundvagn löper ut.

För att skapa denna känsla av brådska, hitta blocket 'Nedräkning' och dra det till toppen av din kundvagn.

Vi vill visa en ny timer för varje besökare, så du vill öppna rullgardinsmenyn 'Nedräkningstyp' och välja 'Besökartimer (Evighetsklocka)'.

Som standard börjar timern på 30 minuter, men du kan ändra detta genom att skriva ett nytt nummer i avsnittet 'Ställ in timer för'.

Vi vill att kunderna ska veta att deras varukorg kommer att löpa ut när timern når 0, så låt oss lägga till ett 'Rubrik'-block ovanför den.

Du kan sedan skriva in den text du vill visa för shoppare.

Du kan uppmuntra folk att lägga till fler varor i sin kundvagn genom att skapa en sektion för populära produkter.

För att marknadsföra din butiks största säljare, dra och släpp helt enkelt ett block för 'Mest sålda produkter' till din layout.

Som standard visar detta block dina mest populära produkter, men du kan använda inställningarna för att visa produkter som är på rea, dina nyaste produkter och mer.

För att göra detta, öppna helt enkelt rullgardinsmenyn 'Typ' och välj ett nytt alternativ.

För mer information, se vår guide om hur man visar populära produkter i WooCommerce.

När du är nöjd med hur kundvagnssidan ser ut är det dags att publicera den. Klicka på nedåtpilen bredvid 'Spara' och välj sedan alternativet 'Publicera'.

Därefter behöver du ändra kundvagns-URL:en i WooCommerce-inställningarna.

Gå helt enkelt till WooCommerce » Inställningar och byt sedan till fliken 'Avancerat'.

I den här fliken vill du öppna rullgardinsmenyn 'Kundvagnsida' och börja skriva in URL:en för din anpassade sida.

När rätt sida visas, klicka bara på den för att välja den.

Videohandledning

Om du är mer av en visuell inlärare kanske du vill kolla in vår videoguide om hur man skapar en anpassad WooCommerce kundvagnssida:

Prenumerera på WPBeginner

Bonustips: Hur du ytterligare förbättrar konverteringar på WooCommerce-kundvagnssidan

När du har skapat en anpassad WooCommerce-kundvagnssida finns det många sätt att minska övergivna kundvagnar och få fler försäljningar. Detta hjälper dig att tjäna mer pengar på din befintliga trafik.

Här är några enkla sätt att göra det.

1. Spåra dina konverteringar

Kundvagnsavhopp är ett stort problem för alla onlinebutiker. Faktum är att 60 till 80 % av personerna som lägger varor i sin kundvagn inte köper. (Källa: Statistik om kundvagnsavhopp)

Konverteringsspårning hjälper dig att förstå vad som fungerar på din kundvagnsida och vad som inte gör det. Du kan sedan använda SeedProd för att finjustera din anpassade kundvagnsida så att fler kunder slutför sina köp.

Det enklaste sättet att spåra WooCommerce-konverteringar är att använda Google Analytics. Att ställa in analys och skapa Google Analytics-mål manuellt kräver dock att man skriver mycket anpassad kod.

Med det i åtanke rekommenderar vi att du använder MonsterInsights. Det är det bästa Google Analytics-pluginet för WooCommerce och kommer med ett e-handels-tillägg som möjliggör konverteringsspårning med bara några få klick.

För att spåra dina WooCommerce-kundvagnskonverteringar, se vår steg-för-steg-guide om hur man ställer in WooCommerce-konverteringsspårning.

2. Minska varukorgsavhopp med tidsbegränsade popups i WooCommerce

Du kan också minska övergivna kundvagnar med ett tidsbegränsat popup-fönster. Det enklaste och mest effektiva sättet att göra detta är att använda OptinMonster.

Det är det bästa WordPress popup-pluginet, och dess unika Exit-Intent®-teknik visar popups exakt när en kund är på väg att lämna kundvagnssidan. Du kan till och med använda den här programvaran för att erbjuda kunder en speciell rabattkod om de slutför köpet nu.

OptinMonster har en kraftfull uppsättning funktioner för målinriktning och personalisering.

Till exempel, om du redan har erbjudit shopparen en kupong, kan du istället visa dem ett pedagogiskt popup-fönster. Till exempel kan du uppmuntra dem att höra av sig och ställa eventuella frågor de kan ha om dina produkter.

OptinMonster låter dig skapa olika kampanjer, inklusive popup-fönster, helskärmsvälkomstmattor, flytande fält, rullningsrutor och slide-ins.

Till exempel, om en kund lägger en vara i sin kundvagn och inte slutför köpet, kan du erbjuda dem en kupong för just den produkten med hjälp av en slide-in.

För mer information, se vår guide om hur du skapar en WooCommerce-popup för att öka försäljningen.

3. Öka försäljningen med sociala aktivitetsnotiser i WooCommerce

Sociala aktivitetsmeddelanden visar alla produkter som kunder köper i realtid. Detta kan lugna kunder att du är en populär, pålitlig webbplats och även använda FOMO (Fear Of Missing Out) för att driva dem att köpa.

Det enklaste sättet att lägga till sociala bevis-notiser på din kundvagnssida är med TrustPulse.

Det är det bästa sociala bevis-plugin för WordPress och WooCommerce på marknaden och har visat sig öka konverteringar med 15 %.

Våra partnerföretag använder det för att visa liveköp i sina butiker, vilket har förbättrat deras konverteringsgrad. För detaljer, se vår TrustPulse-recension.

Du kan lägga till pluginet på din webbplats på bara några minuter och börja visa en meddelandebubbla varje gång någon köper en produkt, startar en gratis provperiod och mer.

För mer information, se vår guide om hur du använder FOMO på din WordPress-webbplats.

Vi hoppas att den här artikeln hjälpte dig att skapa en anpassad WooCommerce-kundvagnssida utan att skriva någon kod. Du kanske också vill se vår steg-för-steg-guide om hur du anpassar WooCommerce-inloggningssidan och vårt experttips om de bästa WooCommerce-pluginsen för din butik.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.