CartFlows 文檔

How to Use LearnDash with CartFlows

LearnDash is a course builder plugin for the WordPress environment and using which you can create a course and sell it online using WooCommerce.

Any plugin that integrates with WooCommerce should work with CartFlows.

In this video, you will see how to integrate LearnDash with WooCommerce.

Once you have integrated the LearnDash with the WooCommerce, then follow the below steps to sell the course products using the CartFlows.

Step 1: Create a Course Product in the WooCommerce

Step 2: Attach the course to the product which you want to sell once that product is purchased.

Step 3: Once the product is been set up in the WooCommerce, Go to CartFlows -> Flows -> Your Flow

Step 4: Select that WooCommerce product in the backend setting of CartFlows checkout/upsell/downsell page

Step 5: Save the changes and you are ready to sell the course from the CartFlows with all dynamic features.

List of all the Supported Payment Gateways by CartFlows

Following are the pages in the CartFlows where the Payment Gateways can be implemented –

Checkout PageUpsell / Downsell

Checkout Page

The CartFlows – Checkout Page supports all the payment gateways which are supported by WooCommerce.

You just need to have the required integration enabled or the respective plugin installed, activated for the Payment Gateway to work with the CartFlows too.

Note: Almost all the Payment Gateways which are being used on the Checkout page, will also work with Pre-Checkout Offer and Order Bump.

Upsell / Downsell

The following are the supported Payment Gateways by CartFlows' Upsell / Downsell page –

COD / BACS / PayPal StandardCheckout Plugins Stripe For WooCommercePayPal Express CheckoutWooCommerce Stripe Payment GatewayAuthorize.NetMollie Credit Card & iDEAL WooCommerce Square Payment Gateway

Note: The Payment Gateways like Cash On Delivery / BACS / PayPal Standard are default WooCommerce Payment Gateways that do not require any plugins to integrate them.

Cash on Delivery – COD

Payment Gateway: Cash on DeliveryPlugin Supported: Not required, comes by default with WooCommerce.

Direct Bank Transfers – BACS

Payment Gateway: Direct Bank TransferPlugin Supported: Not required, comes by default with WooCommerce.

PayPal Standard

Payment Gateway: WooCommerce PayPal Payment Gateway by WooCommercePlugin Supported: Not required, comes by default with WooCommerce.

Note: Most of us have already gone through the WooCoomerce Setup Wizard, to locate the above Payment Gateways options visit WordPress Dashboard > WooCommerce > Settings > Payments.

Checkout Plugins Stripe For WooCommerce

Payment Gateway: Checkout Plugins Stripe For WooCommerceAbout Info: Compatible with Credit Card Payment MethodPlugin Supported: Requires the free Checkout Plugins Stripe For WooCommerce plugin available on WordPress.org installed and activated.

PayPal Express Checkout

Recently, renamed to WooCommerce PayPal Checkout Payment Gateway.

Payment Gateway: PayPal CheckoutRequires the free WooCommerce PayPal Checkout Payment Gateway plugin available on WordPress.org installed and activated.

Stripe

Payment Gateway: Stripe Payment GatewayAbout Info: Compatible with Stripe's Credit Card Payment MethodPlugin Supported: Requires the free WooCommerce Stripe Payment Gateway plugin available on WordPress.org installed and activated.

Note: Stripe provides a variety of payment methods, but CartFlows currently only supports the Credit Card option.

Authorize.Net

Payment Gateway: Authorize.Net Credit CardAbout Info: CartFlows currently only supports the Credit Card option of Authorize.Net Payment Gateway. Plugin Supported: Requires the official Authorize.Net plugin which is available on the WooCommerce store.

Mollie

Payment Gateway: Mollie Payments for WooCommerceAbout info: CartFlows currently supports only Credit Card and iDEAL Option of Mollie Payment Gateway.Plugin Supported: Requires the official 「Mollie Payments for WooCommerce」 plugin which is available on WordPress.org.

WooCommerce Square

Payment Gateway: WooCommerce SquareAbout info: CartFlows currently supports only the Credit Card option of Square Payment Gateway.Plugin Supported: Requires the official 「WooCommerce Square」 plugin which is available on WordPress.org.

We are striving to add more Payment Gateways and they are lined up. Stay Tuned!

Note: Not all payment gateways support the one-click upsells feature, but yet we will add more gateway support in the future updates of CartFlows for upsell/downsells.

How to Create Conditional Upsell & Downsell in CartFlows?

What is Conditional Redirect?

The Conditional redirection is to send the user from a Checkout Page to Upsell or Downsell Page or finally to the Thank You page.

