Sådan tilpasser du WooCommerce-vognsiden uden kodning (gratis)

Tilpasning af WooCommerce-vognsside giver flere fordele, herunder forladelse af vognside, men at gøre det gnidningsløst er ikke en cakewalk.

Indkøbsvognssiden fører til den endelige beslutning, om du vil tjekke ud eller forlade vognen. Du vil ikke have, at købere forlader vognen, vel? Det er her, du skal tilpasse din WooCommerce-vognside. 

I denne blog finder du en trin-for-trin guide til, hvordan du tilpasser WooCommerce-vognssider, der også uden nogen kodning.

Lad os komme igang…

Hvordan ser en standard WooCommerce Cart-side ud

WooCommerce giver et meget grundlæggende layout af en kurv-side. Selvom forskellige temaer tilføjer forskellige stilarter til siden, ser den stadig lidt ens ud.

Her er almindelige elementer i et WooCommerce-vognsidedesign (inkluderet, men ikke begrænset til):

Du kan redigere WooCommerce-vognssiden og tilpasse elementerne efter dine behov. Før det, lad os se på, hvordan standard WooCommerce-vognsiden ser ud på forskellige temaer.

Her er, hvordan WooCommerce-vognsidedesignet ser ud på WordPress Twenty Twenty tema:

Her er hvordan kurvsiden ser ud på Twenty Twenty One tema af WordPress:

Selv et populært Elementor-tema som Hej Elementor vil give dig et meget grundlæggende udseende WooCommerce-vognsidedesign med det samme gamle layout.

Jeg tror, du vil være enig i, at alle vognsiderne ovenfor har det samme layout og ikke tilbyder noget fancy eller ekstraordinært

➡️➡️ Tjek Sådan tilføjes valutaomskifter til WooCommerce-webstedet i 5 trin

Hvorfor tilpasse WooCommerce Cart Page

Ifølge rapporten fra november 2023 fra BuiltWith bruger 6,6 millioner+ live-websteder WoCommerce.

WooCommerce lader dig opbygge et fuldt funktionelt e-handelswebsted, der er klar til brug, med dets skabeloner, inklusive en kurvside på ingen tid. Mange af disse websteder bruger standardskabelonerne fra WooCommerce til indkøbskurven og andre sider.

Men du ønsker ikke, at din indkøbskurvside på hjemmesiden ligner andre, da dette sandsynligvis vil slå dine købere fra. For at skille sig ud fra mængden kan WooCommerce-vognsideredigeringer eller WooCommerce-vogntilpasning komme til undsætning.

Det er også et faktum, at omkring  70% af mennesker opgiver deres indkøbskurv og fortsæt aldrig med at tjekke ud. Dette viser, hvor vigtigt det er at tilpasse WooCommerce-vognsiden.

Og det er en kendt sag, at folk er tiltrukket af ting, der er anderledes og skiller sig ud i mængden.

Så lad ikke din kurvside gå tabt i mængden, men tilpas den, så den skiller sig ud og hjælper dig med at få flere ordrer. 

Nu er spørgsmålet, hvordan kan du få en vognside, der skiller sig ud? Nå, der er to måder, du kan oprette et Woocommerce-vognsidedesign på.

1. 1. Redigering af WooCommerce-filer (kræver, at du kender til kode)
2. 2. Brug et træk-og-slip-plugin

Du kan også tjekke vores blog 👉 Sådan tilføjes valutaomskifter til WooCommerce

Hvorfor redigering af kode for at få en tilpasset WooCommerce Cart-side er ikke en god idé

Selvom redigering af kode for at få din ønskede kurvside er en mulighed, anbefales det ikke til ikke-kodere. Da du valgte en klar-til-brug platform som WooCommerce til at bygge din hjemmeside, gætter jeg på, at du ikke ønsker at håndkode noget.

Her er nogle af grundene til, at nybegyndere programmører eller ikke-kodere bør undgå at redigere standardkode til WooCommerce-vognsidedesignformål.

• Det kræver, at du er en ekspert programmør og kender HTML, CSS, Javascript og PHP som en professionel.
• Hvis koden ikke redigeres og optimeres effektivt, kan det bremse din hjemmeside.
• Du bliver nødt til at ændre koden, hver gang du vil ændre dit WooCommerce-tema
• Når WooCommerce kommer med en ny opdatering, vil du blive bedt om at foretage nye ændringer for at gøre koden kompatibel med en ny version af WooCommerce
• Du kan også miste al din kode, når WooCommerce opdaterer, hvis du ikke opretter et undertema.

