Documentation https://cartflows.com/docs/ Wed, 23 Jul 2025 14:17:37 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.2 https://cartflows.com/wp-content/uploads/2025/07/cropped-cartflows-logo-32x32.png Documentation https://cartflows.com/docs/ 32 32 How to Display Variation Swatches on Non‑WooCommerce Pages https://cartflows.com/docs/variation-swatches-on-non-woocommerce-pages/ Tue, 22 Jul 2025 11:04:25 +0000 https://cartflows.com/?post_type=docs&p=62701 By default, the Variation Swatches plugin displays swatches only on the standard WooCommerce Shop, Archive, and Single Product pages. If you add products to a regular WordPress Page (landing page, promo page, content page, etc.), the variation options may not load as swatches.

This documentation shows you how to enable swatches on those other pages using a simple PHP filter.

Before You Begin

Make sure:

  • Variation Swatches is installed and active.
  • Your variable products use global attributes with swatch settings configured in WooCommerce > Products > Attributes.

Step 1: Insert Products on the Page

Add products to your WordPress Page using WooCommerce product shortcodes. These methods output standard WooCommerce markup that works best with Variation Swatches.

Examples:

[products]
[products ids="123,456,789" columns="3"]

Note: Using third‑party catalog or grid modules may not trigger swatches because they often bypass WooCommerce templates. If swatches do not appear, switch to WooCommerce shortcodes/blocks and retest.

Step 2: Enable Swatches on WordPress Pages (PHP Filter)

Add this snippet in your child theme functions.php file or via a third-party plugin like Code Snippets. This tells Variation Swatches to load on WordPress Pages.

add_filter( 'cfvsw_requires_shop_settings', function( $status ){
			if( is_page() ) {
				return true;
			}
			return $status;
		});
is_page can be replaced by the desired condition.

For step-by-step guidance, see our doc: How & Where to Add Custom JS, CSS & PHP Code.

Step 3: Clear Cache & Test

  1. Save/activate the PHP snippet.
  2. Clear any caching (plugin, server, CDN).
  3. View your custom page in a private browser window.
  4. Check that variable products now show swatches.
]]>
Use a Custom Image for the Floating Cart Icon https://cartflows.com/docs/custom-image-for-floating-cart/ Thu, 17 Jul 2025 10:44:00 +0000 https://cartflows.com/?post_type=docs&p=62604 Modern Cart allows you to upload and use a custom image as the floating cart icon, giving you more flexibility in branding your store’s appearance.

You can find this setting under the Floating Cart Icon tab.

Upload Custom Icon

Supported file types include .png, .jpg, and .svg.

The recommended image size is 36 × 36 pixels to ensure a clear and consistent display.

See It in Action

Using SVG Files

If you upload an SVG file, please note that WordPress does not allow SVG uploads by default. This is a WordPress restriction, not a limitation from Modern Cart.

You can enable SVG uploads by:

Installing a Plugin

Use a plugin like Safe SVG to allow uploading SVG files safely.

Adding a Code Snippet

You can also enable SVG upload manually with this custom PHP code:

/**
 * Allow SVG uploads for administrators with basic sanitization.
 */

// Allow SVG uploads for administrators only
add_filter('upload_mimes', function($mimes) {
    if (current_user_can('administrator')) {
        $mimes['svg'] = 'image/svg+xml';
    }
    return $mimes;
});

// Basic sanitization: remove <script> tags from uploaded SVGs
add_filter('wp_handle_upload_prefilter', function($file) {
    if ($file['type'] === 'image/svg+xml') {
        $svg = file_get_contents($file['tmp_name']);

        // Remove <script> tags
        $svg = preg_replace('/<script.*?<\/script>/is', '', $svg);

        // Optionally, remove on* event attributes (like onclick, onload)
        $svg = preg_replace('/on\w+="[^"]*"/i', '', $svg);

        file_put_contents($file['tmp_name'], $svg);
    }
    return $file;
});

If you’re not sure how to add code to your WordPress site, refer to this doc: How and Where to Add the Custom JS, CSS & PHP Codes?

]]>
Control Product Recommendation Source for Empty Cart https://cartflows.com/docs/product-recommendation-for-empty-cart/ Tue, 15 Jul 2025 17:16:44 +0000 https://cartflows.com/?post_type=docs&p=62565 Modern Cart allows you to show product recommendations when the cart is empty. This can help engage users and guide them toward relevant products, even before anything is added to the cart.

The setting is available under the General tab of the Modern Cart settings.

Product Recommendation Source for Empty Cart Setting

Product Recommendation Source for Empty Cart

This option lets you choose where the recommended products are pulled from when the cart is empty. You can choose from:

Disable

No recommendations will appear in the cart when it’s empty.

Empty Cart

From Upsell Products

Displays products you’ve assigned as Upsell products for other products in your store.

To learn how to configure up-sell products in WooCommerce, see this doc: How to Configure Upsell and Cross-Sell Products in WooCommerce

From Featured Products

Displays WooCommerce products that are marked as Featured.

To mark a product as featured:

  1. Go to Products > All Products in your WordPress dashboard.
  2. Click the star icon next to the product title. When active, the star will appear solid.
Mark product as Featured

Alternatively, you can also mark a product as featured using Quick Edit or from the Catalog Visibility settings on the “Edit Product” page.

