This documentation explains how the “Increase AOV with Product Recommendations” feature works and how to configure it using WooCommerce’s built-in upsell and cross-sell settings.

How the Feature Works

The Increase AOV with Product Recommendations setting allows you to control how suggested products are displayed in the cart tray.

You can access this setting by navigating to: WooCommerce > Modern Cart > General Settings

This option includes three available modes:

1. Disable – Turns off the product recommendation feature.
2. From Upsell – Displays upsell products configured in WooCommerce for the item added to the cart.
3. From Cross Sells – Displays cross-sell products configured in WooCommerce for the item added to the cart.

Backend view – General Settings panel

If a product added to the cart has no upsell or cross-sell items configured, Modern Cart will automatically display random simple products instead.

Note: This feature only works with Simple Products.

Frontend view – Recommended products in the cart tray

How to Configure Upsell and Cross-Sell Products in WooCommerce

WooCommerce includes native options to assign related products for upselling and cross-selling. Here’s how to configure them:

1. Go to Products > All Products and edit the product you want to link recommendations to.
2. Scroll down to the Product data section and go to the Linked Products tab.
3. Under Upsells, search and select products you want to recommend as upsell options.
4. Under Cross-sells, search and select products to show on the cart page or cart tray.
5. Click Update to save your changes.

This documentation explains how to access and configure the general settings.

Access General Settings

From your WordPress dashboard, go to WooCommerce > Modern Cart, then click on the General Settings tab from the left side of the settings window.

Here, you’ll find the following options:

1. Display Cart Icon – Choose where to show the floating cart icon. You can select to show it on the entire site, only on WooCommerce pages, or disable it completely.

2. Choose Style – Choose a cart style from the available design options.
Frontend view

3. Enable Free Shipping Bar – Toggle this option to display a progress bar showing how close the cart is to qualifying for free shipping.
If you haven’t set up Free Shipping in WooCommerce yet, refer to this doc for setup steps.
Frontend view

4. Increase AOV with Product Recommendation – Select a group of products you want to recommend in the cart tray. Only simple products are supported. Products already in the cart are automatically excluded from the recommendations. Refer to this doc to learn more about how this feature works.
Frontend view

5. Display Coupon Field – Choose how you want the coupon field to appear in the cart tray:

• Disabled – Hides the coupon field.
• Minimize – Shows the field collapsed by default.
• Expand – Shows the field in full view.

Frontend view

6. Show Subtotal – Enable this to display a subtotal line in the cart tray.
Frontend view

7. Show Total – Enable this to display the total amount in the cart tray.
Frontend view

8. Show Discount – Enable this to display the discount in the cart tray, after the coupon is entered.
Frontend view

8. Show Tax – Enable this to display the tax in the cart tray, if any.
Frontend view

8. Show Shipping – Enable this to display the shipping cost in the cart tray.
Frontend view

Note: All changes are saved automatically — there is no save button in the settings panel.

Free Shipping is a core WooCommerce feature. For a complete explanation and setup steps, refer to the official WooCommerce documentation here: https://woocommerce.com/document/free-shipping/

If you prefer a visual walkthrough, you can also watch the video below that shows how to enable free shipping in WooCommerce.

You can modify titles, placeholders, and button labels directly from the settings — no coding required.

Customize Cart Tray Labels

From your WordPress dashboard, go to WooCommerce > Modern Cart, then click on the Text Settings tab from the left side of the settings window.

Here, you’ll find options to change the following labels:

1. Main Heading – Sets the main heading for the cart. This is the most important title and helps customers understand what this section is about.
2. Product Recommendation Title – Defines the heading for the recommendation slider to grab customer attention.
3. Coupon Field Title – Sets a title above the coupon field so customers know its purpose.
4. Coupon Field Placeholder – Defines the placeholder text inside the coupon input field (e.g., “Enter your coupon code”).
5. Checkout Button Text – Customizes the checkout button label to match your store’s style and guide customers clearly.
6. Free Shipping Bar Text – Adjusts the text in the free shipping progress bar. Use {amount} to dynamically display the remaining amount required to qualify for free shipping.
7. Discount Label – Defines the label used to display the sale price.

Note: All changes are saved automatically — there’s no save button in the settings panel.

This documentation explains how to access the styling settings and configure the available options.

Customize Cart Tray Styling

From your WordPress dashboard, go to WooCommerce > Modern Cart, then click on the Styling tab from the left side of the settings window.

Here, you’ll find a range of options to customize the cart tray styling:

1. Primary Color – Sets the main color for key cart elements, allowing you to align it with your store’s branding.
2. Heading Color – Controls the color of headings within the cart, helping differentiate key sections.
3. Body Color – Defines the color of general text in the cart, including product names, prices, and details.
4. Button Text Color – Adjusts the text color for buttons inside the cart.
5. Background Color – Sets the overall background color of the cart tray to blend with your store’s design.
6. Slide Out Width (Desktop) – Determines how wide the cart tray appears on desktop devices, measured in pixels.
7. Slide Out Width (Mobile) – Defines the cart tray width on mobile devices, measured in percentage.
8. Animation Speed – Controls how fast the cart tray opens and closes, allowing for a smoother or snappier effect.

