Hur man anpassar WooCommerce kundvagnssida utan kodning (gratis)

Anpassning av WooCommerce-vagnssidor ger flera fördelar, inklusive att vagnsidan överges, men att göra det smidigt är inte en tårta.

Varukorgssidan leder till att man fattar det slutgiltiga beslutet om man ska checka ut eller överge varukorgen. Du skulle inte vilja att köpare skulle överge vagnen, eller hur? Det är där du behöver anpassa din WooCommerce-vagnsida. 

I den här bloggen hittar du en steg-för-steg-guide om hur du anpassar WooCommerce kundvagnssidor som också utan någon kodning.

Låt oss börja…

Hur ser en standard WooCommerce Cart-sida ut

WooCommerce ger en mycket grundläggande layout av en kundvagnssida. Även om olika teman lägger till olika stilar på sidan, ser den fortfarande likadan ut.

Här är vanliga delar av en WooCommerce-vagnsidedesign (ingår men inte begränsat till):

Du kan redigera WooCommerce-vagnsidan och anpassa elementen efter dina behov. Innan det, låt oss ta en titt på hur standardsidan för WooCommerce-vagnen ser ut på olika teman.

Så här ser WooCommerce-vagnsidans design ut på WordPress Twenty Twenty-tema:

Så här ser kundvagnssidan ut på Twenty Twenty One tema för WordPress:

Även ett populärt Elementor-tema som Hej Elementor kommer att ge dig en mycket grundläggande design för WooCommerce-vagnssidor med samma gamla layout.

Jag tror att du kommer att hålla med om att alla kundvagnssidorna ovan har samma layout och inte erbjuder något fancy eller extraordinärt

➡️➡️ Kolla Hur man lägger till valutaväxling till WooCommerce-webbplatsen i 5 steg

Varför anpassa WooCommerce kundvagnssida

Enligt rapporten från november 2023 från BuiltWith använder 6,6 miljoner+ livewebbplatser WoCommerce.

WooCommerce låter dig bygga en färdig att använda fullt fungerande e-handelswebbplats med dess mallar, inklusive en kundvagnssida på nolltid. Många av dessa webbplatser använder standardmallarna för WooCommerce för varukorgen och andra sidor.

Men du vill inte att din varukorgssida på din webbplats ska se ut som andra eftersom det sannolikt kommer att stänga av dina köpare. För att sticka ut från mängden kan redigeringar av WooCommerce-vagnssidor eller WooCommerce-vagnanpassning komma till undsättning.

Det är också ett faktum att runt  70% människor överger sin kundvagn och fortsätt aldrig att checka ut. Detta visar hur viktigt det är att anpassa WooCommerce-vagnsidan.

Använda sig av WooCommerce övergav kundvagns plugins för att återvinna förlorad försäljning genom att automatiskt påminna kunderna om att slutföra sina köp.

Och det är ett känt faktum att människor attraheras av saker som är annorlunda och sticker ut i mängden.

Så låt inte din kundvagnssida gå vilse i mängden, utan anpassa den så att den sticker ut och hjälper dig att få fler beställningar. 

Nu är frågan hur man kan få en kundvagnssida som sticker ut? Tja, det finns två sätt du kan skapa en Woocommerce-vagnsidedesign.

1. 1. Redigera WooCommerce-filerna (kräver att du kan koda)
2. 2. Använd ett dra-och-släpp-plugin

Du kan också kolla in vår blogg 👉 Hur man lägger till valutaväxling till WooCommerce

Varför redigera kod för att få en anpassad WooCommerce Cart-sida är inte en bra idé

Även om det är ett alternativ att redigera kod för att få din önskade kundvagnssida, rekommenderas det inte för icke-kodare. Eftersom du valde en färdig att använda plattform som WooCommerce för att bygga din webbplats antar jag att du inte är ute efter att handkoda någonting.

Här är några av anledningarna till varför nybörjarprogrammerare eller icke-kodare bör undvika att redigera standardkod för WooCommerce-vagnsiddesign.

• Det kräver att du är en expert programmerare och kan HTML, CSS, Javascript och PHP som ett proffs.
• Om koden inte redigeras och optimeras effektivt kan det sakta ner din webbplats.
• Du måste ändra koden varje gång du vill ändra ditt WooCommerce-tema
• När WooCommerce kommer med en ny uppdatering kommer du att behöva göra nya ändringar för att göra koden kompatibel med en ny version av WooCommerce
• Du kan också förlora all din kod när WooCommerce uppdateras om du inte skapar ett barntema.