To be simply put, when the user makes a choice on Upsell Page to either accept he can be redirected to the Downsell or to the Thank You page.

Here's an Flow of how you can create Conditional Upsells and Downsells.

How will Conditional Upsell & Downsell help?

The Upsell and Downsell are an integral part of a Funnel Builder. And we believe it should be used rightly to maximize the flows and eventually make the funnel as effective as possible.

For the same we just need to create not the flows having Upsell and Downsell but make them Conditional.

How to achieve this in CartFlows Pro?

Step 1: Go to the required Flows in the CartFlows and then add an Upsell and Downsell.

Step 2: Now, firstly you need to select the Product you will Upsell from the Select Product section.

Step 3: And next, you will need to set the condition on which the user when the user selects Yes and No. The Yes could take him to the Downsell and finally to the Thank You page.

Step 4: Similarly, for the Downsell. This can be iterated based on the products you can Upsell or Downsell.

Step 5: And now your Flow is complete with the Upsell and Downsell.

If you are not getting any option in the dropdown to set the conditional redirect then it is because there are no possible offer steps after the current offer step on which you are setting the conditional redirect.

How to Enable Facebook Pixel Support in Cartflows?

CartFlows provides Native Facebook Pixel Support, let's see the steps to enable it and how we can test its working.

Pre-requisites –

There are a few Pre-requisites like –

You need to create a Facebook Ads Account. Haven't Setup yet? – follow the steps here.Next, you need to get the Facebook Pixel ID, follow the steps hereCopy the Facebook Pixel ID, you will need to paste it in the CartFlows Settings

Steps to Add Facebook Pixel ID in the CartFlows Settings –

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

Step 2: Scroll down to the Facebook Pixel Settings and enable the option – Enable Facebook Pixel Tracking

Step 3: Now paste the copied Facebook Pixel ID under Enter Facebook Pixel ID option

Step 4: You can track the events by enabling the options under Enable Events

Step 5: Just Save the Changes and you have successfully added Facebook Pixel ID for the CartFlows checkout page events.

How to Test or Verify the Working of Facebook Pixel Support?

For testing the working of Facebook Pixel on your Checkout Page with Google Chrome Browser, you will need to have the following Google Extension – Facebook Pixel Helper

To read more about the Errors or other issues you can refer to the following Pixel Helper article by Facebook.

Flow In Test Mode

You may have a question that is What is the Test Mode? Here in this article, we will see what it is exactly and how it is used.

Note: This test mode is used to test/view the CartFlows without actually placing an order. This setting does not control the test/sandbox setting for any of the payment gateway. Each payment gateway has its own sandbox/test mode setting to stimulate the payments.

Test Mode is a simple option that is added in the CartFlows under Flow's setting menu as you can see in the above image.

Let's see how to enable/disable the test mode for the CartFlows flow.

Step 1: From your WordPress dashboard, go to CartFlows > Flows. Select a Flow and click Edit.

Step 2: Click on the setting tab and select the Sandbox tab.

Step 3: Uncheck the check box to disable the test mode if checked and check it to enable the test mode if it is unchecked.

This option is added to help preview editing/design of the CartFlows pages while actually designing them in your page builder. If the test mode is enabled then you don't need to add/select any product in the backend setting of the Checkout, upsell/downsell, optin pages.

Because the funnel creation/designing is in process, and hence it will automatically choose a random product from the WooCommerce Products that you have created and will be added to the cart so that you can easily view the page for testing purposes.

This option also helps you to share the direct URL of the page to your team members to check or even design some sections on the page. As the flow is in Test Mode.

When you are viewing any of the CartFlows step/pages in the frontend then a message will be displayed at the bottom of the page saying the test mode is ON/Enabled.

If you are done with the testing or designing the pages/steps and planning to make the funnel live then you should disable the Test Mode from the Flow setting.

Simply uncheck the option and update.

 Frequently Asked Questions

Q. Is this test mode related to the payment gateways?

The CartFlows test mode is only used to view/design the pages without placing an order to view/test the design of the page.

Q. Test mode is not working?

The test mode selects the random product to be added in the cart to display the checkout page and selects a random order from the WooCommerce to display the Thank you page. If there are no products and no orders present in the WooCommerce -> Orders then the test mode will not work. So, it's mandatory to have at least one product and one order in WooCommerce.

This test mode does is not related to any of the payment gateways. To check the working of the flow i:e to check whether the payments are going through or not has to be checked by putting the payment gateway in the test/sandbox mode.

How to resolve 「Checkout ID not Found」 Error message?

