CartFlows 文档

Setup Pre-Checkout Upsell in CartFlows

Pre-Checkout Offer is displayed on the Checkout page when the visitor or user clicks on the Place Order button.

This helps you to Offer a product before even starting the checkout process. The Pre-Checkout upsell offer does not have any restrictions from the payment gateways i:e it works with most of all the payment gateways that are available on the checkout page.

Let's see how to enable this feature.

Step 1: Navigate to CartFlows ( WordPress Dashboard ) > Flows > your_flow > Edit the Checkout Page -> Navigate to Checkout Offer tab -> enable the Enable Checkout Offer option > select your product under Select Product option.

You can also change the other options/setting in the checkout offer below for further customizations.

Step 2: Visit the Checkout Page on the frontend. After filling the details there, now when you click on Proceed to Checkout an offer popup will be displayed.

Like the following screenshot –

Note: It will work with almost all WooCommerce payment gateways.

How to Add the Products on the Checkout Page via URL

In CartFlows Pro, we introduce one of the demanding features which is adding the products on the checkout page via URL.

In this article, let』s see further details about the feature and how easily it can be implemented within a very few steps.

This feature is enabled by default in the CartFlows Pro. So, you don't have to enable any setting to use this feature. You just need to send the product IDs from URL parameters and it will automatically add that product on the CartFlows checkout page.

With the help of this feature, you can share the different products for different users by adding the product ID in the URL of the Checkout page.

Let』s see what URL parameters are used to add the products.

To add the products to the checkout page via URL you need to use the ?wcf-add-to-cart=product_id parameter and you can also add the quantity for those products using the parameter &wcf-qty=1.

The parameter wcf-qty is optional that means, if you haven』t added or mentioned this parameter then that product』s quantity will be set to 1 automatically i:e to default.

Here is the example:

Suppose you want to add a product A on the checkout page via URL with quantity as 4 then you need to create the URL as follows:

www.yourdomain.com/checkout-page/?wcf-add-to-cart=3&wcf-qty=4

Here the 3 is the product ID which you want to add in the checkout page and the 4 is the quantity for that product.

In some cases, you might want to add multiple products from the URL with different quantities, then you just need to put the comma (,) between the product IDs and quantities.

Here is the example of it:

www.yourdomain.com/checkout-page/?wcf-add-to-cart=3,6&wcf-qty=4,8

Note: If you have selected the products in the backend setting of the checkout and also adding the Products in the checkout page via URL then the Products which are added from the URL will be added and the selected products will be skipped.

Frequently Asked Questions about the Working of PayPal/Stripe!

How to find the product ID to add it in the URL from the Parameter?

To get the product ID, go to Products Menu -> Search for the product which you want to use and hover to that Product name. You will get the Product's ID listed just below the product name.

Checkout Takeover aka Replace Checkout page

Do you want to use the CartFlows Checkout page instead of the default checkout page of WooCommerce?

Yes? then we have come up with a new feature which will let you do it.

This feature is named Checkout Takeover that Replaces the default checkout page of WooCommerce with the Global Checkout page of CartFlows.

As you know that by setting the Global Checkout, you can easily redirect the users to CartFlows Checkout page after cart/shop/single product pages. But here the URL of the page gets changed or has to change to make it suitable for your store and its URLs.

So, to avoid this case, we have come up with this feature. By enabling this setting, the CartFlows will replace the content i:e override the default checkout page of WooCommerce and that is all without changing the URL of the default Checkout page.

To use this option first, you need to set the Global Checkout page. Once it is set then you can enable the Takeover/Override checkbox. If the Global Checkout page is not set/selected then the Takeover/Override option will not work. 

These two options are dependant on each other so if you wish to use only the Takeover/Override option then it is not possible. It needs the Global Checkout page to be selected. 

Now, you might be wondering how does this feature works? Well, it is easy. Let』s see how does it work:

When you have set the Global Checkout and enabled the override checkbox then it will show the CartFlows Checkout page after the WooCommerce』s Cart Page and that is without changing the URL of the checkout page.

That is the URL of the checkout page will be of default checkout page but the content and entire working will be of CartFlows.

Let』s see how to enable this feature.

This setting/option is added to the Global Setting page of CartFlows. Below are the steps which will guide you to enable it.

Dynamic Order Bumps aka Conditional order bumps.

We received many requests from all of the user base of CartFlows demanding a way to display the order bumps on the basis of some conditions such as product base, discount base, and even a cart total base. 

So, we accepted this challenge and improved an order bump with one more level by introducing Dynamic Order bumps. Yes!! The Conditional Order Bump is here in the CartFlows.

Currently, this feature will be available in the 1.8.0-beta-2 versions of CartFlows and CartFlows Pro plugins. 

