Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Hur man skapar en Custom WooCommerce Cart Page (ingen kodning)

Vill du skapa en custom WooCommerce cart page?

Standard WooCommerce cart page är inte optimerad för konverteringar. Genom att customize cart page kan du få mer försäljning och tjäna mer pengar från din online store.

I den här artikeln visar vi dig hur du customize din WooCommerce cart page utan att skriva någon kod.

How to create a custom WooCommerce cart page (no coding)

Varför skapa en Custom WooCommerce Cart Page i WordPress?

WooCommerce levereras med en built-in cart page.

Aktivera bara detta permanentaktiverade tillägg till WordPress, så kommer din butik att börja använda standard page för varukorgen automatiskt.

The default WooCommerce cart page

När dina visitors har objekt i sin cart är de mycket close på att göra ett köp. Forskning visar dock att nästan 7 av 10 kunder kommer att överge sin cart och aldrig komma tillbaka.

Med detta i åtanke bör din cart page göra allt för att säkra försäljningen.

Genom att ersätta standarddesignen med en custom page för cart kan du ofta förbättra konverteringen i din online store.

Även om du bara customizear sidan med ditt eget varumärke och din logga kan det förbättra kundupplevelsen och öka din konvertering.

Med detta sagt, låt oss ta en titt på hur du kan customize din WooCommerce cart page utan kod.

Video Tutorial

Subscribe to WPBeginner

Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa.

Hur man skapar en custom WooCommerce Cart Page i WordPress

Det enklaste sättet att skapa customize pages för din WooCommerce store är genom att använda SeedProd.

SeedProd är den bästa drag and drop page builder och levereras med mer än 180 professionellt utformade templates. Detta inkluderar templates för ecommerce som du kan använda för att skapa försäljningssidor och lead squeeze pages.

Ännu bättre, SeedProd har fullt support för WooCommerce och kommer även med speciella WooCommerce block som tillåter dig att visa dina bästsäljande produkter, mest populära objekt, senaste försäljning och mer.

Det första du behöver göra är att installera och aktivera pluginet. För mer detaljer, se vår steg-för-steg guide om hur du installerar ett WordPress plugin.

Note: Det finns en gratis version av SeedProd, men för den här guiden kommer vi att använda Pro-versionen eftersom den har de built-in WooCommerce block vi behöver. Det integreras också med all email marknadsföringstjänster som du kanske redan använder för att få mer försäljning och konvertering.

Vid aktivering måste du gå till SeedProd ” Settings och enter you license key.

Enter SeedProd license key

You can find this information under your account on the SeedProd website. När du har enter licensen klickar du på knappen ”Verify Key”.

När du har gjort det, gå till SeedProd ” Landing Pages och klicka på knappen ’Add New Landing Page’.

SeedProd's page design templates

Efter det måste du välja en template för cart page.

SeedProds templates är organiserade i olika kampanjtyper såsom coming soon och 404 page. Du kan clicka på tabbarna högst upp på vyn för att filtrera templates baserat på kampanjtyp.

När du hittar en template som du vill använda, hoverar du över den och klickar på ikonen ”Checkmark”.

Vi kommer att använda ”Blank Template” eftersom den låter oss add to endast de sections vi vill ha.

Select SeedProd template

Gå sedan vidare och skriv in ett namn för cart page. SeedProd kommer automatiskt att skapa en URL baserat på sidans rubrik, men du kan ändra denna URL till vad du vill.

När du är nöjd med den information du har enter klickar du på knappen ”Save and Start Editing the Page”.

Creating a custom cart page using SeedProd

Detta kommer att hämta SeedProd page builder. Det är en enkel drag and drop editor som visar en live preview av your custom cart page till höger och några settings till vänster.

Till att börja med lägger vi till en image högst upp på page. Det är en bra idé att använda en image som gillar din stores vanliga header, eftersom detta kommer att hålla ditt varumärke på plats och konsekvent.

