Hur man enkelt add to en slides side cart i WooCommerce

Vill du add to en slides side cart i WooCommerce?

This allows shoppers to see their shopping cart from any page on your online store. Kunderna kan sedan lägga till objekt i sin cart, remove produkter och lägga till coupons utan att någonsin behöva besöka en separat cart page.

I den här artikeln kommer vi att visa dig hur du enkelt kan add to en slides cart i WooCommerce.

Varför add to en slides side cart i WooCommerce?

En sliding side cart är en panel som visas när en customer adderar ett objekt till sin korg.

Customize kan också öppna cart när som helst genom att clicka på cart iconen. Detta allow dem att kontrollera sin varukorg utan att besöka en separat WooCommerce shopping cart page.

Beroende på hur cart:en är konfigurerad kan kunderna också lägga till och ta bort objekt samt tillämpa coupons direkt från den slides panelen.

Du kan även add to call-to-action knappar, till exempel en länk till WooCommerce checkout page.

Slides carts kan förbättra kundupplevelsen genom att ta bort friktion från shoppingprocessen och hjälpa kunderna att track hur mycket de kommer att betala i kassan. Detta kan minska andelen kunder som överger sin cart.

Med det sagt, låt oss se hur du kan add to en slides side cart i WooCommerce. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda.

Video Tutorial

Subscribe to WPBeginner

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

Metod 1. Hur man addar en Slides Side Cart i WooCommerce med hjälp av ett gratis plugin

Det snabbaste och enklaste sättet att skapa en slides sidokorg är genom att använda Cart For WooCommerce By FunnelKit. Detta gratis plugin tillåter dig att add to en cart icon till din online store.

Shoppare kan clicka på knappen för att öppna den glidande sidovagnen.

You can change the cart’s colors, borders, buttons, messaging, and more.

Det finns massor av alternativ, så du kan skapa en cart som passar perfekt till alla WordPress teman.

You can show the cart button across entire your site, limit it to WooCommerce pages only, or add the button to specific pages and posts using a shortcode.

Så här ställer du in tillägget Cart for WooCommerce

Först måste du installera och aktivera pluginet FunnelKit Cart for WooCommerce. Om du behöver hjälp, vänligen se vår guide om hur du installerar ett plugin för WordPress.

När du är aktiverad går du till FunnelKit ” Cart. Du kommer att se en preview av den glidande slides cart till höger på vyn.

Du kan nu customize cart för att bättre passa dina behov.

Till att börja med kan du bestämma om du vill visa ikonen för cart på hela din website eller bara på WooCommerce pages.

Om du väljer ”Entire Website” kan kunderna öppna slides cart från vilken page som helst, så det här är ett bra val för marknadsplatser och butiker online.

Men din site kan ha massor av content som inte är ecommerce. Du kanske till exempel runar en populär blogg på WordPress, men använder WooCommerce för att sälja varor till dina fans.

Att visa en knapp för cart på varje enskilt inlägg på bloggen kan bli irriterande. I så fall kan du kontrollera alternativknappen ”WooCommerce Pages”.

Ett annat alternativ är ”None”, som döljer ikonen för cart helt och hållet.

Om du väljer alternativet ”None” kan du lägga till ikonen på vilken page, post eller area som helst som är redo för widgets med hjälp av en shortcode. Du kan också add to ikonen till din navigation menu.

Vi visar dig hur du gör det senare i posten, men du kan välja ”None” om du planerar att add to cart icon manuellt.

När du har gjort detta väljer du ”Bottom Left” eller ”Bottom Right” beroende på var du vill visa knappen för cart. Här kan det vara bra att kontrollera hur knappen kommer att se ut i din online store genom att välja ”Preview on Page”.

Som standard visar pluginet ”Review Your Cart” högst upp på den glidande sidokorgen.

You can replace this with your own messaging by typing into the ’Cart Heading’ field.

Om du inte vill visa en heading lämnar du helt enkelt fältet tomt.

Som standard visar FunnelKit ikonen för cart innan kunden addar några objekt till sin korg.

Om du föredrar det kan du dölja ikonen tills besökaren börjar lägga till objekt. Klicka bara på ”Hide Cart Icon” toggle så att den blir blå.

Detta är all du behöver för att skapa en grundläggande slides side cart, men det finns settings som kan ge dig ännu mer försäljning. Med det i åtanke, låt oss ta en titt på FunnelKits mer avancerade funktioner.

Godkänna Coupons i WooCommerce Slides Side Cart