Dessutom, om du använder plattformar som WordPress och WooCommerce för att undvika kodning i första hand, varför lära sig att koda bara för att redigera en kundvagnssida, eller hur?

Inga problem. Jag har en annan process som du kan använda för att anpassa din kundvagnssida smidigt utan att behöva koda. Inte ens en enda rad. Löfte!

Låt oss se hur man redigerar WooCommerce-vagnsidan utan kodningskunskap!

Hur man anpassar WooCommerce kundvagnssida med hjälp av en dra och släpp-plugin

Nu kan du designa en kundvagnssida med enkel dra-och-släpp-teknik. Tack vare WooCommerce PageBuilder-plugin ShopEngine.

ShopEngine är det ultimata WooCommerce byggare med färdiga mallar, och widgets för att anpassa dina WooCommerce-sidor och moduler med användbara e-handelsfunktioner. Med detta plugin får du fullständig kontroll över designen av dina WooCommerce-sidor inklusive varukorgssidan.

Medan ShopEngine ger dig en premade Varukorgsmall, kan du skapa din varukorgssida från början och du kan göra WooCommerce-vagnanpassning. I den här bloggen kommer jag att leda dig genom processen för hur du redigerar en WooCommerce Cart-sida för att skapa en helt ny från grunden.

Behöver du fler skäl att övertyga dig själv om att använda ShopEngine? Läs vår blogg på 11 skäl att välja ShopEngine

Steg #1: Installera Elementor och ShopEngine

För att komma igång med processen för hur man anpassar kundvagnssidan i WooCommerce behöver du två plugins

1. Elementor
2. ShopEngine 

Eftersom ShopEngine är en WooCommerce-sidbyggare för Elementor och kräver Elementor, se till att du installerar Elementor först. 

Steg #2: Skapa en mall för en kundvagnssida

När du har installerat båda plugin-programmen skapar du en kundvagnsmall. Så här skapar du en mall för en kundvagnssida:

• Gå till: Instrumentpanel => ShopEngine => Builders Mall
• Klick på Lägg till ny för att öppna fönstret Mallinställningar
• Ge en Mallnamn av dina önskemål
• Välja Skriv som varukorg från rullgardinsmenyn
• Sätta på alternativet Ställ in som standard för att åsidosätta alla befintliga kundvagnssidor
• Välj det tomma alternativet under Provdesign 
• Klicka på Spara ändringar att uppdatera

Notera: För att få en färdig att använda kundvagnmall, välj alternativet "Sample Design 1" när du skapar mallen. Du kan också redigera alla element i den färdiga mallen. Jag valde blank eftersom jag ska skapa en från grunden

Steg #3: Välj en layout/struktur

Nu är det dags att välja layout. För att starta 

• Gå till ShopEngine => Builders Module
• Håll muspekaren över varukorgsmallen från listan
• Klicka på Redigera med Elementor

• När Elementor Editor öppnas Klick på sektionen Lägg till ny (+) ikon 
• Välj nu struktur/layout du gillar

Steg #4: Designa kundvagnssida med ShopEngine-widgets

ShopEngine tillhandahåller fem widgets exklusivt för att designa en WooCommerce Varukorgsmall. Tillsammans med Cart Template-widgets kan du också använda Kupongformulär widget och fem+ allmänna widgets för att bygga din kundvagnssida.

För den här bloggen kommer jag att använda följande widgets:

• Varukorgsbord: Varukorgswidgeten visar alla produkter i kundvagnen i ett tabellformat med pris, kvantitet och delsumma. Kunder kan uppdatera produktkvantitet och även rensa varukorgen med ett klick.
• Kundvagn totalt: Denna widget visar alla tillgängliga leveransmetoder och total beställning.
• Återgå till butiken: Denna widget tillhandahåller en knapp med en länk som tar dig tillbaka till butikssidan.
• Kassakupongformulär: Kunder kan använda sin rabattkupong med denna widget.
• Deal produkt: Den här widgeten låter dig visa upp dina reaprodukter på varukorgssidan också med en nedräkningstimer som visar reaschemaperioden. Detta är en allmän widget för ShopEngine.
• Korsförsäljning: Korsförsäljning visar alla korsförsäljningsprodukter attraktivt på varukorgssidan.