Note: We have deprecated the Next-Step redirection option from Order Bump and in the next major update it will be hard deprecated. As we have introduced Dynamic Offers. You can now add more robust rules for your conditional redirect.

Using this feature, you can set the custom display conditions for the Order Bump to display them on the checkout pages of CartFlows.

For these, we have added many useful conditions using which you can easily achieve your requirements of showing the order bump with conditions.

Click on the image to enlarge it

In this Dynamic Order Bump, we have introduced grouping of the conditions, which will provide you the ease of access while setting multiple conditions and a way to group each other.

So, you might be wondering what the groups are?

The simple explanation is that the Groups are the list of combinations of one or more conditions. In each of the condition groups, one condition is in the AND relation with another condition and each group is in the OR relation of another group as shown in the below Image.

Click on the image to enlarge it

You can add as many rule groups and conditions as you can as there is no limit for creating the groups and conditions.

To re-order the condition groups according to your needs or if you want to prioritize the groups for the order bump. To re-order the groups, simply drag-drop the groups just like you do in the CartFlows Custom Field Editor.

This setting is added in the Order Bump under the Conditions tab. In this tab, you can add multiple conditions for the order bump and create a group of conditions.

Let』s see how to use this feature and its setup.

Once you update the CartFlows or install the 1.8.0 Beta-2 version, you will get one new menu.

Conditions menu in CartFlows Order Bump on the checkout page.

Here is how to set up the rules.

First, make sure that you are using 1.8.0-beta-2 or the greater versions of the CartFlows free and cartFlows Pro to use this feature.

Below are the steps to set up the conditions for the Order Bump. 

Step 1: Navigate to the CartFlows -> FlowsStep 2: Open your flow in which you want to add/edit/update the order bump and its conditions.

Click on the image to enlarge it

Step 3: Go to the Checkout page on which you want to add an Order Bump or already present.

Click on the image to enlarge it

Step 4: If no order bump is available then create one by clicking on the Add Order Bump button.

Click on the image to enlarge it

Step 5: Now, click on the Edit button to edit the Order Bump.

Click on the image to enlarge it

Step 6: Navigate to the Conditions tab and enable the checkbox to view the conditions set.

Click on the image to enlarge it

Step 7: Select condition, relation and compare to option to set one condition.

Click on the image to enlarge it

Step 8: Click on the Add rule button. This will automatically create one rule in the same group. 

Click on the image to enlarge it

Step 9: Click on Add Conditions Group to add more conditions groups.

Click on the image to enlarge it

Step 10: Click the save changes button to save the rules.

We have also added sortable settings to the condition groups in the order bump so that you can drag and drop the rule groups up/down to re-order them to prioritize the conditions on the frontend.

It is not possible to move or drag-and-drop one rule row from any of the rules groups and add it to another rules group. You need to remove/delete that rule row from one group and simply add it again in the second rules group.

Filters to Customize Product Table

You can use the following filters to change styles –

This filter will help you to change the default styles of Product Table and Product Image in the emails –

/*
* The woo_ca_email_template_table_style filter allows you to change the default styles of
* product table & product image provided by WooCommerce Cart Abandonment Recovery plugin.
*
*/

add_filter( 'woo_ca_email_template_table_style', 'wcar_product_table_styles', 10 );

function wcar_product_table_styles( $style ){

$style['product_image']['style'] = 'height: 42px; width: 42px;';

$style['table']['style'] = 'color: #636363; border: 1px solid #e5e5e5; width:250px;';

$style['table']['attribute'] = 'align="center" ';

return $style;
}

The below filter will display the Cart Total including Tax and Shipping cost in the Product Table –

// Show product table with cart total including tax and shipping cost
add_filter( 'woo_ca_recovery_enable_cart_total', '__return_true' );

Note: Above filter or custom code should be added to your child theme』s functions.php, here』s an article to help you Add Custom code.

How to Enable the CartFlows Step Post Types for the Page Builders?

CartFlows is a sales funnel builder in which you get various sales steps such as Landing, Optin, Checkout, Upsell, Downsell and Thank you. 

These are nothing but simple pages similar to the WordPress pages but it is coming from a one Custom Post Type as cartflows_step and named as Steps.

Now, as these are the pages and you have to place the information on it to display for the users, then you have to design those pages and this is where the Page Builder plays a major role. 

The page builder provides the ability and flexibility to design the pages even if the user is not having a technical background. The page builder provides Drag-and-Drop functionality so that you can easily design the pages.

Similarly, you can use any Page Builders to design the CartFlows pages but in some cases, you may need to enable it for the CartFlows Step Post type so that your page builder can design the CartFlows pages. 

In most cases, all the page builders automatically get the list of Custom Post Types and add it in their configuration so that the pages created from those post types can be edited. But, there are few exceptions, not all Page Builder does it.

