Hur man anpassar WooCommerce-kassasida (det enkla sättet)

Under våra år av optimering av WooCommerce-butiker har vi märkt att kassasidan ofta är den avgörande punkten för försäljning.

Det är där kunder antingen slutför sitt köp eller överger sin kundvagn – och små förbättringar här kan leda till betydande intäktsökningar.

Efter att ha hjälpt otaliga butiksägare förstår vi vikten av att ha en kassasida som perfekt matchar dina affärsbehov.

Oavsett om du vill förenkla processen, lägga till anpassade fält eller organisera om layouten, finns det enkla sätt att uppnå detta.

I den här guiden delar vi steg-för-steg-instruktioner för att anpassa din WooCommerce-kassasida. Dessa är beprövade tekniker som vi har testat omfattande, utformade för att hjälpa dig att skapa en bättre kassaupplevelse samtidigt som du bibehåller tillförlitligheten i din butik.

Varför anpassa WooCommerce-utcheckningssidan i WordPress?

Studier visar att kunder överger mellan 70-85% av alla kundvagnar. Med andra ord, de flesta kunder kommer att lämna din kassa utan att spendera några pengar.

Med det i åtanke vill du göra allt du kan för att övertyga kunderna att slutföra sitt köp.

Problemet är att den inbyggda WooCommerce-kassan inte är optimerad för försäljning.

Genom att ersätta denna standarddesign med en anpassad WooCommerce-kassasida kan du ofta förbättra dina konverteringsgrader och få in mer pengar.

Till exempel kan du lägga till socialt bevis på kassasidan, som kundrecensioner och femstjärniga betyg. Detta kan uppmuntra folk att lita på ditt företag, även om de inte har köpt från dig tidigare.

Du kan också visa relaterade produkter som kunder ofta köper tillsammans och optimera layouten för att göra utcheckningsprocessen så enkel som möjligt.

I följande bild kan du se ett exempel på en optimerad kassaflödessida hämtad från AIOSEO-webbplatsen.

Med det sagt, låt oss titta på hur du enkelt kan anpassa din WooCommerce-kassa och tjäna mer pengar från din onlinebutik.

Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda.

• Metod 1. Anpassa din WooCommerce-kassasida med FunnelKit Builder
• Metod 2. Anpassa din utcheckningssida med SeedProd
• Bonus: Hur man minskar övergivna kassaflödessidor

Metod 1. Anpassa din WooCommerce-kassasida med FunnelKit Builder

Det enklaste sättet att skapa en anpassad WooCommerce-kassaflik är att använda FunnelKit Builder. Detta plugin kommer med färdiga kassafliksmallar och formulär.

Det har också inbyggda ‘optimeringar’ som är utformade för att hjälpa dig att få fler försäljningar. Vi har grundligt testat pluginet och funnit att det är mycket nybörjarvänligt.

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

Välj en professionellt utformad mall

Vid aktivering, gå till FunnelKit » Store Checkout. På den här skärmen klickar du på knappen ‘Create Store Checkout’.

Du kan nu välja mellan FunnelKits professionellt utformade mallar för kassa-sidor eller välja 'Börja från noll'. Vi rekommenderar att använda en mall för att hjälpa dig att snabbt skapa en kassa-sida med hög konvertering.

För att titta närmare på en mall, för bara muspekaren över den och klicka sedan på knappen 'Förhandsgranska' när den visas.

I våra bilder använder vi Hific-mallen, som har en sektion där du kan prata om vad du erbjuder och en sektion där du kan visa kundrecensioner.

När du hittar en mall du vill använda, klicka på ‘Importera den här tratten.’

Vid det här laget kan FunnelKit be dig att installera några extra plugins, som deras SlingBlocks-plugin för blockredigeraren.

Om du ser det här meddelandet, klicka på 'Aktivera' för att få de plugins du behöver.

