Repeating headers & footers

The default simple template creates a document with a header on the first page and the footer on the last page. If you want the header and footer to repeat on every page you have to make a few changes to the template.

The first step is creating a custom template by copying the template files to your child theme (instructions here)

After you have created your custom template, you have to make sure the footer is present on the first page. This may be somewhat counter intuitive, but you can put the footer right below the header.
Do this in every document template (invoice.php, packing-slip.php).

The footer is created with this code:

<?php if ( $this->get_footer() ): ?>
<div id="footer">
	<?php $this->footer(); ?>
</div><!-- #letter-footer -->
<?php endif; ?>

So after you have moved it below the header, the top part of your template looks like this:

<table class="head container">
	<tr>
		<td class="header">
		<?php
		if( $this->has_header_logo() ) {
			$this->header_logo();
		} else {
			echo apply_filters( 'wpo_wcpdf_invoice_title', __( 'Invoice', 'woocommerce-pdf-invoices-packing-slips' ) );
		}
		?>
		</td>
		<td class="shop-info">
			<div class="shop-name"><h3><?php $this->shop_name(); ?></h3></div>
			<div class="shop-address"><?php $this->shop_address(); ?></div>
		</td>
	</tr>
</table>

<?php if ( $this->get_footer() ): ?>
<div id="footer">
	<?php $this->footer(); ?>
</div><!-- #letter-footer -->
<?php endif; ?>

Next, you have to change the positioning of the footer element to position:fixed. Open style.css from your custom template folder and change the #footer positioning (defined all the way at the end of the stylesheet) from absolute to fixed.

The footer will now repeat on every page.

To also repeat the header on every page, you don’t have to move the HTML, but you do need to make some more changes to the CSS.

First of all, you need to increase the top-margin of the page, because we’re going to print the header into the margin (to prevent text from overlapping).

In this example, I’m making the header 5cm high (+1cm for the regular page margin):

@page {
	margin-top: 6cm;
	margin-bottom: 3cm;
	margin-left: 2cm;
	margin-right: 2cm;
}

Next, we’re going to change the positioning of the header. Note that we’re using a negative top value that is equal to the height of the header.

table.head {
	top: -5cm;
	position: fixed;
}

That’s it! Repeating headers and footers.