How to Customize WooCommerce Invoices with PDF Customizer

With the WebToffee All-in-One WooCommerce PDF Invoices Customizer Add-on, you can edit your WooCommerce Invoice template using a drag-and-drop builder. You can change the invoice layout, add/remove invoice elements, insert custom columns in the product table, add extra rows in the totals section, display checkout fields, and show tax details.

Before you begin, make sure you have:

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

1. Go to WordPress Dashboard → Invoice/Packing → Invoice.
2. Click Customize.

This opens the invoice template editor with a live preview.

You can add invoice elements (like order details, addresses, headings, etc.) using the Assets list.

1. Inside the customizer, open the Assets tab.
2. Choose the element you want to add.
3. Drag and drop the element into the invoice preview area.
4. Click the element you added to edit its properties (text, style, alignment, etc.).
5. Click Save, then Save Template

To style the overall invoice page:

1. In the editor panel, open the Page tab.
2. Update the required settings, such as:
   • Page padding/margins
   • Background color
   • Text size, color, spacing
   • Border style, border width, and border radius
3. Review changes in the live preview.
4. Click Save Template.

Use this when you want to show extra details in the product line items (example: SKU, product meta, attributes, etc.).

1. Open Invoice → Customize.
2. Click the Product table in the invoice preview.
3. In the editor panel, click the “+” (Add Column) icon.
4. Select a Column type from the dropdown.
5. Configure the column settings (header label, meta key, etc., based on the selected column type).
6. Click Save, then Save Template.

Use this when you want to add extra totals fields beneath Subtotal/Shipping/Total.

1. Open Invoice → Customize.
2. Click the Summary table / Totals section in the preview.
3. Click the “+” (Add Row) option in the editor panel.
4. Choose the Field type for the row.
5. Fill in the required settings.
6. Click Save, then Save Template.

1. Open Invoice → Customize.
2. Use a template/layout that supports tax columns (premium layouts).
3. Click the Product table.
4. Configure the price/total display settings to show tax-inclusive or tax-exclusive values (based on your requirement).
5. Click Save Template.

Note: Tax display requires WooCommerce tax to be enabled and configured.

If you’ve added extra checkout fields (like VAT number, delivery notes, etc.), you can print them on the invoice.

1. Go to Invoice/Packing → General Settings → Advanced.
2. Find Add additional fields on checkout page.
3. Click Add/Edit Custom Field.
4. Create/update your field and click Update Settings.

1. Go to Invoice → Customize.
2. Open the Assets tab.
3. Add the custom field (it appears as order meta) to the invoice using drag & drop.
4. Click Save Template.

After making edits:

1. Click Save (for element-level settings where applicable).
2. Click Save Template to apply your changes to the invoice template.