Author 詩語

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.

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.

Flow In Test Mode

You may have a question that is What is the Test Mode? Here in this article, we will see what it is exactly and how it is used.

Note: This test mode is used to test/view the CartFlows without actually placing an order. This setting does not control the test/sandbox setting for any of the payment gateway. Each payment gateway has its own sandbox/test mode setting to stimulate the payments.

Test Mode is a simple option that is added in the CartFlows under Flow's setting menu as you can see in the above image.

Let's see how to enable/disable the test mode for the CartFlows flow.

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

Step 2: Click on the setting tab and select the Sandbox tab.

Step 3: Uncheck the check box to disable the test mode if checked and check it to enable the test mode if it is unchecked.

This option is added to help preview editing/design of the CartFlows pages while actually designing them in your page builder. If the test mode is enabled then you don't need to add/select any product in the backend setting of the Checkout, upsell/downsell, optin pages.

Because the funnel creation/designing is in process, and hence it will automatically choose a random product from the WooCommerce Products that you have created and will be added to the cart so that you can easily view the page for testing purposes.

This option also helps you to share the direct URL of the page to your team members to check or even design some sections on the page. As the flow is in Test Mode.

When you are viewing any of the CartFlows step/pages in the frontend then a message will be displayed at the bottom of the page saying the test mode is ON/Enabled.

If you are done with the testing or designing the pages/steps and planning to make the funnel live then you should disable the Test Mode from the Flow setting.

Simply uncheck the option and update.

 Frequently Asked Questions

Q. Is this test mode related to the payment gateways?

The CartFlows test mode is only used to view/design the pages without placing an order to view/test the design of the page.

Q. Test mode is not working?

The test mode selects the random product to be added in the cart to display the checkout page and selects a random order from the WooCommerce to display the Thank you page. If there are no products and no orders present in the WooCommerce -> Orders then the test mode will not work. So, it's mandatory to have at least one product and one order in WooCommerce.

This test mode does is not related to any of the payment gateways. To check the working of the flow i:e to check whether the payments are going through or not has to be checked by putting the payment gateway in the test/sandbox mode.

How to Re-generate the Step』s Dynamic CSS for Shortcodes

This update that is 1.6.12 is filled with more fixes and optimization on CSS delivery and generation.

So, to optimize the dynamic inline CSS delivery, we have come up with a new option for the shortcode of CartFlows pages.

This re-generate inline CSS option will only work for the CSS which is created from the Design Setting of the Steps for only the shortcodes.

Let's see how you can regenerate the CSS manually

This setting is located in the CartFlows Global Setting page. Below is the steps to regenerate the CSS.Step 1: Go to CartFlows -> Settings -> Other Setting TabStep 2: Click on the regenerate CSS button

So, how is this useful in the CSS delivery on the CartFlows pages?

This regenerating CSS option can be used if in case the changes in the design options are not reflecting on the frontend on the CartFlows pages.

This CSS is not customizable directly, because it is dynamically generated for each feature and page and it is generated from the design options provided in the backend setting of the checkout and optin page.

How does this feature work?

Before the 1.6.12 version, the CartFlows was creating and generating the dynamic CSS for each step at every page reload. Due to this, it was adding a little bit of loading speed impact on the CartFlows pages.

But here in this 1.6.12 version, this dynamic CSS will not be created/generated again and again at each page reload/load but it will be directly fetched from the page's metadata and will be added on the page in less time.

So, when the user makes the changes to the design settings of CartFlows pages, then this already generated dynamic CSS which is already present in the database will be deleted and fresh dynamic css will be regenerated & saved in the page's meta on the first load of that page.

Placing Shortcode In The Right Places

When you create a flow using the Ready Templates, the next step link or the shortcodes are automatically added to the call to action buttons or links.

But, if you want to edit the flow or create your own, you can simply copy the link or the shortcodes in the page settings and paste it in your desired area in the page.

Note: Each step has its own shortcode and each shortcode will only work inside of that step. If you add the shortcode to a different page, it won't work :-).

From the WordPress dashboard, edit a Flow from CartFlows > Flows. To edit each step, simply click its corresponding Edit button.

Landing Page

When you edit the Landing Page step, scroll down below and you'll find the Landing Page Settings. In the Shortcodes option, there is the Next Step Link which you will use to add in the call to action button to redirect your customer to the Checkout Page or to the next step of your flow.

