Customizer for WooCommerce PDF Invoices – Setup Guide

Customizer for WooCommerce PDF Invoices plugin gives you ample flexibility to add, move and arrange different components of an invoice, packing slip, delivery note, shipping label, dispatch label, credit note, picklist and proforma invoice. You can drag and drop address details, order/product metadata, tax-related information, or any custom data, directly into the document type.

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

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

The customizer consists of the following components:

• Preview pane 
• Editor pane
• Customizer header

As the name suggests, the preview pane gives you a full view of how the document will appear.

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

The items in a preview pane are arranged in rows. Each row has a row toolbar that helps to better position the blocks.

• Move row up – 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:
• Move row down – Moves the entire row of blocks down.
• Insert row above – Click to move the entire row of blocks up. Allows to drag an existing block from the preview pane or add one from Assets.
• Insert row below – Click to move the entire row of blocks up. Allows to drag an existing block from the preview pane or add one from Assets.
• Delete a row – Allows 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.

The editor pane consists of Page, Assets, and Block.

• Page –  From the Pages section, customize the generic properties of an invoice, such as Dimension/Background, Typography, and Border.

• 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
  • Drag icon – Allows adding an Asset. Click on the expand icon, and 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.
    

Block – Allows further customization of each block’s dimension, background, and typography. To edit a block, choose a block from the preview pane. As a result, its property box will open up in the editor pane.

• Drag and re-arrange icon – To alter the order of appearance of items in a block, select a block, click on the drag and rearrange icon, and move the item to the desired position.
• HTML icon – Click on the HTML icon to open the HTML editor for blocks.
• Plus icon – This icon allows store owners to add additional items like new columns, rows, and order meta fields. For example, store owners can use this icon to add a new column to the product table, a new row to the summary table, and a new order meta to the order meta fields section.
• Delete icon – Allows to delete an item. As a result of clicking the icon, 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 – This section shows all the deleted items. Click on ADD to add the deleted item back to the block.

Add new order meta dialogue box – Select an order field block. Hit the Plus icon in the upper right corner. In 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.

Add new column dialogue box – Select the product table block. Hit the Plus icon in the upper right corner. In the pop-up that appears, enter the Column header and Select a Value. The specified header will appear on the invoice’s product table.

Add new row dialogue box – Select the summary table block. Hit the Plus icon in the upper right corner. In the pop-up that appears, select a Field type and fill in the fields that follow. The specified row will appear on the invoice’s summary table. For more details, check out the following article: Add a New Row to WooCommerce Document Types.

• Document title and status – The document title and its current state are displayed in the upper left corner of the customizer header.
  • Examining a template’s document title can reveal its current state. For active templates, the plugin marks ‘Active’ in brackets beside the document title. For example, a template ‘My new invoice’ will have its operational state 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 editing, its document title will be shown as ‘My invoice’ only.
• Create new template – A pop-up window with the available templates opens. Choose a layout for the template. The selected layout will then be available for further customization.
• Undo/Redo buttons – You can undo or Redo any action taken during the customization using the undo/redo button on the customizer header.
• HTML icon – This icon allows editing the whole document via code. You can make the necessary changes to the editor by clicking on the Apply changes button. Click on Close or Cancel to exit the editor. 

• Eye icon – Invoice in PDF format will open up. You can download, print, rotate, fit to page, and zoom in/out from here. Click on Close to exit the preview.
• Save Template button – Allows saving a template for future use. Click on the Save button, into the popup window that appears, enter a name for the template and click on Save.
• Save and Activate button – Allows saving and activating the current template. The chosen template will be active and will be used for generating documents.
• Cancel button – The cancel button undoes all the customization one has done on the current template.

• Hamburger icon

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

My templates – This section lists all the templates you created. It also adds other actions to the templates, such as edit, activate, and delete.

• Search a template – Type in an existing template name in the search box to search by its name.
• Activate, edit, or delete previously saved template – Allows activating, customizing or deleting a template. Click on the respective icons.