Continued Magento 1 Support  ⋅  7-Day Money-back  ⋅  Implemented by a Magento Certified Developer

vianetz Software Engineer for Magento®

How can I customize the Magento PDF invoice layout?

1
Last update: 05.03.2021

With our Advanced Invoice Layout for Magento 1 or Magento 2 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.

Customizing the PDF Invoice Layout

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.
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 -> Advanced Invoice Layout. 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.

Instructions for Magento 2

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.

Instructions for Magento 1/OpenMage

Your own customizations can be done with HTML/CSS. The appropriate files are in the following directories
  • app/design/frontend/base/default/template/advancedinvoicelayout/default
  • skin/frontend/base/default/advancedinvoicelayout/default/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.
I.e. assuming that your Magento theme is in folder app/design/frontend/MYTHEME/default/ and you want to customize the invoice layout we recommend to copy the file app/design/frontend/base/default/template/advancedinvoicelayout/invoice.phtml to app/design/frontend/MYTHEME/template/default/advancedinvoicelayout/invoice.phtml.

« Back to the FAQ overview