Author 诗语

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

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.

How to Set Default Product in Product Options

We have introduced a new feature that will provide more flexibility in the product options while adding multiple products on the checkout or give options to select the product as per the user』s choice.

So to achieve this in a very minimal effort and setting, we have introduced one option through which you can decide which product you want to add in the cart for checkout from all of the selected products.

There are two ways, in which you can decide which product should be displayed selected in the product options on the checkout page.

Using the option from the checkout page setting.Using a URL parameter.

Let's see those ways one by one.

1. Using a option in the backend setting of the checkout page.

This option is helpful when you have more than one product selected and want to display only one product as selected on the checkout page of the CartFlows.

Let』s see how you can use this feature and achieve your requirements.

Step 1: Navigate to the CartFlows -> FlowsStep 2: Open your flow in which you want to set this setting

Step 3: Click the edit button of your Checkout Page.

Step 4: Navigate to the Product』s tab and select the Products first and enable the Product』s options setting

Step 5: After enabling the product』s options, select the checkbox/radio buttons in front of the product name to select and add them in the checkout page and display them as selected.

Step 6: Done. Save the setting and view the page.

2. Using a URL parameter

Suppose, you have multiple products selected on the checkout page and wanted to display only one product as selected among all of them on the basis of the user's choice, then this URL parameter will help you.

To use this feature, you have to simply add the wcf-default=1 in the URL of the checkout page while redirecting from the landing page or from any other page. Here, the wcf-default is the name of the parameter, and 1 is the sequence number of the product displayed in the product options.

Here is how your checkout page URL should look like after adding the wcf-default parameter.

www.yourdomain.com/checkout-page/?wcf-default=1

You can add this link to any of the button or to a anchor tag to redirect the user to the checkout page as per the product selection.

Some Comman Questions. (FAQs)

Q. Will this option and the URL parameter will work for the variation as well as simple product types?Ans: Yes. It will work for both of the poduct types. But while using the URL parameter, you need to use the sequance of the product which you want to display as selected. Suppose, you want to show third product as selected then you need to set the wcf-default=3

Q. Can I use both the option and the URL parameter at the same time?Ans: Yes. You can. But it will display the latest selection on the checkout page.

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.

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 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 Resolve Page Not Found Message on CartFlows Checkout Page During the Payment?

Are you getting the 「Page Not Found」 error message on the checkout page of CartFlows during processing the payment?

Below we will see the reason and how it can be resolved –

Most of the payment gateways use the default WooCommerce Checkout Page to display the payment gateway』s payment form and use the order-pay as an endpoint for the payment process.

When the user proceeds for the payment from the CartFlows checkout page and redirects to the WooCommerce』s checkout page to add the payment information. If the default WooCommerce』s Checkout page is not created on the website and not selected in the WooCommerce』s setting then this 「Page Not Found」 error message will be displayed.

To fix this, you just need to create the WooCommerce』s checkout page and select it in the WooCommerce -> Settings -> Advanced Tab -> Under Page setup section.

This article will help you to create default pages of WooCommerce.

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.

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.