CartFlows 文檔

How to Setup Square Gateway for the Cartflows Upsell & Downsell?

In the latest CartFlows Pro update i:e 1.5.10 we have added custom support of the most awaited payment gateway i:e Square Payment Gateway.

Now, you can also offer the CartFlows upsell and downsell using Square Payment Gateway.

Let』s see how you can configure it to use it with the CartFlows.

# Pre-requisites-

Below are a few pre-requisites that are required to configure the gateway.

First, you need to login to the Square Payment Gateway』s account from here and if you haven』t created an account then you can also do it from the same page.After logging in get the Application ID from the 「My Applications」 section and the 「Access Token」 from the Account section on your Square Payment Gateway』s account.Now, download & install the Square Payment Gateway Plugin from here. If you need help on how to install the plugin here is the article which will help you.

You can read more information about the Payment gateway configuration options in this WooCommerce article.

Let』s see how to enable the Square Payment gateway for your online store/website.

Step 1: From your WordPress Dashboard, go to – WooCommerce -> Settings -> Payments Tab -> Enable the 「Square-Credit Card option and click on the Save Changes button at the bottom of the same page.

Step 2: Now go to Square Tab to configure the gateway.

Step 3: Enable the Sandbox Checkbox if you want to make the test payment & add the Application ID & Access Token. If the sandbox checkbox is not checked then you will have to enter the Live Application ID & Access Token.

Note: Your website should have an SSL configured and all the URLs should be forced to use HTTPS.

Beaver Builder Modules of CartFlows

We are pleased to announce that we have successfully released Beaver Builder modules of CartFlows in the CartFlows 1.5.19 & CartFlows Pro』s 1.5.11 and above. These modules will provide more styling options for the shortcode and increase the flexibility to design the CartFlows pages.

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

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

Next Step Button/Link ModuleOptin Form moduleCheckout Form ModuleUpsell & Downsell Shortcodes including Product variations and offer accept & reject modules.Order Review Module ( Thank you page).

These modules will be found only on their respective pages. That means when you open/edit the landing page in the Beaver Builder editor then you will see the Next Step Button/Link module. Similarly for the rest of the steps/pages.

Let』s see, each module page/step wise and how it』s setting is managed.

Page 1: Landing page and it』s module

This Page has one module and that is the Next Step Button Module.

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

# Settings 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.

#Settings in Typography Tab: In this section you will get all the Typography Options such as Font Size and Font Family etc.

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

Page 2: Optin Page and it』s module

This Page has one module and that is the Optin Form module.

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

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

Page 3: Checkout Page & it』s module

This page also has one module and various design options for various features. Such as Bump Order, Precheck Offer etc.

# Settings in General Tab: Here in this tab you will get the content setting for Billing & shipping Fields, Bump & pre checkout offer and product options as well as Checkout Layout Options.

# Settings in Style Tab: Here in this section, you can change the styling of the checkout page features including Heading, Input Fields, Buttons, Payment Section & Validation Error messages.

# Settings in Advanced Tab: In this section you will get all the designing options of the section on which the module 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 which are available in the backend setting of these pages similarly for the same, we have introduced a Beaver Builder module for it.

# Settings in Style Tab: There are separate styling options for each of the modules.These modules includes

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.

Page 6: Thank you age & it』s module

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

# Settings in the General Tab: From this tab you will be able to change the heading of the thank you shortcode as well as options to enable/disable the sections on the thank you page.

# Settings 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.

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

All of the modules 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 has to be added.

If you are not using the Beaver Builder 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!!

How to Renew your CartFlows Pro License Early?

Are you looking to renew your CartFlows License before the next renewal date or before it expires?

You can simply do the same by following these steps —

Step 1: Login to your account on CartFlows store.

Step 2: Click on the Subscriptions option from the Sidebar

Step 3: You will see a list of your active Subscriptions. Now click on the View option of the CartFlows – Annual license and click on Renew now button as shown below.

Step 3: Complete the payment with order and Payment details and your license has been renewed.

Frequently Asked Questions!

What if I early renew? What will be my next payment date?=> After an early renewal is processed, the next payment date is extended to accommodate another billing period.For example, if a subscription renews annually on May 15th 2020 and the next payment date is May 15th 2021, then processing an early renewal on November 1st, 2020 will move the next payment date to May 15th 2022.

