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

Step 2. Click Edit on the Checkout Page.

Step 3. Select the Checkout Form tab and toggle 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 setting option 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

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 – Switch the toggle 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.

Note: The addition of custom fields is a feature exclusively available with the CartFlows Pro plans.

Click the corresponding Settings option for the Checkout Step in the Funnel.

Upon clicking the “Settings” option, a tab smoothly slides into view, unveiling an array of available options and settings for your exploration.

Shortcode

This is where you can find the shortcode which you can add to your checkout page. It contains the billing checkout fields, shipping checkout fields, order details, and the Place Order button.

Select Product

This is where you add the product you would like to link to your checkout page. You can also add a coupon if you’re running a promotion for your product. Make sure that you enable coupons in the WooCommerce settings. Here, you can also configure restrictions, variations, and enable quantity.

Order Bump

If you want to add order bump to your checkout page, you can simply configure it in the Order Bump menu by clicking the corresponding order bump settings.

To learn more about adding an order bump, check out this article.

Checkout Offer

You can enable Checkout Offer if you want to offer a product or another related product to get your customers to buy more stuff before the payment is made. No matter which option they choose, yes or no, the order made is automatically processed.

Checkout Design

This is where you can customize the checkout form. You can set it as one column, two-column, or two-step. You can also change the typography and the primary color. If you enable the Advance Options, you’ll be able to customize the heading, input fields, buttons, and background color.

Checkout Fields

In this section, you’ll be able to customize the checkout fields.

• The Enable Coupon Field allows you to add a coupon field for the customers to enter the coupon code.
• The Enable Additional Field allows you to insert additional fields so you can get some more information about your customer.
• The Enable Ship To Different Address adds another address field for shipping.
• The Enable Google Address Autocomplete allows you to enable the Autocomplete address feature on that specific checkout. To learn more about configuring Google AutoComplete, check out this article.

Custom Script

Adding a custom script allows you to add live chat, bots, custom pixels, and more to your checkout page.

Important Notes

The design tab will only be visible if you are using a page builder other than Block Editor, Elementor, and Beaver builder

Enable the Design Tab for Shortcode Access

1. To access the Design tab where the shortcode is available, ensure that your page builder is set to “Other” in the CartFlows settings.
2. From your WordPress dashboard, go to CartFlows > Dashboard > Settings > General and select Other from the dropdown list.
3. Click Save Settings.

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.