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

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 Modify the Checkout Page Using the Backend Settings?

You can customize the way your Checkout Page looks simply by tweaking the configurations in the Checkout Layout section of the Checkout Step. To do this, from your WordPress admin dashboard, go to CartFlows menu > Flows. Select a Flow and Edit.

Click the corresponding Edit link for the Checkout Step.

Scroll down to the bottom and you’ll see the Checkout Layout Section. This is where you can configure your Checkout Page.

Shortcodes

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 ticking the Enable Order Bump checkbox.

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 bundle 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 Custom Field Editor allows you to control whether a field is displayed or hidden in the form, and in what order it should be through its drag and drop functionality.

Custom Script

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