Optimér din WooCommerce Indkøbskurv & Kasse

Indkøbskurven og kassesiderne er de mest kritiske punkter i en online butiks købsoplevelse. Det er her, dine kunder træffer den endelige beslutning om at gennemføre et køb, og en gnidningsfri proces kan betyde forskellen mellem en succesfuld transaktion og en forladt indkøbskurv. Med de innovative WooCommerce indkøbskurv- og kasseblokke får dine kunder en strømlinet og intuitiv proces til at gennemgå og afslutte deres køb. Disse blokke er designet til at minimere friktion og maksimere konverteringer, hvilket gør dem til et uundværligt værktøj for enhver WooCommerce-butiksejer.

Denne artikel dykker ned i de skabeloner og blokke, der er forbundet med disse sider, og giver detaljerede oplysninger om, hvordan du opgraderer til den nye oplevelse, foretager tilpasninger og konfigurerer deres udseende og funktionalitet, så de matcher din butiks design og behov. Uanset om du er nybegynder eller en erfaren e-handelsudvikler, vil du finde værdifuld indsigt i, hvordan du optimerer dine vigtigste salgstrin.

Hvad er WooCommerce Indkøbskurv- og Kasseblokkene?

WooCommerce indkøbskurv- og kasseblokkene repræsenterer den moderne tilgang til håndtering af de afsluttende trin i kunderejsen. De er bygget på WordPress' blok-editor, hvilket giver en mere visuel og fleksibel måde at bygge og tilpasse sider på, sammenlignet med de tidligere shortcode-baserede løsninger.

For WooCommerce-butikker, der er startet efter udgivelsen af version 8.3 i november 2023, er indkøbskurv- og kasseblokkene standardoplevelsen. Dette betyder, at der ikke kræves yderligere opsætning for at implementere disse blokke. Hvis din side bruger et bloktema, kan du straks begynde at tilpasse skabelonerne, så de passer til dine behov. Blokbaseret indkøbskurv og kasse fungerer uden yderligere tilpasning, men muligheden for at skræddersy dem er enorm.

Disse blokke er udviklet med fokus på brugeroplevelse og konverteringsoptimering. De præsenterer information klart og giver kunderne mulighed for nemt at justere deres ordre, indtaste forsendelsesoplysninger og vælge betalingsmetode. Resultatet er en mere intuitiv og hurtigere købsproces, der mindsker antallet af forladte indkøbskurve og øger dit salg.

Fordele ved de nye blokke:

• Visuel Tilpasning: Nemmere at tilpasse design direkte i editoren.
• Forbedret Ydeevne: Ofte mere optimerede og hurtigere end shortcodes.
• Bedre Brugeroplevelse: En mere moderne og flydende interaktion for kunden.
• Fremtidssikret: WooCommerce's fokus er på blokke, hvilket sikrer løbende udvikling og support.

Standardoplevelsen og Opgradering til Blokke

Som nævnt er de blokbaserede indkøbskurv- og kassesider standard for nye WooCommerce-installationer siden november 2023 (version 8.3). Men hvad hvis du har en ældre, etableret butik og ønsker at drage fordel af den nye oplevelse?

Hvis du opgraderer en eksisterende butik til at bruge blokoplevelsen, eller hvis du har fjernet blokkene og ønsker at skifte tilbage, er processen ligetil. Det handler primært om at erstatte de eksisterende shortcodes med de nye blokke på de relevante sider.

Sådan erstatter du eksisterende shortcodes:

1. Klik på menupunktet Sider i dit WordPress-dashboard.
2. Find og rediger den side, der er sat som din Indkøbskurv-side (typisk kaldet "Indkøbskurv" eller "Cart").
3. Slet [woocommerce_cart] shortcode-blokken, der genererer indholdet af din indkøbskurv-side.
4. I blok-indsætteren (klik på '+' ikonet), søg efter "Indkøbskurv-blokken" (Cart Block).
5. Vælg blokken for at tilføje den til din indkøbskurv-side.
6. Udfør disse trin igen, men med Kasseblokken (Checkout Block) på din Kasse-side (typisk kaldet "Kasse" eller "Checkout"), hvor du sletter [woocommerce_checkout] shortcode-blokken.
7. I editoren vil du nu se en forhåndsvisning af din blokbaserede indkøbskurv og kasse på deres respektive sider.
8. Du kan bruge indstillingerne i sidepanelet til at tilpasse indkøbskurv- og kasseblokkene samt deres indre blokke.
9. Husk at klikke på knappen Opdater for at gemme og offentliggøre dine ændringer.