Introduction to Gutenberg Blocks of CartFlows

We are releasing Gutenberg Blocks for CartFlows 1.5.20 & CartFlows Pro 1.5.12 version and above. These Blocks will provide more styling options for the shortcode and increase the flexibility to design the CartFlows pages.

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

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

Next Step Button/Link BlockOptin Form BlockCheckout Form BlockUpsell & Downsell Shortcodes including Product variations and Offer Accept & Reject Block.Order Review Block ( Thank you page).

Note: These Blocks will be displayed only on their respective pages/steps. That means when you open/edit the landing page then you will see the Next Step Button/Link block. Similarly for the rest of the steps/pages.

Let』s see, each blocks' page/step wise and how it can be managed.

Page 1: Landing page and it』s Block

This Page has one block and that is the Next Step Button block.

# Settings in General Tab: In this section, we will have the settings to change the alignment of the block and text as well as you can add the icon to the block. [ Screenshot ]

# Setting in Style Tab: Here you will find the setting to change the color of the block as well as the text and the icons along with the padding & margin icons.

#Setting in Content Tab: In this section, you will find all the designing options for the content such as font size and typography.

#Setting in Advance Tab: In this section you will find options to add additional info such as set a link and add a custom CSS.

Page 2: Optin Page and it』s Block

This Page has one Block and that is the Optin Form Block

# Settings in General Tab: In this section, you will find the settings of Primary Color and Typography of the block.

# Setting in Input Field Tab: In this section, you will find the styling options for input fields to change the Color Style, Typography, and Alignment.

# Setting in Submit Button Tab: In this section, you will find all the designing options for the submit button on the Optin form.

# Setting in Additional Tab: In this section, you will find the option to add additional custom CSS.

Page 3: Checkout page & it』s Block

This page also has one block and various design options for various features. Such as Bump Order, Precheck Offer etc.

#Setting in Layout Tab: Here in this tab you will get the option to change the layout of the checkout page. Such as you can change the layout to Two-Step, Two Column or One-Column.

# Setting in Global Tab: Here in this section, you will get the global color and global typography of the checkout form. This will be applied to all the elements in the checkout form only.

# Setting in Heading Tab: In this section you will get all the designing options of the heading present in the CartFlows Checkout Form.

# Setting in Input Fields Tab: In this section, you will get all the designing options for the input fields present in the CartFlows Checkout Form.

# Setting in Button Tab: In this section, you will get all the designing options for the Buttons element present in the CartFlows Checkout Form.

# Setting in Payment Section Tab: In this section, you will get all the designing options for the Payment Section on the Checkout page of the CartFlows Checkout Form. Once the setting is made then the changes will be displayed in the front end and not while making the changes.

# Setting in Success/Error Messages Tab: In this section, you will get all the designing options for the Error or success messages which will be displayed on the Checkout page when the errors are displayed.

# Setting in Products Options Tab: In this section, you will get all the designing options for the Product options i:e variation section on the Checkout page..

# Setting in Order Bump Tab: In this section, you will get all the designing options for the Order Bump feature on the Checkout page..

# Setting in Pre-checkout Offer Tab: In this section, you will get all the designing options for the Pre-checkout offer popup on the Checkout page.

# Setting in Additional Tab: In this section you will get options to add additional custom CSS.

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 Gutenberg Blocks for it.

# Setting in Style Tab: There are separate styling options for each of the Blocks.These Blocks includes

Page 6: Thank You page & it』s Block

Using this block 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 General Tab: This tab has the options to hide/show the order review sections.

# Setting in Spacing Tab: This tab has the options to change and manage the spacing of heading and the order review sections on the thank you page block.

# Setting in Heading Tab: This tab has settings to change the text of the heading and the heading color including the typography.

# Setting in Section Tab: This tab has settings to manage the text, color and typography of the sections of the order review.

# Setting in Order Review Tab: This tab has settings to manage the text, color and typography of the Order Review Section.

# Setting in Downloads Tab: This tab has settings to manage the text, color and typography of the Downloads Section.The Downloads section will be displayed only when the downloadable product is purchased.

