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.
- Go to Plugins > Installed plugins > Print Invoice, Packing Slips, Delivery Notes & Shipping Labels > Settings > Customize
- 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.
Steps for Customizing Templates with Code editor
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.
All-In-One - Generate PDF Invoice, Packing Slip, Labels & Delivery Note.
Used by 10,000+ WooCommerce Stores
#1 in Customer Satisfaction
WebToffee Guarantee: Get Your Money Back if You Are Not Satisfied With The Product
Buy Now!
Comments (6)
Mauricio
December 14, 2020
Hi! I own a flower shop, we deliver gifts and we are growing, so I need print a full page with custom fields and duplicated info, to give a elaboration order and a delivery note and print the message from my clients in the same page, but I can’t change the order of items and give another style, please help me
Mark
December 16, 2020
Hi Mauricio,
You can use the filter here to add custom place holders for each custom fields and use them as you need in the template editor.
Mark Mason
June 19, 2019
Hi.
Where are you saving these templates? is there a way to edit them directly from the code (wordpress theme directory)? I want to create a really customized shipping label template with fields that you don’t provide and custom styling.
Mark
June 20, 2019
Hi Mark,
We will get back to you on the support ticket you submitted.
waqas
May 29, 2019
Code editor doesn’t the data
Mark
May 29, 2019
Hi,
Your query is not clear to us. Please reach us via support and brief the issue.