If the page builder which you are using does not have any option/setting to enable the page builder for other custom post types, then you can get in touch with the page builder author and ask for any available filter or action or a way which can be used by CartFlows to pass its custom post type to the page builder.

This action/filter will be added from the CartFlows using which the edit page option from the page builder will be displayed on the CartFlows pages. This is something like adding custom support of Page Builder from the CartFlows.

If there are no such filters or functionality in the page builder then it is not possible to edit the CartFlows page using that page builder.

Here in this article, we will see how you can enable the CartFlows' Step post type from your page builder. 

This setting is available in your page builder』s setting menu and you may find a list of all the custom post types. You need to choose the CartFlows Step and enable it. After enabling it you can easily edit the CartFlows pages from your page builder. 

For example, let』s see how to enable the CartFlows Step type for the DIVI.

In DIVI there are two options, they are as follows.

Using the DIVI builder plugin

Go to the DIVI Menu -> Plugin OptionsThen Navigate to the Post Type Integration TabEnable the Steps Option

Using the DIVI Theme

Go to the DIVI Menu -> Theme OptionsThen Navigate to the Builder TabEnable the Steps Option

Some Common Questions

Q. What to do if your page builder does not have any option to enable it for custom post types.Ans: If the page builder which you are using does not have any option/setting to enable the page builder for other custom post types, then you can get in touch with the page builder author and ask for any available filter or action or a way which can be used by CartFlows to pass its custom post type to the page builder.

How To Use Your Themes Header & Footer In A Step?

Each CartFlows step uses the default WordPress page template system. When you first create a step we default it to a canvas mode, but its very easy to change this so that a step will use your themes default header and footer.

Click on the 「Post Attributes」 options boxChoose 「Default Template」Click on update

When you set the page template to 「Default」 then it will load the theme's default template and not the CartFlows'. This default template's styles and structure are different for each theme that are available in the WP market.

By setting the CartFlows page template to 「Default」 then CartFlows will load the theme's default template along with its styles and scripts. Due to this, you can also display the theme's header and footers on the CartFlows pages.

Some Common Questions (FAQs)

Q. What to do if the design of the page is getting changed after changing the page template to 「Default」 ?Ans: Not always, it changes the design but even if it is changed, you can simply check which CSS or Script is getting added and add a custom CSS or Script to normalize it.

One Click Upsells

CartFlows Pro offers one-click upsells when using the following gateways:

Authorize.netBACSCODCredit Card and iDeal via Mollie.PayPal, with or without reference transactions.WooCommerce PayPal Payments.Stripe-Credit CardSquare

This article will give you a list of officially supported payment gateway plugins for CartFlows Upsell/Downsells.

For PayPal, you can use PayPal Standard or PayPal Checkout payment gateway to offer the one-click upsells. Please note, only one PayPal plugin should be installed and activated to avoid any unnecessary errors or issues.

While using the PayPal Standard gateway, it is not required to enable the PayPal reference transaction option in the CartFlows as well as in the PayPal account.

But if you are using use the PayPal Checkout payment gateway plugin, then the Reference transactions should be enabled from the CartFlows Setting as well as from the PayPal account.

This article will help you to enable the PayPal Reference Transaction from the PayPal Account.

One-click upsells need exclusive compatibility to be built with each payment gateway and we will add support for other payment gateways one by one.

Here is an article that will give you a list of the payment gateways that are supported by the CartFlows for one-click upsells.

In the backend, on the upsell page, a notice will be displayed if you are using a payment gateway that is not supported by the CartFlows for one-click upsells then you can either use the supported payment gateways or you can try adding custom support of your payment gateway in the CartFlows.

Common Questions (FAQs)

Q. What to do if your payment gateway is not in the supported gateway's list?Ans: You need to use the officially supported Payment gateways to offer the upsell/downsell. If you are willing to continue with the gateway of which the support is not added in the CartFlows then you can also try adding custom support of it with the help of a freelance developer.

Q. Is the name of your gateway is displayed in the notice/message on the upsell/downsell pages?Ans: If the name of your payment gateway is been displayed in the notice/message on the upsell/downsell page then it says that custom support of that payment gateway is not added in the CartFlows for upsell/downsell and you still wish to use the same gateway then the upsell/downsell will be skipped.

To avoid this, you can either use the supported payment gateways or you can add custom support of your payment gateway in the CartFlows with the help of a freelance developer.

How to Resolve 「Session Expired」 Error message?

Are you currently seeing a 「Your session has Expired」 message on your Upsell & Downsell pages?

This error message is usually seen only on the Upsell & Downsell pages of the CartFlows. This message means that the Session which was set on the checkout page has expired on the Upsell or Downsell pages.

If you are getting the session expired error message on the Checkout page of the CartFlows, then it means that the CartFlows session cookie ( cartflows_session_ ) or the WooCommerce's Session cookie is not getting registered on the CartFlows.