Därefter kan du skriva in ett namn för kassasidan. Detta är bara för din referens så att du kan använda vad som helst som hjälper dig att identifiera sidan i WordPress-instrumentpanelen.

När det är klart, klicka på knappen 'Lägg till'.

På nästa skärm ser du alla steg som ingår i den här mallen. Du kan låsa upp extra steg genom att uppgradera till FunnelKit Pro.

Eftersom du använder gratisversionen av FunnelKit inkluderar mallen en Kassasida och en anpassad WooCommerce Tack-sida.

Skapa en anpassad utcheckningsdesign

För att gå vidare och anpassa kassan, klicka på länken 'Redigera'.

Du kan nu klicka på ‘Redigera mall’ för att öppna mallen i WordPress blockredigerare.

Notera: Om du använder ett sidbyggarplugin, kan FunnelKit öppna mallen i en annan redigerare. Om detta händer, måste du klicka på 'Byt till WordPress-redigerare' istället för 'Redigera mall'.

Du kan nu anpassa mallen på exakt samma sätt som du bygger vilken WordPress-sida som helst. Klicka helt enkelt på valfri block och finjustera den sedan med hjälp av inställningarna i den högra menyn och den lilla verktygsfältet.

Till exempel vill du vanligtvis ersätta platshållarlogotypen med din egen anpassade logotyp. För att göra detta, klicka för att markera bildblocket och välj sedan 'Ersätt' i miniverktygsfältet.

Välj nu antingen Öppna mediebibliotek och välj en bild från WordPress mediebibliotek, eller klicka på 'Ladda upp' och välj en fil från din dator.

Efter att ha valt en bild kan du lägga till bildens alt-text, ändra bredden och till och med lägga till rundade hörn med hjälp av inställningarna i den högra menyn.

Du vill också ersätta platshållartexten med information om din egen online marknadsplats och kundrecensioner. Klicka helt enkelt på valfritt textblock för att göra det redigerbart, på exakt samma sätt som du arbetar med text i standard WordPress blockredigerare.

När det är gjort kan du styla texten med hjälp av inställningarna i menyn till höger. Du kan till exempel använda ramar och box shadows för att få texten att sticka ut, ändra teckensnittsfamiljen eller ändra textfärgen i WordPress.

Upprepa helt enkelt dessa steg för att anpassa alla standardblock i FunnelKit Builder-mallen. Du kan också lägga till fler block genom att klicka på ikonen '+' eller ta bort block du inte behöver.

De flesta av dessa block bör vara bekanta, men FunnelKit kommer med några egna block. Eftersom du använder en utcheckningsmall kommer designen redan att ha ett FunnelKit Checkout-block, så klicka för att välja detta block.

I menyn till höger ser du en lista över alla olika sektioner i Kassablocket, som Form Header, Rabattkod och Betalningsgateways.

Klicka helt enkelt för att expandera varje sektion och gör sedan dina ändringar.

Vanligtvis, om sektionen har en rubrik, underrubrik eller knapptext kan du ändra den genom att skriva in den nya texten.

Vissa sektioner är valfria, så du kan aktivera och inaktivera dem med en omkopplare.

Till exempel kanske du vill lägga till en expanderbar orderöversikt så att kunden kan se alla artiklar i sin varukorg.

Du kan lägga till fler fält i kassan, eller ta bort de du inte behöver. Om du till exempel använder WooCommerce för att sälja digitala nedladdningar behöver du vanligtvis inte samla in någon leveransinformation.

Anpassa kassan

När du är nöjd med hur kassasidan ser ut är det dags att titta närmare på formulärfälten och göra eventuella nödvändiga ändringar.

För att göra detta, klicka på ‘Uppdatera’ för att spara dina ändringar och välj sedan ‘Tillbaka till kassan.’

Klicka nu på fliken 'Fält' för att se alla olika sektioner och fält som utgör kassan.

Du kan ordna om dessa fält med dra-och-släpp.