Coupons är ett bra sätt att få mer försäljning och bygga kundlojalitet.

Om du har skapat några smarta WooCommerce coupons med hjälp av Advanced Coupons plugin, kan kunderna skriva in dem direkt på slides cart page.

När kunden klickar på ”Tillämpa” visar den glidande cart hur mycket de har saved.

Genom att visa kunderna rabatten direkt kan du minska andelen kunder som överger sin cart och uppmuntra dem att add to fler objekt till sin korg.

Du kan skapa dessa koder med hjälp av den utvalda funktionen för kuponger i WooCommerce eller genom att använda ett tillägg för kupongkoder.

För att add to coupon-fältet, klicka på ”Enable Coupon Box” toggle, som gör det från grått (inaktiverat) till blått (aktiverat).

Efter det kan du växla mellan layouterna ”Minimaliserad” och ”Förstorad”.

Kontrollera bara den högra boxen bredvid ”Display”.

Minimalistisk tar upp mindre utrymme så att det är mindre distraherande, men kunderna måste förstora coupon section innan de kan skriva in några koder.

I följande image kan du se den minimaliserade layouten.

När du har valt en layout kan du ändra den text som FunnelKit använder för coupon box heading, rabatt placeholder text och knapp text.

Customize sammanfattningen av cart

Cart summary visar customers hur mycket deras köp kommer att kosta. Detta bidrar till att minska antalet övergivna cart eftersom det inte finns några otrevliga överraskningar i kassan.

Av den anledningen rekommenderar vi att du låter toggeln ”Visa delsumma” vara aktiverad.

Men om du vill förenkla sidokartan kan du clicka för att inaktivera ”Show Subtotal” toggle.

Du kan också visa alla save som kunden har kvalificerat sig för, inklusive rabatter från alla coupons som de har tillämpat.

På så sätt kan du använda FOMO för att öka konverteringen, särskilt om saved är tidskänsliga. Du kan till exempel schemalägga coupons i WooCommerce så att kunden bara kan använda dem under en begränsad tid.

Om du föredrar att remove denna information från slides side cart, då kan du inaktivera ”Display Savings” toggle.

You can also replace the ”Saving Text” and ”Shipping Text” with your own custom messages.

Customize WooCommerce Cart’s Call-to-action

Slides side cart har en standard kassaknapp, men du kan customize denna call-to-action-knapp för att få fler konverteringar. Till att börja med kan du add to en checkout icon med hjälp av ”Enable Button Icon” toggle.

Detta kan vara till viss nytta om du skapar en flerspråkig site i WordPress.

You can also add the cart price to the checkout button using the ”Enable Cart Price” toggle.

Detta kommer att hjälpa kunderna att track hur mycket cart kommer att kosta, särskilt om du har tagit bort delsumman från cart summary section.

Som standard lägger FunnelKit till en ”Continue Shopping”-länk längst ner i den slides sidokorgen. You can replace this text with your own message by typing into the ’Continue Shopping Text’ field.

Därefter väljer du om den här länken helt enkelt ska stänga panelen för sidokorgen eller redirecta kunden till din WooCommerce store page.

De flesta kunder förväntar sig att lämna den slides cart, så vi rekommenderar att du väljer knappen ”Close Side Cart”.

Om du väljer ”Redirect to Shop” kanske du vill ändra texten ”Continue Shopping Text” så att det blir clear vad som händer när customers clickar på länken.

Skapa en Custom Empty Cart vy

Det är möjligt att dölja knappen cart tills kunden lägger till minst ett objekt i sin korg, följandes processen som beskrivs ovan. Men om du inte döljer knappen kan kunderna ibland se en tom vy med varukorgen.

Du kan ändra rubriken, beskrivningen och texten på knappen med hjälp av inställningarna i ”Empty Cart” section. Vanligtvis vill du uppmuntra kunderna att börja handla. Du kan till exempel prata om saker du erbjuder, som gratis frakt eller en pengarna-tillbaka-garanti.

Du kan till och med ge kunden en kupongkod, till exempel en rabatt på köp en och få en gratis.

You can also choose whether clicking on the ”Shop Now” button will take the customer to the WooCommerce store page, or simply close the side panel.

Vi rekommenderar att du väljer ”Redirect To Shop” eftersom det gör det lättare för kunderna att börja lägga objekt i sina charts.

Lägg till ikonen Cart var som helst på din webbplats

Om du vill ha mer control över var ikonen för cart ska appear kan du add to en page, post eller widget-ready area med hjälp av en shortcode. You can also add it to your site’s menu.

