How to Easily Add a Sliding Side Cart in WooCommerce

One of the biggest challenges we see WooCommerce store owners face is cart abandonment.

Customers browse your products, add items to their cart, and then disappear when they’re redirected to the cart page. It happens more often than you’d think.

A simple way to improve this experience is by adding a sliding side cart.

This keeps customers on the same page while letting them review their cart in a small panel that slides out. It’s quicker, less disruptive, and makes the buying process smoother.

We’ve seen many store owners use it to improve their checkout flow and encourage more sales.

In this guide, we’ll show you how to add a sliding side cart to your WooCommerce store using easy methods that don’t require technical skills.

Why Add a Sliding Side Cart in WooCommerce?

Adding a sliding side cart is one of the best ways to reduce cart abandonment and improve the customer experience on your WooCommerce store.

By allowing shoppers to view their cart without being redirected to a separate page, you remove friction from the buying process and make it easier for them to complete their purchase.

A sliding side cart is a panel that appears, usually from the right side of the screen, when a customer adds an item to their basket. They can also open it at any time by clicking the cart icon.

From this panel, shoppers can often add or remove items, apply coupon codes, and see their subtotal update in real-time.

This keeps them on the product or shop page, encouraging them to continue shopping or proceed directly to checkout.

With that in mind, let’s look at how you can add a sliding side cart in WooCommerce. Use the quick links below to jump straight to the method you want to use.

• Method 1. How to Add a Sliding Side Cart in WooCommerce Using a Free Plugin
• Method 2. Add an Advanced Sliding Side Cart (With Upsells, Cross-Sells, and Rewards)
• Video Tutorial
• Frequently Asked Questions About Adding a Sliding Cart in WooCommerce

Let’s get started!

Method 1. How to Add a Sliding Side Cart in WooCommerce Using a Free Plugin

The quickest and easiest way to create a sliding side cart is by using Sliding WooCommerce Cart By FunnelKit. This free plugin allows you to add a cart icon to your online store.

Shoppers can click the button to open the sliding side cart.

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

There are a ton of options, so you can create a cart that perfectly fits any WordPress theme.

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

Step 1: Install and Activate the FunnelKit Plugin

First, you’ll need to install and activate the Sliding WooCommerce Cart By FunnelKit plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Step 2: Configure Basic Cart Settings

Upon activation, go to FunnelKit » Cart. You’ll see a preview of the sliding slide cart towards the right of the screen.

You can now customize the cart to better suit your needs.

To start, you can decide whether to show the cart icon across your entire website or only on WooCommerce pages.

If you select ‘Entire Website,’ then shoppers can open the sliding cart from any page, so this is a good choice for online marketplaces and stores.

However, your site may have lots of non-eCommerce content. For example, you might run a popular WordPress blog but use WooCommerce to sell merchandise to your fans.

Showing a cart button on every single blog post may become annoying. In that case, you can check the ‘WooCommerce Pages’ radio button.

Another option is ‘None,’ which hides the cart icon completely.

If you select the ‘None’ option, then you can add the icon to any page, post, or widget-ready area using a shortcode. You can also add the icon to your navigation menu.

We’ll show you how to do this later in the post, but you can select ‘None’ if you plan to add the cart icon manually.

After making this decision, select ‘Bottom Left’ or ‘Bottom Right’ depending on where you want to show the cart button. Here, it may help to check how the button will look on your online store by selecting ‘Preview on Page.’

By default, the plugin shows ‘Review Your Cart’ at the top of the sliding side cart.

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

If you don’t want to show a heading, then simply leave the field empty.

By default, FunnelKit shows the cart icon before the shopper adds items to their basket.

If you prefer, then you can hide the icon until the visitor starts adding items. Simply click on the ‘Hide Cart Icon’ toggle so that it turns blue.

This is all you need to create a basic sliding side cart, but there are settings that can get you even more sales. With that in mind, let’s take a look at FunnelKit’s more advanced features.

Step 3: Enable Coupons in the Sliding Cart

