Do you want to add a sliding side cart in WooCommerce?
This allows shoppers to see their shopping cart from any page on your online store. Customers can then add items to their basket, remove products, and add coupons without ever having to visit a separate cart page.
In this video, we will show you how you can easily add a sliding cart in WooCommerce.
0:00 Intro
0:40 Download and install FunnelKit Cart
2:37 Cart settings
8:58 Cart style
14:15 Cart Menu settings
Related Links
►Don’t forget to read and subscribe! https://www.wpbeginner.com/wp-tutorials/how-to-add-a-sliding-side-cart-in-woocommerce/
►FunnelKit https://www.wpbeginner.com/refer/funnelkit/
Top Resources
⚡Use Promo Code WPBVIP⚡
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/
Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
As an e-commerce website owner the Easiest way to improve sales on your Online store is by improving the Customer experience on your online store And one of the most common problems I See with a lot of woocommerce store is The card experience the default card Experience inside woocommerce is well Not ideal because Your card element to a menu or some Other pages but when customers actually Go to the cart page it's not interactive It feels boring and honestly it doesn't Feel modern for today's day and age but What if you could change all of that What if you could replace the boring Card in woocommerce with something Modern like this a slide out card on Your woocomma store it's pretty exciting Right let me show you how to do that for Free in this video to add this modern Experience on your WordPress website We'll be using a plugin the plugin I'm Talking about is called card for Woocommerce by funnel kit funnel kit Offers an exciting suit of products for Woocommerce and WordPress they offer a Funnel building solution a complete CRM Email automation platform a complete Automation platform a WordPress and Woocommerce and tons of exciting Products that will be useful even if You're running just a woocommerce store Or WordPress store or combination of
Both so I'll recommend that you check Out funnel kit from the link in the Description make sure to check it out And they have a free version or all the Products have free versions and this Plugin is also free so this is called Cart forward Commerce by funnel kit and This offers the sliding card solution That I was just talking about in the Beginning of this video so let's install This product on our website and we'll Figure out how to configure it so that We can actually brand it and whatever Options we have to customize all right So first I'll go in the admin section of My website and I'm inside the admin Section inside the add new plugin Section so I'm inside plugins Add new and here I'll just search for The plugin I already have the name of The plugin which is cart for woocommerce By funnel kit copy it on my clipboard I'll just type it in And wait for it for search to complete And the plugin to be noticed here and This is the plugin that I was talking About this will have been installed and As I was mentioning uh funnel kit has Some other free plugins as well for Example abandoned card recovery for Woocommerce funnel Builder and you can Install these as well once you figure Out if they are actually useful for your Business or your website I recommend
Highly recommend funnel kit make sure to Install and check out all the plugins For this video we'll be sticking with Cartwoocommerce this is what we'll Install let's install the plugin wait For it to install we'll activate and I'll show you how to configure it so the Plugin has now been installed on our Website and woocommerce was already Installed on my website if you already Have a woocommerce site running then you Don't need to do anything else just Install the plugin if you're testing This plugin out on a demo website you Will need to install woocommerce and Import or add a few different products So you can follow along this tutorial And you'll also notice that on the side Menu you have funnel kit appearing this Is where we'll configure uh the Different options for this fly out card Inside the cart options alternatively You can also just click these settings And you'll reach the settings for this Particular section and and this is where All the magic happens this is where you Configure how the funnel kit card will Appear what content appears on it how it Appears and everything I'll just talk About every single option there are lots Of different options and that's a good Thing because then you can confine tune How it actually appears on the side so Let's start with the basic on the right
Hand side you'll see a live preview on Whatever settings you change which is Great right because you can visualize What changes you're making and how the Flat count will look on your website the First setting I recommend that if you're Working on a live website make sure that The cart is disabled which means that it Will just imagine that plugin is not Active on your site and why I'm Recommending this is because once you Configure all the settings uh to your Liking only then I would recommend that You enable the card so all these Settings where I'm going to talk about You figure settings out you check all These settings out and configure it or Based on your brand and your website and Then you enable the card all right That's what I would recommend so right Now I also have kept it disabled so Let's talk about different settings yeah You see a lot of different settings I'm Going to talk about each of them very Quickly so inside the card options you Have multiple options let me tell you What these settings are so first option Is icon visibility now what is the icon You don't see an icon here well how it Works on woocommerce website is that a Floating icon will be added to your Pages either on the left side on the Right side that's one setting you can Configure and based on that when the
User actually clicks on it or if they Add a product to the card the sliding Card can appear or disappear so that's The setting here the icon visibility you Can configure whether it appears on the Entire website that means all the pages Just on woocommerce pages or none of the Pages now you can understand maybe Woocommerce Pages why it makes sense but What about none well in that case you Will be able to manually configure where This floating uh icon appears so if you Have a special case scenario where you Have just a couple of pages where you Would want to have this you can do this Otherwise woocommerce page is fine if You have a lot of content and a couple Of product pages or few product pages But if you have let's say a very Negligible content on your site and only Product pages you can also keep it to Entire website Then the icon position you can keep it On the bottom left or the bottom right Wherever you prefer I prefer bottom Right it makes more sense for me then You can also change the card heading Which is this you can actually change This to your cart contains and you can Instantly see the live preview you can Change it to whatever you like then hide Cart icon if there are no products Inside the cart do you still want the Icon to appear this is a setting that
Configures this so right now it's Enabled which means if there are no Products inside the car the icon will be Hidden I'll just disable this because When I'm demoing it uh you won't see This if I have no products inside the Car so I just disable this now then Auto Open slide cart if you go here you can Also refer to the tool tips to Understand what these individual Settings are if you follow along or if You forget what it is so once the Product is added to the card do you want This sliding cut to automatically appear Or do you want the users to manually Actually click the button and open the Sliding card I recommend you should keep This enabled one because a lot of users Might not realize that they can click The icon and see their card so this this Is great when the users add anything to The cart the sliding card appear and They can go back and continue shopping Experience based on the settings we'll Configure then you can also have coupon Box field enabled so if you recommend Coupon you promote coupons you can Enable this which will just add a coupon Fill here where users can add coupons And let's say use any coupons they have Then you also have some additional Options which open up so you can have The display minimized or expanded as a Default so if it's minimized users will
Have to click here and if it's expanded This will be the default setting if you Keep it minimized it'll just be Minimized then coupon box heading so I'll just make an expanded for now got a Discount code this is where you Configure this discount box placement X Is what you configure here discount Button text you actually configure here So the idea is everything you are seeing On the slider card is actually Customizable completely so if you have a Quirky brand which has a special Specific kind of copy that you write you Can actually change everything on the Slide out card then also in the card Summary you have some additional options Show subtotal that means you want to see Subtotal or not display savings you want To see savings or not for saving text if I disable this you instantly see how to Fix the or affects the slide out card I Recommend that you keep this enabled Most people would like to see what the Total is and whatever savings they are Generating uh on their purchases On the saving text you can customize This again you saved whatever you want To want to configure you can also have The shipping text appears right you see This here shipping and taxes calculated At checkout you can actually configure This uh free shipping or something like That you want to say hey free shipping
About x amount of money or something Like that you can customize this here as Well then on the checkout section enable The button icon enable card price enable Continue shopping link so all of these Are easy to understand or easy to Understand what they do so this button Icon actually disables this icon here if I disable this there's no button if I Enable this there's a button here cart Price if I did disable this the card Just says check out but if you do this The card actually has the price showing Up and enable continue shopping link This is the link if you disable it There's no link if you add link the link Exists so what these let you do is fine Tune what is displayed house displayed Which is great and what the continue Shopping text does this is also you can Choose for example let's say you just Have two products on your site and when Customers click uh continue shopping you Want them to reach the shop page again So in that case you can say redirect to Shop but let's say you have a lot of Different products and customers are Adding products to the card you won't Want people to actually go to the shop Page you would want them to stay exactly Where they are so in that case you can Just say close site card so when users Click continue shopping the slide card Just goes away instead of them being uh
Redirected to something or some other Page right on the empty card if the card Is empty what does the title say Description button text link Behavior Again these are self-explanatory if There's no products to the cart what Does the cart say what the description Would be what the button would be and Again what the link Behavior would be so In this case let's say the card is empty You can actually redirect in the shop so That you encourage them to add some Products to the car the simple idea that I'm trying to show you here is that it's Completely customizable it's not a like A certain forget it you can actually Fine tune which makes this plugin really Powerful and I say standing out from the Other plugins that actually offers Similar functionality and this is just One section that we've just checked out There are few different sections that we Can check out again so in inside the Styling options let's go to styling Options this is where we customize the Say how the cart appears right now we Just change the content but now we can Change the styling options so these are Important to understand for I'd say a Variety of reasons but the customer Experience uh so make sure to pay Attention on this section so first Option card preview desktop width what Is the width of this slide out card on a
Desktop the default is 420 pixels and I Recommend you keep it that way the card Preview on mobile within percentage so If the default is set to 100 which means That once the users actually click the Button the hundred percent of the screen Will be covered by the slide out card if You want to change their behavior to Let's say 80 so users don't get Overwhelmed they don't understand what's Going on 80 means 20 of the screen will Still be visible so they'll still be Able to understand that it's just a Slide out cut and they won't feel that They've been redirected to some other Page since they added something to the Card so I'd say experiment with this and See what feels great for your stores Experience when I say 100 is only for I'd say a certain set of websites I Recommend something around 80 then you Have all sorts of styling capabilities You can change the background color the Button color text color all the colors You see can be completely customized for Example let's say my store has a lilac Theme so if I just go here and I'll just Try to guess the color lilac how it Looks maybe something like this And I can instantly change the Background color I can change the button Colors to something let's say a little More darker something like this And button text color so I can change
The color of the text you get the idea Everything you see here primary text Color everything can be customized and You can even change uh what saturation The level is for example if I pick a Nice U but I want to not be as saturated I can actually change it to 50 and you Can also have this do or this setup so What you see here is not only are you Able to fine tune the behavior of the Sliding cut also you can change the Content how it appears when it appears Everything but also the complete styling Of everything about the sliding card Which makes it a really really powerful Plugin and this is all for free right Fantastic so what I'm going to do right Now is just reset all these settings Which is great right if you mess up you Can always reset and you can reset it to The default values which makes it easy For her for falling along the tutorial Right but the idea is you can customize Everything you can also change the Border color and animation speed so how Quickly do you want the sliding card to Appear and disappear you can experiment With different values the default is 400 Milliseconds let's say you can make it Faster around 100 milliseconds is also Fine you check it out and you figure out What works then you also change the Border radius and just notice what Happens when I set it to something
Around 50 the button actually changes so If you want to just make it a rounded Button you can change the Border here And you can also have a fallback font Family so let's say you have a you're Using a page builder and for some reason The font uh is not loading on the cart Then you have a fallback font that you Can add here it's become kind of a pro Thing that you can do more in most cases You don't need to worry then you can Also change the style of the icon so This is the slide out card but as I Mentioned uh before the slider card what Users will see is something like this on The screen and you can customize how This icon also appears so the icon color Is currently set to Black let me just Give you a demonstration by changing it To something else bright red color you Can also change the background color as I mentioned you can change it something Like this And you can also change the count color So what is the uh typography here what Is the background color of this you can All change everything here then you also Have some different font options or not So font options icon options here so you Click here and you'll see different icon Options so whatever icon you think suits Best for your store you can use that you Can also change the size of the icon and Also the Border radius so if I just make
This 100 it's going to be a square icon Oops no sorry not 100 zero it's going to Be a square icon but if I change it to 50 it can be a rounded icon and the live Preview just helps you understand what's Going on so again if you don't like any Of the changes you've made you can Always reset it to the default values Which is great in my opinion and if You're a pro developer or if you have Any kind of design experience what you Can also do is add custom csscf so if You think hey this is the setting I Would like to customize where is the Setting you can use custom CSS to Customize anything about this so all These options are available in the free Version of plugin you also have the cart Menu let's explore the cart menu I'll Explain what it is but let me just check For a second if I have made the Necessary changes on the website to Demonstrate that so I'll take a pause For a second on this video be back in a Second and demonstrate what the card Menu and how it works so I made the Changes on my website and now I can Demonstrate the cart menu too let's go To the cart menu settings and talk about What the cart menu is as I mentioned the Sliding count how it appears on your Website is by through a button a fly out Button which users can click and the Slide off menu appears but you have the
Ability to not use that altogether if You go to the cart options you have the Icon visibility which you can set to None but in that case what is the use of The plugin how does the flyout card Appear well the cart menu allows you to Add the same functionality to your menu So instead of having the regular default Cart on your menu you can have this Plugin add the card to your website on Your menu and once users actually go to That card option the slide out card will Appear so this is the behavior you can Customize as well so if you want to use That first you'll have to use enable the Cart menu and then you'll have all these Options available again this will be Added to your menu the primary menu or You will be able to select the menu I'll Demonstrate how but you can customize The icon again so from all these options You can select how it's going to look Like let's say we choose this option Which looks great you can have the Product count enabled or disabled you Can see it right here show card total Enable or disable the icon size and text Size and pixel you can customize how big Or small it is depending on your site And then you also have two different Options to configure the first one is a Short code so let's say you have a Widget area on your site you want to Display it on a particular page then you
Could use this shortcut and a shortcode And manually add the shortcode to the Location where you want this cart or the Button to appear the second option is You can add to the menu by default so Here if you have already have a menu on Your site you can click this and you'll Be able to select the menu you want to Add it to so for now the basic idea Would be to add it to the main Navigation menu once you do that may pay Attention that this will be added after All the elements so no matter what your Menu is like this will be added to the As the last element on the menu and once That is done what we can do is just save And then now our cart is done now if you Might be wondering about upsells and Rewards well that's part of the pro Version of this plugin but let me tell You about what upsells and rewards will Be on the upsell section what you will Be able to add is certain upsells which Will just appear on the slide out menu So you'll be able to add products Manually which are best sellers on your Website so you'll be able to showcase The best sellers on your store as part Of your flyout menu so more users will Actually buy it thereby increasing your Ticket size it's a fantastic upgrade uh I don't have the free version or I don't Have the pro version but you can Definitely check it out from the link
Right here and you also have the rewards Option and what rewards let's let you do Is give away something like your rewards For example you might have a free Shipping offer on your website hey Purchase something above 99 and get free Shipping these kind of messages is what You can add to the rewards section so When customers are purchasing something If the cart value is not 99 you can say Hey purchase some additional products to Get free shipping and with that you can Encourage users to again purchase more Products and have higher profits or Higher sales on your website so these Two features upsells and revers are part Of the pro version but I just Demonstrated that here but Russell Features the card option The Styling Options and the cart menu are all Available in the free version and now Since we've configured everything let's Enable the cart and also save so now the Product is live or the feature is live Let's check it out on a website how it Appears so I'll click preview on page Which will just open up my website and Here I have products already added to The cart I can just click it and the Slide out menu appears and also this Button is also here which I can click And the flyout menu appears fantastic Looking and I can do everything on my Site I can just add the quantity I can
See subtotal I can continue shopping Which will just close the menu Everything that we promised I showed you Is available live here fantastic product Fantastic fantastic features make sure To check it out funnel kit the card Plugin and all the different plugins by Funnel kit I'll leave links down in the Description and if you watch the Entirety of this video and you still Haven't created an online store then This is the video you should check out How to create an online store and if you Already have woocommerce store learn how To create notifications for sale events Happening on your website by watching This video right here you're watching Iraq's from wbeginner I'll catch you in The next one take care