Detta är ett bra val om du valde ”None” i inställningarna för ”Icon Visibility” enligt processen som beskrivs ovan.

Om du valde ”WooCommerce Pages”, finns det också ett sätt att add the cart icon till andra viktiga areas på din site. Du kan till exempel add to icon till din custom home page eller kontaktformulär.

Till att börja med väljer du ”Cart Menu” och klickar sedan på ”Enable Cart Menu” toggle.

Du kan nu ändra hur ikonen ser ut genom att välja en av templates för ikoner och välja om du vill visa antalet produkter och totalt antal i cart som en del av ikonen. Den här informationen kan hjälpa besökarna att hålla track på sina cart.

Du kan också ändra storleken på icons och text. När du gör ändringar uppdateras den lilla previewen automatiskt så att du kan prova olika inställningar för att se vad som ser bäst ut.

När du är nöjd med hur ikonen för den glidande sidovagnen ser ut, clickar du på knappen ”Save”.

Du kan nu add the icon to any page, post, or widget-ready area using the code next to ’Embed Shortcode’.

För mer information om hur du placerar shortcode, vänligen se vår guide om hur du lägger till en shortcode i WordPress.

Ett annat alternativ är att add to iconen till navigation menu på din site. På så sätt finns slides side cart alltid inom räckhåll, utan att distrahera från sidans huvudsakliga content.

För att göra detta öppnar du dropdown ”Add to Menu” och väljer den menu du vill använda.

Därefter klickar du på knappen ”Save”.

Om du nu besöker din WordPress website kommer du att se ikonen cart i navigation menu.

Add to dina egna färger och ditt varumärke

You may want to change the slides side cart’s colors to better matcha your WooCommerce theme or branding. För att ändra textfärg, knappfärg, linkfärg och mer, gå vidare och klicka på ”Styling”.

För att ändra någon av standardfärgerna är det bara att ge den ett click. Då öppnas en popup där du kan prova olika färger.

I följande image customize vi till exempel gränsen.

Ett annat alternativ är att skriva in en hex-kod i fältet ”Hex”. Detta är perfekt om du redan har en specifik nyans i åtanke.

Om du inte vet vilken hex-kod du ska använda, kan det hjälpa att använda en site som gillar HTML Color Codes. Här kan du utforska olika färger och sedan få en kod som du helt enkelt kan klistra in i FunnelKit plugin.

Om du fortfarande är osäker på vilka färger du ska använda kan du läsa vår guide om hur du väljer ett perfekt färgschema för din site i WordPress.

Hur man skapar en responsive Slides Side Cart

Enligt vår internet usage report använder över 90% av den globala internetpopulationen en mobil device för att gå online. Med det i åtanke är det viktigt att du vill se till att din slides side cart ser lika bra ut på smartphones och surfplattor som den gör på stationära datorer.

Här kan det hjälpa att ändra bredden på cart så att den inte helt fyller den lilla vyn på en mobil device. För att göra detta, click on ”Styling” and then look at the ”Cart Preview Mobile Width.

Du kanske vill prova att skriva in olika värden i det här fältet. Om du ändrar standardinställningarna är det en bra idé att kontrollera mobilversionen av din WordPress site från skrivbordet för att se till att du är nöjd med resultatet.

Medan du är på den här vyn kan du också ändra bredden på den slides sidovagnen på skrivbordet. För att göra detta ändrar du bara siffran i fältet ”Cart Preview Desktop Width”.

Hur man publicerar din Slides Side Cart

När du är nöjd med hur den slides sidokartan är inställd är det dags att göra den Live. Klicka helt enkelt på slidern ”Enable Cart” så att den blir blå.

Om du nu besöker din online store, kommer du att se den slides cart live.

Om du vill ta bort den glidande sidokorgen vid någon tidpunkt, gå bara tillbaka till FunnelKit ” Cart i WordPress dashpanelen. Klicka sedan på för att inaktivera slidern ”Aktivera Cart”.

Metod 2. Add till en avancerad glidande sidokorg (med upsells, cross-sells och belöningar)

Om du vill öka det genomsnittliga ordervärdet i din store, kan du uppgradera till FunnelKit Cart Pro. Detta avancerade plugin för sliding side cart add to kraftfulla upsell, cross-sell, och belöningsfunktioner till FunnelKit sliding side cart.

Med detta plugin kan du rekommendera relaterade produkter varje gång en kund lägger till ett objekt i sin cart.

Du kan också skapa unika belöningar, till exempel coupons och gratis gåvor, och sedan främja dem i slides cart.

