CartFlows 文檔

How To Import/Export Flows & Individual Page Builder Templates?

With CartFlows, you can make your flows portable. This means that you'll be able to use the flows to any other website through the export/import functionality.

From the WordPress dashboard, go to Cartflows > Flows.

You can use the Export and Import buttons in exporting and importing the settings and structure of the flow, not the design for each individual step.

To Export A Flow, select a flow by ticking on the checkbox, and click on the Export button. Or, mouse hover over a flow and click on the Export link. This will automatically download a .JSON file on your local computer.

[NEW] Note: With CartFlows v1.5.10, you can import the Flow / Steps with all of its content from the CartFlows Import / Export option. P.S. If you are exporting the flow from the Localhost to the Live website then it not work. It will work with live website only.

To Import A Flow, click on the Import button. Upload the .JSON file that contains the flow, then click Import. Once the import is completed, a success message will display.

Go back to the Flows and you'll find that the imported flow is already there and is in Draft mode.

Every page builder handles content differently. But, as long as it has an import/export functionality, you can move your templates around different websites.

To import a design template of Elementor, Divi, Beaver Builder, or Thrive Architect, go to the individual step and edit the page using your favorite page builder. Import your preferred template (JSON or .zip file).

To export a design template, save your design as a template and export it. The JSON file will automatically be downloaded.

Click on the following links to learn more about how to import/export templates with the corresponding page builders:

ElementorDiviBeaver BuilderThrive Architect

Learn more in this video.

How To Add Order Bumps To WooCommerce Sales Funnel?

An order bump is a feature that allows you to display an additional product on your checkout form. On average 10-30% of your buyers add on an order bump to their purchase. So, it is a great way to increase your average transaction value.

From the WordPress dashboard, edit a Flow from Cartflows > Flows.

Get into the settings of the Checkout Page by clicking on Edit.

Scroll down in the Checkout Layout section and click the Order Bump option. Tick the Enable Order Bump checkbox and the configuration options for the order bump will display.

Bump Order Skin – You can choose your bump order skin between Style 1 and Style 2.

Style 1

Style 2

Select Product – Enter 3 or more characters to display the product for your order bump.

Bump Order Position – This is where you would like to place your order bump in the checkout page. It can either be Before Checkout, After Customer Details, After Order, or After Payment.

Before Checkout

After Customer Details

After Order

After Payment

Product Image – You can select an image of the product to attract your customers.

Checkbox Label – Customize the label of the checkbox or leave it as it is.

Highlight Text – This is the title of your order bump. It could be a message with a sense of urgency to get your customers to take action.

Product Description – This is where you can add the details of your order bump product.

Discount Type – You can choose to offer your order bump at an original price or discounted one by percentage, specific price, or coupon. Enter the discount value or the coupon and it will be automatically calculated once you saved the Step.

Bump Order Style – You can customize the look and feel of your bump order by tweaking the options available in the Bump Order Style. These include:

Border StyleBorder ColorBackground ColorLabel ColorLabel Background ColorDescription Text ColorHighlight Text Color

CartFlows Order Bump Conditional Redirect

We are back with a new and awesome feature, another most-awaited and exciting feature with the CartFlows Pro 1.6.0. We are pleased to add the CartFlows Order Bump Conditional Redirect feature.

This feature will help you to redirect the user to another page i:e Upsell or Downsell if the order bump product is purchased. 

Let』s see how it will work.

When the user clicks or adds the Order Bump product on the checkout page and makes the purchase then CartFlows tests if the order bump product is purchased or not.

If it is purchased then it will take the page which is selected in the conditional option setting and redirect the user to that page that may be Upsell / Downsell.

To enable this feature there are really simple steps and they are as follows –

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

Step 2: Click on the Edit button on checkout page

Step 3: Scroll down the page till the checkout setting metabox and click on the Order Bump Tab

Under 「Order Bump Conditional Settings」 select the page to which you want to redirect the user after purchasing the order bump in  「On Order Bump Purchase – Next Step」 option』s dropdown list.

Step 4: Save the changes and it is done.

Few Common Questions (FAQs)

Q – What happens if there are multiple products added on the checkout page?Ans – Even if multiple products are added in the checkout page it will work only if the Bump Order product is purchased.

Q – How does it will work in the case of the Global Checkout option?Ans – It will work the same way as it is working without the Global Checkout page. i:e it will work only if the Bump order is selected/purchased.

How to Move the Step from One Flow to Another?

If you are looking on – How to move the step from one flow to another, then this article is for you.

In CartFlows we have already added Import/Export feature to easily move/shift the flows from website to another.

But in some cases, there might be a need to move only one Step from one Flow to another. That means to create the exact same step which is already present in another flow.

So there is a very easy way using which you can move the already created step from one flow to another flow. 

To move the flow, you have to open the step in the page builder which you are using and simply export the UI/Design of that step using the page builder. 

Now, once you have exported the step』s UI/Design, go to the flow to which you want to move this step and create a blank step type of your choice, such as landing/checkout/upsell/downsell/thank you. 

