How to Display Line Breaks and Custom Text in PDF Invoices & Packing Slips

If you're customizing your WooCommerce PDF documents, you might run into issues displaying text exactly how you want it. A common challenge is getting line breaks from your product meta data to appear correctly in the final PDF, or trying to use web-specific techniques like JavaScript that don't work in a PDF context. This guide will explain why these issues occur and provide the most effective solutions.

Why Line Breaks and Custom Formatting Can Be Tricky in PDFs

The 'PDF Invoices & Packing Slips for WooCommerce' plugin uses a PHP library called domPDF to convert HTML and CSS into a PDF file. This process has two important implications for your text:

1. Database Line Breaks Are Ignored: Line breaks stored in your database (represented by n or rn) are not automatically converted to visible line breaks in HTML. They need to be processed.
2. No JavaScript Support: PDFs are static documents. JavaScript, including jQuery, cannot run during the PDF generation process. Any solution relying on client-side scripts will not work.

Common Solution: Using the nl2br() Function

As seen in the community threads, a user successfully displayed line breaks from product meta data by using the PHP nl2br() function within their custom template. This function converts newline characters into HTML <br> tags, which are then rendered correctly by domPDF.

Example Code Snippet:

<?php
// Example of modifying a custom template to show line breaks
if ( isset( $item['meta'] ) ) {
    echo nl2br( $item['meta'] ); // Converts n to <br>
}
?>

Where to Add This Code: This change is typically made in a custom PDF template file (e.g., pdf/packing-slip.php in your child theme). The 'PDF Invoices & Packing Slips for WooCommerce' team provides documentation on creating custom templates.

Why JavaScript and jQuery Don't Work for PDFs

Another user attempted to color specific text strings in the item name using a jQuery script hooked to wpo_wcpdf_after_item_meta. This works on a normal webpage but fails in the PDF because the PDF is generated on the server before any JavaScript can execute.

The Correct Approach: Server-Side PHP

To manipulate text for the PDF, you must use PHP on the server. Instead of using jQuery to find and replace text, you can use the PHP str_replace() function within your template or a custom function.

Important Considerations for Advanced Customization

• Font Support: If your text appears as empty boxes ([]), it is likely a font issue. domPDF has limited default font support. You may need to embed a custom font that supports your characters.
• Getting Plain Text: If you need to remove hyperlinks from product names, you must modify the data array in your template. The product name without a link is often accessible via $item['product']->get_name() instead of the $item['name'] array element, which contains the linked HTML.
• Finding Text Strings: Text like "Product | Quantity | Price" is often generated by a translation function and can be changed using a filter hook or a translation plugin like Loco Translate, rather than by editing core plugin files.

For more complex customizations, such as adding product categories or other data, the plugin's documentation and community forums are valuable resources for finding the correct hooks and template modifications.