Först måste du slå på widgetarna du vill använda på din kundvagnssida. Att slå på  

• Gå till Admin Dashboard => ShopEngine => Widgets. 
• Bläddra och sök efter widgeten du vill använda
• Gör det möjligt widgetarna du vill använda
• Klicka på Spara ändringar längst upp på sidan

Nu är det dags att dra och släppa widgetarna i din layout. Gå tillbaka till redigeringsläget för kundvagnssidan:

• Sök för widgeten
• Dra och släpp widgetarna (en efter en)

Notera: Du kan dölja knappen Fortsätt handla och Dölj alla.

Eftersom ShopEngine är helt kompatibel med Elementor kan du använda flera layouter på samma sida. För nästa del, låt oss använda en annan layout. För att göra det kommer jag att lägga till ett nytt avsnitt med en annan struktur och dra och släppa Cross-sell och Deal produkter widgets.

Notera: Du behöver lägga till korsförsäljningsprodukter och sätta produkter till försäljning med scheman från administratörspanelen under produktinställningar för korsförsäljning och dealprodukter för att dyka upp i användargränssnittet.

Både Cross-Sell och Deal-produkter ger dig olika inställningar du kan anpassa. Så, efter att du har dragit och släppt widgeten, anpassa inställningarna enligt dina önskemål.

Med korsförsäljningswidgeten, får du alternativ som att slå på/av Aktivera skjutreglaget, visa/dölja Flash Rea, Rea Price, Cart Button och antalet produkter som ska visas under innehållsinställningar. För skjutreglage får du alternativ som Slides Per View, Loop och Autoplay. Slide Speed etc. Dessutom får du även alternativet Beställ efter och Beställ under fliken avancerat.

Deal produkter ger dig innehållsinställningar som Order, Order By, Date, Show Product, Column, Column Gap och Rad Gap. Du får även andra inställningar som inkluderar Aktivera rea, märke, rea märke, rea, gräns för titelord, procentmärke, nedräkningsklocka och dagar.

Steg #5: Anpassa Woocommerce Cart-sidans stilparametrar

Inte bara struktur, med ShopEngine får du fullständig kontroll över stilen på din kundvagnssida också.

För att ändra stilparametrarna för ShopEngine Widgets, håll muspekaren över widgeten du vill redigera för att hitta ett redigeringsalternativ i det övre högra hörnet. Klicka på det alternativet för att hitta alla Woocommerce kundvagnsinställningar för innehåll och stilar på Elementor-panelen placerad på vänster sida.

Låt oss ta en titt på stilinställningarna du kan anpassa för var och en av widgetarna som används i den här bloggen:

Varukorgsbord: 

Du kan ändra stilinställningarna för tabellrubrik, tabellkropp, produktbild och kvantitet. Tabellsidfot och globalt teckensnitt. För mer information kan du kolla in vår dokumentation på vagnbordet.

Återgå till butiken:

Du ändrar knappjustering, typografi, kantfärg, kantradie och boxskugga. För mer information kan du kolla in vår dokumentation om Return To Shop Widget

Kupongformulär:

För kupongformuläret får du en stilinställning för info, beskrivning, kupongformulär, appliceringsknapp och globalt teckensnitt. Du kan kolla in stilalternativen i detalj på vår dokumentation på kupongformulär.

Kundvagn totalt:

För Cart total widget får du många stilalternativ för att ändra stilen för Tabell, Inmatning, kassauppdateringsknapp och globalt teckensnitt. För mer detaljerade WooCommerce-vagnstilsinställningar kan du kolla in vår dokumentation om varukorgen totalt.

Korsförsäljning: 

För Cross-sell-widgeten får du olika stilalternativ som inkluderar stilar för föremål, flashförsäljning, bild, titelracing, pris, Lägg i kundvagn, Slider-stil och globalt typsnitt. För mer information om Cross, Rea style kolla in dokumentationen.

Dealprodukter:

Du får olika stilalternativ för Product Wrapper, Product Image, Product Badge, Countdown Clock, Content Style, Stock and Progress bar, och Global font. För att veta mer detaljer om stilalternativen kolla in vår dokumentation om Deal Product-widgeten.

