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 > Customize from your dashboard.

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.

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 – In the code editor you can see certain shortcodes. They are WordPress specific codes that embed files or create objects in a single line. These list of the shortcodes used will be visible for your reference if you click on the Shortcodes button.

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.