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.

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.

The customizer consists of the following components:

• Preview pane 
• Editor pane
• Predefined templates
• Undo/Redo buttons
• Code editor
• PDF preview

Let’s look into each of them in detail.

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:

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:

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.

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.

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.

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

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.

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

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. 

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.

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.

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. 

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.

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

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.

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. 

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

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

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

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

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

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

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

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

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

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.

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.

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. 

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.

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

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

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

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 or Redo any action done during the customization by using the undo/redo button on the customizer header.

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

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.