Author 詩語

How to Start a Flow From Product Page

If you are looking to start your flow right from the product』s page then this new update is for you. 

Here in this article, you will get an idea of how you can start your flow from the product』s page and how you can use it with different types of Products. 

In this feature, we have added one CartFlows setting under the product』s setting in WooCommerce. Using this setting you need to search for the flow to which you want to connect it to the product.

After selecting the flow in the product』s setting, when the user visits that product』s single page to add it to the cart for the purchase by clicking on add to cart button, he will be redirected to the CartFlows flow』s first step which is present in the selected flow.

While using the feature, we recommend not to use the landing page, so that when the user adds the product to the cart he will be redirected to the checkout page immediately instead of the landing page.

This feature will also help to solve the issue with the Name your price, Booking or Appointments related product types in the following way.

For example: 

If you are using the Name your price plugin, then this plugin adds an input field on the single product』s page. Now, you have to select the Flows to which you want to redirect the user after adding this product to the cart. 

When the user adds his price in the field and clicks on the add to cart button, then that product will be added to the cart with the same price which the user has added in the field. 

The same working will be experienced with the booking or appointment products type. The user has to select the page and provide all the information on the single product』s page and then the same can be purchased from the CartFlows checkout page.

Note: While using this feature, there should not be any product selected in the backend setting of the checkout page. I:e no products should be selected on the checkout page.

Let』s see how we can enable this feature and start the flow right from the single product』s page.

Step 1: Create a flow and make sure that you have set the checkout step as a first step.Step 2: Navigate to the edit product page to which you want to connect it with the flow. Step 3: Find and open the CartFlows tab

Step 4: Search for the Flow to which you want to connect the product and can change the add-to-cart button text for that product as well.

Step 5: Done. Save the changes by updating the Product.

How to Upgrade to CartFlows Pro Lifetime?

If you are looking to upgrade your existing CartFlows Pro annual license to lifetime, please follow the below 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.

Step 4: Now, click on the Upgrade to Lifetime option on the banner as shown below.

Note: You will see the reduced price on the checkout page when you click on Upgrade to Lifetime.

Step 5: Complete the payment with Billing and Payment details and your CartFlows Pro license will be upgraded to the Lifetime plan!

Frequently Asked Questions!

What will be my final upgrade price?=> Once you click on the Upgrade option and select the Lifetime deal and proceed you will find the final price on the Checkout page. It will display the price deducting your current subscription.

Why I can』t see the Upgrade button?=> This could be in the following cases —1. When your current subscription is not active 2. Or your subscription might be refunded 3. You might have monthly or lifetime split payment subscriptions in your account.

Note: We are allowing upgrades only from CartFlows Pro Annual $239 plan to CartFlows Pro Lifetime $999 plan.

Steps To Renew Your CartFlows Pro Expired License

We』re so glad you decided to continue using CartFlows Pro by renewing your expired license.

Renewal is easy and straightforward. Just follow the steps below and you can continue to use CartFlows Pro to boost your conversions.

Step 1 – Login to your account and visit the Subscriptions page – https://my.cartflows.com/subscriptions/

Step 2 – View subscription you』d like to renew

Step 3 – Click on the Resubscribe button

Step 4 – Enter coupon code, if any, on the checkout page and hit Resubscribe at the bottom.

Elementor Error: The Content Area Was Not Found in Your Page

If you』re using CartFlows and Elementor and you are getting below message when you are trying to edit the CartFlows pages, this article is for you:

Sorry, the content area was not found in your page. You must call the_content function in the current template, in order for Elementor to work on this page.

 Possible Problems and Solutions:

In our experience, below are the things that can cause this error:

Issue with Permalinks:It is possible that your permalinks structure has a problem and need to be refreshed. Refresh Permalinks two-three times and most probably the problem should be resolved.

Trying to edit the blog page:Dynamic pages (like blog page) can not be edited directly with Elementor. You can only edit the static pages from Elementor. If you need to create dynamic pages and have Elementor Pro, please take a look at their documentation.

Conflict with other plugins:If the solution above does not work, let』s see if it is caused by some plugin installed on the website. To check that, temporarily deactivate all plugins (except Elementor of course) and see if this solves the problem. Then activate them back one by one until the problem returns. That way, you can identify if there is some plugin that』s causing the issue.

