Display Custom Checkout Fields on WooCommerce Invoices, Packing Slips, and Credit Notes

Customizing WooCommerce invoices, packing slips, and credit notes is essential for providing customers with detailed and relevant order information. With WebToffee’s Customizer for WooCommerce PDF Invoices add-on, store owners can easily customize invoices and other documents. In this article, we’ll explore how to add custom fields to the checkout page and display them in invoices, packing slips, and credit notes using the customizer add-on. Below are the main steps involved.

1. Create a custom field on the checkout page.
2. Display the custom field on invoices(preferred document).

To create a custom field on the checkout page, follow these steps:

1. Navigate to Invoice/Packing > General Settings > Advanced from the WordPress dashboard.
2. Head to the Add additional fields on checkout page option.
3. Click Add/Edit Custom Field.
4. Add a new custom field.
5. Click Update Settings.

To learn more, check out this article: Adding Custom Fields to the Checkout Page.

The custom fields added to the checkout page are treated as order meta. To display this in invoices, packing slips, and credit notes, follow these steps:

1. Navigate to Invoice/Packing > Invoice/Packing slip/Credit Note > Customize.
2. Head to the Editor pane on the right.
3. Click the Assets tab.

4. Click the Order fields dropdown.

5. Scroll down to find the order field corresponding to the custom checkout field.

6. Drag and drop the order field to the preferred position.

7. Click Save Template.

The image below shows sample WooCommerce invoices, packing slips, and credit notes with a custom checkout field.