CartFlows 文檔

How to Troubleshoot a Conflict with the Plugin & Theme?

Are you facing like CSS not being applied correctly, continuous loading of Checkout Page or even Cart not loading correctly? This could mostly be due to some plugin conflict.

Or are you seeing the Checkout Page messed up, or Cart Items stacked on one side? Also, there could be cases where you are seeing your product getting replaced in the cart. Such cases are mostly due to custom changes in the theme or plugin conflict.

Here are some easy steps you can follow to troubleshoot and resolve such conflicts on your own until help from the Support arrives –

Step 1: Switch to Default Themes

Firstly, try to temporarily switch to another theme, like default themes like – Twenty-Twenty or Twenty Nineteen and check if the error or issue persists.

Step 2: Deactivate all Plugins except CartFlows and WooCommerce

Next, you can deactivate all the plugins temporarily and see if that solves the error. If it does then activate plugins one by one to see which plugin is causing the problem.

Note: These are the general debugging processes that all WordPress support teams perform to find 90% of the problems. If you're concerned the debugging process might break your website, you can take a quick backup of your website.

Below is a video that explains the Troubleshooting process –

Do get in touch with our Technical Support, if the issue persists even after following the above-debugging steps. Also, if possible do provide us with the Staging setup and permission to debug this issue on your live site.

How to Setup A/B Testing with Google Optimize for CartFlows?

Currently, CartFlows doesn't provide native A/B Testing.

For now, you can use the Google Optimize to perform A/B Testing in CartFlows.

Step 1: Login to your Google Optimize Account.

Step 2: Create a container or account

Step 3: Create your first experience

Step 4: Create the Variants

Step 5: After creating variants set the rules as per your needs

Step 6: Connect your analytics with Optimize and add the below code on your site's page which you are going to optimize.

Step 7: The above code will be provided by the Google Optimize dashboard. This will be auto-generated once you connect it with your analytics and add the objectives.

How to Test the Working of the same?

Google recommends installing the following Chrome Browser extension for better test results – Google Optimize.

How to Translate or Change CartFlows Strings with LocoTranslate?

You can use the Loco Translate plugin to change the string/text which are coming from the CartFlows or CartFlows Pro plugin.

In fact, you can use the same method to change or modify the text/string from other plugins too if they provide necessary compatibility for translating the texts/string.

Sometimes, you may notice that the stings/wording on the CartFlows Checkout page is not suitable to the type of the product that you are using. So, for that you want to change that string/text but what if there is no option in the setting to change the text? In this case, the Loco Translate plugin comes to help.

Changing the string/text using the Loco Translate plugin is really easy. Let』s see those simple steps one-by-one –

Step 1: Go to Loco Translate -> Plugins

Step 2: Click on the plugin from which you want to change the string.

Step 3: Click on the New Language button to add the language

Step 4: Select the language in which you want to change the string.

Step 5: Click on the Sync button to get all the strings of that plugin

Step 6: Search & select the word/string that you want to change and add the changed string in the given option.

Step 7: Click on the save button.

Note: If string is changed for this setting then it will change for all the flows that are present on your website.

Introducing the 「Separate Orders」 Feature in CartFlows?

In the latest release of the CartFlows free version and the CartFlows Pro v1.5.5 and above, we have released a new feature known as 「CartFlows Separate Orders」.

This feature will allow you to create Separate Orders for each Upsell & Downsell product purchases.

Previously, in the CartFlows, all the products which are purchased from the Checkout page, Upsell & Downsell pages are getting added in the one single order of WooCommerce. In that case, the main order's order status gets set to MainOrderAccepted.

Now, we have introduced a new option as 「Create a New Child Order」. This option will create an separate orders for each of the pages which are checkout, upsell & downsell.

This option is added in the new menu located under the CartFlows menu –

Step 1: Visit CartFlows -> Global [New Menu-option] requires CartFlows Pro v1.5.5 and above.