We will see in this article, how to resolve the 「Checkout ID not Found」 error you are seeing on your Checkout page.

Usually, this error message means that the CartFlows page ID does not match with the Page on which you have added the [cartflows_checkout] shortcode.

You may get this error message in two cases. Below are those cases.

Case 1: While editing the checkout page in your page builder

In this case, while editing the Checkout Page in the page builder, you may get this error message. Because in the page builder i:e editor mode of page builder, some WooCommerce functions are not available to access this error will be displayed.

Solution: To solve this, you just need to edit your checkout page and update the page and check the page by closing the page editor i:e. Exiting from the page builder.

Case 2: Shortcode misplaced

In this case, if the [cartflows_checkout] shortcode is placed on the other pages of WordPress or different pages which are not of the CartFlows.

Solution: To solve this error, you need to add the [cartflows_checkout] shortcode only on the CartFlows Checkout page and any other pages.

Note: This shortcode will not work on the CartFlows Upsell, Downsell, Optin, Thank you pages as well. It only works with the CartFlows checkout page.

Refer to this article to find on – Placing Shortcode in the Right Places!

How To Connect Stripe Payment Gateway?

Stripe is our favorite payment gateway because it's the most flexible and easy to work with.

In CartFlows, we have added custom support of the official WooCommerce Stripe Payment Gateway plugin By WooCommerce for upsell and downsells as well. This Stripe gateway plugin is free to download. You can get it from here.

Configuring this stripe gateway is really easy. Let's see how to install and configure this gateway. But first, let's go through the below video.

As you have gone through the video, now, let's see the steps to install and activate the Stripe Gateway.

Step 1: First navigate to the WordPress's Plugins -> Add New Menu

Step 2: Search for the 「WooCommerce Stripe Payment Gateway「

Step 3: Once you get the search results, search for the stripe plugin by WooCommerce and click install and activate.

Step 4: After activating the plugin, navigate to the WooCommerce -> Settings -> Payments Tab -> Stripe

Step 5: Select the plugin environment Live/Sandbox and add the API credentials and click the save button.

Here is the full setup guide of the official Stripe for the WooCommerce plugin.

How to Activate the License of the CartFlows Pro on Multisite?

If you're running a WordPress Multisite, CartFlows can be installed via network activation or manual activation, depending on whether you're using the free or the Pro version.

On the multisite network, refer Network Activate step to install & activate the CartFlows Free version and for the Pro version refer to the Manual Activate step for all child sites.

Network Activate ( For Free version )

It means running a plugin on each child site on your multisite network. You can use this method if you're using the free version of CartFlows as this is not supported by the CartFlows Pro plugin.

Goto network admin dashboard and simply go to Plugins menu > Add New. Install the CartFlows (free version) plugin as you would in a single WordPress site.In the Installing Plugin screen, click Network Activate.

Manual Activate ( For Pro Version )

CartFlows Pro can only be activated manually. This is done by logging in to the child site as a network admin and then activating the plugin.

In the network admin dashboard, simply go to Plugins menu > Add New. Install the CartFlows plugin. In the Installing Plugin screen, click Return to Plugin Installer.Go to the site admin screen of the site where you want the plugin to get activated.Select CartFlows under Plugins.Click Activate.Provide the license for CartFlows Pro.

Introducing Upsell Downsell Shortcodes!

CartFlows Pro version 1.5.3, introduces the much awaited shortcodes for the Upsell and Downsell pages.

These Upsell & Downsell shortcodes will provide more control and help you to add/display information of Variation Product on the upsell & downsell pages. So that you can let users know which product they are buying and the price of it.

Also, giving you the flexibility to design the Upsell & Downsell pages as per your design requirements. That means you can now fully customize your upsell & downsell pages.

Now, with the help of these shortcodes, you can display –

Product VariationProduct QuantityProduct TitleProduct Description ( Long )Product Short DescriptionProduct PriceProduct Image

You can still import the Upsell & Downsell ready-made templates and modify it as per your design needs and add from the below shortcodes to display the respective variation product』s information to suit your needs.

Note: These shortcodes will only work on the Upsell & Downsell pages of the CartFlows. If used anywhere else like on default pages of WordPress, WooCommerce or on other CartFlows pages then it may result in displaying error messages or some random text or something else can』t predict it.

You can locate these shortcodes on the Upsell / Downsell pages under the Offer Page Settings under Shortcodes section as shown below –

Below is the list of shortcodes and their detailed explanation on how to use on the Upsell & Downsell pages –

List of Shortcodes

Accept Offer Link