Vi vill att header image ska ta upp hela bredden på cart page, så i ”Choose your layout” boxen, click on the first layout.

Choosing a layout for a custom page

Detta skapar en layout med full width.

Nu väljer du blocket ”Image” i menyn till vänster och drar det till layouten.

Add image block header

För att uploada din image, click för att select the Image block.

I menyn till vänster klickar du på ”Use Your Own Image” och antingen väljer du en image från mediabiblioteket eller så uppladdar du en new fil från din dator.

Adding your logo to a custom cart page in WooCommerce

Du kan ytterligare customize imagen med hjälp av settings till vänster. Du kan till exempel add to alt-text och ändra bildens storlek.

När du är nöjd med hur headern ser ut klickar du på ikonen ”Add Columns” i sectionen ”Drag a new block here”.

Adding new blocks to a WooCommerce cart page

Du kan nu välja den layout som du vill använda för huvudsidan för cart area.

Gå vidare och klicka på layouten för content och sidebar.

Select SeedProd layout

Detta gör att du kan skapa en section för din cart och ett area där du kan visa rekommendationer från customers för att få fler konverteringar.

I menyn till vänster rullar du till sektionen ”WooCommerce”. Här hittar du blocket ”Cart” och drar det till din layout.

Add WooCommerce cart block

Du kan customize varje del av cart med hjälp av den vänstra menyn.

Detta inkluderar att ändra font, färger, knappar och mycket mer.

Customize WooCommerce cart block

När du är nöjd med hur cart area ser ut är det dags att add to ett block med rekommendationer. Detta är en form av socialt bevis, som kommer att uppmuntra besökarna att completed sitt köp.

Leta bara upp blocket ”Testimonials” och dra det till din layout.

Add testimonials block

You can now change how the testimonials look on your online store.

I menyn till vänster ser du till exempel inställningar för att ändra färg på kommentarsbubblan, ändra justering och add to fler rekommendationer från kunder.

Customize testimonials block

En annan bra idé är att visa en star rating under your testimonial.

Detta gör du genom att hitta blocket ”Star Ratings” och dra det under blocket med testimonials.

Add star rating block

Knapphet kan uppmuntra dina kunder att göra ett köp nu, snarare än att vänta och riskera att gå miste om något. Med det i åtanke kanske du vill add to en nedräkningstimer som räknar ner minuterna tills besökarens cart löper ut.

För att skapa denna känsla av brådska, hitta ”Countdown” -blocket och dra det högst upp i din cart.

Vi vill visa en ny timer för varje visitor, så öppna ”Countdown Type” dropdown och välj ”Visitor Timer (Evergreen)”.

Countdown timer evergreen block

Som standard startar timern efter 30 minuter, men du kan ändra detta genom att skriva in en new siffra i ”Set Timer For” section.

Vi vill informera kunderna om att deras cart kommer att löpa ut när timern når 0, så add to ett ”Headline”-block ovanför timern.

Du kan sedan skriva in den text som du vill visa för kunderna.

Countdown timer header

Du kan uppmuntra människor att add to fler objekt till sin shopping cart genom att skapa en popular products section.

För att främja din stores bästsäljare är det bara att drag and drop ett block med ”Bästsäljande produkter” till din layout.

Add SeedProd products block

Som standard visar det här blocket dina mest populära produkter, men du kan använda inställningarna för att visa produkter som är på rea, dina nyaste produkter med mera.

För att göra detta öppnar du helt enkelt dropdown ’Typ’ och väljer ett nytt alternativ.

Showing popular products on your cart page

För mer detaljer, vänligen se vår guide om hur du visar populära produkter i WooCommerce.

När du är nöjd med hur sidan med cart ser ut är det dags att publicera den genom att clicka dropdown-pilen bredvid ”Save” och sedan välja alternativet ”Publicera”.

Publish cart live

Efter det måste du ändra URL:en till cart i WooCommerce-inställningarna.

