Back to Community
Home / Community / Plugin → Pdf invoices & packing slips for woocommerce

How to Customize Your WooCommerce PDF Invoice and Packing Slip Templates

22 threads Sep 17, 2025 Plugin → Pdf invoices & packing slips for woocommerce

Content

Customizing the appearance of your PDF invoices and packing slips is a common need for WooCommerce store owners. Whether you want to change colors, add a logo, or modify the layout, the 'PDF Invoices & Packing Slips for WooCommerce' plugin offers several methods to achieve this. This guide will walk you through the most effective ways to tailor your documents to match your brand.

Why Customize Your PDF Documents?

The default templates provided by the plugin are functional, but they may not align with your company's branding. Customizing these documents can provide a more professional experience for your customers and ensure all necessary information is displayed clearly. Common customizations include adding a paid stamp, changing colors, hiding elements on specific document types, and adjusting margins.

Method 1: Using Custom CSS (Quick Styling Changes)

For simple styling changes, such as modifying colors or hiding certain elements, you can use custom CSS. The plugin provides a hook called wpo_wcpdf_custom_styles for this purpose.

Example: Change Invoice Colors and Hide Packing Slip Header

/**
 * Add custom styles to PDF documents
 */
add_action( 'wpo_wcpdf_custom_styles', function( $document_type, $document ) {
    if ( $document_type == 'invoice' ) {
        ?>
        /* Change invoice title color and table row background */
        .invoice .document-title {
            color: #F4EDED;
        }
        .invoice table.order-details .order-item {
            background-color: #F4EDED;
        }
        
        /* Hide the header on packing slips */
        .packing-slip table.head.container {
            visibility: hidden;
        }
        <?php
    }
}, 10, 2 );

This code snippet can be added to your child theme's functions.php file. Remember to adjust the CSS selectors and color codes (#F4EDED) to match your desired design.

Method 2: Creating a Custom Template (Advanced Layout Changes)

For more significant changes to the layout and structure of the PDF, creating a custom template is the recommended approach. This involves copying the plugin's template files to your theme.

Steps to Create a Custom Template:

  1. Navigate to your theme's directory: wp-content/themes/your-theme/.
  2. Create a new folder structure: woocommerce/pdf/yourtemplate/.
  3. Copy the template files from the plugin's templates/Simple directory into your new yourtemplate folder. The essential files are:
    • invoice.php
    • packing-slip.php
    • style.css
  4. Go to WooCommerce > PDF Invoices > General and select your new template from the "Choose a template" dropdown.
  5. You can now safely edit the PHP and CSS files in your yourtemplate directory. These changes will not be overwritten by plugin updates.

Important Note: Never edit the plugin's core template files directly. They will be completely overwritten and lost during the next update. Always use a custom template in your theme.

Method 3: Using Code Snippets for Functional Changes

Some changes require using filters provided by the plugin. For instance, to change the title of the invoice document or the filename.

Example: Change "Invoice" Title to "Order Confirmation"

/**
 * Customize the invoice title
 */ 
add_filter( 'wpo_wcpdf_invoice_title', function( $title, $document ) {
    $title = 'Order Confirmation';
    return $title;
}, 10, 2 );

Example: Capitalize the First Letter in the Filename

/**
 * Customize the invoice filename
 */
add_filter( 'wpo_wcpdf_filename', function( $filename, $document_type, $order_ids ) {
    if ( $document_type == 'invoice' ) {
        $filename = 'Invoice-' . $order_ids . '.pdf';
    }
    return $filename;
}, 10, 3 );

Troubleshooting Common Issues

  • Custom template not showing: Double-check the folder path. It must be wp-content/themes/yourtheme/woocommerce/pdf/yourtemplate/. Also, ensure you have selected the custom template in the plugin's settings.
  • CSS changes not working: Use the wpo_wcpdf_custom_styles hook for CSS that is specific to a document type (e.g., invoice or packing slip). For general CSS, you can add it to the style.css file within your custom template folder.
  • Need a page break: This can be achieved with CSS. Inside your custom styles, you can use page-break-before: always; on an element to force a new page.

By following these methods, you can effectively customize your WooCommerce PDF documents to meet your specific business needs. For more complex layout changes that require a drag-and-drop interface, the 'PDF Invoices & Packing Slips for WooCommerce' team offers a Premium Templates extension with a built-in customizer.

Related Support Threads Support