This link is for adding the offer accept link to the button, anchor ( ), or you can even give it to the image too. This link allows the users to accept the Upsell or Downsell offer. This means once the Upsell or Downsell offer is accepted it will move to the next step.Recommended widget to use – Button, or Link ( Anchor ).

Decline Offer Link

This link is for adding the offer decline link to the button, anchor ( ), or you can even give it to the image too. This will allow users to reject/decline the Upsell or Downsell offer. This means once the upsell or downsell offer is declined it will move to the next step.Recommended widget to use – Button, Link ( Anchor ).

Product Variation

Shortcode: [cartflows_offer_product_variation]

If your product is a Variable Product then you can use this shortcode to show variations on the Upsell/Downsell page.This shortcode allows you to add/display the product』s variations on the upsell & Downsell pages. For now, these variations will be displayed in the dropdown manner as it is displayed on the single product』s page i.e Product』s detail page.Recommended widget to use – Shortcode, Text Editor.

Product Quantity

Shortcode: [cartflows_offer_product_quantity]

If your product is a Variable Product or simple product then also you can use this shortcode to show the product's quantity on the upsell/downsell page.This shortcode will allow you to add/display the product』s quantity selection on the Upsell & Downsell pages.Recommended widget to use – Shortcode, Text Editor.

Product Title

Shortcode: [cartflows_offer_product_title]

It doesn』t matter what type of product you have selected in the backend setting of the upsell & downsell page this shortcode will show the Product Name / Product Title on the Upsell / Downsell page.Recommended widget to use – Shortcode, Heading, Text Editor.

Product Description

Shortcode: [cartflows_offer_product_desc]

This shortcode will allow you to add/display the selected product』s Full / Long Description on the Upsell & Downsell pages. You can use this shortcode with products that you have selected in the Upsell & Downsell pages. The product type should be of Simple, Virtual, Variable, or Downloadable.Recommended widget to use – Shortcode, Text Editor.

Product Short Description

Shortcode: [cartflows_offer_product_short_desc]

This shortcode will allow you to add/display the selected product』s Short Description or excerpt on the Upsell & Downsell pages. You can use this shortcode with products that you have selected in the Upsell & Downsell pages. The product type should be of Simple, Virtual, Variable, Downloadable.Recommended widget to use – Shortcode, Text Editor.

Product Price

Shortcode: [cartflows_offer_product_price]

This shortcode will allow you to add/display the selected single product』s price on the upsell & Downsell pages.If you have added/applied the discount to the selected product from the upsell or downsell page』s setting then this discounted price will be displayed on the page.Recommended widget to use – Shortcode, Text Editor, Heading.

Product Image

Shortcode: [cartflows_offer_product_image]

This shortcode will allow you to display the selected Product Images or gallery images.If you have selected the variable product in the backend setting and you change the variation on the Upsell or Downsell page then the images which are displayed will automatically display the related image to the selected variation.Recommended widget to use – Shortcode, Text Editor.

How to Use 「Permalink Settings」 of CartFlows?

Do you want to modify or change the cartflows mentioned in the slug of CartFlows steps and flows?

For the same, we have introduced the 「Permalink Settings」 section in the WordPress Dashboard > CartFlows > Settings.

Note: Just to clarify the WordPress Permalink & CartFlows Permalink Settings both are different.

The difference between these settings is that the WordPress Permalink can be changed from the Settings > Permalink and the CartFlows Permalink Settings can be changed from the CartFlows > Settings.

The WordPress Permalink will change the URL structure for the whole website including the CartFlows pages.

Now, if you have selected the WordPress permalink structure to any other option except the 「Post Name」 then this will add the cartflows_step to the CartFlows step.

What is cartflows_step?

To change this cartflows_step from the URL of the CartFlows pages you can use this setting. As you can see in the below image the strings for both the Flow & Step are changed.

In the CartFlows Permalink Setting We have provided four options and they are as follows.

Default: This option will set the default URL slug for the CartFlows i:e cartflows_flow & cartflows_step. This is similar to the restore to default.Flow & Step Slug: This option will change the URL slug for flow and the step at the same time and the changed slug will be displayed in the URL of all the flows.Flow Slug: This option will change the flow slug in the URL only and the changed slug will be displayed in the URL of all the flows.Step Slug: This option will change the step slug in the URL only and the changed slug will be displayed in the URL of all the flows.

How to remove the cartflows_step from URL?

To remove the cartflows_step from the URL of the flow step's, you need to set the WordPress Permalink to Post name and the CartFlows Permalink option to default.

The WordPress Permalink is available in Settings [WordPress menu -> Permalinks sub menu.

There is the article which will help you to set the Post Name option in WordPress permalink setting.