För att lägga till fler fält, dra dem helt enkelt från den högra sektionen och släpp dem sedan på ditt formulär.

Du kan också organisera dessa fält i sektioner genom att klicka på knappen 'Lägg till sektion'.

I popup-fönstret som visas, skriv helt enkelt in ett namn för sektionen. Eftersom kunderna kommer att se detta, är det en bra idé att lägga till en beskrivande, användbar rubrik.

När det är gjort, klicka på ‘Add.’

Du kan nu lägga till fält i sektionen med dra-och-släpp.

Vill du ta bort ett fält från kassaformuläret? Håll sedan muspekaren över fältet och klicka på det röda 'x'-ikonen när den visas.

För att anpassa några av FunnelKit-fälten, klicka helt enkelt på det fältet.

De inställningar du ser kan variera beroende på fältet, men du kan vanligtvis ändra dess etikett, lägga till ett platshållarvärde eller göra fältet obligatoriskt genom att markera rutan 'Krävs'.

När du är nöjd med hur kassanfälten är konfigurerade, glöm inte att klicka på 'Spara ändringar' för att lagra dina inställningar.

Få fler försäljningar med FunnelKit-optimeringar

För att få fler försäljningar är det en bra idé att aktivera några av FunnelKits optimeringar genom att klicka på fliken 'Optimizations'.

Här ser du alla olika optimeringar som kan göra utcheckningsprocessen enklare.

Det kostnadsfria FunnelKit-pluginet levereras med expresskasseknappar för alla de bästa WooCommerce-betalningsgateways. Detta gör att shoppare kan klicka på sin föredragna expresskasseknapp och betala med ett befintligt konto, liknande en köp nu-knapp.

Eftersom kunden inte behöver fylla i kassan, kan detta minska antalet övergivna kundvagnar och hjälpa dig att få fler försäljningar.

För att ställa in snabbkassa, välj 'Express Checkout Buttons' från menyn till vänster. Klicka sedan på knappen 'Aktivera' och använd rullgardinsmenyn 'Välj position' för att ändra var knappen visas på kassasidan.

Var bara medveten om att du måste aktivera betalningsbegäransknappar för att kunna använda Stripes Apple Pay-knapp.

Därefter kanske du vill aktivera det förbättrade telefonfältet. När en kund anger sin leveransadress kan FunnelKit visa en landskapsflagga bredvid telefonfältet.

Detta låter shoppare veta att de har skrivit rätt adress.

För att lägga till den här funktionen, välj 'Förbättrat telefonfält' från menyn till vänster och klicka sedan på knappen 'Ja' bredvid 'Aktivera'.

På den här skärmen kan du också validera telefonnumret med hjälp av kundens valda land. Detta är ett sätt att kontrollera att kunden har angett ett giltigt telefonnummer.

För att aktivera denna kontroll, välj helt enkelt knappen ’Ja’ bredvid ’Validera telefonnummer.’

Slutligen kan du välja om telefonnumret ska sparas med landskod eller utan landskod. Om du säljer till en internationell publik är det oftast vettigt att välja ‘With country code.’

När du är nöjd med hur optimeringarna är inställda, klicka på 'Spara ändringar'.

Som du kan se har FunnelKit många fler optimeringar som kan hjälpa dig att få fler försäljningar. Detta inkluderar automatisk ifyllning av kundens fakturerings- och leveransadress, automatisk tillämpning av kuponger och förifyllning av utcheckningsformuläret för återkommande kunder.

För att låsa upp dessa kraftfulla WooCommerce-optimeringar behöver du uppgradera till FunnelKit Builder Pro.

Publicera den anpassade WooCommerce-utcheckningssidan

Gratispluginet FunnelKit har många fler inställningar och funktioner som kan hjälpa dig att skapa en kassa-sida med hög konvertering. Detta är dock allt du behöver för att skapa en anpassad WooCommerce-kassa-sida.