Coupons are a great way to get more sales and build customer loyalty.

The sliding cart allows shoppers to type in coupon codes directly. This feature works with the standard coupons you can create in WooCommerce. It’s also compatible with plugins like Advanced Coupons if you want to create more complex deals.

When the customer clicks ‘Apply,’ the sliding cart will show how much they’ve saved.

By showing customers the discount straight away, you can reduce cart abandonment rates and encourage them to add more items to their basket.

You can create these codes using the built-in WooCommerce coupon feature or a coupon code plugin.

To add the coupon field, you’ll click on the ‘Enable Coupon Box’ toggle, which turns it from grey (disabled) to blue (enabled).

After that, you can switch between ‘Minimized’ and ‘Expanded’ layouts.

Simply check the right box next to ‘Display.’

Minimized takes up less space, so it’s less distracting, but shoppers will need to expand the coupon section before they can type in any codes.

In the following image, you can see the minimized layout:

After choosing a layout, you can change the text that FunnelKit uses for the coupon box heading, discount placeholder text, and button text.

Step 4: Customize the Cart Summary

The cart summary shows customers how much their purchase will cost. This helps reduce cart abandonment rates since there are no nasty surprises at checkout.

For that reason, we recommend enabling the ‘Show Subtotal’ toggle.

However, if you want to simplify the side cart, then you can click to disable the ‘Show Subtotal’ toggle.

You can also show any savings the customer has qualified for, including discounts from any coupons they’ve applied.

In this way, you can use FOMO to increase conversions, especially if the savings are time-sensitive.

For example, you might schedule coupons in WooCommerce so the customer can only use them for a limited time.

If you prefer to remove this information from the sliding side cart, then you can disable the ‘Display Savings’ toggle.

You can also replace the ‘Saving Text’ and ‘Shipping Text’ with your own custom messaging.

Step 5: Customize the Cart’s Call To Action

The sliding side cart has a default checkout button, but you can customize this call-to-action button to get more conversions. To start, you can add a checkout icon using the ‘Enable Button Icon’ toggle.

This can be particularly useful if you’re creating a multilingual WordPress site.

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

This will help shoppers track the cost of the cart, especially if you’ve removed the subtotal from the cart summary section.

By default, FunnelKit adds a ‘Continue Shopping’ link at the bottom of the sliding side cart. You can replace this text with your own messaging by typing into the ‘Continue Shopping Text’ field.

After that, choose whether this link will simply close the side cart panel or redirect the shopper to your WooCommerce store page.

Most shoppers will expect to exit the sliding cart, so we recommend selecting the ‘Close Side Cart’ button.

If you select ‘Redirect to Shop,’ then you may want to change the ‘Continue Shopping Text’ text so it’s clear what will happen when customers click the link.

Step 6: Create a Custom Empty Cart Screen

It is possible to hide the cart button until the shopper adds at least one item to their basket, following the process described above. However, if you don’t hide the button, then customers may sometimes see an empty cart screen.

You can change the title, description, and button text using the settings in the ‘Empty Cart’ section. Typically, you’ll want to encourage customers to start shopping. For example, you might talk about things you offer such as free shipping or a money-back guarantee.

You might even give the shopper a coupon code such as a buy one get one free discount.

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

We recommend selecting ‘Redirect To Shop’ as this will make it easier for shoppers to start adding items to their carts.

Step 7: Add The Cart Icon Anywhere on your Site

If you want more control over where the cart icon appears, then you can add it to any page, post, or widget-ready area using a shortcode (a small piece of code in square brackets that adds dynamic content to your site).

You can also add it to your site’s menu. This is a great choice if you selected ‘None’ in the ‘Icon Visibility’ settings following the process described above.

If you selected ‘WooCommerce Pages’, there is also a way to add the cart icon to other important areas of your site. For example, you might add the icon to your custom home page or contact form.

To start, you can select ‘Cart Menu’ and then switch on the ‘Enable Cart Menu’ toggle.