Vigtig note: At tilføje indkøbskurv- eller kasseblokken til en side konfigurerer ikke automatisk den pågældende side som den officielle indkøbskurv- eller kasse-side. Når du har tilføjet blokkene til siderne, skal du sikre dig, at disse sider også er indstillet som indkøbskurv og kasse under WooCommerce > Indstillinger > Avanceret. Dette er et afgørende skridt for at sikre, at din butik fungerer korrekt med de nye blokke.

Sådan Skifter du Tilbage til Klassisk Version

Selvom blokkene tilbyder mange fordele, kan der være situationer, hvor du ønsker at vende tilbage til den klassiske shortcode-version. Dette kan skyldes inkompatibilitet med specifikke udvidelser, eller du foretrækker simpelthen den tidligere opsætning. Både indkøbskurv- og kasseblokkene kan omdannes tilbage til den klassiske version ved hjælp af transformationsknappen i blokværktøjslinjen.

Processen for at vende tilbage til klassisk indkøbskurv og kasse:

Hvis du bruger et bloktema:

1. Gå til Udseende > Editor fra dit sites admin-område.
2. Vælg Sider > Indkøbskurv eller Sider > Kasse.
3. Klik på redigeringsikonet.

Hvis du bruger et ikke-bloktema:

1. Gå til Sider > Alle sider, og find derefter og rediger Indkøbskurv- eller Kasse-siden.

Fælles trin for begge tema-typer:

1. Åbn Listevisning (ikonet med tre vandrette streger over hinanden, ofte i øverste venstre hjørne af editoren) og vælg indkøbskurv- eller kasseblokken.
2. Klik på "Transformér"-knappen, som er den yderste venstre i blokværktøjslinjen.
3. Vælg "Klassisk Shortcode". Blokken vil blive omdannet til en Klassisk Shortcode "placeholder"-blok.
4. Gem dine ændringer ved at klikke på knappen Opdater øverst på siden.

Vigtig note: Da indkøbskurv- og kasseblokkene arbejder sammen, bør du, hvis du vender tilbage til den klassiske version af indkøbskurv- og kasseoplevelsen, også vende begge dele tilbage til den klassiske shortcode-version for at sikre fuld funktionalitet og undgå konflikter.

Skabeloner og Deres Funktion

To specifikke skabeloner styrer visningen af indkøbskurv- og kassesiderne i WooCommerce:

• Siden: Indkøbskurv (Page: Cart) skabelonen kontrollerer indkøbskurv-siden. Denne skabelon viser de varer, som brugeren har valgt til køb, inklusive mængder, priser og eventuelle rabatter. Den giver brugere mulighed for at gennemgå deres valg, før de fortsætter til kassen.
• Siden: Kasse (Page: Checkout) skabelonen kontrollerer kasse-siden. Denne skabelon guider brugere gennem de sidste trin i købsprocessen. Den gør det muligt for brugere at indtaste forsendelses- og faktureringsoplysninger, vælge en betalingsmetode og gennemgå ordredetaljer, før de gennemfører købet.

Du får adgang til begge skabeloner ved at:

1. Navigere til Udseende > Editor fra dit sites admin-område.
2. Klikke på Skabeloner.
3. Vælge den skabelon, du gerne vil redigere (f.eks. "Siden: Indkøbskurv" eller "Siden: Kasse").
4. Klikke på blyantsikonet for at redigere skabelonen.

Inden for disse skabeloner kan du justere layoutet og tilføje eller fjerne blokke for at skabe den perfekte købsoplevelse for dine kunder. Det er her, den virkelige tilpasning finder sted, så din butiks udseende og funktionalitet harmonerer fuldstændigt.

Nøgleblokke og Deres Tilpasning

