Appearance

On-Page Checkout Form ​

The On-Page Checkout Form turns any page into a complete "choose and pay" page. Instead of sending shoppers to a product page, then the cart, then checkout, you place the checkout form right on your landing page and let them pick what they want to buy from a short list of products you choose.

It is a mode of the existing Checkout Page block, not a separate block. A checkout that you leave on its default settings behaves exactly as before.

INFO

The On-Page Checkout Form requires FluentCart Pro. In the free plugin, the Products panel in the editor shows an Upgrade to Pro notice. Any products you already configured are kept and start working again as soon as Pro is active.

When to Use It ​

This format works best when the page itself is the offer. Typical examples include:

  • A pricing page where visitors choose a plan and pay without leaving the page.
  • A landing page for a bundle, a course, or a software license with a few variations.
  • A campaign page that sells one product with optional add-ons shoppers can tick.

Setting Up the Checkout Form ​

You configure everything in the block editor, on the page where you want the form to appear. Let's start by adding the block.

  1. Open the page in the block editor and click the + button to open the block inserter.
  2. Search for Checkout Page and click the block to add it to your page.

  1. Select the block, then open the block settings sidebar and find the Products panel.

INFO

If your theme keeps page content in a narrow column, the selectable list can look cramped. Place the Checkout Page block inside a Group block set to Wide width, or use a full-width page template, so the form and the list have room to breathe.

Choosing the Checkout Source ​

The Checkout Source setting decides where the checkout gets its items.

  • Default Cart: The checkout shows whatever is in the shopper's main cart, exactly as it works on a standard checkout page.
  • Custom Product: The checkout shows a selectable list of the products you choose, and the shopper's main cart is ignored.

If you switch back to Default Cart later, the products you picked are not deleted. You can park a selection and switch to it again whenever you like.

Set Checkout Source to Custom Product to continue.

Choosing the Products ​

With Custom Product active, add the products you want to offer.

  1. Click Select Product (or Change Products if you already added some) in the panel.
  2. In the Select Products window, search for a product or expand it to see its variations. Each variation is a separate option in the list, so a product with three colors gives you three choices.
  3. Tick the variations you want to offer and click Add Items.

Each product you added appears in the panel with its price. Use the bin icon next to a product to remove it. You can offer up to 20 options in one form.

Selection Mode ​

Selection Mode decides how many options a shopper can buy at once.

  • Select one: The options appear as radio buttons. The shopper picks a single option, which suits plan or tier selection.
  • Select many: The options appear as checkboxes. The shopper can tick several options, which suits add-ons and bundles.

When you choose Select many, an extra setting appears:

  • Maximum Selectable Items: How many options a shopper can tick at the same time, from 1 to 20. Every product you added is always shown. This setting only limits how many can be chosen together.

Selector Heading ​

  • Selector Heading: (Optional) The title shown above the list of options, for example "Choose your hoodie". The field shows "Choose your plan" as a placeholder example.

Update the page when you are done. The form is ready to use.

Using the Shortcode ​

The same form works with the [fluent_cart_checkout] shortcode, which is handy in page builders, classic editor content, or any place where you cannot add a block. Add the product options to the shortcode and it behaves exactly like the Checkout Page block set to Custom Product.

text
[fluent_cart_checkout variant_ids="185,186,187" selection_mode="multiple" max_items="2" selector_label="Choose your hoodie"]
  • variant_ids: A comma-separated list of the variation IDs you want to offer, for example 185,186,187. Adding this attribute switches the checkout to Custom Product automatically. (Required)
  • selection_mode: single for radio buttons or multiple for checkboxes. If you leave it out, the form uses single.
  • max_items: The most options a shopper can tick at once, from 1 to 20. It only applies when selection_mode is multiple.
  • selector_label: The heading shown above the list of options.

A shortcode without variant_ids is a normal checkout page that shows the shopper's main cart. You can find a variation ID in the product settings, the same one you use with the other FluentCart shortcodes.

Preview ​

Here is how the form looks on a live page. The first option is selected by default, and the order summary updates as soon as the shopper picks a different one.

Your page now sells directly from the page itself, with no product page, cart, or separate checkout in between.