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:
- Head to the Add additional fields on checkout page option.
- Add a new custom field to the checkout page.
- Save Settings.
Adding custom fields
Step 1: Head to the Add additional fields on checkout page option
- Navigate to Invoice/Packing > General Settings > Advanced from the WordPress dashboard.
- 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.

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.
- 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.
- To add a new custom field, click on Add/Edit Custom Field button. A Checkout Field Inserter box will open up.
- 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).
- Click on Save. The custom field has now been added to the checkout page.
Step 3: Save Settings
- Click on Update Settings to save the changes.
The image below shows a checkout page with a 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:
- 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).
- Click on the Edit icon present against the preferred custom field.
- Make the necessary changes in the edit window (Store owners cannot edit the Meta Key of the custom field).
- Click on Save and update the changes.
Deleting custom fields
To delete a custom field (other than the default ones):
- Head to the Previously added tab.
- Click on the Delete icon present against the preferred custom field. A confirmation dialog box will pop up.
- Click on OK and complete the deletion.
Displaying the custom fields on Invoices
To display the custom field (‘Order Note‘) on invoices:
- Navigate to Invoice/Packing > Invoice > Advanced.
- Head to the Order meta fields option.
- From the dropdown, select ‘Order Note‘(order_note).
- Click on Update Settings and save changes.
The image below shows a WooCommerce invoice document with the custom field(‘Order note‘) in it.
Discover More:
Comment (1)
Terri
November 9, 2022
Hi, is there any way to move the custom checkout field below the Order Notes field? Right now the custom field sits between the Phone Number field and the Email Address field…
Thanks!