Step 1: Enable Google Maps Platform

• Visit the Google Maps Platform.
• Click the Get Started button at the top-right corner.

Step 2: Create or Select a Project

• If this is your first time, you’ll need to create a new project.
• Enter a name for your project.
• Click Next to continue.

Step 3: Set Up Billing

• Choose your country and accept the Terms of Service.
• Click Continue.

• Enter your customer and billing information to activate the account.

Step 4: Generate Your API Key

• Go to APIs & Services > Credentials.

• Click on CREATE CREDENTIALS and select API Key.

• Your new API key will be generated and displayed.

You can now copy this key and paste it into the appropriate field in the CartFlows settings to enable address autocomplete.

When a page request is made from one device via the browser, the same cookie is gets sent in the same page request too.

There are some cookies that are used by the CartFlows for the smooth working of some of the CartFlows features.

There is a total of 5 cookies used in the CartFlows and below are the names of those cookies:

• cartflows_session_ : This cookie is set when you visit the CartFlows page. This is registered to set the unique session per user so as to make the checkout process smooth.
• wcf_active_checkout : This cookie is set to determine which checkout page is currently opened and what’s the cart data for that specific checkout page.

For tracking the flow analytics in the CartFlows, there are certain cookies are used. These cookies are as follows:

• wcf-visited-flow- : This cookie is used to track which flow is currently being tracked.
• wcf-step-visited- : This cookie is used to track which step is currently tracked.
• cartflows-ab-test- : This cookie will only be set when the A/B split test feature is enabled.

If your server has specific requirements which require the cookie name should be started with the specific prefix then you can either exclude these cookies from the Server cache or use the following small piece of code to add the prefix to the cookie name.

define( 'CARTFLOWS_COOKIE_PREFIX', 'your_prefix_' );

Note: You need to add this code inside the wp-config.php file and just about the “That’s all, stop editing! Happy publishing” line/statement. This file is available in the root directory of the website/server.

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 <script></script>. 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 <style></style>. 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 <?php and ends 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 –

1. Add custom JavaScript code
2. Add custom CSS
3. Add 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.

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 Variation
• Product Quantity
• Product Title
• Product Description ( Long )
• Product Short Description
• Product Price
• Product 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 ( <a> ), 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 ( <a> ), 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.

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 [email protected] and now on the upsell & thank you page you want to display 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 use. They are divided into two sections and they are

1. Display the Order Fields value on the Upsell / Downsell / Thank You page i:e displaying the checkout fields’ value
2. Display 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 its 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 sent 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 its 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.