Den kompletta guiden till WooCommerce-kassan – Anpassa fält, ändra mall, skapa ensidiga kassasidor

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:

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

• Faktureringsinformation
• För- och efternamn
• Företagets namn
• Adress (Stad/stad, Land, Distrikt och Postnummer/ZIP)
• Telefonnummer
• E-postadress
• Beställ anteckningar
• Uttalande om sekretesspolicy

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  :

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:

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

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:

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

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

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:

• Ändra design och sidmall
• Skapa en ensidig utcheckning
• Lägga till, ta bort eller ordna om fält
• Ändra etiketter för inmatningsfält och knapptext
• Kräver att vissa fält fylls i
• Automatiskt utlösa fri frakt
• Direktlänkande produkter till kassasidan

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.

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:

• WooCommerce funktioner, block och kortkoder. WooCommerce levereras med några inbyggda funktioner och inställningar som du kan använda för att göra utseendet på din butikssida bättre. Du kan till exempel automatiskt utlösa fri frakt, samt direkt länka produkter till kassasidan. Det finns också block och kortkoder  för att ändra sidan.
• Plugins och tillägg. Om du inte är tekniskt kunnig eller helt enkelt vill ha ett snabbt och problemfritt sätt att förbättra din 13,5
•  De flesta är lätta att komma igång med och kräver lite stöd. Vissa tillägg tillhandahålls av WooCommerce och finns tillgängliga från tilläggsbiblioteket, medan andra utvecklas och erbjuds av tredjepartsplattformar.
• Sidmallar och teman. Om du vill ändra stilen på kassasidan kan du använda en färdigbyggd mall eller ett tema. Som med plugins, detta är ett fast alternativ om du har begränsad erfarenhet inom kodning och vill göra ändringar i det övergripande utseendet på sidan, i syfte att bättre matcha ditt varumärke. Nackdelen är att den inte erbjuder så mycket flexibilitet såsom anpassad kodning skulle.
• Anpassad kod. En annan metod du kan utnyttja för att ändra WooCommerce kassasida är anpassad kodning. Detta är en kraftfull väg om du är bekväm med att redigera webbplatsens filer och vill lägga till en hel del anpassning.

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:

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:

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:

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_checkout_fields
• woocommerce_billing_fields
• Woocommerce_shipping_fields

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:

• woocommerce_before_checkout_form
• woocommerce_checkout_before_customer_details
• woocommerce_checkout_billing
• woocommerce_checkout_shipping
• woocommerce_checkout_after_customer_details
• woocommerce_checkout_before_order_review
• woocommerce_checkout_order_review
• woocommerce_checkout_after_order_review
• Woocommerce_after_checkout_form

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:

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:

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:

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:

• Visa både produktvals- och kassaformulär på en sida.
• Gör det möjligt för kunder att lägga till eller ta bort artiklar från sina korgar.
• Låt kunderna slutföra betalningar utan att lämna sidan.
• Lägg till anpassade fält på sidorna.

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:

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.

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:

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:

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:

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:

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:

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:

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:

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):

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:

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:

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!

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:

• WooCommerce Varukorg Meddelandetillägg . Med detta WooCommerce-tillägg kan du visa handlingsbara meddelanden och meddelanden till dina kunder under kassaprocessen. Du kan till exempel använda den för att meddela dem om relevanta försäljningar och kampanjer.
• WooCommerce kassa Manager. Tillverkad av samma team som utvecklat Direktkassa för WooCommerce, är detta plugin ett kraftfullt tillägg som du kan använda för att optimera din kassasida. Du kan använda den för att redigera, ta bort och lägga till anpassade fält, samt för att skapa villkorsfält.
• WooCommerce kassatillägg. Denna premiumplugin kan du lägga till gratis och betalda tillägg i kassafasen. Det är ett användbart verktyg för att öka omvandlingar och driva in intäkter.

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!