Skip to content

Product options forms

Some products need the buyer to tell you something before they can be made: a name to engrave, a file to print, a date to deliver, a size that is not a variation. A product options form is a form kind that collects exactly that, attaches it to the cart line, and carries it all the way through to the order.

You need: the Forms module and the FluentCart or WooCommerce module on.

Building one

  1. VX Modules → Forms → Add form.
  2. Choose Product options form.
  3. On Build, add the fields you need from the field kit — text, choices, uploads, dates, anything.
  4. On Settings, say which products it applies to and where it goes.
  5. Save.

A new product options form starts with one required text field, Your text, so there is something to see immediately. Replace it with what you actually need.

Which products

SettingWhat it does
This form is forEvery product · Chosen products · Chosen categories
ProductsType to search by title
CategoriesPick product categories

One form per product. When two forms cover the same product, the first in the list wins — so put a specific form above a catch-all one, or scope them so they do not overlap.

On the product page

This is the part that puts the fields on the front-end product single.

SettingWhat it does
Show on the store's product pagePlace the form automatically on the product's own page. Off means it only shows where you place it by hand
Hide the store's own buttonsFluentCart only — so the only way into the cart is through this form
Variation pickerShow a dropdown of options with prices · Hide it and use the default. Only used when the form is placed on a page by itself
QuantityA quantity box. Only used when the form is placed on a page by itself
ButtonThe label on the button. Defaults to Add to cart

What automatic placement actually does

WooCommerce renders the form's fields inside WooCommerce's own add-to-cart form, directly above its button. They post with the variation and the quantity WooCommerce already asks for, so there is no second button, no second quantity box, and nothing to keep in sync. WooCommerce's own validation runs first; the answers are checked after it passes.

FluentCart renders the form beside FluentCart's variation picker and quantity, with its own Add to cart button. It reads FluentCart's picker and quantity at submit time. Turn on Hide the store's own buttons and FluentCart's buy buttons are hidden, leaving your form as the only route into the cart.

Placing it by hand

Turn Show on the store's product page off and place it like any other form:

[vx_form id="engraving"]

…or the VX Form block, the Elementor widget, or the Bricks element.

Placed this way on FluentCart, the form supplies its own variation dropdown and quantity box — that is what the Variation picker and Quantity settings are for. The product it is about is the post the page is showing, so a form placed on a page that is not a product page has nothing to add to the cart, and administrators see a note saying so.

The "Show on the store's product page" toggle on WooCommerce

On WooCommerce, this toggle does not currently suppress the automatic placement — the fields render inside WooCommerce's add-to-cart form whenever the form applies to the product. Scope the form with Which products rather than relying on the toggle. It works as described on FluentCart.

After adding to cart

FluentCart forms choose what happens next:

ChoiceWhat the buyer sees
Go to checkoutStraight to checkout
Go to the cart pageThe cart
Stay on the page and reload itThe same page, so the cart icon updates
Stay on the page and show a messageA message in place of the button

The message accepts {product}, {option}, and {quantity}.

On WooCommerce the fields post with WooCommerce's own Add to cart, so WooCommerce's own after-add behavior and notices apply.

Where the answers turn up

This is the whole point: the answers ride the cart line into the order and show everywhere an order is read.

WhereFluentCartWooCommerce
In the cartUnder the line itemUnder the line item
At checkoutUnder the line itemUnder the line item
On the receipt / thank-you pageYesYes
In the store's order emailsYes, with the line item
On the admin orderA Product options card under the itemsUnder the item, as WooCommerce's own item meta
In the activity feedA note on the order
On the Entries screenAn entry linked to the orderAn entry linked to the order

The admin order screen

WooCommerce. Each answer is written to the line item as ordinary readable meta, which is what makes WooCommerce show it by itself — on the order screen, in the emails, and on the customer's own order page. Everything goes through WooCommerce's order and item classes, so it works the same on the classic order tables and on high-performance order storage.

Uploads need one extra step, because readable meta can only carry a file's name. The module writes a second, hidden record holding the attachment ids, and prints those under the item on the admin order as Uploads: followed by clickable links. Both hidden records are declared hidden so they never show as raw keys on the order screen.

FluentCart. FluentCart's order screen collects cards through its own widget slot, so the module adds a Product options card — What the buyer asked for — listing each item with its answers and its uploads as links. The card is moved up under the items, and it is a move only, so it is readable either way. A note also goes into FluentCart's activity feed, which is the record of what happened; the card is what someone filling the order reads.

Choice labels, not stored values

Answers are recorded with their labels, so an order says Gold plated, not gold-01.

Entries and notifications

Every answered form leaves an entry that links straight to its order, so the Entries screen is a searchable log of every customization you have been asked for.

Notifications send when the order is placed, not when the item is added to the cart. An abandoned cart sends nothing. The entry is held as a draft until the order exists, then published, pointed at the order, and its notifications go out. The sync runs once per item and is safe to run again, so a card payment that completes the cart, a cash-on-delivery order placed directly, and a later status change all reach the same result exactly once.

A worked example: engraving

The form

FieldTypeSettings
Engraving textTextRequired · Character limit 20 · Help text Up to 20 characters
FontRadio buttonsChoices: Serif, Script, Block · Columns 3
Gift wrap?Yes / no switch
Message cardParagraphShow when Gift wrap? is checked

The settings

  • This form is for → Chosen categoriesJewelry
  • Show on the store's product page → On
  • Button → Add engraved item to cart
  • After adding → Go to the cart page

The notification

  • Send to → your fulfillment address
  • Subject → New engraving order: {field:f:engraving}
  • Message → {all_fields}
  • Send when → when the order is placed

The buyer types their engraving on the product page, the answers follow the line into the order, your fulfillment inbox gets the details as soon as the order is real, and the Entries screen keeps a record that links back to the order.

Notes and limits

  • Product options forms do not create posts. They collect answers, and the entry is the record.
  • The honeypot and a one-second timing check are on by default, since these forms are open to anyone.
  • Conditional logic works as it does on any form, and is re-checked on the server — a hidden field is neither required nor recorded.
  • Uploads land in the media library. Set the accepted types and the size limit on the field, and remember the site's own upload limit is the ceiling.

Built by Code Wattz.