You can now change how the icon looks by selecting one of the icon templates and choosing whether to show the product count and cart total as part of the icon. This information can help visitors keep track of their carts.

You can also change the icon and text sizes. As you make changes, the small preview will update automatically, so you can try different settings to see what looks best.

When you’re happy with how the sliding side cart icon looks, go ahead and click on the ‘Save’ button.

You can now add the icon to any page, post, or widget-ready area using the code next to ‘Embed Shortcode.’

For more information on how to place the shortcode, please see our guide on how to add a shortcode in WordPress.

Another option is to add the icon to your site’s navigation menu. This way, the sliding side cart is always within easy reach without distracting from the main page content.

To do this, let’s open the ‘Add to Menu’ dropdown and choose the menu you want to use.

After that, simply click on the ‘Save’ button.

Now, if you visit your WordPress website, you’ll see the cart icon in the navigation menu.

Step 8: Add Your Own Colors and Branding

You may want to change the sliding side cart’s colors to better match your WooCommerce theme or branding.

To change the text color, button color, link color, and more, go ahead and click on ‘Styling.’

And to change any of the default colors, simply give it a click. This opens a popup where you can try out different colors.

For example, in the following image, we’re customizing the border.

Another option is to type a hex code into the ‘Hex’ field. This is perfect if you already have a specific shade in mind.

If you don’t know what hex code to use, then it may help to use a site like HTML Color Codes. Here, you can explore different colors and then get a code that you can simply paste into the FunnelKit plugin.

If you’re still unsure what colors to use, then you can see our guide on how to choose a perfect color scheme for your WordPress site.

Keep in mind that the final appearance may vary based on your WordPress theme, but you can use these styling options to get a perfect fit.

Step 9: Create a Responsive Sliding Side Cart

According to our internet usage report, over 90% of the global internet population uses a mobile device to go online. With that in mind, you’ll want to make sure the sliding side cart looks just as good on smartphones and tablets as it does on desktop computers.

Here, it may help to change the cart’s width so it doesn’t completely fill the small screen of a mobile device. To do this, you’ll want to open the ‘Styling’ tab and then look at ‘Cart Preview Mobile Width.’

You may want to try typing different values into this field. If you do change the default settings, then it’s a good idea to check the mobile version of your WordPress site from the desktop to make sure you’re happy with the results.

While you’re on this screen, you can also change the width of the sliding side cart on the desktop. To do this, simply change the number in the ‘Cart Preview Desktop Width’ field.

Step 10: Publish Your Sliding Side Cart

When you’re happy with how the sliding side cart is set up, it’s time to make it live. Simply click on the ‘Enable Cart’ slider so it turns blue.

Now, if you visit your online store, you’ll see the sliding cart live.

If you want to remove the sliding side cart at any point, then just head back to FunnelKit » Cart in the WordPress dashboard. Then, go ahead and click to disable the ‘Enable Cart’ slider.

Method 2. Add an Advanced Sliding Side Cart (With Upsells, Cross-Sells, and Rewards)

If you want to increase the average order value in your store, then you can add powerful upsell, cross-selling, and reward features to the sliding cart. These advanced options are available in the premium version of the FunnelKit Cart.

With this plugin, you can recommend related products whenever a customer adds an item to their cart.

You can also create unique rewards, such as coupon codes and free gifts, and then promote them inside the sliding cart.

FunnelKit can even track how much more the customer needs to spend in order to unlock the next reward.

Step 1: Install and Activate FunnelKit Pro Plugins

To get these advanced capabilities, you will need the FunnelKit Funnel Builder Pro package (the Plus plan or higher). This package includes three separate plugins that work together, and you will need to install all of them:

• FunnelKit Funnel Builder: This is the core plugin.
• FunnelKit Funnel Builder Pro: This is the premium add-on that unlocks the upsells, rewards, and other features.
• FunnelKit Cart: This is the specific module that powers the sliding side cart.

After buying a plan, log in to your FunnelKit account to download the three plugins. Then you can install and activate them. If you need help, then please see our guide on how to install a WordPress plugin.