När du är nöjd med hur kassasidan är inställd är det dags att göra den live genom att klicka på knappen 'Utkast'.

Om du vill förhandsgranska sidan innan du publicerar den, klicka på 'Förhandsgranska'. Detta öppnar den anpassade kassasidan i en ny flik.

För att göra sidan live, klicka på ‘Draft’ men välj den här gången ‘Published.’ Nu om du besöker din WordPress-webbplats kommer du att se den anpassade utcheckningssidan live.

Metod 2. Anpassa din utcheckningssida med SeedProd

Du kan också skapa en anpassad WooCommerce-kassasida med hjälp av SeedProd.

Det är den bästa landningssidbyggaren som används av över 1 miljon webbplatser och kommer med över 180 professionellt utformade mallar, inklusive e-handelsmallar som du kan använda för att skapa försäljningssidor och lead-sugsid.

Ännu bättre, SeedProd har fullt stöd för WooCommerce och kommer till och med med speciella WooCommerce-block som du kan använda för att snabbt skapa en anpassad kassasida.

Flera av våra partner varumärken har designat hela sina webbplatser med det, och de har älskat hur användarvänligt det är. För mer information, se vår SeedProd-recension.

Eftersom det låter dig skapa alla typer av sidor är SeedProd ett utmärkt val om du vill anpassa andra sidor, eller till och med skapa ett anpassat WordPress-tema för din webbutik.

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

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

Du kan hitta denna information under ditt konto på SeedProd-webbplatsen. Efter att ha angett licensen klickar du på knappen 'Verifiera nyckel'.

Välj en SeedProd-mall

Därefter går du till SeedProd » Landningssidor och klickar på 'Lägg till ny landningssida'.

Välj sedan en mall för din anpassade kassasida.

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

Att välja en design som matchar den typ av sida du vill skapa hjälper dig att bygga sidan snabbare. Varje mall är dock helt anpassningsbar så att du alltid kan finjustera designen för att bättre passa din onlinebutik.

För den här guiden, välj 'Tom mall' så att du kan börja med en ren tavla.

För att välja en mall, för muspekaren över den och klicka sedan på 'Bock'-ikonen.

Gå sedan vidare och skriv in ett namn för din anpassade kassasida. SeedProd kommer automatiskt att skapa en URL baserad på sidans titel, men du kan ändra denna URL till vad du vill. Till exempel kan du förbättra din WordPress SEO genom att lägga till relevanta nyckelord.

För att lära dig mer, se vår detaljerade guide om hur du gör nyckelordsanalys för din WordPress-blogg.

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

Detta tar dig till dra-och-släpp-redigeraren, där du kan bygga din anpassade WooCommerce-kassasida.

Designa en högkonverterande kassasida

SeedProd-redigeraren visar en liveförhandsgranskning av din kassa-sida till höger och vissa blockinställningar till vänster.

Börja bara med att skapa en varumärkesanpassad rubrik.

Här kan du använda en sektion, som är en samling block som ofta används tillsammans. Klicka helt enkelt på fliken 'Sections' och välj sedan kategorin 'Header'.

Därefter för muspekaren över sektionen 'Rubrik 1' och klicka på 'Plus'-ikonen.

Detta lägger till en rubriksektion i din layout.

För att börja vill du ersätta platshållaren 'Din logotyp' genom att klicka för att välja det blocket.

Klicka sedan på ikonen ‘Välj bild’ i menyn till vänster.

Du kan nu välja en bild från mediabiblioteket eller ladda upp en ny fil från din dator.

Header 1-sektionen levereras med en navigeringsmeny. Detta uppmuntrar dock besökare att lämna kassasidan utan att genomföra ett köp, så det är en bra idé att ta bort den.

För att ta bort Navigeringsmeny-blocket, klicka helt enkelt för att markera det blocket. Klicka sedan på alternativet 'Ta bort block'.