Inden for indkøbskurv- og kasseside-skabelonerne finder du flere vigtige blokke, der hver især spiller en afgørende rolle i købsprocessen. At forstå disse blokke og deres tilpasningsmuligheder er nøglen til at skabe en optimal brugeroplevelse.

Butiksmeddelelsesblokken (Store Notices Block)

Både indkøbskurv- og kasse-sideskabelonerne bruger Butiksmeddelelsesblokken. Dette er hvor din butik viser kundevendte notifikationer, der genereres af WooCommerce eller udvidelser. For eksempel, når en vare er blevet tilføjet til indkøbskurven, vil notifikationen blive vist her. Butiksmeddelelsesblokken kan tilføjes til enhver side eller skabelon på dit site. Da notifikationer af forskellige typer hver har deres egen styling, er der ingen stilindstillinger for denne blok.

Indkøbskurv-blokken (Cart Block)

På indkøbskurv-siden finder du Indkøbskurv-blokken. Denne blok giver kunderne mulighed for at se og administrere de varer, de agter at købe, og tilbyder muligheder for at opdatere mængder og fjerne produkter. Du kan tilpasse dens layout og indstillinger for at forbedre brugeroplevelsen. Dette inkluderer at justere, hvilke oplysninger der vises, og hvordan de præsenteres. En veludformet indkøbskurv-blok kan reducere friktion og opmuntre kunder til at fortsætte til kassen.

Kasseblokken (Checkout Block)

På kasse-sideskabelonen finder du Kasseblokken. Det er her, kunder indtaster deres forsendelses- og betalingsoplysninger for at fuldføre deres køb. Kasseblokken er hjertet i transaktionen, og dens layout og funktionalitet er afgørende for en høj konverteringsrate. Du kan tilpasse dens indstillinger for at strømline kasseprocessen og opfylde dine specifikke behov, herunder rækkefølgen af felter, standardvalg og visning af betalingsmetoder.

Mini-indkøbskurv-blokken (Mini Cart Block)

Mini-indkøbskurv-blokken giver kunderne et hurtigt overblik over deres indkøbskurvs indhold fra enhver side i din butik. Denne blok er fantastisk til at holde kundens opmærksomhed på deres potentielle køb, uanset hvor de navigerer på din side. Du kan tilpasse dens udseende og adfærd for at sikre en problemfri og bekvem shoppingoplevelse. Ofte vises den som en pop-up eller i et sidepanel, når en kunde tilføjer en vare til kurven, eller når musen holdes over et kurv-ikon.

Skabelondele og Optimeret Checkout-Header

Indkøbskurv- og kasse-flowene benytter sig af nogle skabelondele, der følger med WooCommerce. Skabelondele er genanvendelige sektioner af dit website-design, som kan indsættes og tilpasses på tværs af forskellige skabeloner.

På kasse-sideskabelonen vil du bemærke, at i stedet for at bruge den samme header, der vises på resten af dit site, vises der som standard en forenklet header, der kun viser dit sites titel. Dette er gjort med vilje for at begrænse distraktioner fra kasse-siden og betalingsflowet. Dette er en optimering, der øger konverteringer i indkøbskurven og reducerer forladte indkøbskurve! En kompleks header med mange navigationslinks kan nemt lede kunden væk fra købsprocessen, hvilket øger sandsynligheden for, at de ikke gennemfører købet.

Du er selvfølgelig velkommen til at tilpasse denne header efter din smag, eller endda erstatte den med den samme header, som du bruger på resten af dit site! Vi anbefaler dog at holde dig til en simpel header, der ikke indeholder links væk fra kasseprocessen, da dette er bevist at forbedre konverteringen.

Mini-indkøbskurv-blokken bruger også en skabelondel til at vise indholdet af Mini-indkøbskurven. Dette giver fleksibilitet til at tilpasse den uden at påvirke andre dele af din butik.

Kompatibilitet med Udvidelsers

En af de vigtigste overvejelser, når du skifter til de blokbaserede indkøbskurv- og kassesider, er kompatibilitet med eksisterende udvidelser (plugins). Kompatibilitet med indkøbskurv- og kasseblokkene for udvidelser på WooCommerce.com er markeret på produktsiden. Se efter "Kompatibilitet"-sektionen på ethvert produkt for at se, om det er kompatibelt med de nye blokke.