Steg #6: Uppdatera och förhandsgranska anpassad WooCommerce-vagnsida

När du har ändrat stilarna klicka på Uppdatering för att spara ändringarna och klicka på Förhandsvisning för att se förändringarna.

Om du har följt layouten och inställningarna som nämns i den här bloggen, bör du designa en anpassad kundvagnssida i WooCommerce med ShopEngine som den nedan:

Bonus: Tips för att öka försäljningen av din e-handelsbutik med ShopEngine-moduler

Nu vet du hur man bygger och anpassar en kundvagnssida i woocommerce. ShopEngine ger dig, förutom WooCommerce varukorgsmallar, användbara moduler med viktig e-handelsfunktion som kan öka din onlinebutiks försäljning. ShopEngine-moduler inkluderar:

• Snabbtitt
• Variationsprover
• önskelista
• Produktjämförelse

Jag är säker på att som ägare av WooCommerce-butiker vet du hur viktiga dessa funktioner är för att göra köpupplevelsen på nätet bra. Om vi pratar om kundvagnsmallen, använder vi Snabbtitt knappen och önskelista knappen på korsförsäljningen kommer att ge dina kunder en bättre shoppingupplevelse. Och detta ökar chansen att dina kunder köper fler produkter.

Med Quick View kan kunder enkelt kolla in alla produkters fullständiga information med bara ett klick. På samma sätt kan användare med bara ett klick lägga till produkten till sin önskelista med hjälp av önskelistans modulknapp för att betala senare. Båda dessa funktioner kan spela en betydande roll för att öka produktförsäljningen.

Så, anpassa inte bara din kundvagnssida, använd ShopEngine-moduler för att ge dina kunder en fantastisk köpupplevelse och öka din butiks försäljning.

Bonusbloggar:
✅ Hur man anpassar WooCommerce-kategorisidan utan kodning
✅ Hur man anpassar WooCommerce My Account-sidan med ShopEngine 
✅ Hur man anpassar WooCommerce Shop Page med ShopEngine 
✅ Hur man anpassar WooCommerce-produktsidan med ShopEngine
✅ Hur man anpassar WooCommerce kassasida med ShopEngine
✅ 9+ Användbara och bästa Shopping Cart-plugins för WordPress och WooCommerce

Varför uppgradera till ShopEngine Pro?

Jo, ärligt talat ger ShopeEngine dig tillräckligt med funktioner för att göra din onlinebutik till en bra sådan. Men varför ska man nöja sig med gott när man kan få det bästa, eller hur?

ShopEngine Pro ger dig en stor mängd funktioner som kommer att göra onlineshopping i din e-handelsbutik till den bästa köpupplevelsen för dina kunder. Tillsammans med att anpassa woocommerce-vagnsidorna kan du komma åt 20+ moduler vilket innefattar Flash försäljningsnedräkning, märken, Försäljningsmeddelande, Snabb utcheckning, Parietal betalning, Valutaväxling, och många fler.

Inte bara kundnöjdhet, ShopEngine-funktioner är designade för att göra hantering av onlinebutiker superenkelt också med moduler som Förboka, Restorder, Ytterligare kassafält, och många fler.

Att inte glömma 16+ premade mallar med full WooCommerce-anpassningskontroll och 70+ avancerade widgets att skapa alla WooCommerce-mallar från början om du vill.

När det kommer till kundvagnssidan låter ShopEngine dig också bygga en WooCommerce anpassad kundvagnssida för din onlinebutik.

Ett plugin med så många funktioner, förgjorda mallar och moduler som också till ett mycket rimligt pris säkert kommer att testas, eller hur?

Skaffa din version av ShopEngine idag och oroa dig aldrig för hur du anpassar WooCommerce igen!

Slutord

Grattis! Du har framgångsrikt gjort om din WooCommerce anpassade kundvagnssida. Var inte det lätt? 

Tja, det är vad ShopEngine gör, nu vet du hur du anpassar en WooCommerce-vagnsida utan kodning.

Så, begränsa inte bara din onlinebutik till standardstilar, designa om hela din WooCommerce-webbplats och använd modulerna för att göra din onlineverksamhet mer framgångsrik än någonsin. 

Så vilken WooCommerce-sida ska du anpassa härnäst? Glöm inte att dela med dig av din erfarenhet av att använda ShopEngine.