Copy this link, edit your page, and paste the link to your call to action button.

Checkout Page

When you edit the Checkout Page step, scroll down to see the Checkout Layout section. In the Shortcodes menu, you'll find the Checkout Page shortcode which you can add to your checkout page.

Simply copy the shortcode, edit the Checkout Page, and add the shortcode anywhere on the page. This displays the customer information form, the order details, and the purchase button.

Thank You Page

When you edit the Thank You Page, scroll down to see the Thank You Page Settings. In the Shortcodes menu, you'll find the Order Details shortcode that you can add to your Thank You Page to display the product purchased by your customer. You can also add other elements such as video/image or social media buttons, depending on your preference.

Note: Each step has its own shortcode and each shortcode will only work inside of that step. If you add the shortcode to a different page, it won't work.

List of CartFlows Cookies

The cookie is a small file created by software or a website to store the data on the user's local device for identification.

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.

How to Add Multiple Order Bump

In the CartFlows and CartFlows Pro version 1.7.0, we have introduced a new and most awaited feature that is Multiple Order Bump.

If you are a new user, then you can start building the order bump directly from step 1 and if you are an existing customer then follow the below steps to migrate the order bump.

From the CartFlows version 1.7.0, you can add multiple order bumps on one checkout page with multiple order bump styles. We have added a total of 3 new order bump styles.

To enable and start using this feature, you need to update the CartFlows free and CartFlows Pro version to the 1.7.0 or greater version and migrate the older Order Bump to New.

As soon as you update both of the plugins to the 1.7.0 version or greater. You will see the migration notice on the dashboard.

Once you see the migration notice, click on the Migrate Order Bump button and migrate the order bums. After migration, you are ready to use the multiple order bump.

This migration process will be carried out in the background and once it is completed, you will display the success notice.

Let』s see how to use and setup the multiple order bump.

Step 1: Navigate to the CartFlows -> Flows

Step 2: Open your flow in which you want to add/edit/update the order bump.

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

Step 4: Navigate to the Order Bump tab and Click on Add Order Bump button to add multiple order bumps or click on Edit or on the name of order bump to edit the order bump

After Clicking on Add new Order Bump button, a popup will be displayed where you can provide your choice of name to the order bump to identify it letter use.

Step 5: After opening the Order bump you will get 4 Tabs and they are Product, Design, Content, and Settings.

After entering inside the order bump setting, you can change the name of the order bump in the same way you do for the steps.

The tabs provided in the order bump are as follows

Product Tab: Select the product and manage the discounts for that productDesign Tab : From this tab you can manage the design i:e look and feel of the Order Bump.Content Tab: From this tab you can manage the display content of the Order Bump.Setting Tab: From this tab you can manage the setting for that particular order bump.

Also, a new improvement is that you can preview the order bump design while designing and updating the content.

Step 6: Once you are done with the changes then it is mandatory to save each tab to save the changes by clicking the save changes button available at the bottom of each tab.

CartFlows Tutorial Video

Welcome to the CartFlows. In this article, we have added our extended video of CartFlows. This video will help you get all ideas about the working of CartFlows and will provide more information about CartFlows.

In this tutorial video, we will walk you through the following points:

All the settings in CartFowsCreating productsCreating your first flowHow to use CartFlows with your page builderLanding page step tutorialCheckout page step tutorialUpsell page step tutorialDownsell page step tutorialThank you page step tutorialUsing CarFlows templatesAnd more…

Note: This is not a How-to video this is more an overall tutorial of CartFlows and it's working.

How to Hide Checkout Fields from the Checkout Page?

In the CartFlows checkout step, there is an option to hide any of the fields that appear in the checkout form.

To hide the fields on the checkout page, below are the steps –

Step 1: Navigate to CartFlows -> Flows -> edit your_flow -> Edit Checkout page.

Step 2: Navigate to the Form Fields tab & then enable the option – Enable Custom Field Editor if it is disabled.

Step 3: Click on the eye icon to Hide/Remove the fields from the checkout page.

Step 4: Click on the Save/Update button and it is done.

Cart Abandonment Cookies/GDPR Compliance

We introduced a separate Cart Abandonment plugin. This is an optional feature that website administrators can choose to enable to disable. Abandoned cart emails very strongly fall under 「legitimate interest for data processing」, they do not require special consent.