# Setting in Order Details Tab: This tab has settings to manage the text, color and typography of the Downloads Section.

# Setting in Customer Details Tab: This tab has settings to manage the text, color and typography of the Customer Section. This Section includes the billing & shipping details.

# Setting in Additional Tab: In this section you will get options to add additional custom CSS.

All of the Blocks and settings are provided to add more flexibility while designing the CartFlows pages and to avoid the confusion regarding which shortcode have to add and on which it has to be added.

If you are not using the Gutenberg Blocks 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 Funnel Designing!!

Introducing Personalization Shortcodes in CartFlows!

CartFlows introduces Personalization Shortcodes in CartFlows v1.5.0. Now you will be able to personalize the CartFlows pages for more conversions and sales.

In this article, we will see the overview of the Personalization Shortcodes so that you can better utilize them on CartFlows pages –

We have provided these Personalization Shortcodes in the CartFlows so that you can personalize the display and the messages on the Upsell / Downsell or on the Thank You pages.

Why Personalization?

Personalization helps build trust with users by engaging with them during the checkout process. When you display the user's name by personalizing the headline or message while they are completing their order, people are more likely to complete the order.

For example, you have placed an order from the checkout page of the CartFlows using the email as [email protected] and now on the upsell & thank you page you want to display the personalized messages such as 「Hello [email protected], here is the 50% OFF on this product」 OR 「Thank you [email protected] for your order」 Or any other as per your requirements.

These shortcodes will display the user's email ID or the email or any other field that you have added in the shortcode for the current order.

Currently, we have two types of Personalization shortcodes available for the use. They are divided in two sections and they are

Display the Order Fields value on the Upsell / Downsell / Thank You page i:e displaying the checkout fields' valueDisplay the value of the Fields that are sent via URL parameter

Let's see the personalization shortcodes type and how exactly it can be used –

Display the Order/Checkout fields values

This shortcode can be used on the upsell & downsell & thank you page to display the user's billing information which is filled on the checkout fields on the checkout page of the CartFlows.

The proper format of the shortcode is as follows:

[cartflows_order_fields field='first_name' default='Dear']

In the above shortcode, there are two parameters as

1. field: This represents, which field's value you want to display on the page.

2. default: Default value to display if the checkout field is not filled.

You can use any field to display it's value on the desired page.

For example:

– To display the user's first name you can use

[cartflows_order_fields field='first_name' default='My Name']

– To display the user's last name you can use

[cartflows_order_fields field='last_name' default='My Surname']

In the same way, you can use the rest of the fields.

To Display the value of the Fields that are send via URL parameter

This is the second shortcode which you can also use to display the user's billing info on the upsell/downsell/thank you pages such as first name, last name, email etc.

But, this shortcode will take the values of the parameters which are sent via URL. That is if there is first name of the user is sent from the URL as www.mydomain.com/thank-you/?first_name=myname&[email protected]

In this case, this shortcode will get the value of the first_name parameter and display it on the page where you have added this shortcode.

The proper format of this shortcode is as follows:

[cartflows_url_fields field='first_name' default='Dear']

In the above shortcode, there are two parameters as

1. field: This represents, which field's value you want to display on the page.

2. default: Default value to display if the checkout field is not filled.

You can use any field to display it's value on the desired page.

For example:

– To display the user's first name you can use

[cartflows_url_fields field='first_name' default='My Name']

– To display the user's last name you can use

[cartflows_url_fields field='last_name' default='My Surname']

In the same way, you can use the rest of the fields.

Note: In WooCommerce all the field's name starts with the 「billing_」 key for the billing fields and 「shipping_」 for shipping fields. Such as billing_first_name, billing_last_name, shipping_first_name, shipping_last_name. So, you have to add the field name without the 「billing_」 or 「shipping_」 prefix.

How to Display the 「Account Creation Fields」 on CartFlows Checkout Page?

It is a nice idea to let the user register him from the Checkout Page at the same time during the process of purchasing the products.

Allowing the user to register and create an account right from the Checkout Page gives flexibility and reduces the user's efforts to create the account separately.

So, to accept the User's username & password from the Checkout Page, WooCommerce adds the two extra account fields depending on the setting that you have made in the WooCommerce -> Settings -> Account & Privacy Tab -> Account Creation Section.

