The Side Cart module automatically displays an animated sliding cart in your WooCommerce store whenever a customer adds a new product to their cart, providing them with instant visual feedback.
Customers can also edit the contents of their side cart (e.g. they can add or remove products) and proceed to the Cart or Checkout page.
You can configure where you want to show the side cart in your WooCommerce store — you can toggle it on and off for your Shop and catalog pages, your single product pages, and your Cart links/icons in the menu and other places.
You also have the option to show a floating mini cart icon on your site that allows your customers to open the side cart at any time (otherwise, it only shows up when they add a new product to their cart).
In the screenshot below, you can see what the side cart looks like on the Shop page of a WooCommerce store (created with the free Beauty demo of our Botiga theme):

Here’s what the floating mini cart icon looks like when the side cart is closed, too:

Below, we’ll see how to configure and enable Merchant Pro’s Side Cart module.
1. Open the Side Cart Module
First, open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.
Find the Reduce Cart Abandonment section, and click the Side Cart module to open its settings page:

2. Review the Module’s Settings
On the admin page of the Side Cart module, you’ll find four groups of settings — we recommend that you review and configure each option before activating the module:
- Display Settings – Here, you can configure where and how you want to show the side cart in your WooCommerce store.
- Upsells – These settings allow you to add upsell products to your side cart.
- Floating Mini Cart – Here, you can add a floating cart icon to your store that opens the side cart.
- Look and Feel – This group of options lets you customize the design of your side cart.
Next to the settings, you’ll also see a Preview pane that allows you to follow your customizations in real time:

3. Configure the Display Settings
The Display Settings allow you to decide where you want to show the side cart on your WooCommerce store and what elements it should include.
You have access to the following options:
- Shop Page – When this toggle is on, the side cart slides into the screen whenever your customer adds a product to their cart on the Shop page.
- Product Page – When this toggle is on, the side cart slides into the screen whenever your customer adds a product to their cart on a single product page.
- Cart Icons – When this toggle is on, the side cart slides into the screen whenever your customer clicks the Cart menu or icon.
- Cart position – Here, you can choose from two positions for your side cart: Slide from right and Slide from left.
- Show discount codes input – Here, you can show or hide an input field where your customer can enter and apply coupon codes.
- Show checkout button – This option lets you show or hide a Checkout button in your side cart. You can change the label on the button, too (default option: ‘Checkout’).
- Show view cart button – This option lets you show or hide a View Cart button in your side cart. You can change the label on the button, too (default option: ‘View Cart’).
- Show strikethrough prices – Here, you can show or hide the original prices of discounted products.
- Show cart savings – Here, you can show or hide the amount of cart savings.
- Show on devices – This option allows you to turn the side cart on and off for desktop and mobile devices.

4. Enable and Customize Side Cart Upsells
Using the Upsells pane on the module’s admin page, you can enable and configure cart upsells in the side cart.
The pane includes the following options:
- Cart Upsells – Here, you can toggle the cart upsells feature on and off. When it’s toggled on, you can define which products you want to show as upsells. You can choose from:
- Related Products – This option shows related products from your WooCommerce store automatically.
- Custom Upsell – Here, you can create custom upsells by filling in the upsell boxes that show up when the option is selected. You can add more than one upsell to your side cart by clicking the Add New Upsell button below the upsell box(es). An upsell box includes the following options:
- Trigger to add the upsell for – Here, you can choose the product(s) that will trigger this upsell in the side cart. The available options are All products, Specific product, and Specific category. For the All products and Specific category options, you can exclude products by using the Exclusion List option.
- Trigger upsells – Here, you can define the product(s) that will be shown as upsell(s) in the side cart. The available options are Specific product and Specific category.
- Limit the number of upsells in the cart – This checkbox allows you to set a top limit for the number of upsells in your side cart. When it’s checked, you can use the Maximum number of upsells to display option to define the top limit (default value: 5).
- Upsell title – This is the title that appears above the side cart upsells (default value: ‘You might also like’).
- Button text – Here, you can change the label on the button that lets your customer add upsell products to their cart (default value: ‘Add’).
- Upsell layout – Here, you can choose between two layouts for your side cart upsells. The available options are Carousel and List.

5. Enable and Customize a Floating Cart Icon
The Floating Mini Cart pane allows you to show a floating cart icon that opens the side cart at any time.
You have access to the following options:
- Floating cart – Here, you can enable or disable the floating mini cart icon.
- Display – Here, you can define whether you want to show the icon only When cart is not empty or Always.
- Icon – This option lets you choose from five stylish icons for your floating mini cart.
- Position – Here, you can set the location of the floating cart icon. The available options are Left (shows the icon in the bottom left corner of the page) and Right (shows the icon in the bottom right corner of the page).
- Icon size – You can use this range slider to set the size of the floating cart icon (default value: 25 px).
- Corner offset – This range slider allows you to define the distance of the floating cart icon from the edge of the page (default value: 30 px).
- Border radius – Here, you can define a corner radius for the floating cart icon (default value: 35 px).
- Icon color – This is the line color of the floating cart icon (default value: #ffffff).
- Background color – This is the background color of the floating cart icon (default value: #212121).
- Counter color – This is the text color of the counter shown on top of the floating cart icon, which displays the number of products in the cart (default value: #ffffff).
- Counter background color – This is the background color of the counter shown on top of the floating cart icon (default value: #757575).

6. Fine-Tune the Look and Feel of Your Side Cart
The Look and Feel settings allow you to customize the design of your side cart.
You can configure the following options:
- Side cart width – Here, you can define the width of your side cart when it’s open (default value: 380 px).
- Title color – This is the text color of the title in your side cart (default value: #212121).
- Title icon color – This is the color of the close icon next to the title in your side cart (default value: #212121).
- Title background color – This is the background color of the title in your side cart (default value: #cccccc).
- Content text color – Here, you can customize the text color of the content area of your side cart (default value: #212121).
- Content background color – Here, you can change the background color of the content area of your side cart (default value: #ffffff).
- Content (x) color – This is the line color of the close icons that let your customer remove products from their side cart (default value: #ffffff).
- Content (x) background color – This is the background color of the close icons that let your customer remove products from their side cart (default value: #212121).
- Total text color – Here, you can change the text color of the bottom part of your side cart that shows the total and the View Cart link (default value: #212121).
- Total background color – Here, you can customize the background color of the bottom part of your side cart that shows the total and the View Cart link (default value: #f5f5f5).
- Button color – This is the text color of the Checkout button in your side cart (default value: #ffffff).
- Button color hover – This is the text color of the Checkout button in your side cart in mouseover state (default value: #ffffff).
- Button border color – This is the border color of the Checkout button in your side cart (default value: #212121).
- Button border color hover – This is the border color of the Checkout button in your side cart in mouseover state (default value: #313131).
- Button background color – This is the background color of the Checkout button in your side cart (default value: #212121).
- Button background color hover – This is the background color of the Checkout button in your side cart in mouseover state (default value: #313131).

Once you have configured all the settings, click the Save button in the top-right corner of the page.
7. Enable the Side Cart Module
To activate the module, click the Enable button at the top of the page:

Known Incompatibilities
If you want to use the Merchant mini cart and you are using Elementor, then you should disable the following option in Elementor: Elementor > Settings > Integrations > WooCommerce > Mini Cart Template, otherwise the Merchant mini cart won’t work properly.