WooCommerce är en flexibel och kraftfull plugin som du kan använda för att förvandla din WordPress-webbplats till en dynamisk ecommerce butik. Men om du är ute efter att minska övergivna kundvagnar, driva omvandlingar, och öka intäkterna, är det viktigt att ägna stor uppmärksamhet åt din WooCommerce kassasida.

Det finns så många olika sätt att styla och redigera kassasidor i WooCommerce. Oavsett om du startar din första webbshop och försöker förstå hur den här sidan fungerar, eller om du vill förbättra din kunskap om hur man stylar kassasidor på din befintliga WooCommerce webbplats, så kommer vi att hjälpa dig.

I det här inlägget ska vi förklara vad WooCommerce kassasida är och hur det fungerar. Sedan går vi igenom de många olika alternativ du har för att styla, ändra och utnyttja den för att optimera konverteringar med hjälp av plugins, kod, teman och mycket mer.

Vi kör igång!

En översikt över kassasidan i WooCommerce

När du först konfigurerar din WooCommerce-butik skapar och tilldelar pluginen automatiskt en kassasida. Om du förhandsgranskar den på framsidan av din webbplats, märker du att det är ganska enkelt:

Standardsidan för WooCommerce-utcheckning.

Standardsidan för WooCommerce-utcheckning.

Som standard frågar WooCommerce kunderna om viss grundläggande information. Detta inkluderar:

Detta är viktig information att inkludera på en WooCommerce kassa sida. Det ger de uppgifter som krävs för att en kund ska kunna slutföra sitt köp, och för att webbplatsen ska kunna behandla deras betalningsinformation.

Men det finns inget här som nödvändigtvis bidrar till att öka antalet konverteringar eller minska nedläggningen av kassan. Dessutom kan det hända att standardsidan inte erbjuder den mest relevanta eller användbara informationen för just ditt företag. Därför, liksom många andra WooCommerce webbplatsägare, kanske du är ute efter att ändra både design och innehåll på din kassasida.

Innan vi kommer in på de olika sätt du kan anpassa kassasidan i WooCommerce, finns det några saker att förstå först.

Låt oss berätta om var du hittar den här sidan, liksom de olika standardinställningar och funktioner som finns inom WooCommerce plugin.

Var du hittar standardsidan och inställningar för WooCommerce kassasida

WooCommerce skapar automatiskt en kassasida för din butik när du väl aktiverar insticksprogrammet. Du kan leta upp den genom att navigera till Sidor  >  Kassan i  din administratörsinstrumentpanel  :

Kassasidan i WooCommerce.

Kassasidan i WooCommerce.

Du kan redigera denna sida precis som du skulle någon WordPress innehåll. Du kan till exempel ändra sidans titel och permalänk, lägga till en presenterad bild, ändra sidattributen osv. Den använder också [woocommerce_checkout] kortkod:

WooCommerce kassasida kortkod i WordPress.

WooCommerce kassasida kortkod i WordPress.

Det finns en handfull standardalternativ för att konfigurera den här sidan, varav några du kan hitta under WooCommerce  >  Inställningar  >  Avancerat:

Fliken 'Avancerat' i WooCommerce-inställningarna

Fliken ’Avancerat’ i WooCommerce-inställningarna

På den här skärmen kan du under avsnittet  Utskriftsformat välja en annan sida som ska användas som kassaskärm för din butik. Du har också möjlighet att tvinga fram en säker HTTPS-anslutning.

På sidan Allmänna inställningar kan du aktivera kuponger att använda i kassan, och konfigurera hur skatterna ska beräknas:

Sidan för allmänna inställningar i WooCommerce.

Sidan för allmänna inställningar i WooCommerce.

Under fliken Konton och sekretess kan du också hitta några alternativ för kontoskapande och gästcheckar:

Fliken 'Konton och sekretess' i WooCommerce-inställningarna

Fliken ’Konton och sekretess’ i WooCommerce-inställningarna

Under det finns det ett sekretesspolicy avsnitt där du kan ändra sekretesspolicytext som visas på kassasidan:

