Adding Custom Fields to the Checkout Page

Custom fields at checkout allow WooCommerce store owners to gather relevant customer information, such as order preference, tax information, or even personal messages. Displaying these fields on invoices, packing slips, and credit notes is essential for accurately reflecting order details. The WebToffee’s WooCommerce PDF Invoices, Packing Slips, and Credit Notes plugin allows store owners to add custom fields to the checkout page and display these fields on invoices, packing slips and credit notes. 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.

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.

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.

2. To add a new custom field, click on Add/Edit Custom Field button. A Checkout Field Inserter box will open up.

3. 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).

4. Click on Save. The custom field has now been added to the checkout page.

1. Click on Update Settings to save the changes.

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

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).

2. Click on the Edit icon present against the preferred custom field.

3. Make the necessary changes in the edit window (Store owners cannot edit the Meta Key of the custom field).
4. Click on Save and update the changes.

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.

3. Click on OK and complete the deletion.

After adding a custom field (e.g., order note) to the checkout page, you can display it on WooCommerce invoices, packing slips, and credit notes. Follow the below steps to display custom fields on order documents:

1. Navigate to Invoice/Packing > Invoice(packing slip or credit note) > Advanced.
2. Head to the Order meta fields option.
3. From the dropdown, select “Order Notes” (_order_note).

4. Click on Update Settings.

The images below display a WooCommerce invoice, packing slip, and credit note, each featuring the custom field (“Order Note”).

The WebToffee WooCommerce plugin allows store owners to add custom fields to the checkout page (like order notes or tax details) and display them on invoices, packing slips, and credit notes. By creating or selecting fields and saving settings, these details can be easily captured and shown across order documents.