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 January 28, 2025

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. Head to the Add additional fields on checkout page option.
  2. Add a new custom field to the checkout page.
  3. Save Settings.

Adding custom fields

Step 1: Head to the Add additional fields on checkout page option

  1. Navigate to Invoice/Packing > General Settings > Advanced from the WordPress dashboard.
  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.
Option to add additional fields on the checkout page
Option to add additional fields on the checkout page

Step 2: Add a new custom field to the checkout page

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.

  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 button. 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 has now been added to the checkout page.
Custom field added
Custom field added

Step 3: Save Settings

  1. Click on Update Settings to save the changes.

The image below shows a checkout page with a custom field(Order note).

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 on the 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. Head to the Previously added tab.
  2. 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 fields on Invoices

To display the custom field (Order Note‘) on invoices:

  1. Navigate to Invoice/Packing > Invoice > Advanced.
  2. Head to the 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