Invoice is a must for your business and the structure of the invoice(logo, font etc.) can influence the way customers feel about your firm when they first look at the invoice. Randomly choosing a template won’t do the job. You have to customize it to fit all your company and customer needs.
WebToffee PDF Invoice and Packing Slip plugin for WooCommerce provides you with different templates and extensive customizing options.
In this article, I have explained various options for customizing customer invoice template in WooCommerce. For information on setting up the invoice, you can refer to this article.
Options to Customize Invoice
There are two different options available for customizing invoice within this plugin. Field attributes customization and Code editor.
After installing the plugin, choose a template for your invoice and click on the Customize button.
1. Field Attributes Customization
The greatest advantage of this mode of customization is that it’s very easy to do. You don’t have to be a tech-savvy for working out this customization method.
Clicking on the customize button you open a new page. Now let’s take a look at how it is done.
You can see a column of many options on the right side of the screenshot. These are the field attributes. Each field has a toggle option across it. You can control from here which field should appear or not on the template by using the toggle button.
If you want to customize further, click on that specific field attribute from the column. Now a few options would appear below it where you can do the additional customization like font size, height, width etc.
After the whole customization click on Save & Activate.
2. Code Editor Customization
Here customization is done by making changes in the code of the template. This mode of customization can only be carried out by someone having adequate knowledge of coding.
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.