Inställningar för sekretesspolicy i WooCommerce

Inställningar för sekretesspolicy i WooCommerce

Bortom dessa inbyggda inställningar har du begränsade möjligheter för att anpassa din kassasida med hjälp av WooCommerce-pluginen ensam. Lyckligtvis finns det andra metoder du kan använda för att förbättra dess utseende och utöka dess funktionalitet.

Varför du kanske vill ändra din WooCommerce kassasida

Kassasidan är det sista kunderna ser innan de slutför sina inköp. Det kan göra skillnaden mellan om de genomför köpet eller om de lämnar din webbplats helt och hållet.

Därför är det viktigt att se till att din WooCommerce kassasida är utformad väl och fungerar på ett sätt som uppmuntrar kunderna att genomföra köpet. Det finns många sätt du kan göra för en bättre upplevelse, till exempel genom att:

Oavsett om du vill se över standardsidan helt eller göra mindre ändringar, är det viktiga att du kan göra det med lätthet. Lyckligtvis har du flera alternativ.

Click to Tweet

Metoder du kan använda för att ändra din WooCommerce kassasida

Det finns många sätt att ändra din WooCommerce kassasida. Det bästa du kan använda beror på en handfull faktorer, till exempel den specifika redigering du försöker göra och din komfortnivå med kodning.

Några av de metoder du kan använda för att förbättra din WooCommerce kassasida inkluderar:

I följande avsnitt tar vi en titt på några av de mest effektiva ändringarna du kan göra på din WooCommerce-sida. För varje, så förklarar vi varför du kanske vill göra redigeringen, och gå igenom de olika metoder du kan använda för att gå tillväga.

Så här anpassar du fälten för din WooCommerce kassasida

En av de vanligaste ändringarna du kan göra på en WooCommerce-sida är att ändra dess formulärfält. Dessa tar vanligtvis upp mest utrymme på sidan, så de måste vara relevanta. Oavsett om du vill ta bort fält, ordna om deras ordning eller lägga till nya anpassade fält har du ett par alternativ för att gå till väga. Du kan antingen använda en plugin eller redigera koden direkt.

Använda en plugin för att ändra kassafälten i WooCommerce

Om du vill ha ett snabbt och enkelt sätt att anpassa kassafälten i WooCommerce rekommenderar vi att du använder ett insticksprogram. Det finns en handfull alternativ att välja mellan.

En av de mest populära är checkout Field Editor plugin:

Checkout Field Editor plugin WooCommerce

Checkout Field Editor plugin WooCommerce

Detta är ett premium-verktyg som låter dig lägga till eller redigera formulärfälten på din WooCommerce-kassasida. Du kan aktivera eller inaktivera vissa fält, samt ordna om deras ordning.

Även om gratis versionen låter dig hantera dessa grundläggande uppgifter, levereras WooCommerce Checkout Field Editor Pro  med ytterligare funktionalitet. Detta inkluderar 17 fält typer och anpassade krokar.

För att använda denna plugin, kan du installera det på din WooCommerce webbplats genom att navigera till Plugins  >  Lägg till nya och sedan söka efter den. När du hittar den, klicka på knappen  Installera nu, följt av  Aktivera.

När den aktiveras kan du konfigurera inställningarna genom att gå till WooCommerce > Kassaformulär:

Insticksprogrammet Checkout Form Editor i WooCommerce

Insticksprogrammet Checkout Form Editor i WooCommerce

Det finns tre olika typer av fält som du kan redigera:

  1. Fakturering
  2. Frakt
  3. Ytterligare

Du kan välja vilket fält du vill ändra och klicka sedan på knappen Ta bort,  Aktivera eller Inaktivera.  Om du vill lägga till ett nytt fält väljer du Lägg till fält.

Om du vill ändra ett befintligt formulärfält, markera rutan till vänster, och klicka på knappen  Redigera. En panel kommer att öppnas där du kan ändra fälttyp (i premiumversionen bara), redigera fältets etikett, välja om det kommer att krävas, och mycket mer:

Fältpanelen för redigeringsutcheckning i plugin-programmet Kassafältsredigeraren WooCommerce

Fältpanelen för redigeringsutcheckning i plugin-programmet Kassafältsredigeraren WooCommerce

När du är klar, klicka på knappen Spara.   När du är klar med alla ändringar du önskar till kassasidans fält, se till att klicka Spara ändringar längst ned på skärmen.

Mer detaljerad vägledning kan du hitta i WooCommerces dokumentation om hur du använder checkout Field Editor plugin.

Naturligtvis är detta bara en av många plugins du kan använda för att ändra dina WooCommerce kassafält. Ytterligare alternativ värt att överväga inkluderar Flexibel Kassafält  och WooCommerce Checkout Manager, som vi ska diskutera mer senare i det här inlägget.

Redigera utcheckningsfälten med hjälp av kod

Ett annat alternativ för att redigera fälten på din WooCommerce-utcheckningssida är att använda anpassad kodning. Naturligtvis kräver detta en viss nivå av teknisk kunskap för att kunna arbeta med dina webbplats filer. Fördelen är att du har mer flexibilitet när det gäller anpassning än vad du skulle med en tredjeparts plugin.

Du kan redigera utcheckningsfälten med hjälp av webbplatsens  funktioner.php  fil och filter som:

WooCommerce åtgärder och filter låter dig redigera kassafälten på nästan alla sätt som du önskar. Du kan till exempel ta bort dem helt och hållet, lägga till nya eller ändra den visade texten. Med hjälp av woocommerce_checkout_fields kommer det att göra det möjligt för dig att åsidosätta alla fält.

Anta att du vill ändra platshållartexten för order_comments  fältet. Som standard anges den som följande:

_x('Notes about your order, e.g. special notes for delivery.', 'placeholder', 'woocommerce')

Om du vill ändra den kan du lägga till det här kodavsnittet i dina funktioner.php  fil:

// Hook in

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function custom_override_checkout_fields( $fields ) {

$fields['order']['order_comments']['placeholder'] = 'My new placeholder';

return $fields;

}

