How to Modify the Checkout Page Using Backend Settings

CartFlows allows you to customize the Checkout step directly from the backend settings without editing the page design. These settings help you manage products, offers, layout, checkout form behavior, and other configurations from a single place.

You can access these options from the Checkout step settings panel within your funnel.

How to Access Checkout Step Settings

Follow the steps below to open the checkout settings.

Step 1: Navigate to CartFlows > Funnels from your WordPress dashboard.
Step 2: Open the funnel where you want to modify the checkout page.

Step 3: Click the settings icon of the Checkout step.

A settings panel will open where you can configure various options for the checkout page.

Products

In this section, you can assign WooCommerce product that will be purchased through the checkout page.

You can also configure additional options such as:

• Applying coupons for promotions (make sure coupons are enabled in WooCommerce settings)
• Managing product variations
• Adding product restrictions
• Enabling quantity selection

Order Bumps

The Order Bump option allows you to present an additional offer on the Checkout page to increase the order value.

You can create and configure an order bump directly from this section. Once enabled, customers will see the bump offer on the checkout page and can add it to their order with a single click.

Refer to this documentation for more details about Order Bump: https://cartflows.com/docs/how-to-add-order-bumps-to-woocommerce-sales-funnel/

Checkout Form

The Checkout Form tab allows you to manage and customize the checkout fields displayed on the form.

From this section, you can:

• Enable Coupon Field – Allows customers to apply coupon codes during checkout.
• Enable Ship to Different Address – Adds a separate shipping address section.
• Enable Google Address Autocomplete – Allows address auto-completion for faster checkout.
• Enable the Custom Field Editor
• Show or hide specific checkout fields
• Reorder fields using drag-and-drop
• Modify field labels, placeholders, and requirements

These settings help you collect only the necessary information from customers during checkout.

Refer to this documentation for more details about the Field Editor: https://cartflows.com/docs/custom-checkout-fields-and-its-settings/

Dynamic Offers

The Dynamic Offer allows you to control the redirection to Upsell or Downsell steps based on specific conditions set on the checkout page.

Refer to this documentation for more details about the Dynamic Offer feature: https://cartflows.com/docs/cartflows-dynamic-offers-rule-engine/

Checkout Design (Including Shortcode)

The Design tab lets you control the checkout layout and styling, and gives you the checkout shortcode.

When the Design Tab Is Visible

The Design tab appears in the checkout step settings if either:

• Instant Layout is enabled for the funnel, or
• CartFlows > Settings > General > Show Ready Templates for is set to Other.

The Other option is meant for checkouts built with the CartFlows checkout shortcode, for example when your page builder doesn’t have a built-in CartFlows checkout widget or block. If you use Block Editor, Elementor, Bricks or Beaver Builder with Instant Layout off, you design the checkout in the page builder instead.

To set it to Other:

Step 1: Navigate to CartFlows > Settings > General.
Step 2: Locate the Show Ready Templates for option.
Step 3: Select Other from the dropdown.
Step 4: Click Save Settings.

Once saved, the Design tab becomes available in the checkout step settings.

Enable Design Settings

Turn on Enable Design Settings at the top of the tab to show the style options. If you’re using the shortcode, enable this so the styles apply.

Checkout Skin

Choose a layout under Checkout Skin:

• Modern Checkout
• Modern One Column
• One Column
• Two Column
• Two Step
• Multistep Checkout

Two Step and Multistep Checkout are available in higher plans. When Instant Layout is enabled, the skin options are replaced by Left Column Background Color and Right Column Background Color.

Colors and Fonts

Set the Primary Color and Font Family. For more control, open Checkout Texts & Buttons and turn on Enable Advance Options to style:

• Headings: color and font family
• Input fields: style, font, size, spacing and colors
• Buttons: font, size, spacing, colors and hover colors
• Section background color

Checkout Shortcode

When Show Ready Templates for is set to Other and Instant Layout is off, the tab also shows the CartFlows Checkout shortcode: [cartflows_checkout]. Add it to your checkout page to display the full checkout form, including billing and shipping fields, order details and the Place Order button.

Custom CSS and Script

Open the Checkout step settings and go to Settings > General. You’ll find the Custom JavaScript and Custom CSS fields there. On some sites, these appear as a single Custom Script field instead.

This section allows you to add scripts to the checkout page, which can be useful for integrations such as:

• Custom JavaScript functionality
• Custom CSS
• Analytics tracking scripts

Frequently Asked Questions (FAQ)