Documentation https://cartflows.com/docs/ Thu, 19 Jun 2025 17:06:00 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.2 https://cartflows.com/wp-content/uploads/2020/10/cartflows-logo.svg Documentation https://cartflows.com/docs/ 32 32 Starting out with Variation Swatches for Woocommerce https://cartflows.com/docs/starting-out-with-variation-swatches-for-woocommerce/ Thu, 19 Jun 2025 17:02:48 +0000 https://cartflows.com/?post_type=docs&p=60546 Let’s start by understanding how to set this plugin up with step by step process.

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
Setting-attributes
  • To add an attribute, first give it a name (i.e colors)
  • Enter the slug of the attribute (i.e colors)
setting-attribute
  • 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.
setting-attribute
  • Select the shape of the attributes. There are 4 different types of shapes are available such as default, square, rounded corner and circle.
setting-attribute

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.

Var-swatch-shape-selector

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.

configuring attributes

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.

configuring-attributes

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.

configuring-attribute

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
configuring-attributes
  • Under product data, select the product type as the Variable Product
configuring-attributes
  • 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
adding attributes to products
  • 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
saving attributes
  • 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
adding variations
  • 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
setting up variants

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

]]>
Basic Settings https://cartflows.com/docs/basic-settings/ Thu, 19 Jun 2025 16:51:15 +0000 https://cartflows.com/docs/untitled/ Once the plugin is installed you will need to manually set it up in order to get the customized and desired results on your WooCommerce products. To access the settings, you will need to navigate to the WordPress dashboard and click on plugins>installed plugin. Scroll down to the plugin and click on settings to access the settings page.

basic settings

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
general settings

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

swatch border radius

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.

font size

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.

Border Color
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

Tolltip front end view
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 color
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

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.

Var-swatches-widgets-filter

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

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

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

override settings
]]>
How to Install Variation Swatches for WooCommerce https://cartflows.com/docs/how-to-install-variation-swatches/ Thu, 19 Jun 2025 16:41:30 +0000 https://cartflows.com/docs/untitled/ The Variation Swatches for WooCommerce plugin enhances your product pages by displaying product variations using color, image, or label swatches instead of dropdowns.

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.

Add new plugin

Step 3: Search for Variation Swatches

In the search bar, search for Variation Swatches.

Search for Variation Swatches

Step 4: Click Install Now

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

Install Now

Step 5: Click Activate

Once the installation has finished, click Activate.

Activate Variation Swatches

The plugin is now active on your website.

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

]]>
Why is Step Editing Disabled When I Try to Edit the CartFlows Checkout or Thank You Page? https://cartflows.com/docs/why-is-step-editing-disabled-when-i-try-to-edit-the-cartflows-checkout-or-thank-you-page/ Sat, 31 May 2025 13:42:31 +0000 https://cartflows.com/?post_type=docs&p=59947 If you’re trying to edit the CartFlows Checkout or Thank You step and see the message:

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.

]]>
CartFlows Instant Layout Now Available for Upsell & Downsell Steps https://cartflows.com/docs/cartflows-instant-layout-for-upsell-and-downsell-steps/ Tue, 13 May 2025 12:56:26 +0000 https://cartflows.com/?post_type=docs&p=59085 We’ve expanded our Instant Layout support to include Upsell and Downsell steps in your funnel—making it easier than ever to build high-converting funnels without relying on page builders.

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

]]>
How Product Recommendations Feature Works https://cartflows.com/docs/how-product-recommendations-feature-works/ Fri, 11 Apr 2025 07:42:39 +0000 https://cartflows.com/docs/how-product-recommendations-feature-works/ Modern Cart for WooCommerce includes a built-in product recommendation feature designed to help increase your Average Order Value (AOV). This feature automatically suggests additional products to customers as they interact with their cart, helping them discover more while boosting potential sales.

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

Increase AOV With Product Recommendations Setting

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 viewRecommended products in the cart tray

Upsell Cross-sell Product Suggestions

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.
Linked Products
]]>
Customize General Settings in Modern Cart https://cartflows.com/docs/customize-general-settings-in-modern-cart/ Thu, 20 Mar 2025 11:04:36 +0000 https://cartflows.com/docs/customize-general-settings-in-modern-cart/ Modern Cart for WooCommerce allows you to control the core display and cart behavior through its General panel. These options help you define how the cart appears on your store and which features you want to enable or disable.

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.

General Settings Modern Cart for WooCommerce

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

Setting Style

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

Order Summary

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

Product Recommendation

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

Empty Cart Product Recommendation

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

Display Coupon Field

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

Free Shipping Bar

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

Shipping Cost

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

Subtotal

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

Total

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

Discount Field

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

Tax

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

]]>
How to Enable Free Shipping in WooCommerce https://cartflows.com/docs/how-to-enable-free-shipping-in-woocommerce/ Wed, 19 Mar 2025 17:04:48 +0000 https://cartflows.com/docs/how-to-enable-free-shipping-in-woocommerce/ Modern Cart for WooCommerce includes a Free Shipping Progress Bar that shows customers how much more they need to spend to qualify for free shipping. To make this feature work, you need to enable Free Shipping in your WooCommerce settings.

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.

]]>
Customize Cart Tray Labels in Modern Cart https://cartflows.com/docs/customize-cart-tray-labels-in-modern-cart/ Wed, 19 Mar 2025 17:01:48 +0000 https://cartflows.com/docs/customize-cart-tray-labels-in-modern-cart/ Modern Cart for WooCommerce allows you to customize the text labels displayed in the cart tray. This helps you personalize the cart language to match your store’s tone and improve your customer’s shopping experience.

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.
Modern Cart for WooCommerce Label Settings

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

]]>
Customize Cart Tray Styling in Modern Cart https://cartflows.com/docs/customize-cart-tray-styling-in-modern-cart/ Wed, 19 Mar 2025 16:52:50 +0000 https://cartflows.com/docs/customize-cart-tray-styling-in-modern-cart/ Modern Cart for WooCommerce allows you to adjust the visual appearance of the cart tray so it fits your store’s branding and design. From colors and fonts to animation speed and layout width, the plugin provides flexible styling controls to help you customize the look and feel of the sliding cart.

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.
Modern Cart for WooCommerce Styling Settings

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

]]>