Can I set the footer in a 'fixed' or 'locked' position at the bottom of the page?

HTML doesn't have a concept of printed "pages", which doesn’t make it easy to reliably put information at the footer of each page being printed through the browser. By default, the templates' height will depend on the order length, and the browser will fit the content on the required number of pages. Thus, the document is expected to get bumped down as the content above gets longer, so there isn't a straightforward way to print a fixed footer.

Alternative Solution (Advanced)

Some workarounds may allow you to print the fixed footer at the bottom of every page. If you feel confident with HTML, CSS, and JavaScript, we've come up with a solution for our Order Printer Pro default templates and the Order Printer Templates designs. Keep in mind that there could be several ways to achieve the fixed footer; this is the one that has worked for our template designs.

Note: If you plan on printing orders in bulk, the footer contents must be the same for every page and order

To get the footer repeated across the pages, we use a basic HTML table structure to frame the contents of the documents:

  <table>
    <tbody>
      <tr>
        <td>
          <!--template body-->
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>
          <div class="page-footer-space"></div>
             <!--footer -->
        </td>
      </tr>
    </tfoot>
  </table>

Then, for each type of template, we'll need some additional adjustments for it to work correctly.

Order Printer Pro

1- First, find the opening template div tag, which looks something like this:

<div class="template-561490">

It will have a unique number for your template. You must add the table snippet above right after that opening tag. To make it easier for further edits, use the triangles on the left to collapse each section.

2- Then, place the body contents below or in replacement of the  comment and the footer contents below the  comment.

Keep in mind the footer element should keep the "footer" class as in the original code. This is how the table layout would look:

NOTE: At this point, the template will already have the footer placed at the bottom of every page's content.

The script below will keep the footer stuck at the bottom margin of the page, but it will conflict when other templates are printed together.

If you have issues with multiple template printing, you may want to consider dismissing the script's use.

3- (Optional) Finally, add the following script and styles at the top of the code. You can adjust the code's "20" pixel value to a different number, depending on the height of your footer and the distance from the content above it.

<!-- Forsberg Fixed Footer -->
<script defer>
    function init() {

        const placeFooter = () => {
			const footers = document.querySelectorAll('#documents').length ? document.querySelectorAll('#documents .card:not(.hide) .footer') : document.querySelectorAll('.footer');
            const footerSpaces = document.querySelectorAll('.page-footer-space');

            footers.forEach(footer => footer.classList.remove('hide-on-print'));
            [...footers].slice(1).forEach(footer => footer.classList.add('hide-on-print'));

            const { height } = footers[0].getClientRects()[0];
            footerSpaces.forEach(space => space.style.height = `${height + 10}px`);
        };

        const addCheckboxListeners = () => {
			const checkboxes = document.querySelectorAll('#templates_form .checkbox');
			if (checkboxes) {
				checkboxes.forEach(checkbox => {
                checkbox.addEventListener('click', () => {
                    setTimeout(placeFooter, 600);
                });
            });				
			}
        };

        addCheckboxListeners();
        setTimeout(placeFooter, 600);
    };

    init();
</script>
<style>
  @media print {
    .page-footer-space {
      height: 20mm;
    }

    tfoot {
      display: table-footer-group;
    }

    .footer {
      position: fixed;
      bottom: 0;
      page-break-inside: avoid;
      width: 100%;
      /* center the footer */
      left: 50%;
      transform: translateX(-50%);
    }
  }
</style>
<!-- Forsberg Fixed Footer -->

Order Printer Templates

The Order Printer Templates code is a bit different and requires an extra step.

1- First, find the opening template div tag, which looks like this:

<div class="t73842">

It will have a unique number for your template. You must add the table snippet at the top of the article right below the opening div tag. Make sure to collapse each row class to make the following edits easier:

2- Then, place the body contents below or in replacement of the  comment :

3- You must place the footer contents as a row in the  comment on the table. And add a class "footer" to the same row div:

4- Finally, add the script and styles at the top of the code. You can adjust the code's "5" pixel value to a different number, depending on the height of your footer and the distance from the content above it.

<!-- Forsberg Fixed footer -->
<script defer>
    function init() {

        const placeFooter = () => {
			const footers = document.querySelectorAll('#documents').length ? document.querySelectorAll('#documents .card:not(.hide) .footer') : document.querySelectorAll('.footer');
            const footerSpaces = document.querySelectorAll('.page-footer-space');

            footers.forEach(footer => footer.classList.remove('hide-on-print'));
            [...footers].slice(1).forEach(footer => footer.classList.add('hide-on-print'));

            const { height } = footers[0].getClientRects()[0];
            footerSpaces.forEach(space => space.style.height = `${height + 10}px`);
        };

        const addCheckboxListeners = () => {
			const checkboxes = document.querySelectorAll('#templates_form .checkbox');
			if (checkboxes) {
				checkboxes.forEach(checkbox => {
                checkbox.addEventListener('click', () => {
                    setTimeout(placeFooter, 600);
                });
            });				
			}
        };

        addCheckboxListeners();
        setTimeout(placeFooter, 600);
    };

    init();
</script>

<style>
  @media print {
    .footer {
      position: fixed;
      bottom: 0;
    }

    .hide-on-print {
      display: none !important;
    }
  }
</style>
<!-- End Forsberg Fixed footer -->

This is how the table layout would look:

You might see an extra blank page in some cases. You can adjust the `${height + 5}px` numeric value. That line of code adds a height to the 'page-footer-space' containers so the body contents don't overlap with the fixed footer.

Due to the way our app generates documents when bulk printing, adding a fixed position to the footer will cause each order's footer to appear on top of every page. The JavaScript code above addresses this issue by removing the repeated footers and keeping the first one for all pages and orders. This limits us to static order details on the fixed footer.

If you still want documents with dynamic order details (such as the order number) in the footer, you will need to print each template separately so that the order-related details don't get mixed in with the fixed footer. For this scenario, you can use the same approach from above, but you will need to print only one order at a time.

If you need help with these steps, we'll be happy to assist you. However, we can only help you with our app's default designs and can't guarantee support for particular design scenarios.