Side Shopping Cart Tutorial With WordPress

Side Shopping Cart Tutorial With WordPress

Side Shopping Cart Tutorial With WordPress

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!

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

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

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

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

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

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;
}
}

Share this post

  • Daniel says:

    Awesome Video KayCinho! it was exactly what I was looking for, and very helpfull!!

  • >
    Privacy Settings saved!
    Privacy Settings

    When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. Control your personal Cookie Services here.

    Cookies essentials to the navigation on this website.

    Cookies used to remember your choices regarding privacy.

    Decline all Services
    Accept all Services

    Join me on YouTube

    subscribe & get exclusive tips to be your own boss

    Brand, market

    & grow online

    ​By subscribing you accept to receive my newsletter and occasional marketing offers. Unsubscribe anytime.

    close
    Scroll to Top

    My Account

    Featured

    Check out the shop!

    Subscribe to my newsletter