Step 1: Setting up attributes of the products

In order to use this plugin to create different variants, you will need to set up the different attributes that you need as a differentiator between the variants. For example, color, sizes and labels. Follow the steps below to set up the product attributes:

• First, navigate to the WordPress dashboard
• Click on Products and select attributes

• To add an attribute, first give it a name (i.e colors)
• Enter the slug of the attribute (i.e colors)

• Select the type of the attribute. As of now there are three different types that are available inside the plugin and they are color, label and image.

• Select the shape of the attributes. There are 4 different types of shapes are available such as default, square, rounded corner and circle.

By default the swatches will be designed as you customize them from the settings page as shown in the image below. You can change the shape of the swatches to rounded corner, square and round as per the requirement.

By default the size of the swatches will be selected as 24px. You can change the size by clicking on the box and entering the value of the pixels as per your requirement.

Finally, click on the Add Attribute button to add the changes to the site.

Step 2: Configuring the terms of the Attributes

Once the attributes are added, you will need to configure the terms for each of the attributes. You will need to click on the configure terms button next to each attribute.

In this example, we are going to configure the color options for a particular attribute. There are 4 options that you can select from. These options are the name of the color, slug of the color, a short description of the color and a color selector to select the color. Once you have selected the options as per your requirements, click on Add New button at the bottom to add it to the list.

You can add as many attributes as you need based on the requirement. Once you have added the terms, the final screen would like the below image.

Step 3: Setting up product variations

Now that the product attributes are set, you will need to select the product variations in order to display the variation swatches on the front-end of your website.

• To select the product variations, please navigate to the Products and click on All Products.
• Click on Edit next to the product on which you would like to set up the variations

• Under product data, select the product type as the Variable Product

• Click on the Attribute tab and select the attributes that you would like to be included in the front-end and click on the Add button to get them added to the list

• Once the attribute is added click on the Select All button to add all the variants to the product.
• Ensure that the Used For Variation button is checked
• Click on the Save Attribute button to save the changes

• Once the attributes are saved, you will need to set the variation in the product. To do that, please navigate to the Variation Tab.
• Click on the Go button to create the variations
• This will add the variation to the product based on the attributes that you have selected earlier

• You can also set a custom image and price for this variant by opening the drop-down menu
• Select the variation by clicking on the drop-down menu
• Add a custom price for this variant by entering the amount in the Regular Price field
• Add an image by clicking on the image button
• Repeat the same process to another variants

Once you are done editing the field, click on Save Changes button at the bottom and update the product.

General Settings:

Under general settings, you will find three options which are mentioned below:

1. Enable for product page: This will enable the features of the plugin in the single product page where the plugin will show the variants available for a particular product
2. Enable for Shop Page: This will enable the users to select the different variants of the products directly from the shop/archive pages
3. Auto convert the drop downs to labels: Enabling this feature will automatically convert the drop-downs to labels

Global Styling:

Under the global styling options, you will be able to customize the swatches as per your requirements and style segments. Following are the options available:

Swatch Styling

Swatch minimum width:

By default the minimum width of the swatches are set to 24px. You can change this by clicking on the arrows or by manually typing the number of pixels inside the box.

Swatch minimum height

By default the minimum width of the swatches are set to 24px. You can change this by clicking on the arrows or by manually typing the number of pixels inside the box.

Swatch border radius

The border radius is by default selected as 3px. You can change this by clicking on the arrows or by manually typing the number of pixels inside the box.

You can customize the swatches as per your requirements by changing the default value to any value. Please note that the global setting will only be applied to the product if the product attribute settings is set to default. Changing the height, width and the border radius to the same value will change the shape of the swatches as circles.

Font size

The font size of the swatch is by default selected as 12px. You can change this by clicking on the arrows or by manually typing the number of pixels inside the box.

Please note that you can change the font only for the label attribute. This does not work for the color or the size attributes.

Border color

You can use the color selector to chose the border color of the swatch as per your requirement.

Disabled attribute effect

This option will help blur the disabled attributes so that the users can not select the same attribute. There are three major options that you can choose from which are blur, blur with cross and hide it completely from the front end of the website.

Tooltip Styling

Tooltip is the option that helps pop up the name of the label, color or the size attribute when the user hovers the mouse cursor over them. There are the following options that you can choose from to customize how Tooltips appear on your website. You can simply choose to turn this option on or off by using the toggle button.

Front End view of the Tooltip

Tooltip background color

This option will help you customize the background color of the tooltips. In this example, we have set the background color as red.

Tooltip font color

This option will help you customize the font color of the tooltips. In this example, we have set the background color as white. You can change this by clicking on the “Select Color” option.

Tooltip font size

This option will let you change the font size of the tooltip. By default this is set to 12px. You can change it by entering the custom value in the box or using the up and down arrow adjacent to it.

Image preview on tooltip

Image preview will be shown in tooltip if this option is enabled, This setting works only for image type swatches

Label Styling

Label position

This option will help you in positioning the label on the product page. Currently there are three settings available to this function. They are None, Inline and stacked.

