Since 28th December 2022, this plugin version has been discontinued for purchase. However, support will be continued for existing users. Post the aforementioned date, users who purchase the plugin, which now is made available as multiple add-ons, must refer to their corresponding setup guides. The drag-and-drop customizer feature is now available for purchase as an add-on.

WooCommerce PDF Invoices, packing slips and credit notes plugin | WooCommerce Shipping labels, Dispatch labels and Delivery notes plugin | WooCommerce Address labels plugin | WooCommerce Picklists plugin | WooCommerce Proforma invoices plugin | Customizer for WooCommerce PDF Invoices

Since 28th December 2022, this plugin version has been discontinued for purchase. However, support will be continued for existing users.

How to customize invoice in WooCommerce

Last updated on May 8, 2023

WooCommerce PDF Invoices, Packing Slips, Delivery Notes & Shipping Labels plugin provides dynamic customizer to create custom invoices. It gives you ample flexibility to add, move and arrange different components of an invoice. You can drag and drop address details, order/product metadata, tax-related information, or any custom data, directly in the invoice.

Nonetheless, it has a variety of pre-defined templates, which eliminates the need to work from scratch and allows you to select a layout that is appropriate to your business.

Getting started

  1. Firstly, install and activate the plugin into your WooCommerce store.
  2. From your WordPress dashboard, go to the Invoice/Packing > Invoice.
  3. Next, head on to the Customize tab.

Dynamic customizer

The customizer consists of the following components:

  • Preview pane 
  • Editor pane
  • Predefined templates
  • Undo/Redo buttons
  • Code editor
  • PDF preview
WooCommerce invoice dynamic customizer (click to expand)

Let’s look into each of them in detail.

Preview pane

As the name suggests, the preview pane is where you get a full view of how the document will appear. The items in a preview pane are arranged in rows. Each row has a row toolbar that helps in the following:

Row toolbar

Change position of a set of blocks: Move row up or down

Move the entire row of blocks up or down using the arrow keys. From the toolbar, click on the up or down arrow as shown below:

Moving the entire row up or down (click to expand)

Add new items to the document: Insert rows above or below

To add more items to your document:

  • From the toolbar, click on the insert above/below icon
  • Then, from the available layouts, select a row type.
  • Now, you can either drag an existing block from the preview pane or add one from assets.

To drag an existing block to a row space: From the preview pane, click on a particular block and drag it to the newly created row space.

Dragging an existing block to a new row space (click to expand)

To add an item from assets: From the asset section, select the asset item you’d like to add. Drag the item into the newly created row space. Alternatively, you can add new order or product metadata from assets to the documents.

Inserting new blocks from assets (click to expand)

Deleting a row

To delete an entire row with multiple blocks, hover over the row and click on the delete icon on the toolbar. This will delete all the blocks in that row.

Deleting a row (click to expand)

Deleting a block

To delete a block, select a block and click on the close button. This will delete the selected block.

Deleting a block (click to expand)

Move blocks from one place to another: Drag and drop the blocks

You can drag a block from the preview pane and drop it to a row space to change its position on the document. 

To drag and drop, click and hold on a block and drop to a row space as shown below. 

Editor pane

The editor pane consists of Page, Assets, and Block. Let’s have a look into each item in detail.

Editor pane (click to expand)

Page

Customize the generic properties of an invoice such as Dimension/Background, Typography, Border from the Pages section.

Pages

Block

The preview pane consists of the following blocks:

  • Document title
  • From Address
  • Shipping Address
  • Billing Address
  • Order fields
  • Product table
  • Summary table
  • Return policy
  • Footer

You can further customize the dimension, background, and typography of each block. 

Block editor

Editing a block

To edit a block, choose a block from the preview pane. As a result, its property box will open up.

For example, let’s choose the block Shipping Address from the preview pane to edit it.

Edit the header texts and content of the shipping address here. Expand the item to view its properties. Customize each individual item of the chosen block from here.

Customizing a block (click to expand)

To alter the order of appearance of items in a block, select a block and click on the drag and rearrange icon and move the item to the desired position.

Rearranging items in block (click to expand)

Merging a block

To merge items in a block, click on the Merge icon. As a result, checkboxes will appear against each item. Select the items and click on the Merge button. You can view the merged item in the preview pane. 

Unmerging a block

To unmerge, click on the Unmerge icon. Note that the unmerge icon will appear only for the previously merged items. Clicking on unmerge will reinstate the items into their original position. You can view the unmerged items on the preview pane.

Merge or unmerge (click to expand)

HTML editor for blocks

Click on the HTML icon. The HTML editor for blocks will open up. 

HTML editor for blocks (click to expand)

Deleting an item from the block

You can delete individual items from a block. 

  • To delete an item, click on the delete icon. 
  • As a result, checkboxes will appear against each item. 
  • Select the item/s and click on the Delete icon. The selected items will disappear from the preview pane.
  • Other items available in the block section shows all the deleted item.
  • Click on ADD to add the deleted item back to the block.
