Customize WooCommerce Invoices, Packing Slips, and Credit Notes with the Drag and Drop Tool

Customizing WooCommerce invoices, packing slips, and credit notes is now easier than ever with WebToffee’s Customizer for WooCommerce PDF Invoices. The drag-and-drop tool within the customizer, lets store owners seamlessly personalize their documents by adding, rearranging, and customizing elements like order meta fields and company information—without any coding. This article walks you through how to use the drag-and-drop tool to customize WooCommerce documents efficiently.

Below are the brief steps in customizing documents using the drag-and-drop tool:

1. Access the Customization Page
2. Open the Assets Tab
3. Find the Preferred Element
4. Drag & Drop the Element
5. Save Your Changes

Before you start customizing, ensure you have the following prerequisites:

1. Install and activate the WooCommerce PDF Invoices, Packing Slips, and Credit Notes plugin.
2. Install and activate the Customizer for WooCommerce PDF Invoices add-on.

This tool allows store owners to add elements such as company info, addresses, order meta fields, etc, to the document.

1. Navigate to Invoice/Packing > Invoice (Packing slip or Credit Note) > Customize from the WordPress dashboard.

1. Click on the Assets tab, from the Editor pane.
2. This tab lists all the elements you can add to the document.

1. Use the search bar or browse the dropdown list to locate an element (e.g., ‘Customer Note’).
2. Click “Add New” under the Order Fields dropdown to add a new order meta field. Upon adding, you can drag and drop the element as usual. For more details on adding order meta fields to invoices, check out the article: Adding Order Meta Using Customizer.

1. Once you find your element, drag and drop it into place within the template

1. Click “Save Template” to apply changes to the active template.

The images below display sample WooCommerce invoice, packing slip, and credit note each highlighting the new element (‘Customer Note‘).