Continued Magento 1 Support ⋅ 7-Day Money-back guarantee ⋅ Implemented by a Magento Certified Developer
vianetz Software Engineer for Magento®

How can I customize the Magento 2 PDF invoice layout?

1
Last update: 19.06.2020

With our Magento 2 Extension Advanced Invoice Layout it is very easy to create individual layouts for Magento PDF invoices, shipments and creditmemos.

Want to see some examples? Check out some sample invoice layouts from our customers.

The extension ships with a base HTML layout that already fits for many cases. Furthermore we will release more enhanced step by step so that you can customize the PDF layout without any effort.

Your own customizations can be done with HTML/CSS. We recommend to do your own customizations within these files in your custom theme folder to avoid loosing changes in case that the Extension got an upgrade.
To do that create a new folder "Vianetz_AdvancedInvoiceLayout" and a subfolder "templates/default" in your theme directory in app/design/frontend/MYTHEME/MYTHEME/ and copy the files that you want to customize into the newly created directory.

For more experienced users we also deliver SASS files that allows an easier modification of e.g. colors in the whole document.

Please see also how to customize the payment block in the Magento PDF invoice.

Basically it is always recommended to activate the Debug Mode of the AdvancedInvoiceLayout extension for testing different layouts under Stores > Configuration > AdvancedInvoiceLayout. With activated Debug Mode the intermediate HTML file will be saved with each print of the PDF invoice, shipment or creditmemo into the directory var/tmp/invoice_debug.html. Therewith you can analyze and customize the HTML structure and CSS style sheets more easily.
However you are advised to disable this setting in production environments for performance reasons.

Please see also the available variables.

« Back to the FAQ overview