Desuden, hvis du bruger platforme som WordPress og WooCommerce til undgå kodning i første omgang, hvorfor så lære at kode bare for at redigere en kurvside, ikke?

Ingen problemer. Jeg har en anden proces, som du kan bruge til at tilpasse din indkøbskurvside glat uden at skulle kode. Ikke engang en eneste linje. Løfte!

Lad os se, hvordan du redigerer WooCommerce-vognsiden uden kodningsviden!

Sådan tilpasser du WooCommerce-vognsiden ved hjælp af et træk og slip-plugin

Nu kan du designe en kurvside med nem træk-og-slip-teknologi. Takket være WooCommerce PageBuilder plugin ShopEngine.

ShopEngine er det ultimative WooCommerce bygmester med færdiglavede skabeloner, og widgets til at tilpasse dine WooCommerce-sider og moduler med nyttige e-handelsfunktioner. Med dette plugin får du fuldstændig kontrol over designet af dine WooCommerce-sider inklusive kurvsiden.

Mens ShopEngine giver dig en premade Skabelon til kurv, kan du oprette din indkøbskurvside fra bunden, ligesom du kan lave WooCommerce-vogntilpasning. I denne blog vil jeg lede dig gennem processen med, hvordan du redigerer en WooCommerce-vognside for at skabe en helt ny fra bunden.

Har du brug for flere grunde til at overbevise dig selv om at bruge ShopEngine? Læs vores blog på 11 grunde til at vælge ShopEngine

Trin #1: Installer Elementor og ShopEngine

For at komme i gang med processen med at tilpasse kurvsiden i WooCommerce, skal du bruge to plugins

1. Elementor
2. ShopEngine 

Da ShopEngine er en WooCommerce-sidebygger til Elementor og kræver Elementor, sørg for at installere Elementor først. 

Trin #2: Opret en vognsideskabelon

Når du har installeret begge plugins, skal du oprette en kurvskabelon. Sådan opretter du en vognsideskabelon:

• Gå til: Dashboard => ShopEngine => Builders skabelon
• Klik på Tilføj ny for at åbne vinduet med skabelonindstillinger
• Give en Skabelonnavn af din præference
• Vælge Indtast som indkøbsvogn fra rullemenuen
• Tænde for indstillingen Indstil standard for at tilsidesætte enhver eksisterende indkøbskurvside
• Vælg den tomme indstilling under Eksempel design 
• Klik på Gem ændringer at opdatere

Bemærk: For at få en klar til brug vognskabelon, vælg muligheden "Sample Design 1", mens du opretter skabelonen. Du kan også redigere hvert element i den forudlavede skabelon. Jeg valgte blank, da jeg skal lave en fra bunden

Trin #3: Vælg et layout/struktur

Nu er det tid til at vælge et layout. For at komme i gang 

• Gå til ShopEngine => Builders Module
• Hold musen over vognskabelonen fra listen
• Klik på Rediger med Elementor

• Når Elementor Editor åbner Klik på Tilføj ny sektion (+) ikon 
• Vælg nu struktur/layout Du kan lide

Trin #4: Design kurv-side ved hjælp af ShopEngine-widgets

ShopEngine leverer fem widgets udelukkende til at designe en WooCommerce Skabelon til kurv. Sammen med Cart Template-widgets kan du også bruge Kuponformular widget og fem+ generelle widgets til at bygge din indkøbskurvside.

Til denne blog vil jeg bruge følgende widgets:

• Vognbord: Kurv-widgetten viser alle produkterne i kurven i et tabelformat med pris, mængde og subtotal. Kunder kan opdatere produktmængden og også rydde indkøbskurven med et enkelt klik.
• Kurv i alt: Denne widget viser alle tilgængelige forsendelsesmetoder og det samlede ordrebeløb.
• Tilbage til Shop: Denne widget giver en knap med et link, der fører dig tilbage til butikssiden.
• Kassekuponformular: Kunder kan bruge deres rabatkupon ved hjælp af denne widget.
• Deal Produkt: Denne widget giver dig mulighed for at fremvise dine salgsprodukter på indkøbskurvsiden, også med en nedtællingstimer, der viser salgsplanperioden. Dette er en generel widget fra ShopEngine.
• Krydssalg: Krydssalg viser alle krydssalgsprodukter attraktivt på kurvsiden.