Step 2: In this setting there are two options and they are as follows –

Add to the main order: This option will merge all accepted Upsell / Downsell offers into the main order. As it was the default working of the CartFlows.Create a new child order: This option creates a new order for all accepted Upsell / Downsell offers. The main order (product purchased from the checkout page) which has been placed from the checkout page will be parent order for all the orders placed from the Upsell & Downsell.

This new option to create a child order will create a separate order for checkout page, upsell and downsell which will be displayed in the WooCommerce -> Orders.

This feature will help store owners in various ways. Such as it will become easy to refund the Main Product & the Offer Product. As you can decide whether to create Separate Orders for the upsell & Downsell products.

This will also help solve the problem of the order generation email not getting sent due to the order status not getting changed to complete. Which was getting set as MainOrderAccepted if the user leaves the checkout process on the Upsell & Downsell page by closing the browser window.

If you are selling the course products from the Upsell & Downsell pages then this will also give you access to the course products as soon as the product is purchased as the order will be placed separately and the order status will be changed to complete/processing.

If the new order is created for the Upsell & Downsell then WooCommerce will automatically send the order related notification emails to the users as soon as the products are purchased.

These are some of the cases that will be automatically solved and there are others too which depends on the situation and the case of the checkout process.

How to Style the Highlight Product Section?

We have provided some basic options to provide the flexibility and modify the design & the text that will be displayed on the frontend along with the border color, text color, and the Highlight Product section』s background section.

To find these options please follow the below steps.

Step 1: Goto CartFlows -> Flows

Step 2: Your_flow -> Click on edit button on the checkout step.

Step 3: Goto Select Product Options Tab and enable the Enable Product Options checkbox

Step 4: Now, under the Selected Products Section, open the product options by clicking on the small arrow. Add the text as per your needs and Enable the Highlight option (4)

Step 5: Add the Highlight text as per your necessity.

Step 6: Update / Save the page.

The above steps will guide you to set up the CartFlows Product Highlight feature. Now to do more customization such as changing the color of the text, section, and the border color, you can find these settings by scrolling down the same page under the Design Setting.

How To Embed A Checkout Form on the CartFlows Checkout page?

With CartFlows flexible step technology, you have full control over the content in a step.

Sometimes you may want a checkout on a landing page or a long-form sales page. It's very easy to accomplish this inside the checkout step of your flow.

First, the CartFlows Shortcode is [cartflows-checkout]. This shortcode will display the checkout fields on the Checkout page. So that the users can Checkout by adding their Billing & Shipping information to purchase any product.

To add this shortcode you have to copy it from the backend setting of CartFlows Checkout page under the shortcode tab and paste it to the Checkout Page with the help of your page builder or you can directly add it in the content area of the page.

Next, in the checkout step, you can place the checkout shortcode anywhere on the page.

But, this shortcode should be pasted only on the CartFlows checkout page. If you add it on any other pages then it will not work and may result in the error messages.

If you add the CartFlows checkout shortcode on any other page then it will display the message saying Checkout ID not Found ( Place the Checkout ID in the Correct place )

How to 「Highlight Product」 in CartFlows Checkout Page?

CartFlows Pro version 1.5.4 and above introduces the latest feature for Checkout Page which is 「Highlight Product」.

In this article we will know more about our new feature and its functionality.

The Highlight Product feature will let you highlight one of the product variations that you have selected in the backend setting of the checkout page with a very appealing design.

Here』s an reference image –

This Highlight Product feature will work only on the CartFlows checkout page if you have enabled the Product Option Checkbox from the Product Options Tab.

Here in the Product Options tab there are four sections and they are as follows:

Selected Products: This section will display all the products that you have selected from the Checkout Layout > Select Product Section.

In this same section, when you open a particular product by clicking on the small dropdown arrow, then you will see a few more product options.