For Example: If you want to move the landing step from Flow 1 to Flow 2 then create a blank step of landing type in Flow 2.

Click on above image to watch the small video

Once you have created the blank step in the second flow just open that step in the same page builder and import the previously exported step using the page builder』s import/export feature. 

If you have more questions on how to import the page using the page builder then check this article.

Elementor Error: The Content Area Was Not Found in Your Page

If you』re using CartFlows and Elementor and you are getting below message when you are trying to edit the CartFlows pages, this article is for you:

Sorry, the content area was not found in your page. You must call the_content function in the current template, in order for Elementor to work on this page.

 Possible Problems and Solutions:

In our experience, below are the things that can cause this error:

Issue with Permalinks:It is possible that your permalinks structure has a problem and need to be refreshed. Refresh Permalinks two-three times and most probably the problem should be resolved.

Trying to edit the blog page:Dynamic pages (like blog page) can not be edited directly with Elementor. You can only edit the static pages from Elementor. If you need to create dynamic pages and have Elementor Pro, please take a look at their documentation.

Conflict with other plugins:If the solution above does not work, let』s see if it is caused by some plugin installed on the website. To check that, temporarily deactivate all plugins (except Elementor of course) and see if this solves the problem. Then activate them back one by one until the problem returns. That way, you can identify if there is some plugin that』s causing the issue.

If none of the solutions above work, try solutions mentioned in the Elementor』s documentation.

How To Create A Marketing Sales Funnel?

This is the A to Z process of creating a marketing sales funnel for your business.

1. Order Domain Name and Hosting

This is the first step for you to be able to create any website. The domain name is your website address and hosting is where you host your site to be visible on the Internet.

2. WordPress Install and Setup

Once you're done with purchasing a domain and hosting, you need to install WordPress. Most hosting providers offer a 1-click install solution for setting up WordPress. So, this step should be pretty quick and easy. Another thing that you need to install is the SSL security certificate to change your site from HTTP to HTTPS.

From your WordPress admin dashboard, go to Settings > Permalinks and select Post name. Click on Save Changes.

3. Add Theme and Plugins

From your WordPress admin dashboard, go to Appearance > click Add New. Astra Theme is a free theme and highly recommended with different free website templates that are ready to use. Install your selected theme and Activate.

Add an eCommerce plugin for your website by going to Plugins > Add New. Search for WooCommerce, Install and then Activate. It's a free eCommerce plugin for WordPress and empowers most eCommerce sites. You'll be redirected to the Setup Wizard where you can configure your online store details, payment method, and shipping information. Connect your Payment Gateway to your website.

Once you've completed setting up WooCommerce, go to the Products menu in your WordPress dashboard. Add New to create a new product that you will add to your sales funnel.

The next plugin that you need to add is a Page Builder plugin. Elementor is the number one page builder with over 3 million websites using it. It's free and very easy to use. However, Elementor Pro, which is the paid version, has more functionalities that will be very useful for creating a seamless sales funnel. You can, however, install any page builder that you prefer.

Now, you need to install CartFlows, the number one Funnel Builder for WordPress. It has a free version where you can create funnels and customize the WooCommerce checkout page. CartFlows Pro is the paid version where you can have multiple checkout styles, add order bumps, upsells and downsells, configure the fields and add custom fields, and a cart abandonment feature.

In CartFlows > Settings, under General Settings, select the page builder that you are using. It has defaulted to Elementor but CartFlows is also compatible with Divi, Beaver Builder, and Thrive Architect. This defines the templates to display that are compatible with your page builder.

4. Create Your Funnel

From your WordPress dashboard, go to CartFlows > Flows > Add New.

Note that the Import and Export can be used for transferring funnels from one website to another. You would also need to import or export the page templates that you used for your funnels.

There are readily available funnels that you can use if you don't want to start from scratch. Simply select and click Import. This is going to download and import everything for you, the images and the structure of the funnel.

Once everything is downloaded, enter a name for your funnel. Click Update. You'll find the default steps included in your funnel.

5. Configure Your Checkout Page

Select the Checkout Page step and click Edit. This is where you can add a specific product to your checkout page and customize the page according to your preference.

To learn more about customizing your checkout page, click here.

6. Add Upsell / Downsell

If you decide to add an upsell or a downsell, simply click on Add New Step. You'll see again the templates popup where you can choose a template for your upsell or downsell.

If you add an Upsell or Downsell Step, you'll find that in the Offer Page Settings > Shortcodes, there are two links which correspond to when the customer says yes to your offer and decline your offer. If the customer clicks on the Yes link, he will be automatically charged.

In the Select Product Option, select the product that you're going to upsell, the quantity, the discount type, and discount value.

Custom Script allows you to add scripts if you want to add bots, custom pixels, or live chat to your page.

7. Set Your Landing Page as the Homepage

From your WordPress dashboard, go to Settings > Reading. Choose static page and select the landing page you created for your funnel.

8. Test Your Funnel

Go back to CartFlows menu > Flows, then Edit the flow. At the right-hand side, uncheck the Enable Test Mode checkbox under the Flow Settings. This enables you to test the actual flow of your funnel. Make sure that you have set up the payment gateway properly.

