I'm trying to customise a Commerce Billy pdf invoice template. I've seen Custom PDF template in Commerce Billy which tells me what I need to know about which files to edit to do this.

What I can't see how to do is, see the template as rendered by HTML before it's converted into a PDF. I need to do this to see what CSS classes are being applied where, and because testing changes to the HTML and CSS layout is much easier in HTML and CSS using inspect element tools than constantly re-generating PDFs.

How can I see a Commerce Billy PDF template as it is rendered as HTML before it is passed to the PDF generator? Right now, I'm just guessing about how the rendered PDF will look when I make changes, then repeatedly re-rendering PDFs, which is an inefficient way of working. I'd like to be able to try different CSS changes using developer tools in a browser, then apply those changes to a file and check they apply cleanly, then generate test PDFs.

  • If anyone else with this problem wants to remove the ugly thick black line from below the header, it's a hr element, hr { border: none; } or modifying the template gets rid of it. Sep 19, 2016 at 15:17

1 Answer 1


If you check the page callback of PDF URL (i.e. "invoice-pdf/%commerce_order"), the HTML output of Invoice PDF is generated using commerce_billy_pdf_html($order) function. Same function is used by Print Invoice URL (i.e. "invoice-pdf/%commerce_order/print") to generate Printable output of Invoice. Since print page render HTML output you can inspect the output easily.

So for example, if your order number is 1 and your Invoice PDF URL is "invoice-pdf/1", then you can see the HTML Structure of PDF Output by going to "invoice-pdf/1/print" page.

Hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.