Side shopping cart tutorial with WordPress: Have you ever seen side panels sliding in when you add products to your cart on an ecommerce website?
Well, whether you want to enhance your own website, or your clients websites, that’s precisely what I’m going to teach you today. So how do we that? Let’s find out!
Subscribe to my YouTube Channel
DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).
hello, I’m your host Kaycinho, I’m a digital alchemist, and today I’m going to teach you how to create an off canvas panel for your online store.
I’m going to show you that how to do that with free tools, no matter which theme your are using, and will also talk about premium alternatives if you want more features.
So, with that out of the way, let’s dive in! I strongly encourage you to watch the video, but in case you need a quick written memo, here it is.
Side Shopping Cart Tutorial: Install Woo Commerce
- In WordPress Admin > Plugins, search for WooCommerce, install and activate.
- Next, setup Woocommerce by following the instructions on screen
Side Shopping Cart Tutorial: Create Products
- In WordPress Admin > Products, create your products
- Make sure you add a featured image
Side Shopping Cart Tutorial: Install Woo Commerce Sidecart from Xootix
- In WordPress Admin > Plugins, search for Woocommerce Cart, install & activate
- Alternatively, get the premium version of this plugin by clicking here (and in case you want to compare the free and premium versions, click here)
- Next: setup Woocommerce Side cart : depending on the version you installed (free or premium) you will get more or less options
Side Shopping Cart Tutorial: styling
Side Shopping Cart Tutorial: positioning the basket icon
By default, the cart icon appears at the bottom right corner of the browser window. There is a lot of competition for that spot, so personally I prefer having it in the top right corner.- To achieve that, in WordPress Admin > Woocommerce Sidecart change the basket position to top
Side Shopping Cart Tutorial: styling the basket icon
By default, the basket icon comes with a rounded square shape and some box shadow, and personally, I don’t like that style. I prefer a rounded style with no box shadow. If you want to achieve that you need to add the CSS code below to your website.Side Shopping Cart Tutorial: Custom CSS
How to add custom CSS with any WordPress theme
Depending on the WordPress Theme you are using, there may or may not be a place where you can add custom CSS. So if there is no option for you to add custom css :- In WordPress Admin > Woocommerce Sidecart > Advanced Tab, copy and paste the css code below and save the changes
Now if you use Astra Pro,
- In WordPress Admin > Appearance > Customize > Additional Css: paste the css code below and save the changes
The full CSS Code:
/* Styling the basket icon */ .xoo-wsc-basket { background-color: #f5f5f5; border-radius: 50px; box-shadow: none; } /* Making the basket background round */ .xoo-wsc-bki { margin: 0 3px; } /* Media queries for smartphones */ @media only screen and (max-width: 768px) { /* moving the bakset icon left */ .xoo-wsc-basket { right: 70px; } } /* Media queries for desktop */ @media only screen and (min-width: 1025px) { /* changing the width of the side panel */ .xoo-wsc-container { right: -500px; width: 500px; } }
Side Shopping Cart Tutorial: Your turn!
So, I hope that you enjoyed this tutorial and that you now feel confident to create your off canvas woocommerce side cart. Question of the day: are you using an alternative to achieve the same results? If that’s the case, please let me know in the comments of this episode! If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the channel and if you know someone that could benefit from it, I’m going to ask you if you’d like to share it now? Because let’s face it, there are so many things to do in a day that if you don’t do it now you’ll probably forget. If you want to brand, market and grow your business it in the Digital Age make sure you subscribe to my email newsletter so that you never miss your share of digital alchemy and tips, tools, services and case studies that can help you grow your business online. So, that’s it for this episode, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!/* Styling the basket icon */ .xoo-wsc-basket { background-color: #f5f5f5; border-radius: 50px; box-shadow: none; } /* Making the basket background round */ .xoo-wsc-bki { margin: 0 3px; } /* Media queries for smartphones */ @media only screen and (max-width: 768px) { /* moving the bakset icon left */ .xoo-wsc-basket { right: 70px; } } /* Media queries for desktop */ @media only screen and (min-width: 1025px) { /* changing the width of the side panel */ .xoo-wsc-container { right: -500px; width: 500px; } }
Awesome Video KayCinho! it was exactly what I was looking for, and very helpfull!!
Great. It makes me super glad when I can help that way 🙂