(Beta) Gutenberg Invoice Editor - How to customize invoice templates
Invoice Template List
(Beta) Gutenberg Invoice Editor - enable if you want to use the invoice template appearance editor based on the Gutenberg editor.
The new editor – although already functional – is still under development. Hence the Beta label. If you have any feedback on how it works or ideas for improvement, write to us →
Enabling this option will cause (reversible) changes to how the plugin options are managed.
Settings:
- Document numbering,
- Optional hiding of the VAT number on the invoice,
- Optional hiding of fields with zero values,
- Optional display of the shipping address,
- SKU,
- Discounts,
- Signatures,
- Page numbering.
Have been moved to the template settings. Click on the option names above to see a screenshot with the new location.
Invoice Template
Main Settings
If tax is 0, hide seller VAT number on PDF invoices - enable to hide the seller’s VAT number on invoices if the tax is 0.
If tax is 0, hide all tax cells on PDF invoices - enable to hide VAT columns on invoices if the tax is 0.
Enable page numbering - enable page numbers in the bottom right corner of the invoice.
Invoice Settings
Next Document Number - Decide from which number the invoices should be numbered. Typically, the law of a given country requires numbering continuity within a given year. Therefore, if you used another program for invoicing, enter the next number. If you’re just starting to sell, leave number 1.
Prefix and Suffix - You can also enter prefixes and suffixes to customize the invoice naming and numbering to your needs. You can use the following shortcuts for prefixes and suffixes: {DD} - day, {MM} - month, {YYYY} - year.
Example: to get: Invoice 1/12/2020 (1 - invoice number), enter: Prefix: Invoice Suffix: /{MM}/{YYYY}
Default payment due date - For invoices, you can enter a default payment term in days. The payment date can also be edited for each invoice.
Notes - Optionally, you can enter notes that will appear on the invoice. Notes can also be edited for each invoice.
Correction Invoice Settings
Next Document Number - Decide from which number the invoices should be numbered. Typically, the law of a given country requires numbering continuity within a given year. Therefore, if you used another program for invoicing, enter the next number. If you’re just starting to sell, leave number 1.
Prefix and Suffix - You can also enter prefixes and suffixes to customize the invoice naming and numbering to your needs. You can use the following shortcuts for prefixes and suffixes: {DD} - day, {MM} - month, {YYYY} - year.
Example: to get: Credit Note 1/12/2020 (1 - invoice number), enter:
Prefix: Invoice Suffix: /{MM}/{YYYY}
Default payment due date - For invoices, you can enter a default payment term in days. The payment date can also be edited for each invoice.
Notes - Optionally, you can enter notes that will appear on the invoice. Notes can also be edited for each invoice.
Proforma Invoice Settings
Next Document Number - Decide from which number the invoices should be numbered. Typically, the law of a given country requires numbering continuity within a given year. Therefore, if you used another program for invoicing, enter the next number. If you’re just starting to sell, leave number 1.
Prefix and Suffix - You can also enter prefixes and suffixes to customize the invoice naming and numbering to your needs. You can use the following shortcuts for prefixes and suffixes: {DD} - day, {MM} - month, {YYYY} - year.
Example: to get: Proforma Invoice 1/12/2020 (1 - invoice number), enter:
Prefix: Invoice Suffix: /{MM}/{YYYY}
Default payment due date - For invoices, you can enter a default payment term in days. The payment date can also be edited for each invoice.
Notes - Optionally, you can enter notes that will appear on the invoice. Notes can also be edited for each invoice.
Invoice Blocks - Block List
Dates - block containing date placeholders: sale date, payment due date, payment required date.
Summary Table - block with a table of values on the invoice (VAT rates, net and gross values).
Recipient - block with placeholders for the recipient's shipping details on the invoice woocommerce_shipping .
Company - block with placeholders for seller details.
Document Number - block with invoice number placeholder.
Payment Method - block with placeholder for the payment method used during checkout.
Logo - block allowing you to load an image from the media library.
Product Table - block with the product table from the WooCommerce order.
Customer - block with customer data placeholder, pulling from woocommerce_billing fields.
Notes - block with order notes placeholder.
Order Number - block with order number placeholder.
[feature_new]PRO[feature] Currency Conversion Table - block with currency conversion table.
Payment Link - block with a placeholder for the payment link.
Price Summary - block with placeholders for values To Pay, Paid and Total.
Signatures - block with placeholder for signatures.
Payment Status - block with placeholder for order and invoice payment status: Paid, Unpaid.
Invoice Blocks - Visual Table Editing
Table Columns
This tab is visible only for blocks that support tables.
In this tab, you can manage the visibility of columns in tables and sort their order.
Table Header Appearance
Below is a list of fields for customizing the product table appearance:
- Text color
- Background color
- Text color
- Font size
- Text color
- Text alignment
- Text color
- Font style
- Table border color
- Table border width
- Row border color
- Top/bottom row border width
- Cell border color
- Left/right column border width
Table Appearance
- Text color
- Background color
- Alternating row background colors
- Font size
- Text alignment
- Font style
- Top/bottom row border width
- Left/right column border width
- Cell border color
- Cell border width
Table Placeholders
{Number}
{ProductName}
{ProductUnit}
{ProductSKU}
{ProductDiscount}
{ProductQty}
{ProductNetPrice}
{ProductNetAmount}
{ProductTaxRate}
{ProductTaxAmount}
{ProductGrossAmount}
Invoice Blocks - Visual Editing of Text Blocks
The settings described below are only visible for text blocks.
Text Settings
- Text color
- Background color
- Font size
- Text alignment
- Font style
- Margins
- Padding
Position
- Margins
- Padding
Borders
- Border width
- Border radius