If none of the solutions above work, try solutions mentioned in the Elementor』s documentation.

How to Customize Checkout Fields of CartFlows?

CartFlows Pro offers the Field Control feature that allows you to have complete control over arranging the fields according to your preference. You can also change the field labels, placeholder texts, and column structures.

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

Step 2. Click Edit on the Checkout Page.

Step 3. Scroll down to the bottom to see the Checkout Layout section. Select the Checkout Fields tab and tick the Enable Custom Field Editor checkout.

You'll find the billing and shipping checkout fields that are displayed on your checkout form. If you expand a field by clicking the arrow on the right-hand side of the field, you'll see the following options that you can customize according to your liking:

Below the field descriptions –

Field Width – the percentage of space in a row that the field occupies

100%

33%

50%

Field Label – the name of the field

Default – the default value of the field

Placeholder – the placeholder text inside the field. Note that it will not display if there is an assigned Default value.

Required – tick the checkbox if you want the field to be a mandatory field

Eye icon – enable/disable if you want the field to be displayed/hidden, respectively, in the form

Drag and Drop – when the mouse cursor is a four-headed arrow, that means you can drag and drop the field to any order that you want

Add New Custom Field – allows you to enter an additional field in the Billing or Shipping section of the checkout form. You can add a Text, Textarea, Select, Checkbox, or Hidden field type. Once you're done setting up the field, simply click on Add New Field and Update the step. This will update the checkout page to reflect the additional field.

How to Troubleshoot a Conflict with the Plugin & Theme?

Are you facing like CSS not being applied correctly, continuous loading of Checkout Page or even Cart not loading correctly? This could mostly be due to some plugin conflict.

Or are you seeing the Checkout Page messed up, or Cart Items stacked on one side? Also, there could be cases where you are seeing your product getting replaced in the cart. Such cases are mostly due to custom changes in the theme or plugin conflict.

Here are some easy steps you can follow to troubleshoot and resolve such conflicts on your own until help from the Support arrives –

Step 1: Switch to Default Themes

Firstly, try to temporarily switch to another theme, like default themes like – Twenty-Twenty or Twenty Nineteen and check if the error or issue persists.

Step 2: Deactivate all Plugins except CartFlows and WooCommerce

Next, you can deactivate all the plugins temporarily and see if that solves the error. If it does then activate plugins one by one to see which plugin is causing the problem.

Note: These are the general debugging processes that all WordPress support teams perform to find 90% of the problems. If you're concerned the debugging process might break your website, you can take a quick backup of your website.

Below is a video that explains the Troubleshooting process –

Do get in touch with our Technical Support, if the issue persists even after following the above-debugging steps. Also, if possible do provide us with the Staging setup and permission to debug this issue on your live site.

How to Enable Collapsible Checkout Fields in CartFlows?

From v1.3.2 of CartFlows Pro, we are providing a new option – Collapsible Options fields

What Does This Option Do?

This option once enabled will hide the respective option fields under their parent option fields.

Note: You need to have the Custom Field Editor option enabled to use this option.

Where to Find this Option?

You will need to edit the Checkout page under the WordPress Dashboard > Flows > Flows Settings.

Now, under the Checkout Layout section > Checkout Fields

Let's see how we can enable this option –

Firstly for the field to Collapsible you need to make sure the fields are not marked as required.

Next, you enable the Collapsible checkbox after that Save/Update the changes and you have made your option field collapsible.

How to Make the Coupon and Additional Fields Collapsible?

To make the Coupon Field and Additional Field collapsible you will firstly need to enable the Enable Coupon Field and Enable Additional Field. Right under the setting, you will see the option to enable Collapsible Coupon Field.

Best Permalinks Settings

On your WordPress install, if you go to Settings > Permalinks, you will have several options on how the link format for your website works.

A general rule of thumb is to always set it to post name.

For CartFlows users this would generate clean permalinks for CartFlows steps.

Otherwise, they can be like:http://domain.com/cartflows_step/checkout-page/

cartflows_step is in between.

How and Where to Add the Custom JS, CSS & PHP Codes?

In this article, you will get to know on how to add the custom JavaScript, CSS & PHP code on your website to achieve your custom requirements –