FunnelKit kan även tracka hur mycket mer kunden behöver spendera för att kunna unlocka nästa belöning.

För att add to dessa kraftfulla funktioner måste du uppgradera till FunnelKit Funnel Builder Pro. Var bara medveten om att du behöver Plus eller högre plan.

När du har köpt en plan loggar du in på ditt FunnelKit account. Här hittar du pluginet FunnelKit Funnel Builder Pro, plus FunnelKit Funnel Builder och FunnelKit Cart. Du måste installera alla tre tilläggen för att låsa upp de avancerade funktionerna för slides cart.

Först måste du installera och aktivera de tre tilläggen. Om du behöver hjälp kan du vänligen läsa vår guide om hur du installerar ett tillägg till WordPress.

Efter aktivering, gå till FunnelKit ” Settings och add your license key till fältet ’FunnelKit Funnel Builder Pro’.

Du hittar den här informationen genom att logga in på ditt konto på FunnelKit-webbplatsen. När det är gjort klickar du på ”Activate”.

Efter det går du bara till FunnelKit ” Cart.

Du kan nu konfigurera och customize sidovagnen genom att följa samma process som beskrivs i metod 1. När du är nöjd med hur den glidande sidokorgen är konfigurerad är du redo att add to upsells, cross-sells och rewards.

Få mer försäljning genom att upsella och cross-sälja WooCommerce-produkter

När en kund öppnar den glidande sidokorgen kan du visa dem unika kampanjer för upsell och cross-sell baserat på objekten i deras shopping cart.

Upselling är när du uppmuntrar kunder att köpa en produkt med högre price istället för den de redan har i sin shopping cart.

Föreställ dig till exempel att en customer lägger en vattentät jacka i sin cart. You kanske föreslår en jacka av högre kvalitet som är mer hållbar, mångsidig och finns i olika färger.

Cross-selling är när du främjar en produkt som är relaterad till något som kunden redan köper. Om de till exempel addar ett gratulationskort till sin cart kan du uppmuntra dem att köpa choklad eller blommor också.

WooCommerce har en utvald funktion för länkade produkter som allow you att skapa upsells och cross-sells. För mer information, vänligen se vår guide om hur man upseller produkter i WooCommerce.

Men du kan också skapa upsells och cross-sells direkt från FunnelKit dashboard. Detta är det snabbaste alternativet, så det är det vi kommer att använda i den här guiden.

För att börja, klicka på alternativet ”Upsells” och välj sedan ”Enable Cart Upsells.

Därefter rullar du till sektionen ”Upsells and Cross-Sells”.

Here, you’ll see all the products on your online store.

Klicka bara på det objekt där du vill add to en eller flera linkade produkter.

Klicka sedan på antingen ”Add Upsell” eller ”Add Cross Sell” beroende på vilken typ av främjande du vill skapa.

I popupen börjar du skriva in den produkt som du vill använda som upsell eller cross-sell. När rätt produkt dyker upp ger du den ett click.

För att erbjuda flera produkter följer du bara samma process som beskrivs ovan.

När du har gjort det klickar du bara på knappen ”Add”.

Nu kan du skapa unika cross-sell- och upsell-kampanjer för varje produkt i din store genom att helt enkelt följa samma process som beskrivs ovan.

Nu är du redo att customize hur upsell- och cross-sell-kampanjerna kommer att se ut på din glidande sidovagn.

Till att börja med kan du prova att växla mellan olika stilar genom att clicka på radioknapparna bredvid ”Display”.

Live preview uppdateras automatiskt, så att du kan prova olika stilar för att se vilken du gillar bäst.

Som standard kommer FunnelKit att visa både upsells och cross-sells i den slides sidokorgen. Om du föredrar det kan du visa endast upsells eller endast cross-sells med hjälp av knapparna i ”Product Recommendation Type”.

Därefter kan du ändra den heading som FunnelKit visar ovanför upsell- eller cross-sell-kampanjen genom att skriva in den i fältet ”Heading”.

Tänk bara på att FunnelKit kommer att använda samma heading för båda typerna av främjande.

Därefter kan du ställa in det maximala antalet föreslagna produkter som FunnelKit kommer att visa genom att skriva in i fältet ”Visa maximalt antal upsells”.

När det är möjligt är det en bra idé att skapa unika kampanjer för upsell och cross-sell för varje produkt. Men om din online store har många objekt kanske detta inte är möjligt.