But, if your payment gateway is still in test mode, you can use this test number 4242 4242 4242 4242 ( if you're using Stripe ) on the checkout page. Click here for more Stripe test numbers that you can use.

Open your site in another browser or in an incognito window and you'll see the landing page which you set as the homepage. Follow the call to actions and you'll be redirected to the whole flow.

Learn more in this video:

Did you know that?

You can also use CartFlows in a non-eCommerce-related funnel. For instance, you can use it for a lead generation funnel. All you would need in a flow are two steps: 1) the landing page containing a lead generation element, and 2) the thank you page.

How to Enable Google Analytics Tracking in CartFlows?

CartFlows introduces the Google Analytics Tracking feature in CartFlows v1.5.0.

Pre-requisites –

There are few Pre-requisites like –

You need to create a Google Analytics Account. Haven't Setup yet? – follow the steps hereNext, you need to get the Google Analytics ID, follow the steps hereCopy the Google Analytics ID, you will need to paste it in the CartFlows Settings

Steps to Add Google Analytics ID in the CartFlows Settings –

Step 1: From your WordPress dashboard, go to CartFlows > Settings

Step 2: Scroll down to the Google Analytics Settings and enable the option – Enable Google Analytics Tracking

Let's see how we can enable this feature. Navigate to WordPress Dashboard > CartFlows > Settings > Google Analytics Tracking section.

Enabling the above option adds the Google Analytics code on the CartFlows Steps.

And the next checkbox option will enable the Google Analytics Tracking Code on the whole website.

Step 3: Now, you will see a field to insert the Tracking ID in the Google Analytics ID field. If you do not have the Tracking ID you can get it from here.

Step 4: After inserting the ID, you will see a list of Events which CartFlows provides, they are –

Begin CheckoutAdd To CartAdd Payment InfoPurchase

If you are facing any issues, you can refer to our Troubleshooting article of Google Analytics!

How to Resolve Checkout Page Getting Redirected to Home Page of Your Website?

Is your CartFlows Checkout page getting redirected to the homepage of your website? If yes, then let's see how you can get this resolved in a few simple steps and would take less than a minute. 

First, let me tell you why it happens and when it can occur. This unnecessary redirection will occur only when you have set the CartFlows Checkout page as a Global Checkout.

So, our time starts now to resolve it –

In the Global Checkout, your checkout process becomes very simple such as the Shop page -> Cart page -> Checkout page.

So, in this case, when you click the Proceed to checkout button on the cart page, you should get redirected to the CartFlows checkout which is set as Global checkout.

But it never happens and instead, you get redirected to the homepage of the website.

This usually happens because of the WooCommerce setting i:e proceed to checkout action does not know which one is the checkout page. As it has been identified by selecting the checkout page under the WooCommerce Settings.

Yes. This is very simple, you just have to select the correct checkout page in the WooCommerce setting to stop this redirection and resolve it.

You can follow the below steps which will give you a clear and step-by-step guide –

Step 1: Goto WooCommerce -> Settings -> Advanced Tab

Step 2: Under the Page Setup section, select the checkout page that you have created or that is present.

Step 3: Click the save button to update the setting. And this should be resolved!

Note: In this setting, only the WooCommerce』s checkout page will appear and not the CartFlows.

What is the 「Your Cart is Empty」 Error Message?

Let's see how we can resolve the error message that you are currently facing on your checkout page – 「Your Cart is Empty」.

This error message means that there is no product added in the cart. This message will be displayed only on the checkout page when it is set as a Global Checkout.

As you can see in the Global Checkout feature when you set the Checkout page as a Global Checkout then your checkout process will be changed to Shop page -> add-to-cart -> Cart Page -> Checkout page. This will be the CartFlows checkout page.

If the checkout page is opened directly using the URL and without adding at least one product in the cart from the Shop or Single Product』s page then only you will get the 「Your Cart is Empty」 error message.

So, to avoid this error message and to view the checkout page, then you will need to add at least a product in the cart from the shop or the single product』s page. Then proceed to the cart page and then to checkout.

Note: In order to display all the error messages, there should be default WooCommerce』s cart and checkout page created in the pages menu of your WordPress.

How to Resolve the Recovery Email Going to Spam?

The WooCommerce Cart Abandonment Recovery plugin provides a feature to recover your sales.

This feature requires sending emails that are scheduled at a specific time and are sent by the site host or the SMTP plugin if you are using it.

Here the Woocommerce Cart Abandonment Recovery plugin here does not send the actual email. So the Cart Abandonment plugin is not responsible if recovery emails are going to spam. 

Why emails going to the spam folder of the receivers?

There could be many reasons for any email going to the receiver』s spam folder. You can check those reasons explained in detail in the following docs –

Reasons Your Emails are landing in Spam FolderWhy Your Emails Go To Spam

How to prevent the emails from going to receivers the spam folder?

Here is another doc that explains how to prevent the email from going to spam folder:

Prevent Emails Going Into Spam Folder

You can also contact your hosting provider for more information regarding this issue.