Side Shopping Cart Tutorial With WordPress

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!