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

Note: If you are using the Modern Checkout, the Email Address field cannot be edited. It is always included on the form and cannot be renamed or removed.

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.

Note: You must enable the Custom Field Editor to access this feature.

Where to Find the Setting

1. Go to CartFlows > Funnels and open your funnel.
2. Open setting of the Checkout step.
3. Go to the Checkout Form tab.
4. Go to the Field Editor section and enable the Enable Custom Field Editor toggle.

How to Enable Collapsible Fields

1. Locate the field you want to collapse.
2. Make sure the field is not required.
3. Enable the Collapsible toggle.
4. Click Save/Update.

The selected field will now be hidden under a toggle on the Checkout page.

Make Coupon and Additional Field Collapsible

1. Enable the Coupon Field or Additional Field setting first.
2. Once enabled, the Collapsible toggle will appear.
3. Enable the toggle and save your changes.