Output the PDF document as HTML

Certain times we need to investigate the PDF document a bit closer, whenever a bug needs to be fixed or to customize the template to look better for our taste.

Luckily our WooCommerce PDF Invoices & Packing Slip has a setting to enable this superpower, which comes in handy when we need it most.

HTML output setting #

This setting is available in the free plugin from the Status tab, like showing below:

After enable it, if you open a PDF document in the browser, you will see it rendered as HTML. This is crucial if you need to inspect the PDF template code to perform changes to it.

Inspecting HTML with the browser #

Inspecting an HTML page is relatively simple, just right click with your mouse and choose the option “Inspect“, see below:

Now in the Developer Tools select the “Elements” tab to see the full HTML structure of the PDF template.

If you want to know more about the Developer Tools and how it works please read this article from Google Chrome (other browsers work similar).

When you feel more comfortable you are able to add custom styles to your PDF templates.