Note: In the product options the Highlight Product option can be found. Refer below screenshot.

We provide some shortcodes for the selected product which will fetch the respective product name, quantity, discount value and discount percent so that you can modify the product subtext accordingly.

Following are Shortcodes available in the Select Product section:

{{product_name}}: This will display the respective Selected Product』s name.{{quantity}}: This will display the respective Selected Products』s Quantity which is set from the Select Product tab -> Product』s option.{{discount_value}}: This will display the discounted amount.{{discount_percent}}: This product will display the discount percentage.

2. Product Options conditions: Here in this section you can set the display rules for the highlight product & the variation products too.

3. Layout Options: This section will display the below options –

Section Title: To set/change the section titleSection Position: To change the position of the section. So that you can easily place this section Before Checkout Section, After Customer Details and Before Order Review.Skin: The layout/design of the section. This has two options, Classic & Cards.Show Product Images: Displays the Product Images.

4. Design: Here in this section, the designing option for the Highlight Product options are provided. Using this section you can change the text, background colors of the highlight product.

This feature will not work if you are using the CartFlows Global Checkout page.

The reason behind this is that when you set the Global Checkout ( Learn More ) this replaces the default WooCommerce Checkout page with the CartFlows and the variation of the product has been already selected and added in the cart from the single product page.

How to Enable/Insert Coupons on the CartFlows Checkout page?

In this article we will see the below steps to –

Enable/Setup the coupon fieldDisable/enable the Coupon on a particular Checkout page of the CartFlowsChange the coupon field & the button text

Enable/Setup the coupon field

First, let's see how to create a coupon.

The Coupon plays an important role on the E-commerce website. As they are mostly used to offer the discount based on various aspects such as Cart total, Product based as well as on the Shipping too.

So, to create the coupon, you will need to enable the coupon setting from the WooCommerce -> Setting page and set up the coupon as per your needs and for that WooCommerce has done a great job by making in-depth and step-by-step documentation on the coupon.

This is the article you can follow to enable the coupon and create a coupon on your store.

Once you have done creating and setting up a coupon on the CartFlows checkout page, the Coupon field will automatically be displayed on the frontend.

Disable/enable the Coupon on a particular Checkout page of the CartFlows

If you want to disable the coupon of a particular checkout page then we have provided the setting in the backend setting of the checkout page of the CartFlows.

To enable/disable the coupon field you can follow below steps –

Step 1: Go to CartFlows -> Flows -> Your Flow

Step 2: Click on the Edit button of the checkout page

Step 3: Navigate to the Custom Fields tab and Enable the Coupon field option.

Change the coupon field & the button text

In some cases, you might have to change the string/text of the coupon input field and the button. For this customization, we have added the filter using which you can change the field texts as per your needs.

The name of the filter is 「cartflows_coupon_field_options」 and it accepts one parameter in the array format which contains the field text and the button text.

Below is the code for the filter –

/**
* Change the CartFlows Coupon Field text and Button text.
*
* @param array $coupon_field array of field strings/texts.
* @return array
*/
add_filter( 'cartflows_coupon_field_options', 'change_cartFlows_coupon_field_strings', 10, 1 );

function change_cartFlows_coupon_field_strings( $coupon_field ){

$coupon_field = array(
'field_text' => __( 'Coupon Code', 'cartflows' ), // Coupon input field text/placeholder.
'button_text' => __( 'Apply', 'cartflows' ), // Apply coupon button text.
'class' => '', // Coupon input field class.
);

return $coupon_field; // Returning the modified data with new strings.
}

Note: Add the above filter to your child theme』s functions.php, here』s an article to help you Add Custom code.

How to Refresh / Flush WordPress Permalinks?

Whenever a new Custom Post is added through a plugin or code; usually WordPress permalinks needs to be flushed.

Step 1: In the WordPress admin area, go to 「Settings > Permalinks」Step 2: Click 「Save Changes」Step 3: Permalinks and rewrite rules are flushed.

