Customizing PDFs

The default PDF styling (for the new PDF Service add-on) can be overridden or modified with the filter "si_pdf_service_scripts".

Adding CSS and Javascript

Below is an example of adding some basic CSS to change the header background color.

Custom CSS for the PDF Service

  • You can avoid a page break inside an element with the following CSS
    img { page-break-inside:avoid }

Custom Templates

Following the  template customization documentation you can create your own PDF template with a file name invoice-pdf.php

Disable PDF Attachments for PDFs

Make PDF Filenames Match Post ID

The reason the post_id is used is because there would never be any conflicts, and there would be a lot of issues if a PDF was served to the wrong client. That said, you can use the invoice id you've set with a code snippet...

Deprecated PDF Add-on (old PDF download)

Notes:

Uses the mPDF library which has a few server requirements.

How to customize:

  • Add a custom stylesheet by adding it to your sa_templates directory of your (child theme).
    • More info on template overrides can be found here.
    • The invoice css filename would be: invoice/invoices-pdf.css ; The estimate css filename would be: estimate/estimates-pdf.css
      • An example full path for an invoice css for PDFs would be: wp-content/themes/[your-theme]/sa_template/invoice/invoices-pdf.css
  • Advanced: Remove the CSS file via a filter and add your own within your template, example.

Still need help? Contact Us Contact Us