Step 2: Activate Your License Key

Upon activation, go to FunnelKit » Settings and add your license key to the ‘FunnelKit Funnel Builder Pro’ field.

You can find this information by logging into your account on the FunnelKit website. With that done, click on ‘Activate.’

After that, simply go to FunnelKit » Cart.

You can now configure and customize the side cart by following the same process described in method 1. When you’re happy with how the sliding side cart is set up, you’re ready to add upsells, cross-sells, and rewards.

Step 3: Enable Upsells and Cross-Sells

When customers open the sliding-side cart, you can show them unique upsell and cross-sell promotions based on the items in their shopping basket.

Upselling is where you encourage shoppers to buy a higher-priced product instead of the one they already have in their shopping cart.

For example, imagine a customer adding a waterproof jacket to their cart. You might suggest a higher-quality jacket that’s more durable, versatile, and available in different colors.

Cross-selling is when you promote a product related to something the customer is already buying. For example, if they add a greeting card to their cart, you might encourage them to buy chocolates or flowers, too.

WooCommerce has a linked product feature that allows you to create upsells and cross-sells. For more information, please see our guide on how to upsell products in WooCommerce.

However, you can also create upsells and cross-sells directly from the FunnelKit dashboard. This is the quickest option, so it’s the one we’ll be using in this guide.

To start, you’ll need to click on the ‘Upsells’ option and then select ‘Enable Cart Upsells.’

Step 4: Assign Upsells and Cross-Sells to Products

After that, let’s scroll to the ‘Upsells and Cross-Sells’ section.

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

Simply click on the item where you want to add one or more linked products.

Then, you can click on either ‘Add Upsell’ or ‘Add Cross Sell’ depending on the kind of promotion you want to create.

In the popup, start typing the product that you want to use as the upsell or cross-sell. When the right product appears, just give it a click.

To offer multiple products, simply follow the same process described above.

With that done, simply click on the ‘Add’ button.

You can now create unique cross-sell and upsell campaigns for every product in your store simply by following the same process described above.

Step 5: Customize the Upsell and Cross-Sell Display

Now, you’re ready to customize how the upsell and cross-sell promotions will look on your sliding side cart.

To start, try switching between different styles by clicking the radio buttons next to ‘Display.’

The live preview will update automatically, so you can try different styles to see which one you like the best.

By default, FunnelKit will show both upsells and cross-sells in the sliding side cart. If you prefer, then you can show only upsells or only cross-sells using the radio buttons in ‘Product Recommendation Type.’

Next, you can change the heading that FunnelKit shows above the upsell or cross-sell promotion by typing it into the ‘Heading’ field.

Just be aware that FunnelKit will use the same heading for both types of promotion.

After that, you can set the maximum number of suggested products that FunnelKit will show, by typing into the ‘Show Maximum Upsells’ field.

Wherever possible, it’s a good idea to create unique upsell and cross-sell promotions for every product. However, if your online store has lots of items, then this might not be possible.

With that in mind, you can set a default upsell product that FunnelKit will promote when no linked products are available. To do this, simply type the name of a product into the ‘Default Upsells’ field. When the right product appears, simply give it a click.

When you’re happy with the upsell and cross-sell promotions you’ve created, don’t forget to click on ‘Save’ to store your changes.

Step 6: Create and Configure Unlockable Rewards

Giving customers a reason to spend more can often increase the average order value. FunnelKit allows you to create various rewards that customers unlock once their cart subtotal reaches a certain amount.

For example, you might offer free shipping if the customer exceeds a minimum spend. FunnelKit will even show customers how much more they need to spend to unlock their prize.

This is an easy way to get more sales and build customer loyalty with gamification.

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

To offer free shipping, you’ll need to have already set up shipping in your WooCommerce store. For step-by-step instructions, please see our WooCommerce made simple guide.

Meanwhile, the ‘discount’ reward automatically applies a coupon when the customer reaches the minimum spend. If you want to offer this reward, then you’ll need to create a percentage discount coupon using either the built-in WooCommerce coupon feature or a WordPress coupon plugin.