Inline: Inline settings will position the labels in the same line as mentioned in the image below:

Stacked: this option will stack the label below the tag as mentioned in the image below

Label font size

This option enables the users to change the font size of the labels

Widgets Styling

Filters

Enabling this option will add the swatches to the filter option of the woocommerce that means the users can use the filter option to choose from different swatches on the product archive page.

Shop Page Styling

To design and style the swatches on the shop page of your website, we have incorporated a few cool styling options.

Swatch Alignment

This option enables you to change the alignment of the swatches on the shop page. Currently, there are three different styles available as left, right and central.

This is how it looks on the front-end with a right alignment of the swatches

Swatch Position

This option enables you to change the position of the swatches on the shop page. Currently there are 4 different positions that you can place the swatches on the shop page and they are After Price, Before Price, After Title and Before Title.

Here is an example of how this looks on the front-end of the website when you place the swatches before price

Show Swatches Label

Turning this toggle button on will display the labels for the swatches on the shop page. As you can see in the image below that the color and label are visible stacked to the swatches.

Attributes limit

You can limit the number of attributes that would be displayed on the shop page using this option. You can either leave it blank or enter 0 in the box to load all the attributes. You can choose any number of attributes that you would like to display on the shop page.

Fron-end view

Override global settings

This option overrides any global setting inside the plugin and allows you to set customized width, height, border radius and font size inside the shop page.

This documentation shows you how to install and activate the plugin on your WordPress website.

How to install Variation Swatches for WooCommerce

To install this plugin on your WordPress site, follow the steps below.

Step 1: Log in to your WordPress website

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

Step 2: In the Plugins menu, click on Add New Plugin

From your WordPress dashboard, go to Plugins > Add New Plugin to open the plugin installation screen.

Step 3: Search for Variation Swatches

In the search bar, search for Variation Swatches.

Step 4: Click Install Now

In the Variation Swatches for WooCommerce card, click Install Now.

Step 5: Click Activate

Once the installation has finished, click Activate.

The plugin is now active on your website.

You can now start using swatches in your WooCommerce products and CartFlows product steps.

As the Instant Checkout is enabled in the flow settings, to customize the checkout step, use the Design tab under Step Settings.

It means the CartFlows Instant Checkout feature is enabled for that funnel. When Instant Checkout is enabled, page builder editing is disabled for that step. However, you can still make design-related changes using the Design tab in the Step Settings.

How to Enable Page Builder Editing:

If you’d like to edit the step using your page builder (e.g., Elementor, Gutenberg, etc.), follow these steps to disable Instant Checkout:

1) Go to your CartFlows Flow.

2) Click on the gear icon next to the funnel name to open the Flow Settings.

3) In the popup, locate the Instant Checkout toggle and disable it.

4) Click Save Settings.

5) Refresh the funnel page.

Now, you should be able to edit the Checkout (or Thank You) step using your page builder.

Instant Layout is a clean, fast-loading, conversion-focused layout built right into CartFlows. It’s ideal for digital products like music, software, and eBooks, and offers a distraction-free experience with an intuitive interface.

How to Enable Instant Layout for Upsell/Downsell Steps

There’s no additional setup needed!

If you already have Instant Layout enabled in your funnel settings:

• The layout will now automatically apply to your Upsell and Downsell steps.
• There’s no need to recreate or manually modify those steps.

If you haven’t enabled Instant Layout yet:

1. Go to your Funnel > Click the Settings () icon in the top-right.
2. Enable the Instant Layout toggle.

Customizing Upsell & Downsell Steps Using Instant Layout

Once enabled, you can customize the appearance of your Upsell and Downsell steps directly in CartFlows:

1. Navigate to the Funnel step list.
2. Click Settings on your Upsell or Downsell step.
3. A new Design tab will appear.
4. Use the Design options to change:
   • Button labels and styling
   • Typography
   • Colors
   • Layout-specific options

This makes customization easy without needing to open a page builder.

Frequently Asked Questions

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 tab from the left side of the settings window.

Here, you’ll find the following options:

1. Enable Modern Cart – 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. Cart Style – Choose a cart style from the available design options.
Frontend view

3. Order Summary Style – Choose how the order summary appears inside the cart tray. Select the style that fits your store’s layout and shopping experience.
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. Product Recommendation Source For Empty Cart – Choose where the recommended products should be pulled from when the cart is empty. This keeps users engaged and encourages purchases even when there are no items in the cart.
Frontend view

6. 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

7. 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

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

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

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

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

12. Show Tax – Enable this to display the tax in the cart tray, if any.
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. Empty Cart Recommendation Title – Set a clear and engaging title for your empty cart recommendation area. This appears above the product recommendation when the cart is empty.
4. Coupon Field Title – Sets a title above the coupon field so customers know its purpose.
5. Coupon Field Placeholder – Defines the placeholder text inside the coupon input field (e.g., “Enter your coupon code”).
6. Checkout Button Text – Customizes the checkout button label to match your store’s style and guide customers clearly.
7. 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.
8. 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.