Om du vill ta bort ett fält kan du använda följande:

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {

unset($fields['order']['order_comments']);

return $fields;

Det finns många ändringar du kan göra i fälten på din kassasida, så vi kommer inte att berätta om alla här. Du kan hitta en användbar lista över fältet för åsidosättningsfältkoder på GitHub.

Så här ändrar du mallen för WooCommerce kassasidan

Som standard kommer din WooCommerce kassa sidmall att baseras på ditt webbplatstema. Men kanske vill du ändra design för att det bättre ska passa ditt varumärke eller kanske vill du bara göra små ändringar i innehållet på mallsidan.

De två huvudsakliga metoder du kan använda för att ändra detta är med hjälp av en färdigbyggd mall eller lägga till koder. Vi börjar med den först nämnda.

Börja med en förbyggd mall för att anpassa din kassasida

Det enklaste sättet att ändra designen på din WooCommerce kassasida är genom att installera ett färdigbyggt tema, till exempel i WooCommerce Themes Store. Det finns en mängd olika gratis alternativ tillgängliga, samt premium teman.

Du kan söka efter kassateman på en sida eller någon annan typ av specifika mallar som du är intresserad av att använda. Du kan också hitta massor av WooCommerce teman på Envato Market.

Använd kod för att anpassa mallen för din WooCommerce kassasida

Om du är bekväm med att redigera kod kan du också ändra kassasidemallen manuellt. Beroende på vilket hosting du har kan du eventuellt göra detta via Filhanteraren i cPanel  eller en SFTP-klient (Secure File Transfer Protocol).

Du kan använda åtgärdskrokar  för att lägga till, redigera eller ta bort element från din kassasida. Det finns nio huvudsakliga åtgärdskrokar som WooCommerce använder för kassasidan:

Dessa åtgärdskrokar lägger till markeringar på sidan, som du kan använda för att anpassa både dess stil och funktionalitet. Om du vill använda dessa åtgärdskrokar för att ändra din kassasidemall kan du göra det genom att redigera kassaformuläret PHP-fil

Du kan leta upp mallfilerna för WooCommerce  under /woocommerce/templates. Från webbplatsens rotkatalog måste du navigera till  wp-content/plugins/woocommerce:

Mappen WooCommerce-mallar

Mappen WooCommerce-mallar

Inom dessa filer finns det krokar du kan använda för att lägga till och ordna om innehåll på mallsidan, utan att egentligen redigera mallfilerna. Om du vill skapa en anpassad temamall för din kassasida måste du först skapa en ”woocommerce/checkout”-mapp i ditt temas mapp.

Därefter kopierar du sidan WooCommerce-sidans mall, som du hittar på woocommerce/templates/checkout/form-checkout.php:

Sidans mallfil för WooCommerce-utcheckning

Sidans mallfil för WooCommerce-utcheckning

Sedan lägger du till den i den nya mappen som du just skapade. Därefter kan du redigera filen för att göra dina önskade ändringar. När du sparar filen kommer WooCommerce plugin ladda denna mall och åsidosätta standard sidmallen.

Hur man skapar en ensidig WooCommerce kassa

Ett av sätten att förbättra kassaerfarenheten för dina kunder, och i sedan minska att köpen inte genomförs, är att göra det så snabbt och enkelt som möjligt. Om du vill korta ner utcheckningsprocessen kan du göra det genom att skapa en ensidig kassa i WooCommerce.

Det finns flera sätt att göra detta på. Som vi nämnde tidigare kan du leta efter ett ensidigt tema eller en mall som kommer att ge en enda kassasida. Men om du gillar ditt nuvarande tema, kanske du inte vill ändra det.

Om så är fallet, oroa dig inte. Det finns andra alternativ, till exempel

WooCommerce ensidigt kassasida tillägg:

Tillägget WooCommerce One Page Checkout

Tillägget WooCommerce One Page Checkout

Eftersom denna lösning har utvecklats av WooCommerce, så vet du att det är säkert, pålitligt, och erbjuder gott om stöd. Förutom att du kan omvandla någon sida till en kassasida, kommer den med en uppsjö av funktioner för att optimera en-sids kassaprocessen.

Du kan:

Efter att du har köpt tillägget via ditt WooCommerce-konto kan du ladda ner insticksprogrammet, och sedan installera och aktivera den på din WooCommerce-webbplats.

Om du vill använda den navigerar du till Sidor > Lägg till ny  och väljer ikonen En sidutcheckning  i verktygsfältet för redigeraren:

Ikonen för tillägget Ensidskassa i WordPress-redigeraren

Ikonen för tillägget Ensidskassa i WordPress-redigeraren

På panelen som öppnas kan du klicka i fältet Produkter, och börja skriva namnet på den eller de produkter som du vill lägga till.

Därefter väljer du den mall du vill använda (Produktlista, Produkttabell, Pristabell eller Enstaka produkt) och klicka på Skapa kortkod.

Du kan också infoga kortkoden på en sida manuellt i alla inlägg eller sidor. Om du vill veta mer om denna plugin och hur du använder den kan du hänvisa till dokumentationen för WooCommerce ensidskassa.

Hur man skapar fri frakt under WooCommerce kassaprocessen

Som en ecommerce företagare, så finns det många olika strategier du kan använda dig av för att uppmuntra dina kunder att spendera mer pengar. En av dessa är att erbjuda gratis frakt.

Om du gillade den här artikeln, då kommer du att älska Kinstas WordPress-värdplattform. Förbättra din hemsida och få 24/7 support från vårt veteran Word Press team. Vår Google Cloud-drivna infrastruktur fokuserar på automatisk skalning, prestanda och säkerhet. Låt oss visa dig Kinsta-skillnaden! Kolla in våra planer

Naturligtvis kanske du inte vill erbjuda fri frakt på varje beställning. Emellertid, lägga till det som ett incitament på ordersummor som når ett visst belopp, vilket kan hjälpa dig att uppmuntra shoppare att spendera mer än de annars skulle.

Därför kanske du vill konfigurera din WooCommerce-kassasida så att den automatiskt skapar fri frakt på ordrar över ett visst värde, till exempel 100 USD.

Det första du behöver göra är att erbjuda gratis fraktmetod till relevanta frakt Zoner.

För att göra det, navigera till WooCommerce > Inställningar > Frakt:

Inställningarna för WooCommerce Frakt

Inställningarna för WooCommerce Frakt

Håll muspekaren över den sändningszon du vill ändra och klicka sedan på länken Redigera. Om du inte har lagt till några zoner ännu väljer du knappen Lägg till sändningszon först och följer uppmaningarna innan du fortsätter.  

Nästa, klicka på Lägg till fraktmetod. I rutan som öppnas väljer du Fri frakt i dropdown-menyn, följt av Lägg till fraktmetod igen:

Lägga till en fri fraktmetod i WooCommerce

Lägga till en fri fraktmetod i WooCommerce

Nästa, från listan Fraktmetoder på inställningssidan, välj Fri frakt och klicka på länken Redigera.

En Fri frakt inställningspanel kommer att öppnas. Välj Ett minsta orderbelopp:

Fri frakt inställningar i WooCommerce

Fri frakt inställningar i WooCommerce

Du kan sedan definiera minsta orderbelopp. När du är klar klickar du på knappen Spara  ändringar.

Hur man direktlänkar produkter till WooCommerce kassasidan

Ett annat sätt du kan förbättra din kunskap inom kassasidor på för dina kunder är att skapa direkt kassalänkar. Detta är till hjälp för att skicka kunder direkt till kassan från produkt- och försäljningssidor.

Skapa en direktutcheckningslänk manuellt

Om du vill skapa och lägga till en direkt utcheckningslänk i WooCommerce kan du använda följande webbadress: exampledomain.com//checkout/?add-to-cart=ID.

Obs: du vill ersätta ”exempeldomän” och ”ID” med ditt domännamn och det specifika produkt-ID som du länkar till kassasidan.

Om du vill hitta ett produkt-ID navigerar du till Produkter > Alla produkter i  instrumentpanelen för administratörer. Bläddra till produkten du vill skapa direktlänken för och håll sedan pekaren över namnet på den för att avslöja produkt-ID-numret:

Ett WooCommerce-produkt-ID

Ett WooCommerce-produkt-ID

När du klistrar in produkt-ID i ovan nämnda webbadress, kan du sedan placera länken var som helst på din WooCommerce webbplats. Du kan upprepa denna process för var och en av dina produkter, även för variabel och grupperade objekt.

Skapa en direkt kassalänk med hjälp av en plugin

Vi inser att ovanstående strategi kanske inte är den mest effektiva metoden för alla användare. Beroende på hur många produkter du har i din WooCommerce butik, så kan det vara mycket tidskrävande.

Lyckligtvis, om du letar efter en snabbare metod kan du också använda Direkt utcheckning för WooCommerce  plugin:

Direkt kassan för WooCommerce plugin

Direkt kassan för WooCommerce plugin

Med det här premium verktyget kan du förenkla kassaprocessen på flera olika sätt, bland annat genom att lägga till en direktlänk från en produktsida på kassaskärmen. När du har installerat och aktivera plugin på din WooCommerce webbplats, navigera till WooCommerce > Direkt Kassa:

Inställningarna för direktutcheckning för WooCommerce-insticksinställningarna

Inställningarna för direktutcheckning för WooCommerce-insticksinställningarna

Under fliken Allmänt väljer du Ja för alternativet Lägg till i omdirigering i kundvagnen och väljer sedan Kassan på menyn Lägg till i omdirigering i varukorgen i dropdown. Klicka på Spara ändringar när du är klar.

Därefter navigerar du till fliken Produkter:

Alternativet att omdirigera till varukorgen i Direct Checkout for WooCommerce

Alternativet att omdirigera till varukorgen i Direct Checkout for WooCommerce

Aktivera sidan Omdirigera till kundvagnen efter lyckat  tilläggsalternativ. Igen, klicka på knappen  Spara  ändringar. Så där ja!

Hur du testar din WooCommerce kassasida

Vid denna punkt, så har du förhoppningsvis genomfört en mängd olika sätt att förbättra din WooCommerce kassasida på. Nu är det viktigt att se till att din kassaprocess fungerar korrekt, för att minska på lämnande kunder och för att se till att inga fel kommer att avbryta kundresan.

Lyckligtvis finns det ett enkelt sätt som du kan skicka en testorder på och betala genom din WooCommerce butik, för att se till att allt fungerar som det ska. För att göra detta måste du först installera plugin-programmet WooCommerce Betalningar  på din webbplats (om du inte redan har det):

Plugin för WooCommerce-betalningar

Plugin för WooCommerce-betalningar

När du har installerat och aktiverar insticksprogrammet kan du aktivera ’testläge’. Detta gör du genom att navigera till WooCommerce  >  Betalningar  >  Inställningar:

Testläget WooCommerce-betalningar

Testläget WooCommerce-betalningar

Kom ihåg att spara ändringarna.

När Test Mode är aktiverat kan du bläddra i din WooCommerce-butik och välja valfri produkt. Lägg till den i kundvagnen och gå sedan till kassasidan.

Fyll i fälten för utcheckningssidans formulär vid behov. För betalningsinformationen kan du använda något av  dummy kreditkortsnummer som tillhandahålls av WooCommerce. Du kan också använda valfria tre siffror för CVC-koden, och välja eventuellt framtida datum.

När du är klar klickar du på Placera beställning. Därefter navigerar du till sidan för Betalningar >  Transaktioner:

Testa transaktioner i WooCommerce

Testa transaktioner i WooCommerce

Här borde du se laddningen dyka upp. Om den finns där, vet du att din kassasida fungerar som den ska. Kom ihåg att stänga av testläget när du är klar!

Lär dig att styla, ändra och utnyttja din WooCommerce kassasida ⚡️ optimera konverteringar och 💰 öka dina intäkter här ⬇️Click to Tweet

De bästa plugins och tillägg för WooCommerce kassasidan

Under hela det här inlägget har vi täckt en mängd av olika sätt att ändra din WooCommerce-kassasida på, inklusive block, kortkoder och anpassad kod. Vi har också nämnt några viktiga plugins som kan hjälpa dig att lägga till funktioner och funktionaliteter som annars inte skulle vara tillgängliga.

Det finns dock några ytterligare tillägg, plugins och andra tillägg vi inte har nämnt ännu, men som ger dig fler anpassningsalternativ för din WooCommerce kassasida. Några av de bästa som är värda att överväga inkluderar:

Beroende på vilken typ av ecommerce webbplats du har, kanske du letar efter ännu fler alternativ. Om så är fallet, så rekommenderar vi att kolla in WooCommerce tilläggsbibliotek, som erbjuder massor av tillägg för att utöka WooCommerce plugins funktioner och funktionalitet, inklusive både gratis och betalda lösningar.

Sammanfattning

Det finns olika sätt som du kan implementera för att förbättra och optimera din WooCommerce kassasida.

Beroende på den förändring du vill göra och din erfarenhetsnivå, kan du utnyttja WooCommerce plugins och tillägg, sidmallar och extensions, page templates and teman, samt anpassad kodning.

Har du några frågor om hur du använder eller redigerar woocommerce-kassasidan? Låt oss veta i kommentarerna nedan!


Om du tyckte om den här artikeln, då kommer du att älska Kinsta´s hosting-plattform. Effektivisera din hemsida och få support dygnet runt från vårt rutinerade team på WordPress. Vår Google Cloud-drivna infrastruktur fokuserar på auto-skalning, prestanda och säkerhet. Lås oss visa dig skillnaden med Kinsta! Kolla in våra paket