Usually, this happens when the CartFlows pages are cached at the server end or at the local end. To fix this, you need to clear the cache and exclude the CartFlows Checkout pages from the server-side or local cache.

Quick Tip: If you want to avoid seeing this error message, always test it by placing the Test Order and going through the full checkout process.

Below are the cases in which this error message will be displayed.

Case 1:

When the Upsell & Downsell pages are opened or viewed directly from the URL and the Flow is not in the Test Mode.

Then on the Upsell & Downsell page, the session key is not set and that is why it displays this error message.

Thus displaying the 「Your Session is Expired」 message only when you are not logged in.

Case 2:

If the Upsell & Downsell pages are placed after the optin step.

This will not work because on the Optin page there is no Payment Gateway option present and thus it is not possible to accept the payment gateway on the Upsell page. This gives the 「Your Session is Expired」 error message.

If you want to view the Upsell & Downsell pages just to check the design then you need to set the flow to Test Mode and open the page while you are logged in. This will allow you to view the designs of the Upsell & Downsell pages.

Case 3:

If the cookies are restricted from the Server/hosting.

If you are using any hosting and that has a specific requirement regarding the cookie names then it is most likely to display the Session Expired error message.

This specific requirement includes the name of the cookie. For example, some hosting says that the cookie name should be started with the prefix as wp_ or woocommerce_ or server-specific pre-fix.

As the Cookie which is set by the CartFlows is not accessible on such server/hosting due to above-mentioned cookie requirements and most likely these server does not allow third-party plugins to set their cookies for some security reasons.

For example: Suppose you are using 「Pantheon」 hosting/server then it will show you the Session Expired message as this server has a specific requirement regarding the Cookie naming.

Actually, there are a number of plugins that use cookies and not all plugins can change the names of their cookies as per the server's cookie naming structure.

So to fix this error message, you need to get in touch with the hosting/server provider and ask for a way to exclude the CartFlows cookies from these restrictions. Once the cookie is been excluded then you will not get this error message on the Upsell/Downsell pages.

Case 4:

If the website is not properly configured for the SSL/HTTPS connections.

All of the CartFlows Cookies will work on the HTTPS protocol/connection. So it is necessary that your website should be properly configured for HTTPS i:e the SSL has to be installed.

If the HTTPS/SSL is not installed then the cookie will not be registered and you will get the Session Expired error message.

Few Common Questions (FAQs)

Q. What to do if the getting a session expired error message on the checkout page?Ans: If you are getting the session expired error message on the Checkout page of the CartFlows, then it means that the CartFlows session cookie ( cartflows_session_ ) or the WooCommerce's Session cookie is not getting registered on the CartFlows page. Usually, this happens when the CartFlows pages are cached at the server end or at the local end. To fix this, you need to clear the cache and exclude the CartFlows Checkout pages from the server-side or local cache.

Related docs –

List of CartFlows Cookies.How to Resolve 「Order Does not Exist Error」 on Upsell & Downsell Page?

Global Checkout

CartFlows can also be used to replace the global checkout if you want to still use WooCommerce in the traditional way, but improve conversions at the checkout.

The traditional WooCommerce check out is:

Buyer views a product > Clicks on add to cart > Buyer then clicks to view the cart > Buyer makes and adjustments > Buyer clicks checkout > Buyer completes the purchase on the checkout page

With our global cart option the flow is changed to our checkout:

Buyer views a product > Clicks on add to cart > Buyer then clicks to view the cart > Buyer makes and adjustments > Buyer clicks checkout > Buyer is taken to the CartFlows checkout page > Buyer go through any upsells / downsells you have setup.

To overcome this traditional working of WooCommerce, we have introduced the Global Checkout option in the free version of CartFlows. Let's see how we can set it up.

To create a Global Checkout:

Create a new flowConfigure the first step to be the checkout page ( Make sure to give the checkout page a name you will recognize later )In the checkout step, make sure to not select a product, just leave that blankSetup any order bumps, upsells, downsells, and the thank you pageGo to the CartFlows settings menu.Click on the global checkout dropdown option and you will see an option to select the checkout you created in step 2 above.

Common cases in which the Global Checkout may not work are –

Case 1: Default Checkout page is not created & set in the WooCommerce setting:

As you may know, this option replaces the default WooCommerce checkout page with the CartFlows Checkout Page.

If this page is not created and Selected in the WooCommerce -> Settings -> Advanced Tab -> Under Page Setup section the Global Checkout page may not display or may return a 404 error message.

Case 2: Checkout end-point is changed:

If the default WooCommerce's end-point in the WooCommerce -> Settings -> Advanced Tab -> Checkout Endpoints are changed or translated then your checkout page may not work as required. So, it is recommended not to change WooCommerce's endpoints.

Here is the official video explanation from our getting started tutorial.