For step-by-step instructions, please see our guide on how to create smart coupons.

After that, you’re ready to create a reward by selecting ‘Rewards’ in the FunnelKit settings and then clicking on ‘Create Reward.’

You can now open the ‘Type’ dropdown and choose the kind of reward you want to create: Free Shipping, a Discount, or a Free Gift.

No matter which you choose, you can change the text that FunnelKit shows to customers by typing into the ‘Message’ field.

If you do make any changes, then be careful not to edit {{remaining_amount}} as this allows FunnelKit to show how much more the customer needs to spend.

If you’re offering a discount, then make sure you change the message to show how much the customer will save.

With that done, type a number into the ‘Amount to Get Reward’ field. This is how much shoppers must spend in order to unlock the reward.

If you’re offering a percentage discount, then you need to specify which coupon FunnelKit should auto-apply.

In the ‘Coupon’ field, start typing the coupon that you want to use. When the right code shows up, give it a click.

Now, FunnelKit will auto-apply the coupon when someone meets the minimum spend.

Offering a free gift instead? Then, you can start typing the name of the gift into the ‘Product’ field.

When the right product shows up, give it a click.

Now, FunnelKit will add this item to the customer’s shopping cart as soon as they meet the minimum spend.

To add more rewards, simply click on ‘Create Another Reward.’

You can now configure the discount, free gift, or free shipping reward by following the same process described above.

By default, FunnelKit will show the following message once a customer qualifies for all the awards: ‘Congrats! You have unlocked all the rewards.’

To show a different message instead, simply type into the ‘When All Rewards Unlocked’ field. You might even offer the customer a special bonus for unlocking all your rewards, such as an exclusive coupon code to use on their next purchase.

When you’re happy with how your rewards are set up, click on the ‘Save’ button.

Step 7: Publish Your Advanced Sliding Side Cart

When you’re ready to make the sliding side cart live, simply click on the ‘Enable Cart’ toggle.

If you want to remove the sliding side cart at any point, then simply head back to FunnelKit » Cart in the WordPress dashboard. Then, go ahead and click to disable the ‘Enable Cart’ toggle.

Video Tutorial

Before you go, you might want to check our video tutorial on how to add a sliding cart to your WooCommerce store.

Subscribe to WPBeginner

Frequently Asked Questions About Adding a Sliding Cart in WooCommerce

Here are some questions that our readers have frequently asked before adding a sliding cart on their WooCommerce stores:

Does a sliding side cart replace the default WooCommerce cart page?

No, it does not replace the default cart page. The sliding side cart provides an alternative, more convenient way for customers to view and manage their cart from any page.

The main cart page (yourwebsite.com/cart) will still exist, and most sliding carts include a button that links to it for users who want to see it.

Will adding a sliding side cart plugin slow down my website?

A well-coded plugin like FunnelKit is built for performance and should not have a noticeable impact on your site’s speed. These plugins are designed to load their scripts efficiently.

However, as a best practice, it is always a good idea to test your website’s speed before and after adding any new plugin to be sure.

Is upgrading to FunnelKit Pro worth it just for the sliding cart features?

Whether the upgrade is worth it depends on your business goals. If your primary goal is to increase the average order value (AOV), then the Pro features are very powerful.

The ability to show targeted upsells, cross-sells, and gamified rewards (like ‘You’re $10 away from free shipping!’) directly in the cart can significantly boost sales.

What if the sliding side cart conflicts with my WordPress theme?

Conflicts with modern, well-coded themes are rare, but they can happen. If you notice any display issues, the first place to check is the plugin’s ‘Styling’ settings, as you can often resolve minor issues there.

If the problem persists, the best course of action is to contact the plugin’s support team for assistance.

We hope this article helped you add a sliding side cart in WooCommerce. You may also want to check out our guide on how to create a WooCommerce popup to increase sales and our expert pick of the best WooCommerce plugins for your 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.