Så ändrar du designen på kassasidan för Klarna Checkout

Det här är den första artikeln av flera om att anpassa upplägget för det nya pluginet Klarna Checkout för WooCommerce. I den här artikeln tittar vi närmare på hur du kan justera designen på själva kassasidan.

Designen på kassasidan för Klarna Checkout kommer med en tvåkolumns-layout. I denna layout har vi varukorg, leveransalternativ och ordernotering i vänsterspalten medans Klarnas kassa (där man anger personuppgifter och väljer betalsätt) visas i högerspalten.

Ibland har man dock andra behov och med det nya pluginet till Klarna Checkout för WooCommerce har du möjlighet att modifiera upplägg och design på flera olika sätt.

1. Enklare ändringar via CSS

Om du enbart vill göra mindre designändringar kan det eventuellt räcka med CSS-justeringar.

För att exempelvis skapa en kassasida med en enkolumns-layout lägger du till följande CSS i ditt tema:

2. Ta bort, lägg till och flytta runt med action hooks

Om du vill göra lite mer omfattande ändringar av upplägget på kassasidan är det rekommenderade sättet att jobba med så kallade action hooks. Detta sätt är att föredra framför att göra ändringar i WooCommerce template-mallar eftersom mallfilerna oftare ändras mellan versioner.

Kassasidans action hooks

På kassasidan för Klarna Checkout finns det ett flertal action hooks du kan använda dig av för att lägga till kod eller innehåll. Dessa hooks har följande namn:

• kco_wc_before_checkout_form
• kco_wc_before_order_review
• kco_wc_after_order_review
• kco_wc_before_snippet
• kco_wc_after_snippet
• kco_wc_after_checkout_form

Placeringen av dem hittar du här:

Genom dessa action hooks kan du på ett enkelt sätt lägga till information på olika platser på kassasidan.

Används av pluginet

Flera av ovanstående hooks används också av pluginet för att generera olika delar av kassasidan.

kco_wc_before_checkout_form

• kco_wc_calculate_totals (prio 1)
  – Beräkning av totalsummor. Används internt av pluginet.
• woocommerce_checkout_login_form (prio 10)
  – Visning av loginformuläret.
• woocommerce_checkout_coupon_form (prio 20)
  – Visning av rabattkupoungformuläret.

kco_wc_after_order_review

• kco_wc_show_extra_fields (prio 10)
  – Visning av extra kassafält.
• kco_wc_show_another_gateway_button (prio 20)
  – Visning av Välj ett annat betalsätt-knapp.

kco_wc_before_snippet

• kco_wc_prefill_consent (prio 10)
  – Visning av samtyckesgodkännande gällande förifyllning av personuppgifter för inloggade användare (gäller endast för Tyskland).

kco_wc_after_snippet

• kco_wc_show_payment_method_field (prio 10)
  – Inläggning av ett dold formulärfält för identifiering av betalsättet. Används internt av pluginet.

Det här gör alltså att om du exempelvis skulle vilja flytta knappen Välj ett annat betalsätt till att ligga direkt över Klarna-kassan så skulle du göra på följande vis:

Ovanstående kod placerar du i ett separat plugin eller ditt temas functions.php.

3. Skapa din egen template-fil

Om du behöver göra ändringar som inte funkar att åstadkomma enbart med action hooks så finns möjligheten att skriva över kassasidan via ditt tema. Det nya pluginet har stöd för ändringar via en mall-fil genom WooCommerce’s struktur för templates. Läs mer här om hur template-strukturen i WooCommerce fungerar.

Template-filen i fråga heter klarna-checkout.php och den finns i pluginet i mappen templates. För att skriva över filen så kopierar du den från pluginet och klistrar sedan in den i mappen /woocommerce i ditt tema. Därefter har du möjlighet att göra de ändringar du önskar. Kom dock ihåg att action hookarna kco_wc_before_checkout_form och kco_wc_after_snippet måste vara kvar för att pluginet ska fungera korrekt.

Några ord om extra kassafält

Med inbäddade kassor hanteras adressfälten i iframen där själva betalningen görs. Det gör att stödet för extra kassafält, utöver adressfälten, är begränsat. Vi kommer att behandla det här närmare i en separat artikel men kortfattat kan man säga att vi i Klarna Checkout-pluginet har stöd för extra kassafält enligt följande:

• Pluginet har stöd för formulärfält som läggs till via WooCommerce’s funktionalitet för formulär i kassan. Det rör sig då om WC()->checkout()->get_checkout_fields(). Filtret som kan användas för detta heter woocommerce_checkout_fields. En guide till hur du jobbar med att modifiera dessa formulärfält hittar du här.
• Ett plugin som Klarna-modulen fungerar bra tillsammans med är Checkout Field Editor från woocommerce.com.
• Formulärfält som läggs till via action hooks (dvs bara skjuts in i det befintliga kassaformuläret istället för att hanteras/läggas till av WooCommerce) fungerar inte.

Krokedil utvecklar eget plugin för kassadesign

Vi på Krokedil har för avsikt att längre fram påbörja utvecklingen av ett plugin med funktionen där du i större utsträckning ska kunna ändra utseendet på kassan själv. Har du synpunkter eller input kring detta? Maila oss gärna på info@krokedil.se!

Det var allt för den här gången. Lycka till med anpassningen av din Klarna Checkout-kassasida :).