Med detta i åtanke kan du ställa in en standard upsell-produkt som FunnelKit kommer att främja när inga länkade produkter är tillgängliga. För att göra detta, skriv bara namnet på en produkt i fältet ”Standard Upsells”. När rätt produkt dyker upp, ge den ett klick.

När du är nöjd med de upsell- och cross-sell-kampanjer du har skapat, glöm inte att klicka på ”Save” för att lagra dina ändringar.

Erbjud fri frakt, rabatter och gratis gåvor

Du kan ofta öka det genomsnittliga ordervärdet genom att ge kunderna en anledning att spendera mer. Med detta i åtanke tillåter FunnelKit dig att skapa olika belöningar och sedan främja dem som unlockbara bonusar i den slides sidokartan.

Du kan till exempel erbjuda gratis frakt om kunden överskrider en minimikostnad. FunnelKit kommer även att visa kunderna hur mycket mer de behöver spendera för att unlocka sitt pris.

Detta är ett enkelt sätt att få mer försäljning och bygga kundlojalitet med gamification.

FunnelKit allow you to offer three different rewards: free shipping, a discount, and a free gift.

För att kunna erbjuda gratis frakt måste du redan ha ställt in frakt i din WooCommerce store. För Step-by-Step instruktioner, vänligen se vår WooCommerce made simple guide.

Under tiden tillämpar ”rabatt”-belöningen automatiskt en coupon när kunden når minimiutgiften. Om du vill erbjuda denna belöning måste du skapa en kupong med procentuell rabatt med hjälp av antingen den inbyggda WooCommerce kupongfunktionen eller ett WordPress plugin för kuponger.

För Step-by-Step instruktioner, vänligen se vår guide om hur man skapar smarta coupons.

Efter det är du redo att skapa en belöning genom att välja ”Rewards” i FunnelKit-inställningarna och sedan klicka på ”Create Reward”.

Du kan nu öppna ”Type” dropdown och välja vilken typ av belöning du vill skapa.

Oavsett om du väljer gratis present, gratis frakt eller rabatt kan du ändra den text som FunnelKit visar för customers genom att skriva i fältet ”Message”.

Om du gör några ändringar, var noga med att inte edit {{remaining_amount}} eftersom detta gör det möjligt för FunnelKit att visa hur mycket mer kunden behöver spendera.

Om du erbjuder en rabatt, se till att du ändrar meddelandet så att det visar hur mycket kunden kommer att saved.

När du har gjort det skriver du in ett nummer i fältet ”Amount to Get Reward”. Detta är hur mycket shoppare måste spendera för att unlocka belöningen.

Om du erbjuder en procentuell rabatt måste du ange vilken coupon FunnelKit ska tillämpa automatiskt.

I fältet ”Coupon” börjar du skriva in den coupon som du vill använda. När rätt kod dyker upp, ge den ett click.

Nu kommer FunnelKit automatiskt att tillämpa coupon när någon uppfyller minimikostnaden.

Erbjuder du en gratis gåva istället? Börja då med att skriva in namnet på gåvan i fältet ”Produkt”.

När rätt produkt dyker upp ger du den ett click.

Nu kommer FunnelKit att lägga till det här objektet i kundens shopping cart så snart de uppfyller minimikostnaden.

För att add to fler belöningar klickar du bara på ”Create Another Reward”.

Du kan nu konfigurera rabatten, gratisgåvan eller belöningen för gratis frakt genom att följa samma process som beskrivs ovan.

Som standard kommer FunnelKit att visa följande message när en customer kvalificerar sig för all awards: ”Grattis! You have unlocked all the rewards.

Om du vill visa ett annat message istället skriver du bara in det i fältet ”When All Rewards Unlocked”. Du kan till och med erbjuda kunden en speciell bonus för att låsa upp alla dina belöningar, till exempel en exklusiv coupon-kod att använda vid nästa köp.

När du är nöjd med hur dina belöningar har ställts in klickar du på knappen ”Save”.

Hur man publicerar din Slides Side Cart

När du är redo att aktivera den glidande sidokorgen, klicka bara på ”Aktivera Cart” toggle.

Om du vill ta bort den glidande sidokorgen vid någon tidpunkt, gå bara tillbaka till FunnelKit ” Cart i WordPress dashpanelen. Klicka sedan på för att inaktivera toggeln ”Aktivera Cart”.

Vi hoppas att den här artikeln hjälpte dig att add to en slides side cart i WooCommerce. Du kanske också vill kontrollera vår guide om hur man skapar en WooCommerce popup för att öka försäljningen och de bästa WooCommerce tillägg 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.