Hvis du bruger en inkompatibel udvidelse, der har erklæret sin inkompatibilitet, vil der vises en advarsel og en knap til at skifte til den klassiske kasse med ét klik i indstillingssidepanelet, når kasseblokken eller en af dens indre blokke er valgt.

Inkompatible udvidelser kan forårsage, at elementer af kassen ikke er tilgængelige som forventet. For eksempel, hvis din betalingsgateway ikke er kompatibel med blokversionen af kassen, vises den muligvis ikke som en betalingsmulighed på kasse-siden. Dette kan føre til forvirring for kunderne og i sidste ende et mistet salg.

Hvis du bruger et plugin, der ikke fungerer som forventet med indkøbskurv- og kasseblokkene, bedes du kontakte dets udviklere og lade dem vide, at du gerne vil bruge den nye, blokbaserede kasse. For at hjælpe udviklere i denne indsats har WooCommerce udgivet omfattende dokumentation og ressourcer om integration af eksisterende plugins med indkøbskurv/kasseblokkene og Store API'en. Plugin-udviklere opfordres til at markere deres plugins som (in)kompatible, så brugere ikke selv skal fejlfinde og finde ud af det. Dette er afgørende for en gnidningsfri overgang.

Fejlfinding: Ingen Betalingsmetoder Tilgængelige

En almindelig udfordring, som brugere kan støde på, når de anvender kasseblokken, er fraværet af betalingsmetoder. Dette sker typisk, hvis du kun har inkompatible betalingsgateways installeret og aktiveret. Når ingen betalingsmetoder er tilgængelige, vises der en advarsel på kasse-siden, hvilket forhindrer kunder i at gennemføre deres køb.

I blokindstillingssidepanelet for den indre blok "Betalingsmuligheder" i kasseblokken, vil du se en mulighed for at skifte tilbage til den klassiske kasse med et enkelt klik. Dette er en hurtig løsning, hvis du står over for dette problem og ikke umiddelbart kan opdatere eller erstatte dine inkompatible betalingsgateways. Det er altid bedst at sikre, at dine betalingsgateways er kompatible med den blokbaserede kasse for at undgå afbrydelser i købsprocessen.

Udviklerinformation og Fremtidig Udvikling

Grænsefladerne for udvidelsesmuligheder for indkøbskurv- og kasseblokkene er stadig under aktiv udvikling. Hvis du udvikler udvidelser eller tilpasninger, der integreres med WooCommerce-indkøbskurven og kassen, opfordrer vi dig kraftigt til at følge fremskridtet og give feedback på GitHub. Dette sikrer, at dine løsninger forbliver kompatible og drager fordel af de seneste forbedringer.

Udvidelser, der bruger hooks til at gengive yderligere markup på indkøbskurv- eller kassesiderne – for eksempel brugerdefinerede checkout-felter – kræver normalt integrationsarbejde for at understøtte indkøbskurv- og kasseblokkene. Det er vigtigt for udviklere at være opmærksomme på disse ændringer og tilpasse deres plugins derefter.

Hvis du finder et plugin på WooCommerce.com, der ser ud til at være inkompatibelt, bedes du åbne et problem for at hjælpe WooCommerce med at måle efterspørgslen og prioritere arbejdet med udvidelsesmuligheder. Din feedback er afgørende for at forbedre økosystemet for alle brugere.

Spørgsmål og Svar (FAQ)

Her er nogle ofte stillede spørgsmål vedrørende WooCommerce indkøbskurv- og kassesider:

At optimere din WooCommerce indkøbskurv- og kasseoplevelse er afgørende for din online butiks succes. Ved at udnytte de nye blokke og forstå deres funktionalitet kan du skabe en problemfri og effektiv købsrejse for dine kunder, der i sidste ende vil resultere i højere salg og mere tilfredse kunder.

Hvis du vil læse andre artikler, der ligner Optimér din WooCommerce Indkøbskurv & Kasse, kan du besøge kategorien Teknologi.