诗语，作者 CartFlows 文档 - 第 9 页共 15 页

How to Set Quantity and Discount for Product on the Checkout Page.

CartFlows version 1.5.9 introduces the feature to set Quantity and Discount for products on the Checkout page.

Now, the Product Quantity and the Discount type options will give you the flexibility to set the Quantity & the Discount to each product that you have selected in the backend setting of the checkout page.

The Product Quantity option will let you add the pre selected quantity for the same product that you have selected and the Discount type option will let you set the discount to the same product that you have selected.

With the help of this, you can even add a discount on the bulk quantity of the product. Such as you are selling a product, Let』s say Product 「A」 and you want to give the discount only if the 2 quantity is purchased. So, in this case, you can set the quantity to 2 & provide a discount for it.

So, to set this option please navigate to the CartFlows -> Flows -> your_flow -> Click on edit button on Checkout Page -> Select Product Tab-> Open the Product』s options by clicking on the small downward arrow.

The Product Quantity that you have set in the backend setting of that product will be displayed on the checkout page automatically and if the user tries to update the quantity for that product from the checkout page then it will be increased by the same quantity that you have selected in the backend setting.

The Discount type option three more options in the dropdown list. They are as follows:

Original: If this option is selected, then not discount will be applied.Discount Percentage: If this option is selected, then the value that you have set that much percentage of discount will be applied to the product.Discount price: If this option is selected, then the value that you have set that much fix price of discount will be applied to the product.

This Product Quantity & Discount Type will be displayed and added directly on the CartFlows Checkout page only, If the same product having the quantity and discount pre-selected from the cart page when you have set the Global Checkout then the CartFlows discount setting will be added on the amount that is received from the Cart page.

Use cases:

You can use it to give a discount on bulk quantity. For example. Buy 2 get 20% OFF.If you have added the sale price to the product from the WooCommerce then the CartFlows setting will apply the discount on the sale price. If you have applied the coupon from the checkout page setting or from the coupon field then that coupon will be applied to the cart.

How to Apply the Coupon from the URL

In the latest update of the CartFlows Pro i:e version 1.6.3, we have introduced a most demanding checkout feature to apply the Coupons on the Checkout page.

From version 1.6.3 and onward you can apply the coupon on the CartFlows Checkout page but adding it in the URL.

This feature allows you to share the separate coupons for each checkout page for different users or products.

To start using this feature, you don't have to enable any setting, it is enabled by default on the CartFlows Checkout page. So, let's see how to use this feature.

Create a coupon in the WooCommerce's Setting. This article will help you to create a coupon.

Once the coupon is created, then you need to add it to the URL of the Checkout page while redirecting. To add the coupon you need to use the full URL of the checkout page instead of using the Next-Step Shortcode.

Now, when the user will visit the landing page/any other page where you have added the checkout page link with the coupon, once it is clicked the coupon will be automatically get applied on the checkout page.

How to Delete the Plugin』s Data While Un-Installing the Plugin

We have introduced a new option which will help to delete the CartFlows & CartFlows Pro』s data while deleting/uninstalling the plugin. We have introduced this option in the 1.6.11 version of the CatFlows.

This setting will be useful to remove unwanted data and setting options from the database while removing the plugin completely.

This setting will delete the CartFlows option』s data and CartFlows Global Setting and will not delete the already created flows from the database. You have to delete it manually first and then delete/uninstall the plugin by enabling the delete data option to remove all the CartFlows data.

This setting is located on the setting page of the CartFlows under other settings tab.

Below are the very few and simple steps to enable this option.

Step 1: Go to CartFlows -> Settings -> Other Setting Tab

Step 2: Click on the checkbox to enable the Delete Plugin Data option.

Step 3: An alert will be displayed to confirm the action.

Step 4: Enter 「DELETE」 in capital letters to confirm the action.

Step 5: Click the Save Setting button to save the changes.

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

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 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!!

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.

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

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 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 )

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

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!!