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

HTML doesn't really 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 will respond depending on how big the order is, so it will adjust appropriately, and it's expected to get bumped down as the content above gets longer.

Still, there are a couple of workarounds that may allow you to print the fixed footer at the bottom of every page; however, given the way our app prints multiple orders, it must be the same footer content for every page and every order (bulk printing).

If you feel confident with HTML, CSS, and JavaScript, we've come up with a general workaround for our Order Printer Pro default templates and the Order Printer Templates designs. Keep in mind that there are several ways to accomplish the fixed footer; this is the one that's worked for our template designs.

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 properly.

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:

3- Finally, add the following script and styles at the top of the code. You may adjust the code's "20" pixels value to a different number depending on the height of your footer and the distance with contents above it.

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 might dismiss the script's use.

<!-- Forsberg Fixed Footer -->
<script defer>
    function init() {
        const placeFooter = () => {
            const footers = document.querySelectorAll('#documents .card:not(.hide) .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 + 5}px`);
        };

        const addCheckboxListeners = () => {
            document.querySelectorAll('#templates_form .checkbox').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 may adjust the code's "5" pixels value to a different number depending on the height of your footer and the distance with contents above it.

<!-- Forsberg Fixed footer -->
<script defer>
    function init() {
        const placeFooter = () => {
            const footers = document.querySelectorAll('#documents .card:not(.hide) .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 + 5}px`);
        };

        const addCheckboxListeners = () => {
            document.querySelectorAll('#templates_form .checkbox').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 the documents when bulk printing, adding a fixed position to the footer will cause each order's footer to be on top of each of the pages; the JavaScript code above manages that 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 (like the order number) in the footer, you will need to print each template separately so the order-related details don't get mixed in the fixed footer. For this scenario, you can use the same approach from above, but you'll have to print only one order at a time.

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