Home > Docs > WooCommerce PDF Invoices, Packing Slips and Credit Notes Plugin > Adding Custom Fields to the Checkout Page

Adding Custom Fields to the Checkout Page

Last updated on December 20, 2023

Custom fields on checkout pages are like special boxes where customers can share specific details about their order. This helps the store owners understand their preferences and meet their needs accurately. The WebToffee’s WooCommerce PDF Invoices, Packing Slips, and Credit Notes plugin provides the option to add custom fields to the checkout page. To add a custom field on the checkout page:

  1. From the WordPress dashboard, navigate to Invoice/Packing > General Settings > Advanced tab.
  2. Head to the Add additional fields on checkout page option.
  3. Click on Add/Edit Custom Field.
  4. In the Checkout Field Inserter, under the Add New tab, add all the required custom field data.
  5. Click on Save.

Adding custom fields

Follow the steps below, to add a custom field on the checkout page:

  1. Navigate to Invoice/Packing > General Settings > Advanced.
  2. Head to Add additional fields on checkout page option. The plugin provides two predefined custom fields ‘SSN’ and ‘VAT’. Store owners can choose from the predefined fields and also create new custom fields of their liking.
Navigating to Add additional fields on the checkout page
Navigating to Add additional fields on the checkout page
  1. To choose a predefined custom field, click on the preferred custom field from the dropdown and click on Update Settings. The custom field will be added to the checkout page.
Predefined custom fields
  1. To add a new custom field, click on Add/Edit Custom Field. A Checkout Field Inserter box will open up.
Add/Edit Custom Field button
Add/Edit Custom Field button
  1. Inside the Checkout Field Inserter, type in the Field name, Meta Key, and the Placeholder. Now click on Yes or No to make the field mandatory or optional (Let’s take an example of adding a custom field called Order note” to the checkout page).
Checkout Field Inserter
Checkout Field Inserter
  1. Click on Save. The custom field is now added to the checkout page.
Custom field added
Custom field added
  1. The image below shows a checkout page with a custom field(Order note) in it.
Checkout page with custom field (Order note)
Checkout page with custom field (Order note)

Editing custom fields

Store owners can edit previously added custom fields in the Checkout Field Inserter. To edit a custom field:

  1. Click onthe Previously added tab in the Checkout Field Inserter. The tab will list all the custom fields including the default custom fields provided by the plugin (SSN and VAT).
Previously added tab showing the various custom fields
Previously added tab showing the various custom fields
  1. Click on the Edit icon present against the preferred custom field.
Edit icon
Edit icon
  1. Make the necessary changes in the edit window (Store owners cannot edit the Meta Key of the custom field).
  2. Click on Save and update the changes.

Deleting custom fields

To delete a custom field (other than the default ones):

  1. Under the Previously added tab, click on the Delete icon present against the preferred custom field. A confirmation dialog box will pop up.
Delete icon
Delete icon
  1. Click on OK and complete the deletion.

Displaying the custom field in the Invoice document

To display the custom field (Order Note‘) in invoice documents:

  1. Navigate to Invoice/Packing > Invoice > Advanced.
  2. Head to Order meta fields option.
Navigating to Order meta fields
Navigating to Order meta fields
  1. From the dropdown, select ‘Order Note‘(order_note).
Selecting the custom field
Selecting the custom field
  1. Click on Update Settings and save changes.

The image below shows a WooCommerce invoice document with the custom field(‘Order note) in it.

WooCommerce Invoice document with custom field ‘Order Note‘ in it