Elementor Widgets of CartFlows

We are pleased to announce that we have successfully released Elementor widgets in the CartFlows 1.5.18 & CartFlows Pro』s 1.5.10 versions. These widgets will provide more styling options for the shortcode and increase the flexibility to design the CartFlows pages.

These widgets are being introduced by CartFlows and not the Elementor to bring a whole new experience. For which we have divided them into two parts CartFlows free and the CartFlows Pro widgets.

In the CartFlows, you will get widgets for all the shortcodes that are available in the free as well as Pro version and they are as follows

Next Step Button/Link WidgetOptin Form WidgetCheckout Form WidgetUpsell & Downsell Shortcodes including Product variations and offer accept & reject Widget.Order Review Widget ( Thank you page).

These widgets will be displayed only on their respective pages. That means when you open/edit the landing page in the elementor editor then you will see the Next Step Button/Link widget. Similarly for the rest of the steps/pages.

Let』s see, respective widget's page/step wise and how it's setting can be managed –

Page 1: Landing page and it』s widget

This Page has one widget and that is the Next Step widget.

# Settings in Content Tab: Here you will get the settings to change/add/update/delete the string on the next-step button and you can add the icon as well.

# Setting in Style Tab: There are two tabs one is General & Content in which you will get all the designing options to design the button/link.

# Setting in Advanced Tab: In this section, you will get all the designing options of the section on which the model is displayed.

Page 2: Optin Page and it』s widgets

This Page has one widget and that is the Optin form widget. Do make sure your product is Simple, Virtual, and Downloadable to use the Optin form.

# Setting in Content Tab: In this section you will get the text and width setting of the optin fields.

# Setting in Style Tab: In this section you will get the styling options for the form text, field texts and the button texts.

# Setting in Advanced Tab: In this section you will get all the designing option of the section on which the model is displayed.

Page 3: Checkout Page & it』s widgets

This page also has one widget and various design options for various features. Such as Bump Order, Pre-check Offer.

# Setting in Content Tab: Here in this tab you will get the content setting for Billing & shipping Fields, Bump & pre checkout offer and product options.

# Setting in Style Tab: Here in this section, you can change the design of the checkout page features as mentioned above.

# Setting in Advanced Tab: In this section, you will get all the designing option of the section on which the model is displayed.

Page 4 & 5: Upsell & Downsell pages

As you all know, these pages support variation products as well. That means you can display and sell the variation products from the upsell & downsell pages. By default there are several shortcodes that are available in the backend setting of these pages similarly for the same, we have introduced an elementor widget for it.

# Setting in Style Tab: There are separate styling options for each of the widgets. These widgets are as follows –

Offer Yes/No Button: To display the offer accept or reject button.Offer Yes/No Link: To display the offer accept or reject links.Offer Product Title: Displays the offer product title and dynamically displayed.Offer Product Price: Displays the offered product price and dynamically displayed.Offer Product Description: To display the product』s description and dynamically displayed.Offer Product variation : To display the variation of the product if it is available )Offer Product Quantity field : To give option to the user to select the quantity of offered product.

# Setting in Advanced Tab: In this section you will get all the designing option of the section on which the model is displayed.

Page 6: Thank You Page & it』s widget

Using this widget you can design setting as well as you can enable/disable the sections which are displayed in the thank you page order review form

# Setting in the Style Tab: This tab has all the required styling options to change the look and feel as well as the overall appearance of the order review form.

# Setting in Advanced Tab: In this section you will get all the designing option of the section on which the model is displayed.

All of the widgets and settings are provided to provide more flexibility while designing the CartFlows pages and to avoid the confusion regarding which shortcode needs to be added and on which page it has to be added.

If you are not using the Elementor Page Builder, and want to use it in the default way i:e using the shortcode then this article will help you to understand the right places of the shortcodes.

Happy Designing!!