Home > Docs > Customizer for WooCommerce PDF Invoices – Setup Guide

Customizer for WooCommerce PDF Invoices – Setup Guide

Last updated on November 21, 2023

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 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 in your WooCommerce store.
  2. From your WordPress dashboard, go to Invoice/Packing > Invoice.
  3. Next, head on to the Customize tab.

Dynamic customizer

The customizer consists of the following components:

  • Preview pane 
  • Editor pane
  • Customizer header

Preview pane

As the name suggests, the preview pane is where you get 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.

Row toolbar

Row toolbar
Row toolbar
  • 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.
GIF to show the functionality of Row toolbar
GIF to show the functionality of Row toolbar

Editor pane

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

  • Page – Customize the generic properties of an invoice such as Dimension/Background, Typography, and Border from the Pages section.
Editor pane - Page Tab
Editor pane – Page Tab
  • 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 to 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 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.
    • Merge icon – Allows merging items in a block. 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. 
    • Unmerge icon – Allows unmerging of merged items. 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.
    • HTML icon – Click on the HTML icon to open the HTML editor for blocks.
    • 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 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.
    • Add new column dialogue box – 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.

Customizer header

  • Document title and status – The document title and its current state are displayed in the upper left corner of the customizer header.
    • The current state of a template can be recognized by examining its document title. The plugin marks ‘Active’ in brackets beside the document title for active templates. For example, for a template ‘My new invoice’, its operational 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 editing, its document title will be shown as ‘My invoice’ only.
  • 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.
  • Undo/Redo buttons – Undo or Redo any action done during the customization using the undo/redo button on the customizer header.
  • HTML icon – Allows editing the whole document via code. You can make necessary changes to the editor and click 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.
  • 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 template – Lists all the templates that you created. It also adds other actions to the templates such as edit 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.
    • Change layout – At any point in your customization, you can switch between the layout of your template.
  • Change layout – At any point in your customization, you can switch between the layout of your template.
  • Save 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.