Note: We recommend to add the Custom PHP code or any JavaScript related code to the child theme』s functions.php file. 

If you have a question about What is Child Theme and how to create it and where to add it. Then the following article will help you on How to Create a WordPress Child theme.

Next, in order to add any custom code to its proper location for proper working, you need to identify among the type of code that you have received.

How to Identify the Javascript code?

Usually, the Javascript code is always enclosed in the opening & closing of scripts tags. i:e . For example https://www.w3schools.com/tags/tag_script.asp

How to identify the CSS code?

The CSS code is simple to identify as this code does not contain any dynamic variables. Usually, the CSS code is enclosed in the opening & closing of scripts tags. I:e . But in most cases, the CSS code is provided without the style tags. Such as .div{ display: none: }.  You can refer to this article for more information: https://www.w3schools.com/html/html_css.asp

How to identify the PHP code?

Usually it is known to the developer who has written the code, but if you are a store owner and don』t know the type of code then either ask your developer or ask the concerned member who has provided the code for the type of the code. Usually, the PHP code is enclosed in the PHP script that starts with . For more information visit: https://www.w3schools.com/php/php_syntax.asp

Below are the steps to add the various steps that will help you to add the below types of code on your website –

Add custom JavaScript codeAdd custom CSSAdd custom PHP code

Let's go though all of them with detailed steps: 

1. How and where to add the custom javascript code?

There are two ways to add the Custom Javascript code on the CartFlows pages as mentioned below –

To add the Custom JavaScript on the CartFlows pages we have provided the Custom Script Tab in the backend setting of each page of the CartFlows. You have to add the created/received custom JS in this field and that will be automatically added on the head section of that CartFlows page only in which you have added the script.

Now, if you want to add the script to all your website pages at the same time, then this Custom Script Tab will not help. This will need more access to be added on all the pages. This requirement is possible to add the custom script from the PHP code from your child theme』s functions.php.

You can directly add the JS code in the head section of the page using the wp_head action but if you want to add your custom JS file then you need to use the wp_enqueue_script action. This action is used to register and add a new JS fine on the website.

Following are some more information on wp_head & wp_enqueue_script action hooks: 

wp_head()wp_enqueue_script()

2. How and where to add the custom CSS code?

There are two ways to add the CSS code to your website. The first way is by adding the CSS through your theme』s customizer from the Additional CSS tab section.

The CSS added from this section will be added globally on your website means it will add the CSS on all the pages of your website.

The second way to add the custom CSS to your website is by creating a child theme and add the CSS code in the child theme』s style.css file. We recommend that if you want to do any customizations then you can do it from the child theme so as to avoid the data loss when you update the parent theme.

3. How to and where to add the custom PHP code.

The simple way to add the custom PHP code on your website is by using the code snippets plugins. These types of plugin provide great flexibility to non-techie users to add any Custom Code on their website more effectively. 

But If you want to add the custom PHP code without using any extra plugin then we suggest to add it by creating a child theme. 

Once the Child Theme is created then it will have the functions.php file and where you have to add your custom PHP code.

All the themes of your website will be located at your_website』s_root_folder/wp-contents/themes/all_your_themes_folders directory. Now, you have to add the created child theme, in the themes directory of your website.

Note: It is recommended adding the Custom Code to the child theme』s functions.php file, in order to avoid any data loss while updating the Parent Theme.

How to Move the Step from One Flow to Another?

If you are looking on – How to move the step from one flow to another, then this article is for you.

In CartFlows we have already added Import/Export feature to easily move/shift the flows from website to another.

But in some cases, there might be a need to move only one Step from one Flow to another. That means to create the exact same step which is already present in another flow.

So there is a very easy way using which you can move the already created step from one flow to another flow. 

To move the flow, you have to open the step in the page builder which you are using and simply export the UI/Design of that step using the page builder. 

Now, once you have exported the step』s UI/Design, go to the flow to which you want to move this step and create a blank step type of your choice, such as landing/checkout/upsell/downsell/thank you. 

For Example: If you want to move the landing step from Flow 1 to Flow 2 then create a blank step of landing type in Flow 2.

Click on above image to watch the small video

Once you have created the blank step in the second flow just open that step in the same page builder and import the previously exported step using the page builder』s import/export feature. 

If you have more questions on how to import the page using the page builder then check this article.