Først skal du tænd for widgets du vil bruge på din indkøbskurvside. At tænde  

• Gå til Admin Dashboard => ShopEngine => Widgets. 
• Rul og søg i den widget, du vil bruge
• Aktiver de widgets, du vil bruge
• Klik på Gem ændringer øverst på siden

Nu er det tid til at trække og slippe widgets til dit layout. Gå tilbage til redigeringstilstanden Indkøbskurv:

• Søg for widgetten
• Træk og slip widgets (en efter en)

Bemærk: Du kan skjule knappen Fortsæt indkøb og Skjul alle.

Da ShopEngine er fuldstændig kompatibel med Elementor, kan du bruge flere layouts på samme side. Til den næste del, lad os bruge et andet layout. For at gøre det vil jeg tilføje en ny sektion med en anden struktur og trække og slippe Cross-sell og Deal produkter widgets.

Bemærk: Du skal tilføje krydssalgsprodukter og sæt produkter til salg med tidsplaner fra admin-dashboardet under produktindstillinger for Cross-sell og Deal-produkter for at blive vist på frontend.

Både Cross-Sell og Deal-produkter giver dig anderledes indstillinger, du kan tilpasse. Så efter du har trukket og slippe widgetten, skal du tilpasse indstillingerne efter dine præferencer.

Med krydssalgswidgetten, får du muligheder som at slå Aktiver skyder til/fra, vis/skjul Flash-udsalg, Udsalgspris, Indkøbskurv-knap og antallet af produkter, der skal vises under indholdsindstillinger. For skydere får du muligheder som Slides Per View, Loop og Autoplay. Slide Speed etc. Derudover får du også muligheden Bestil efter og Bestil under fanen avanceret.

Deal produkter giver dig indholdsindstillinger som Bestil, Bestil efter, Dato, Vis produkt, Kolonne, Kolonnegab og Rækkegab. Du får også andre indstillinger, som inkluderer Aktiver salg, badge, udsalgsmærke, udsalg, titelordgrænse, procentmærke, nedtællingsur og dage.

Trin #5: Tilpas Woocommerce Cart-sidens stilparametre

Ikke kun struktur, med ShopEngine får du også fuld kontrol over stylingen af din kurvside.

For at ændre stilparametrene for ShopEngine Widgets skal du holde markøren over den widget, du vil redigere, for at finde en redigeringsmulighed i øverste højre hjørne. Klik på denne mulighed for at finde alle Woocommerce indkøbskurvindstillinger for indhold og stilarter på Elementor-panelet placeret i venstre side.

Lad os tage et kig på de stilindstillinger, du kan tilpasse for hver af de widgets, der bruges i denne blog:

Indkøbsbord: 

Du kan ændre stilindstillingerne for tabeloverskriften, tabeltekst, produktbillede og antal. Sidefod og global skrifttype. For flere detaljer kan du tjekke vores dokumentation på vognbordet.

Tilbage til shoppen:

Du ændrer knapjustering, typografi, kantfarve, kantradius og kasseskygge. For flere detaljer kan du tjekke vores dokumentation om Return To Shop Widget

Kuponformular:

For kuponformularen får du en stilindstilling for info, beskrivelse, kuponformular, anvend knap og global skrifttype. Du kan tjekke stilmulighederne i detaljer på vores dokumentation på kuponformular.

Kurv i alt:

For Cart total widget får du mange stilmuligheder til at ændre stilen for tabel, input, checkout update-knap og global skrifttype. For mere detaljerede WooCommerce-vognstilindstillinger kan du tjekke vores dokumentation om vogn i alt.

Krydssalg: 

For Cross-sell-widgetten får du forskellige stilmuligheder, som inkluderer stilarter for varer, flash-salg, billede, titelløb, pris, læg i kurv, skyderstil og global skrifttype. For flere detaljer om Cross, Sale style tjek dokumentationen.

Deal produkter:

Du får forskellige stilindstillinger for produktindpakning, produktbillede, produktmærke, nedtællingsur, indholdsstil, lager- og fremskridtslinje og global skrifttype. For at vide flere detaljer om stilmulighederne tjek vores dokumentation om Deal Product-widget.

Trin #6: Opdater og forhåndsvis tilpasset WooCommerce-vognside

