Standardsidan för WooCommerce-varukorg fungerar, men den är grundläggande och matchar ofta inte din stil.
Under vår testning av olika sidbyggare upptäckte vi att SeedProd gör det förvånansvärt enkelt att skapa en anpassad kundvagnssida utan att röra en enda kodrad.
Vi har utforskat SeedProds WooCommerce-funktioner och funnit att anpassning av kundvagnsidan är både enklare och kraftfullare än vi förväntade oss. Det som tidigare krävde en utvecklare kan nu göras med bara några klick med deras dra-och-släpp-gränssnitt.
I den här guiden visar vi dig exakt hur du skapar en anpassad WooCommerce-varukorgssida utan någon kodning.
💡Quick Answer: Create a Custom Cart Page in 6 Steps
Before we walk through the details, here is a quick overview of the main steps you’ll be following:
- Install and activate the SeedProd Pro plugin.
- Create a new landing page and choose a starting template.
- Design the basic page layout with a header and columns.
- Drag and drop the main WooCommerce ‘Cart’ block onto your page.
- Add conversion elements like testimonials or a countdown timer.
- Publish the page and assign it as your cart page in WooCommerce settings.
Varför skapa en anpassad WooCommerce-kundvagnssida i WordPress?
WooCommerce kommer med en inbyggd varukorgssida. Installera och aktivera bara detta plugin, så börjar din onlinebutik automatiskt använda standardvarukorgssidan.
När dina besökare har varor i sina kundvagnar är de mycket nära att genomföra ett köp. Forskning visar dock att nästan sju av tio kunder kommer att överge sina kundvagnar och aldrig komma tillbaka.
Med det i åtanke bör din varukorgssida göra allt möjligt för att säkra försäljningen.
Genom att ersätta standarddesignen med en anpassad kundvagnssida kan du ofta förbättra konverteringsgraden på din onlinebutik.
Även att bara anpassa sidan med din egen varumärkesprofil och anpassad logotyp kan förbättra kundupplevelsen och öka dina konverteringsgrader.
Med det i åtanke kommer vi att dela hur du kan anpassa din WooCommerce kundvagnssida utan kod. Här är en snabb översikt över allt vi kommer att täcka i följande avsnitt:
- How to Create a Custom WooCommerce Cart Page in WordPress (Step-by-Step)
- Videohandledning
- Bonus Tip: How to Further Improve WooCommerce Cart Page Conversions
Låt oss dyka rakt in!
Hur du skapar en anpassad WooCommerce-kundvagnssida i WordPress
Det enklaste sättet att skapa anpassade sidor för din WooCommerce-butik är att använda SeedProd.
It is the best WordPress page builder and comes with more than 300 professionally designed templates. These include eCommerce templates for creating sales pages and pages for collecting email signups.
Even better, SeedProd offers full WooCommerce support and includes special WooCommerce blocks that let you showcase your best-selling products, most popular items, latest sales, and more.
Flera av våra partner varumärken har byggt hela sina webbplatser med hjälp av pluginet och har fått bra feedback från sina användare på de nya designerna. För att lära dig mer, se vår SeedProd-recension.
Step 1: Install and Activate SeedProd Pro
Nu är det första du behöver göra att installera och aktivera pluginet. För mer information kan du se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Notera: Det finns en gratisversion av SeedProd, men för den här guiden kommer vi att använda Pro-versionen eftersom den har de inbyggda WooCommerce-blocken vi behöver. Den integreras också med alla e-postmarknadsföringstjänster du kanske redan använder för att få fler försäljningar och konverteringar.
Efter aktivering, navigera till SeedProd » Inställningar och ange din licensnyckel.
Du hittar den här informationen under ditt konto på SeedProd-webbplatsen. Efter att ha angett licensen, klicka på knappen 'Verifiera nyckel'.
Step 2: Create a New Landing Page
När du har gjort det vill du gå till SeedProd » Landningssidor och klicka på knappen 'Lägg till ny landningssida'.
Efter det måste du välja en mall för kundvagnssidan.
SeedProds mallar är organiserade i olika kampanxtyper, som "kommer snart" och 404-sidor. Du kan klicka på flikarna högst upp på skärmen för att filtrera mallar baserat på kampanystyp.
När du hittar en mall du vill använda, vill du sväva över den och klicka på 'Kryss'-ikonen.
För den här handledningen kommer vi att använda 'Blank Mall' eftersom den låter oss lägga till endast de sektioner vi vill ha.
På nästa skärm kommer du att namnge din varukorgssida.
SeedProd kommer automatiskt att skapa en URL baserad på sidans titel, men du kan ändra denna URL till vad du vill.
När du är nöjd med informationen du har angett, klickar vi på knappen 'Spara och börja redigera sidan'.
Step 3: Design the Cart Page Layout
Detta laddar upp SeedProd sidbyggare. Det är en enkel dra-och-släpp-redigerare som visar en liveförhandsgranskning av din anpassade kundvagnssida till höger och vissa inställningar till vänster.
💡 Experttips: Om det känns som för mycket arbete att designa en varukorgssida, kan du använda SeedProds AI Builder för att göra det enklare. Allt du behöver göra är att beskriva vilken typ av varukorgssida du vill ha med några få ord, så genererar AI:n en anpassad varukorgssida åt dig.
Dessutom kan du använda pluginets AI-funktioner för att automatiskt generera innehåll och bilder, vilket sparar dig ännu mer tid.
För att komma igång, kolla in vår handledning om hur man skapar en WordPress-webbplats med AI.
Till att börja med lägger vi till en bild högst upp på sidan. Vi rekommenderar att du använder en bild som ser ut som din butiks vanliga sidhuvud, eftersom detta kommer att hålla ditt varumärke på plats och konsekvent.
Vi vill att headerbilden ska fylla hela bredden på kundvagnssidan, så låt oss klicka på den första layouten i rutan ‘Välj din layout’.
Detta skapar en layout i full bredd.
Välj nu blocket 'Bild' i menyn till vänster och dra det till layouten.
För att ladda upp din bild, klicka för att välja blocket 'Bild'.
I menyn till vänster klickar vi på 'Använd din egen bild' och väljer antingen en bild från mediabiblioteket eller laddar upp en ny fil från din dator.
Inställningarna till vänster låter dig anpassa bilden ytterligare. Till exempel kan du lägga till bild alt-text och ändra bildens storlek.
När du är nöjd med hur sidhuvudet ser ut kan du klicka på ikonen 'Lägg till kolumner' i sektionen 'Dra ett nytt block här'.
Du kan nu välja den layout du vill använda för huvudområdet för kundvagnssidan.
Klicka på innehålls- och sidofältslayouten.
Detta låter dig skapa en sektion för din kundvagn och ett område där du kan visa kundrecensioner för att öka konverteringar.
Step 4: Add WooCommerce Cart Blocks
I menyn till vänster vill du skrolla till sektionen 'WooCommerce'. Här hittar vi blocket 'Kundvagn' och drar det till din layout.
Därefter kan du anpassa varje del av kundvagnen med hjälp av menyn till vänster.
Detta inkluderar att ändra teckensnitt, färger, knappar och mer.
When you’re happy with how the cart area looks, it’s time to add a testimonials block.
This is a form of social proof that helps shoppers feel more confident in their decision by showing that other people have had a positive experience with your products.
Hitta bara blocket 'Testimonials' och dra det till din layout.
Du kan nu ändra hur vittnesmålen ser ut i din webbutik.
Till exempel, i menyn till vänster ser du inställningar för att ändra färgen på kommentarbubblan, ändra justeringen och lägga till fler kundrecensioner.
En annan bra idé är att visa ett stjärnbetyg under ditt vittnesmål.
För att göra detta, hitta helt enkelt blocket ’Stjärnbetyg’ och dra det under vittnesmålsblocket.
Step 5: Add Conversion-Boosting Elements
Knapphet kan uppmuntra dina kunder att göra ett köp nu, snarare än att vänta och riskera att missa något. Med det i åtanke kanske du vill lägga till en nedräkningstimer som räknar ner minuterna tills besökarens kundvagn löper ut.
För att skapa denna känsla av brådska, hitta blocket 'Nedräkning' och dra det till toppen av din kundvagn.
Vi vill visa en ny timer för varje besökare, så du vill öppna rullgardinsmenyn 'Nedräkningstyp' och välja 'Besökartimer (Evighetsklocka)'.
This ensures the countdown starts new for every person, creating a genuine and personal sense of urgency.
Som standard börjar timern på 30 minuter, men du kan ändra detta genom att skriva ett nytt nummer i avsnittet 'Ställ in timer för'.
Vi vill att kunderna ska veta att deras varukorg kommer att löpa ut när timern når 0, så låt oss lägga till ett 'Rubrik'-block ovanför den.
Du kan sedan skriva in den text du vill visa för shoppare.
Du kan uppmuntra folk att lägga till fler varor i sin kundvagn genom att skapa en sektion för populära produkter.
För att marknadsföra din butiks största säljare, dra och släpp helt enkelt ett block för 'Mest sålda produkter' till din layout.
Som standard visar detta block dina mest populära produkter, men du kan använda inställningarna för att visa produkter som är på rea, dina nyaste produkter och mer.
För att göra detta, öppna helt enkelt rullgardinsmenyn 'Typ' och välj ett nytt alternativ.
För mer information, se vår guide om hur man visar populära produkter i WooCommerce.
Step 6: Publish Your Custom Cart Page
När du är nöjd med hur kundvagnssidan ser ut är det dags att publicera den. Klicka på nedåtpilen bredvid 'Spara' och välj sedan alternativet 'Publicera'.
Därefter behöver du ändra kundvagns-URL:en i WooCommerce-inställningarna.
Gå helt enkelt till WooCommerce » Inställningar och byt sedan till fliken 'Avancerat'.
I den här fliken vill du öppna rullgardinsmenyn 'Kundvagnsida' och börja skriva in URL:en för din anpassade sida.
När rätt sida visas, klicka bara på den för att välja den.
Videohandledning
Om du är mer av en visuell inlärare kanske du vill kolla in vår videoguide om hur man skapar en anpassad WooCommerce kundvagnssida:
Bonustips: Hur du ytterligare förbättrar konverteringar på WooCommerce-kundvagnssidan
När du har skapat en anpassad WooCommerce-kundvagnssida finns det många sätt att minska övergivna kundvagnar och få fler försäljningar. Detta hjälper dig att tjäna mer pengar på din befintliga trafik.
Här är några enkla sätt att göra det.
1. Spåra dina konverteringar
Cart abandonment is a big problem for all online stores. In fact, research shows that nearly 70% of people who add items to their cart don’t buy. (Source: Cart abandonment statistics)
Konverteringsspårning hjälper dig att förstå vad som fungerar på din kundvagnsida och vad som inte gör det. Du kan sedan använda SeedProd för att finjustera din anpassade kundvagnsida så att fler kunder slutför sina köp.
The easiest way to track WooCommerce conversions is with MonsterInsights, the best Google Analytics plugin for WordPress.
It comes with an eCommerce addon that enables conversion tracking with just a few clicks, so you can see your data without writing any code or leaving your dashboard.
För att spåra dina WooCommerce-kundvagnskonverteringar, se vår steg-för-steg-guide om hur man ställer in WooCommerce-konverteringsspårning.
2. Minska varukorgsavhopp med tidsbegränsade popups i WooCommerce
You can also reduce cart abandonment with a timed popup. The easiest and most effective way to do this is with OptinMonster, the best WordPress popup plugin for lead generation and conversion optimization.
Its unique Exit-Intent® technology displays popups exactly when a shopper is about to leave the cart page. You can even use this software to offer shoppers a special discount code if they complete the purchase now.
OptinMonster har en kraftfull uppsättning funktioner för målinriktning och personalisering.
Till exempel, om du redan har erbjudit shopparen en kupong, kan du istället visa dem ett pedagogiskt popup-fönster. Till exempel kan du uppmuntra dem att höra av sig och ställa eventuella frågor de kan ha om dina produkter.
OptinMonster låter dig skapa olika kampanjer, inklusive popup-fönster, helskärmsvälkomstmattor, flytande fält, rullningsrutor och slide-ins.
Till exempel, om en kund lägger en vara i sin kundvagn och inte slutför köpet, kan du erbjuda dem en kupong för just den produkten med hjälp av en slide-in.
För mer information, se vår guide om hur du skapar en WooCommerce-popup för att öka försäljningen.
3. Öka försäljningen med sociala aktivitetsnotiser i WooCommerce
Sociala aktivitetsmeddelanden visar alla produkter som kunder köper i realtid. Detta kan lugna kunder att du är en populär, pålitlig webbplats och även använda FOMO (Fear Of Missing Out) för att driva dem att köpa.
The simplest way to add social proof notifications to your cart page is with TrustPulse. It’s the best social proof plugin for WordPress and WooCommerce and has been proven to increase conversions by up to 15%.
Our partner brands are using it to show live purchases in their stores, which has improved their conversion rates. For more details about its features, see our TrustPulse review.
Du kan lägga till pluginet på din webbplats på bara några minuter och börja visa en meddelandebubbla varje gång någon köper en produkt, startar en gratis provperiod och mer.
För mer information, se vår guide om hur du använder FOMO på din WordPress-webbplats.
Vi hoppas att den här artikeln hjälpte dig att skapa en anpassad WooCommerce-kundvagnssida utan att skriva någon kod. Du kanske också vill se vår steg-för-steg-guide om hur du anpassar WooCommerce-inloggningssidan och vårt experttips om de bästa WooCommerce-pluginsen för din butik.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Dennis Muthomi
This guide couldn’t have come at a better time! I’ve implemented custom cart pages across several online stores, and combining SeedProd’s customization with social proof elements has been a game-changer.
One client’s cart abandonment rate dropped by 23% after we added a clean, branded design with testimonials and the TrustPulse notifications. The countdown timer feature mentioned in the article is particularly effective – it creates just enough urgency without being pushy.
Definitely SHARING this comprehensive guide to my colleagues
Pismai Peeters
Snälla, använd inte ordet 'bara' i dina inlägg. Om du inte vet hur du gör något och letar efter en lösning, är det aldrig 'bara' .... Det gör mig nervös och det får mig att känna mig dum, vilket jag inte är.
WPBeginner Support
Thank you for your feedback, we will look to improve our phrasing. Everyone has their own knowledge so what can be simple to one person can be complex to another. Our goal is to try to make the steps involved as simple as possible for our users
Admin
Mrteesurez
Designen och utseendet på Woocomerce standardvarukorgssida är inte tilltalande i de flesta teman, så det är viktigt att lära sig att styla den eller skapa en anpassad som överensstämmer med temats design.
Detta ger möjlighet att eliminera icke-väsentliga element från sidan. Det är bra att Seedprod kan göra detta. Tack för guiden.