När du har gjort det, klicka på call to action-knappen.

Det är smart att ge shoppare en möjlighet att gå tillbaka till kundvagnssidan och lägga till fler artiklar eller ändra kvantiteten. Med det i åtanke, skriv in den uppmaning till handling som du vill använda för den här knappen, till exempel 'Visa kundvagn' eller liknande.

Skriv sedan in URL:en till din WooCommerce-kassasida i fältet 'Länk'.

Nu kan shoppare besöka kundvagnssidan genom att klicka på denna knapp.

Lägg till innehåll för merförsäljning och korsförsäljning

Därefter är det dags att välja en layout för resten av din kassasida.

Det är en bra idé att visa några rekommenderade produkter i ett sidofältsavsnitt, eftersom detta uppmuntrar shoppare att lägga till fler artiklar i sin kundvagn. Med det i åtanke, klicka på innehålls- och sidofältslayouten under 'Välj din layout'.

När du har gjort det, hitta blocket 'Kassa' i menyn till vänster och dra det till din layout.

Du kan helt anpassa hur din kassa ser ut med hjälp av inställningarna i menyn till vänster, inklusive att ändra färgschemat, teckensnitt, länkfärg, knappar och mer.

När du är nöjd med hur kassasektionen ser ut är det dags att lägga till en sektion för populära produkter eller rekommenderade produkter. Detta kan ge dig mer försäljning genom att marknadsföra ytterligare produkter som shoppare kanske vill köpa.

För att skapa den här sektionen, dra helt enkelt ett block för 'Mest sålda produkter' till din sida.

Du kan nu konfigurera detta block med hjälp av inställningarna i menyn till vänster. För mer information, se vår guide om hur man visar populära produkter i WooCommerce.

Därefter är det en bra idé att lägga till en rubrik ovanför de populära produkterna. Dra helt enkelt blocket 'Rubrik' till din sida och släpp det ovanför blocket för populära produkter.

Klicka sedan för att välja blocket 'Rubrik' och skriv in rubriken du vill använda.

Visa kundrecensioner och betyg

När du har gjort det, rekommenderar vi att du visar socialt bevis genom att lägga till ett block med kundomdömen. Hitta helt enkelt blocket 'Omdömen' 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 dina vittnesmål. Detta är ett utmärkt val om du redan har många positiva recensioner.

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

Publicera WooCommerce-utcheckningssidan

När du är nöjd med hur WooCommerce-kassidan ser ut är det dags att publicera den genom att klicka på nedåtpilen bredvid ‘Spara.’

Välj sedan alternativet 'Publicera'.

Nu, om du besöker din butik kommer du att se utcheckningssidan live.

Proffstips: Konverteringsspårning kan hjälpa dig att se vad som fungerar på din kassa och vad som inte gör det. Du kan sedan använda denna insikt för att finjustera din kassa med hjälp av SeedProd. För mer information, se vår guide om hur man ställer in WooCommerce konverteringsspårning.

Tilldela din utcheckningssida till WooCommerce

Vid det här laget har du publicerat den anpassade kassasidan, men din WordPress-blogg eller webbplats använder fortfarande standarddesignen. Du behöver ändra standard-URL-inställningarna så att WooCommerce skickar kunder till den nya kassasidan istället för standarden.

För att göra detta, gå till WooCommerce » Inställningar och klicka på fliken 'Avancerat'.

Därefter öppnar du rullgardinsmenyn ‘Checkout page’ och börjar skriva in URL:en till den anpassade kassasidan du just skapade.

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

När det är klart, scrolla ner till botten av sidan och klicka på ‘Spara ändringar’ för att spara dina inställningar. WooCommerce kommer nu att använda den anpassade kassan.

Bonus: Hur man minskar övergivna kassaflödessidor

Övergivande av kassasidan sker när en kund påbörjar kassan men inte slutför sin betalning.

Liknar varukorgsabandonering, det är ett stort problem för nätbutiker.