Når du har ændret stilene, klik på Opdatering for at gemme ændringer og klikke på Forhåndsvisning for at se ændringerne.

Hvis du har fulgt layoutet og indstillingerne nævnt i denne blog, bør du designe en tilpasset indkøbskurvside i WooCommerce ved hjælp af ShopEngine som den nedenfor:

Bonus: Tips til at øge dit e-handelssalg ved hjælp af ShopEngine-moduler

Nu ved du, hvordan du opbygger og tilpasser en vognside i woocommerce. ShopEngine giver dig, udover WooCommerce-vognsideskabelonbygger, nyttige moduler med vigtig e-handelsfunktionalitet, der kan booste din onlinebutiks salg. ShopEngine-moduler inkluderer:

• Hurtigt kig
• Variationsprøver
• Ønskeliste
• Produktsammenligning

Jeg er sikker på, at du som WooCommerce-butiksejer ved, hvor vigtige disse funktioner er for at gøre onlinekøbsoplevelsen til en god. Hvis vi taler om vognskabelonen, ved hjælp af Hurtigt kig knappen og Ønskeliste knappen på krydssalget vil give dine kunder en bedre indkøbsoplevelse. Og det øger chancen for, at dine kunder køber flere produkter.

Med Quick View kan kunder nemt tjekke alle produkters komplette oplysninger med blot et enkelt klik. På samme måde kan brugere med et enkelt klik tilføje produktet til deres ønskeliste ved at bruge ønskelistemodulknappen for at betale senere. Begge disse funktioner kan spille en væsentlig rolle i at øge produktsalget.

Så du skal ikke bare tilpasse din indkøbskurvside, brug ShopEngine-moduler til at give dine kunder en god købsoplevelse og booste din butiks salg.

Bonusblogs:
✅ Sådan tilpasser du WooCommerce-kategorisiden uden kodning
✅ Sådan tilpasser du WooCommerce Min konto-side ved hjælp af ShopEngine 
✅ Sådan tilpasser du WooCommerce Shop Page ved hjælp af ShopEngine 
✅ Sådan tilpasser du WooCommerce-produktsiden ved hjælp af ShopEngine
✅ Sådan tilpasser du WooCommerce Checkout-side ved hjælp af ShopEngine
✅ 9+ nyttige og bedste indkøbskurv-plugins til WordPress og WooCommerce

Hvorfor opgradere til ShopEngine Pro?

Nå, ærligt talt giver ShopeEngine dig nok funktioner til at gøre din online butik til en god. Men hvorfor skulle du nøjes med det gode, når du kan få det bedste, ikke?

ShopEngine Pro giver dig en lang række funktioner, der vil gøre online shopping i din e-handelsbutik til den bedste købsoplevelse for dine kunder. Sammen med tilpasning af woocommerce-vognsiderne kan du få adgang 20+ moduler som omfatter Flash-udsalg nedtælling, badges, Salgsmeddelelse, Hurtig udtjekning, Parietal betaling, Valutaomskifter, og mange flere.

Ikke kun kundetilfredshed, ShopEngine-funktioner er designet til at gøre onlinebutiksadministration også super nem med moduler som f.eks. Forudbestille, Restordre, Yderligere kassefelt, og mange flere.

Ikke at forglemme 16+ færdiglavet skabeloner med fuld WooCommerce-tilpasningskontrol og 70+ avancerede widgets at oprette hver WooCommerce-skabelon fra bunden, hvis du vil.

Når det kommer til vognsiden, giver ShopEngine dig mulighed for at bygge en WooCommerce tilpasset vognside til din online butik.

Et plugin med så mange funktioner, færdiglavede skabeloner og moduler, som du helt sikkert også vil prøve til en meget rimelig pris, ikke?

Få din version af ShopEngine i dag og bekymre dig aldrig om, hvordan du tilpasser WooCommerce igen!

Afsluttende ord

Tillykke! Du har med succes redesignet din side med tilpasset WooCommerce-vogn. Var det ikke nemt? 

Nå, det er, hvad ShopEngine gør, nu ved du, hvordan du tilpasser en WooCommerce-vognside uden kodning.

Så du skal ikke bare begrænse din onlinebutik til standardstile, redesign hele dit WooCommerce-websted og brug modulerne til at gøre din online-forretning mere succesfuld end nogensinde. 

Så hvilken WooCommerce-side vil du tilpasse næste gang? Glem ikke at dele din oplevelse med at bruge ShopEngine.