There are various options using which you can manage the display of the account creation fields.

WooCommerce has an easy to understand and in-depth documentation for those setting which can be found in this article. [ Link here ]

Also here is a video which will give you the step-by-step visual guide:

How to Change the 「Choose A variation」 text?

In some cases, there might be a need to change the Popup Variation Toggler text so that you can match it with your website theme or the product that you are selling from the Checkout or to grab the attention of the users.

As there is no option in the backend setting to change this text it does not mean that you cannot change it. You can!!. But using the filter that we have provided.

It is very simple to change the text using the filter you just need to copy-paste the code into your child theme』s functions.php file and change the text as per your requirement.

add_filter( 'cartflows_variation_popup_toggle_text', 'change_variation_toggle_text', 10, 1 );

/**
* Change Choose a variation text.
*
* @return text.
*/
function change_variation_toggle_text( $text ) {

return "Add your choice of text here";
}

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

How to Resolve the Error – 「Please select a Simple, Virtual and Free product」?

Do you notice an Error Message – Please select a Simple, Virtual and Free product.

Solution:

Following are the steps using which you can select the free Simple & virtual products on the optin page of the CartFlows.

Step 1: Go to CartFlows -> Flows -> Your_Flow

Step 2: Click Edit button on the Optin Step.

Step 3: Navigate to the Select the Product Tab and Search & select your free simple or Virtual product from the optin page.

In a Nutshell, to resolve this issue, you will need to select Simple & Virtual Products.

The Optin Step type only allows selling the above-mentioned type of products. This Step Type provides only three fields such as First Name, Last Name, Email ID.

So the user cannot make a payment in this scenario, this is the reason you need to set the zero price value Simple / Virtual product.

If you need to add more custom fields in the Optin Type you will need the CartFlows Pro version.

How to Collect the User』s Contact Data and Redirect to the Checkout Page?

Actually, this requirement has been taken from the CartFlows Optin page. It is really easy to capture the User』s Basic Information for Lead generation.

When the user fills and submits the Optin form then the CartFlows will create an order in the WooCommerce where all the user』s info will be displayed. If you want to send that user』s information to your CRM then you need to simply integrate your CRM with WooCommerce and the WooCommerce & your CRM plugin will communicate with each other and send order data to the CRM as soon as the new order is created in WooCommerce.

For more information on optin and how you can create an optin page you can find all the information in this article

Now, you might be thinking on how you can achieve the same thing but without the use of CartFlows Optin form. Well that is also an easy part but has more steps than the CartFlows Optin.

Let』s see how you can achieve it.

To capture the Lead or user』s basic information such as Name and Email without using the CartFlows Optin form.

Below are the simple steps that you can follow –

Step 1: Create one landing page.

Step 2: On the landing page place all your information about the product and place the contact form or the form module provided by your page builder (e.g: Elementor's form module).

Step 3: Give the Checkout page URL or the next page URL in the contact form setting so that when the form is submitted then the user will be redirected to that URL that you have given in the setting.

Step 4: You are all set. Users will be automatically redirected to the page that you have set in the contact form's setting.

How to Turn Off the Auto-fill of Checkout Fields?

You might be wondering how your billing information is getting pre-filled on the checkout page. Well, let me reveal this trick with you.

When you visit the checkout page and fill-out the billing or shipping information of the checkout fields. Just after filling out all the data, CartFlows automatically stores that information on your local system only. That means this data cannot be displayed unless and until some other user logins to your system and opens the checkout page.

This data is never transferred or stored on the server-side. This is stored just to provide ease of access to the end-users while placing the order next time or multiple times. This reduces the time re-entering that same data again and again. Instead, it will auto-filled from the locally stored data avoiding re-work.

There might be some cases in which you wish to disable this feature on your website and for the same we have provided the following filter –

/**
* Filter to enable/disable the auto-fill of checkout fields
*
* @param string $allow having yes/no
* @return string $allow yes or no
*/
add_filter( 'cartflows_allow_persistace', 'do_not_store_persistance_data', 10, 1 );

function do_not_store_persistance_data( $allow ){
$allow = 'no';
return $allow;
}

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