När det gäller att minska antalet avbrutna köp är det en bra början att skapa en anpassad sida. Det finns dock många fler sätt att öka din försäljning.

Undvik att lägga till några extra kassagebyrer

När en kund går till kassan förväntar de sig att totalsumman ska vara liknande produktpriset. Om de kommer till kassasidan och ser skatter, höga fraktkostnader och andra ytterligare avgifter, är chansen stor att de inte slutför köpet.

Vissa kunder kanske fortsätter med köpet om de tycker att kostnaderna är motiverade. Det är dock mycket bättre att vara öppen med din prissättning så att kunderna vet vad de kan förvänta sig.

Om du har många extra avgifter, rekommenderar vi att du lägger till dessa i dina produktpriser. Detta är mycket mindre förvirrande för kunden.

När det är möjligt är det också en bra idé att erbjuda gratis frakt.

Gör kontoskapande valfritt eller enklare

Att tvinga shoppare att skapa ett konto vid utcheckning lägger till mycket friktion i köpprocessen och kan öka andelen övergivna kundvagnar.

Du kan tillåta användarregistrering på din WordPress-webbplats, men du bör undvika att göra det obligatoriskt. Istället kan du tillåta kunder att checka ut som gäster men erbjuda dem en kupongkod om de skapar ett konto.

På så sätt kan du generera leads och växa din e-postlista utan att förlora försäljning.

Erbjud fler betalningsalternativ i kassan

De flesta har en föredragen betalningsmetod. Det kan vara PayPal-kontot som är sparat på kundens dator eller kreditkortet som finns nära till hands.

Shoppare kan överge din kassasida om du inte stöder deras favorits betalningsmetod. Även om det är omöjligt att erbjuda alla metoder, bör du sträva efter att erbjuda de vanligaste betalningsalternativen.

För mer information, se vår lista över de bästa WooCommerce-betalningsgateways för WordPress.

Visa ett tidsbegränsat popup-fönster

Du kan också minska övergivna kundvagnar med ett tidsinställt popup-fönster.

OptinMonster är det bästa WordPress popup-pluginet och har en unik Exit-Intent®-teknik som kan visa popups exakt när en kund är på väg att lämna kassasidan.

Du kan till och med använda OptinMonster för att erbjuda shoppare en speciell rabattkod om de slutför köpet nu.

Konfigurera push-meddelanden för övergivna kundvagnar

Ett annat bra sätt att minska övergivna kundvagnar är att ställa in webbpush-notiser.

Dessa aviseringar visas i användarnas mobil- och webbläsare, även när de inte är på din webbplats. Detta gör det enkelt att nå kunder och påminna dem om att handla.

PushEngage används av över 25 000 smarta företagare, och det är den bästa programvaran för webb push-notiser på marknaden. Den låter dig enkelt skapa WooCommerce-kampanjer för övergivna kundvagnar.

Du kan också ställa in kampanjer för övergiven kundvagn, prisuppdateringsvarningar, nya produktmeddelanden, lagervarningar och mer.

Skapa en anpassad WooCommerce-varukorgssida

Efter att ha optimerat WooCommerce kassasida, kanske du också vill överväga att anpassa din WooCommerce kundvagnssida.

Genom att optimera både kundvagns- och kassasidorna kan du få hela köpprocessen att kännas enkel så att du inte missar några försäljningar. Du kan också designa båda sidorna för att ha samma varumärkesprofil så att besökarna får en konsekvent kassaupplevelse.

För detaljerade steg-för-steg-instruktioner, se vår guide om hur man skapar en anpassad WooCommerce-kundvagnssida.

Vi hoppas att den här artikeln hjälpte dig att enkelt anpassa WooCommerce-kassidan. Du kanske också vill se vår guide om hur man skapar ett WooCommerce-popup för att öka försäljningen och vårt expertval av bästa WooCommerce-plugins 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.