Gå bara till WooCommerce ” Settings och klicka sedan på tabben ”Advanced”.

Changing the WooCommerce URLs

Därefter öppnar du dropdown ’Cart page’ och börjar skriva in URL: n för din custom page.

När rätt page dyker upp, selectar du den.

Changing the WooCommerce cart URL

Bonus: Hur man ytterligare förbättrar WooCommerce Cart Page konverteringar

När du har skapat en custom WooCommerce cart page finns det många sätt att minska antalet övergivna kundvagnar och få mer försäljning. 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 på.

1. Track dina konverteringar

Att överge sin cart är ett stort problem för alla online stores. Faktum är att 60 till 80 % av de som addar objekt till sin cart inte köper. (Källa: Statistik över övergivna kartor)

Conversion tracking hjälper dig att förstå vad som fungerar på din cart page, och vad som inte gör det. Du kan sedan använda SeedProd för att finjustera din customize cart page så att fler customers går vidare och completed their purchase.

Det enklaste sättet att spåra WooCommerce konverteringar är genom att använda Google Analytics. Men att ställa in analyser och skapa Google Analytics-mål manuellt kräver att du skriver massor av customize-kod.

Med detta i åtanke rekommenderar vi att du använder MonsterInsights. Det är det bästa Google Analytics pluginet för WooCommerce, och kommer med ett ecommerce addon som aktiverar konvertering tracking med bara några clicks.

MonsterInsights

För att spåra dina WooCommerce cart konverteringar, se vår steg-för-steg guide om hur du ställer in WooCommerce konverteringsspårning.

2. Minska antalet övergivna cart med tidsbestämda popups i WooCommerce

Du kan också minska antalet övergivna cart med en tidsbestämd popup.

OptinMonster är den bästa WordPress popup plugin och har en unik Exit-Intent®-teknik som kan visa popups exakt när en kund är på väg att lämna cart page.

Du kan till och med använda OptinMonster för att erbjuda kunderna en speciell rabattkod om de slutför köpet nu.

OptinMonster popup WooCommerce

OptinMonster har en kraftfull uppsättning inriktnings- och personaliseringsfunktioner.

Om du till exempel redan har erbjudit kunden en coupon, kan du visa dem en pedagogisk popup istället. Du kan till exempel uppmuntra dem att kontakta dig och ställa eventuella frågor om dina produkter.

WPForms exit intent popup

OptinMonster tillåter dig att skapa olika kampanjer, inklusive popups, välkomstmattor i helskärm, flytande barer, rulla boxar och slides.

Om en customer till exempel addar ett objekt till sin cart men inte fullföljer köpet kan du erbjuda en coupon för just den produkten med hjälp av en slides-in.

OptinMonster cart reminder

För mer detaljer, se vår guide om hur du skapar en WooCommerce popup för att öka försäljningen.

3. Öka försäljningen med aviseringar om sociala aktiviteter i WooCommerce

Aviseringar om social aktivitet visar alla produkter som shoppare köper i realtid. Detta kan försäkra kunderna om att du är en populär, pålitlig website och använder också FOMO för att få dem att köpa.

Det enklaste sättet att add to social proof notifications till din cart page är med TrustPulse.

TrustPulse WooCommerce notification

Det är marknadens bästa plugin för sociala bevis för WordPress och WooCommerce och har visat sig öka konverteringarna med 15%.

You can add TrustPulse to your site in just a few minutes, and start showing a notification bubble every time someone buys a product, starts a free trial, and more.

TrustPulse alert notification

För mer detaljer, se vår guide om hur du använder FOMO på din WordPress webbplats.

Vi hoppades att den här artikeln hjälpte dig att skapa en custom WooCommerce cart page utan att skriva någon kod. Du kanske också vill se vår steg-för-steg guide om hur du ökar trafiken på din blogg, och vårt expertval av de bästa WooCommerce-tilläggen för din store.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

1 kommentarLämna ett svar

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.