Deleting items in a block (click to expand)

Adding new item

Add Additional order or product-related information to the invoice by using the Add item feature. You can click on Order field blocks, Product table block, or the Summary table block to add items to it. 

Adding order meta

Add predefined order data

  • Select an order field block
  • Scroll down to Other items available in the block section. It lists down all the predefined items.
  • Click on ADD against the required item. It then adds the item to the block.
Add predefined order data (click to expand)

Add custom order metadata (third party plugin)

  • Select an order field block 
  • Hit on the Add button in the upper right corner. 
  • Into the pop-up that appears, enter the label name and the meta key(probably from another third-party plugin). The specified label will appear on the invoice.
  • Click on Save. 
Add custom order metadata (click to expand)

Alternatively, you can add custom order meta from Assets > Order fields > Add.

Adding product meta

Add predefined product data

  • Select the product table block
  • Scroll down to Other items available in the block section. It lists down all the predefined items.
  • Click on ADD against the required item. It then adds the item to the block.
Add predefined product data (click to expand)

Add custom product metadata(third party plugin)

  • Select the product table block
  • Hit on the Add button in the upper right corner. 
  • Into the pop-up that appears, enter the column header and select a value. The specified header will appear on the product table of the invoice.
  • Click on Save.
Add custom product meta (click to expand)

Assets

Insert a whole block or individual block items to the preview pane using Assets. Some of the predefined assets listed in the plugin are the following:

  • Company info
  • Addresses
  • Order fields
  • Product table
  • Others

Adding assets

  • To add an Asset, click on the expand icon.
  • The block along with its items will open up. 
  • Press and hold the drag icon to paste the entire block or its individual items to the preview pane. 
Adding company logo from Assets (click to expand)

Search assets

  • Input the name of the asset to search it in the predefined list.
  • Possible matches will be populated. Select the asset from the list and drag it to an empty row of the preview pane. 
Searching for an asset (click to expand)

Add new asset

  • The ‘Add new’ option is available only for the order field block. It is typically used to add order metadata to the invoice. 
  • To add order metadata, click on the Add new button.
  • Into the popup that appears, enter the label name and the meta key.
  • Click on Save.
Adding new order meta via assets (click to expand)

Predefined templates

Creating a template

To view the predefined templates:

  • From the upper left corner beneath the template name, click on Create new template.
  • A pop up window opens up with the available templates .
  • Choose a layout for the template. 
  • The selected layout will then be available for further customizations.
Creating and managing templates (click to expand)

Changing the layout of a template

At any point in your customization, you can switch between the layout of your template.

To change the layout:

  • From the upper left corner of the customizer window, click on Change layout.
  • A popup window opens up with the available templates.
  • Choose a layout for the template. 
  • The selected layout will then be available for further customizations.

Saving a template

To save a template for future use:

  • Click on the Save button from the header. 
  • Into the popup window that appears, enter a name for the template and click on save.
  • Access all the saved templates from the ‘My templates’ section for later use. 

Activating a template

To activate an editing template:

  • From the upper right corner of the customizer window, click on the three lines. 
  • Select the option Activate.
  • The chosen template will be active and can be used for generating documents.

Deleting a template

To delete an editing template,

  • From the upper right corner of the customizer window, click on the three lines. 
  • Select the option Delete.

View, edit or delete previously saved template

View, edit, or delete all the saved templates from the ‘My templates’ section:

  • From the upper right corner of the customizer window, click on the three lines. 
  • Choose ‘My templates’. A dialog box will open up.
  • You can Activate, Customize or Delete a template from here.
    • To activate, click on Activate.
    • To customize an existing template, click on customize. The previously saved template will open up for customization.
    • To delete an existing template, click on delete.

Search a template

Type in an existing template name in the search box to search by its name.

Document title and status

You can view the document title and its current state from the upper left corner of the customizer header.

You can identify the current state of a template by examining its document title. For active templates, the plugin marks ‘Active’ in brackets beside the document title. For example, for a template ‘My new invoice’, its active state will be denoted as My new invoice(Active).

Document title and staus

The unsaved template will be shown as <Untitled template> on the header. 

Templates undergoing customization will show only their name without the state. For example, If an existing template ‘My invoice’ is subjected to edit, then its document title will be shown as ‘My invoice’ only.

Undo/Redo buttons

Undo or Redo any action done during the customization by using the undo/redo button on the customizer header.

Undo and redo buttons

PDF preview

From the upper right corner of the customizer header, click on the three lines. 

  • Click on Generate PDF preview. 
  • Invoice in PDF format will open up.
  • You can download, print, rotate, fit to page, zoom in/out from here.
  • Click on close to exit the preview
PDF Preview

Code editor (Document)

To edit the whole document via code:

  • From the upper right corner of the customizer header, click on the hamburger menu. 
  • Click on the Code editor. The HTML editor box will open up. 
  • You can make necessary changes to the editor and click on the Apply changes button.
  • Click on Close or Cancel to exit the editor. 
Document code editor (click to expand)