Using the code editor for document template customization for WooCommerce

PDF invoice, Packing Slips, Delivery Notes & Shipping Labels plugin for WooCommerce helps you create Woocommerce shipping documents. You can also download the documents as a PDF file, and send the documents to the customer’s e-mail as a PDF file.

The plugin provides you with standard templates for each of the documents that you can select and activate. Upon activation, these templates will be used to print the documents. These standard templates can be customized to personalize the documents.

There are two ways in which you can select a template to change the settings and customize.

1. Go to Plugins > Installed plugins > Print Invoice, Packing Slips, Delivery Notes & Shipping Labels > Settings > Customize
2. Invoice/Pack List > Choose the document type >Customize tab.

Hover over any of the templates and click Customize to customize the template. There are two ways to customize the template – using the visual editor and using a code editor. This article explains how to customize the template using the code editor. To read more about customizing templates in the visual editor read this article.

Most of the customization can be done with the visual editor with the toggle of the i/o button and by changing the settings values of the field attributes. Certain changes can only be done using the code editor. Like changing the font family of the template, adding margin or padding to certain elements of the document template, or changing the size of the template to be printed. Changes made in the code editor will be retained even when the plugin is updated.

To customize a template using the code editor follow the steps. All the templates in the plugin can be customized in almost the same way. In this document let us see how we can customize a standard template for invoice.

1 – Select the template you want to customize.

You can select any template from the available options and proceed further to customize it. The visibility of each element in the invoice can be controlled by the toggle button incorporated in this tab. Additionally, some generic elements like the font size, style, color, and other specific attributes of each element can also be changed as per your need.

2 – Click on the Code Editor button which will take you to the code editor which you can use for the customization of the template.

3 – While making changes via code editor it would be better for you to refer the help which briefs about placeholders, alternate classes for RTL support, etc as shown below:

4 – You can edit the template from the code editor, add custom CSS or link to CSS file. After finishing the customization, you can save and activate the template.

After customizing a standard template, a new template will be generated. You may choose to make changes to the templates you have customized.