How do I add Custom fields to the Order Information Checkout page in Commerce 2?

Question

I would like to add a set of additional fields to the order summary so after a user adds a product they would need to fill out some conditional fields of information alongside their billing information.

Drupal Commerce 2 documentation is pretty lacking at the moment and I am expecting to change the YAML files to add new fields. However, there seem to be various places to add new fields but nothing is showing up as additional fields on the order summary page.

What are the steps to add new fields?

Answer 1

I found the answer to this, it's not very obvious at the moment due to the lack of documentation but it's blinding simple when you know how.

Install the new profile module. https://www.drupal.org/project/profile

Edit the page:

configuration > people > user profile

Here you can add commerce2 user pane or new fields.

For me I needed to make a new Content type form that the user could create and fill out as part of the checkout process, so I used the inline entity form.

Really you could use any field collections or paragraph's to add to the user fields as I notice there is a new patch to support field group and paragrahs.

I hope that helps someone else looking for this answer.

Answer 2

Since the release of Commerce 2, there are some new recent changes that add an additional way to add fields to an order. Which maybe better than the previous way.

To add a new field to the order:

1. Add your field on /admin/commerce/config/order-types/default/edit/fields
2. On the Manage form display add the new CUSTOM DISPLAY SETTINGS checkbox Checkout
3. On your new display for checkout add only your field.
4. Then navigate to the Oder Checkout flows, we are using default. /admin/commerce/config/checkout-flows add the Order fields: Checkout to the Order Information section. You can add a fieldset at this point in the options.
5. Save and view the field.

For this to display in the commerce-order-receipt.html.twig you will need to add a twig changing the field name for your machine name.

  {% if order_entity.field_name.value %}
    {{ order_entity.field_name.value }}
  {% endif %}

Then finally. To have the custom fields on order admin view page you will need to add this patch.

Answer 3

The original answer is outdated. In order to add forms to the checkout you need to update the "customer" user profile.

Edit the customer profile and add fields as necessary (admin/config/people/profile-types/manage/customer).

Then configure your displays as needed.

Once this is done the custom fields will be shown during checkout.