From Cross-Sell Products

Displays products you’ve assigned as Cross-Sell products, typically shown on the Cart page or cart tray.

To learn how to configure cross-sell products in WooCommerce, see this doc: How to Configure Upsell and Cross-Sell Products in WooCommerce

How the cart looks with a recommended product:

Empty Cart with Product Recommendation
]]>
How to Configure Upsells and Cross-Sells Products in WooCommerce https://cartflows.com/docs/upsell-cross-sell-in-woocommerce/ Tue, 15 Jul 2025 16:06:39 +0000 https://cartflows.com/?post_type=docs&p=62560 WooCommerce allows you to manually assign related products for upselling and cross-selling. These settings help guide customers toward relevant products, which can improve conversions and increase order value.

Once configured, Modern Cart can use these product associations to display recommendations in the cart tray.

Set Up Upsells and Cross-Sells in WooCommerce

  1. Go to Products > All Products and click Edit on the product you want to configure.
  2. Scroll down to the Product data section.
  3. Click the Linked Products tab.
  4. Under Upsells, search and select the products you want to recommend as upsell options.
    These products are usually higher-end alternatives to the current item.
  5. Under Cross-sells, search and select the products you want to show on the Cart page or inside the cart tray.
    These are typically complementary products.
  6. Click Update to save your changes.
Linked Products

Once set, these products will be used in Modern Cart wherever upsell or cross-sells options are selected as the source for product recommendations.

]]>
Control When the Cart Opens After Adding Products https://cartflows.com/docs/cart-auto-open-behavior/ Sat, 12 Jul 2025 08:48:56 +0000 https://cartflows.com/?post_type=docs&p=62503 Modern Cart gives you control over when the cart tray opens after a product is added to the cart. This lets you tailor the cart behavior to match your store’s checkout flow, whether you want to encourage quick purchases or reduce distractions.

This feature is located under the General settings tab.

Cart Auto-Open Behavior

Use this setting to control how the cart tray responds when a product is added to the cart. The default behavior is For every item added.

  • For every item added
    The cart tray slides in every time a product is added. This keeps users aware of what’s in their cart and encourages checkout.
  • For the first time added
    The cart tray slides in only when the first product is added to the cart. For any additional products added afterward, the cart tray will not open automatically. This provides a more subtle experience for repeat additions.
  • Don’t open automatically
    The cart tray will never slide in automatically when a product is added. This is useful if you want users to stay focused on browsing.

Watch the video below to see how this setting works in action:

]]>
Refresh the Checkout Page After CartFlows AJAX Calls https://cartflows.com/docs/refresh-the-checkout-page-after-cartflows-ajax-calls/ Mon, 07 Jul 2025 12:16:08 +0000 https://cartflows.com/?post_type=docs&p=62415 In some cases, especially when working with dynamic products like subscriptions, the checkout page may not refresh automatically when switching between products or options. This can lead to a mismatch in available payment methods or shipping options.

To resolve this, CartFlows provides a filter that forces the checkout to refresh and trigger the necessary AJAX calls, ensuring the correct data is always loaded on the checkout page.

This is especially useful when:

  • Switching between subscription and non-subscription products
  • Dynamically changing product options that affect checkout behavior
  • Ensuring updated shipping/payment methods based on the product or variation

How to Enable Checkout Refresh After AJAX Calls

Step 1: Add the Filter to Your Site

To make the checkout page refresh automatically, add the following code to your site’s functions.php file or use a code snippet plugin:

add_filter( 'cartflows_checkout_trigger_update_order_review', '__return_true' );

Need help adding custom code? Here’s how to safely add code snippets to your site.

Step 2: Save and Test

After adding the filter, visit your checkout page and test switching between different product types or options. The page will now refresh the order review section as expected, showing the correct payment methods and other dynamically updated options.

When to Use This Filter

This filter is particularly helpful if you:

  • Use WooCommerce Subscriptions along with other types of products with CartFlows funnel checkout
  • Offer products with conditional logic affecting checkout (e.g., special payment gateways for specific items)
  • Need to ensure the checkout page always reflects the latest data without requiring manual updates/refreshes.
]]>
How to Show Dropdown Instead of Swatches for Specific Attributes? https://cartflows.com/docs/how-to-show-dropdown-instead-of-swatches-for-specific-attributes/ Thu, 03 Jul 2025 11:24:22 +0000 https://cartflows.com/?post_type=docs&p=62353 By default, the Variation Swatches plugin replaces WooCommerce’s dropdowns with more visually appealing swatches. However, if you’d like to display specific attributes as dropdowns while using swatches for others, this can be easily done, no custom code required.

Disable Swatches for a Specific Attribute

This method allows you to manage swatches and dropdowns right from the WordPress dashboard.

Step 1: Go to Attributes

Navigate to Products > Attributes in your WordPress dashboard.

Step 2: Edit the Attribute

Find the attribute you want to display as a dropdown and click Edit.

Step 3: Change Type to Select

In the Type dropdown, choose Select and update the attribute.

Step 4: Update Global Settings

Go to WooCommerce > Variation Swatches > Settings. Under General settings, ensure that the Auto Convert Dropdowns to Label option is disabled.

This setting ensures attributes set as Select remain dropdowns on product pages.

With this method, you can mix and match dropdowns and swatches on the same product for a flexible user experience.

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

]]>