Note: All changes are saved automatically — there’s no save button in the settings panel.

Steps to Change Cart Position and Visibility

Step 1: Go to Modern Cart Settings

From your WordPress dashboard, go to WooCommerce > Modern Cart, then click on the Floating Cart Icon tab from the left side of the settings window.

Step 2: Change the Floating Cart Icon Position

Under the Floating Cart Icon section, choose where the cart icon should appear on your site:

1. Bottom Right (default)
2. Bottom Left
3. Disabled – hides the cart icon entirely

Note: Any change made in the settings panel is saved automatically — there’s no save button.

Backend Setting & Frontend Result

The video below demonstrates how changing the position in the settings affects the cart icon’s appearance on the storefront.

Step 3: Hide Cart Icon If the Cart is Empty

If you want the cart icon to be hidden when the cart is empty, enable the Hide If the Cart Empty option.

Backend Setting & Frontend Result

The video below shows how enabling this option hides the cart icon when there are no products in the cart, and how it reappears after a product is added.

Before You Start

Before activating your license, make sure:

• The Modern Cart plugin is installed and activated on your website.
  If you haven’t installed it yet, follow this document: [How to Install Modern Cart](Insert link here)
• You have access to your account to retrieve the license key.

How to Activate Your Modern Cart for WooCommerce License

Step 1: Get Your License Key

1. Log in to Membership Area.
2. Click on API Keys from the sidebar.
3. Copy your License Key.

Step 2: Activate Your License in WordPress

1. Log in to your WordPress dashboard.
2. Go to WooCommerce > Modern Cart.
3. Click on the My Account tab.
4. Paste your License Key into the provided field.
5. Click the Activate License button.

Troubleshooting License Activation Issues

1. License is already activated for this website

If you see this error, your license may already be linked to your site.

Solution:

1. Log in to your CartFlows account.
2. Click on API Keys from the sidebar.
3. Delete the existing entry for your website.
4. Try activating the license again.

2. License is activated for the same instance ID

This error may occur if you migrated your site or are re-activating the license.

To resolve this, follow the steps in this document: How to Resolve “Cannot Activate API Key. Key Already Activated with the same Instance ID” Error Message?

3. A customer account does not exist for this API Key

This error means the License Key is incorrect.

Solution:

1. Log in to Membership Area.
2. Copy the correct License Key and paste it into the activation field again.

You can install the plugin by downloading it from your account and uploading it to your WordPress site.

Steps to Install Modern Cart for WooCommerce

1. Go to Your Account and Click on Your Products

In your account page, go to Your Products to view all your purchased products.

Step 2: Download Modern Cart for WooCommerce

Click Download to start the .zip file download.

Step 3: Log in to Your WordPress Website

When you log in, you will be in your Dashboard.

Step 4: In the Plugins Menu, Click on Add New Plugin

Go to Plugins > Add New Plugin from the WordPress menu.

Step 5: Click Upload Plugin at the Top of the Screen

The screen will expand with the option to upload a plugin.

Step 6: Upload the Plugin and Click Install Now

Click Choose File, select the downloaded .zip file, and then click Install Now to begin the installation.

Step 7: Click Activate Plugin

Once the plugin is installed, click Activate Plugin to complete the installation.

What’s Next?

Make sure to activate your license key to start using the plugin and receive plugin updates. Click here to learn how to activate your Modern Cart license.

Claiming Your OttoKit Pro Access

To claim your OttoKit Pro subscription:

1. Log in to your CartFlows account.
2. Go to the Your Products section from the sidebar.
3. Click on the Redeem Now button.
4. After a few minutes, you will receive an email from OttoKit with your account details.

Frequently Asked Questions

How to Use the Rollback Feature

To use the Rollback feature in CartFlows, follow the steps below.

1. Navigate to the CartFlows Settings
Go to CartFlows > Dashboard and open the Global Settings by clicking the gear icon.

2. Locate the Version Control Section
In the Settings window, find the Version Control section. This section allows you to revert to a previous version of the CartFlows plugin.

3. Select the Version to Rollback
In the Version Control section, you will see a dropdown menu listing the previous versions of CartFlows. Select the version you want to revert to.

4. Click Rollback
After selecting the desired version, click the Rollback button. The plugin will automatically revert to the selected version.

5. Confirm and Return to Plugins Page
Once the rollback process is complete, you will see a confirmation message. Your CartFlows plugin is now reverted to the selected version. Click the Go to Plugins page link to return to the Plugins page.

Important Notes

• Backup Your Site: Before performing a rollback, it is recommended to take a full backup of your website to avoid any data loss.
• Compatibility: Ensure that the version you are rolling back to is compatible with your current WordPress and WooCommerce versions.