Skip to content

Instantly share code, notes, and snippets.

@kilbot

kilbot/tmpl-receipt.php

Last active January 19, 2023 10:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kilbot/31bb5538072dd91c95ec842e45dbaabf to your computer and use it in GitHub Desktop.
Save kilbot/31bb5538072dd91c95ec842e45dbaabf to your computer and use it in GitHub Desktop.
Download ZIP
Example of Pro receipt based on WooCommerce Print Invoices and Packing Lists
Raw
tmpl-receipt.php
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php _e( 'Receipt', 'woocommerce-pos' ); ?></title>
<style type="text/css">
/* ==========*
* HTML TAGS *
* ==========*/
html, body {
background: #FFFFFF;
}
body {
display: block;
color: #000000;
font: normal 12px/130% Verdana, Arial, Helvetica, sans-serif;
margin: 8px;
-webkit-print-color-adjust: exact;
}
a {
color: #000000;
}
hr {
margin-top: 1em;
}
blockquote {
border-left: 10px solid #DDD;
color: #444444;
font-style: italic;
margin: 1.5em;
padding-left: 10px;
}
h1, h2, h3, h4, h5, h6 {
color: #000000;
line-height: 150%;
}
h1 { font-size: 32px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 12px; }
/* Creates a separator between multiple documents */
body > div.container .separator {
border-top: 2px dashed #DDDDDD;
border-bottom: none;
margin: 50px 0 0;
}
body > div.container:last-child .separator {
display: none;
}
/* =============== *
* UTILITY CLASSES *
* =============== */
.left {
float: left;
}
.align-left {
text-align: left;
}
.right {
float: right;
}
.align-right {
text-align: right;
}
.center {
float: none;
margin: 0 auto;
text-align: center;
width: 100%;
}
.align-center {
text-align: center;
}
.clear {
clear: both;
}
.container {
background: #FFF;
margin: 1em auto;
padding: 2em;
}
.container header,
.container main,
.container .document-body-content,
.container footer {
position: relative;
margin: 0 auto;
max-width: 960px;
}
.container:last-child {
margin-bottom: 0 !important;
}
.visible-print-block,
.visible-print-inline,
.visible-print-inline-block {
display: none !important;
}
footer:empty,
.document-colophon:empty,
.terms-and-conditions:empty,
.customer-note:empty {
display: none;
}
footer hr {
display: none;
}
/* ============= *
* ORDER DETAILS *
* ============= */
.title a {
font-size: 32px;
font-weight: bold;
text-decoration: none;
}
.title,
.subtitle {
margin: 0;
}
.company-subtitle,
.company-vat-number {
margin: 0.5em 0;
}
.company-vat-number {
display: inline-block;
width: 100%;
}
.left .logo {
padding-right: 1em;
}
.right .logo {
padding-left: 1em;
}
.company-title.left {
padding-right: 1em;
}
.company-title.right {
padding-left: 1em;
}
.company-information {
margin-bottom: 3em;
}
.company-address {
font-style: normal;
}
.company-address.has-logo {
padding-top: 1em;
}
.customer-addresses {
margin-left: -15px;
margin-right: -15px;
}
.customer-addresses .column {
padding: 0 15px;
width: 33.33333333%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.document-heading {
margin: 2em 0;
}
.order-info {
margin-bottom: 0;
}
.order-date {
color: #666666;
margin: 0;
}
span.coupon {
background: #F4F4F4;
color: #333;
font-family: monospace;
padding: 2px 4px;
}
/* ===== *
* LISTS *
* ===== */
dl {
margin: 1em 0;
}
dl.variation {
font-size: 0.85em;
margin: 0;
}
dl.variation dt {
clear: left;
float: left;
margin: 0;
}
dl.variation dd {
display: inline;
float: left;
margin: 0 0 0 10px;
}
dl.variation p {
margin: 0;
}
/* ============ *
* ORDER TABLES *
* ============ */
table {
border-collapse: collapse;
font: normal 12px/130% Verdana, Arial, Helvetica, sans-serif;
margin: 3em auto 2em;
text-align: left;
width: 100%;
max-width: 960px;
}
table td,
table th {
background: #FFFFFF;
border: 1px solid #DDDDDD;
font-weight: normal;
padding: 0.8em 1.2em;
text-transform: none;
vertical-align: top;
}
table th {
font-weight: bold;
-webkit-print-color-adjust: exact;
}
table thead.order-table-head th {
background-color: #333333;
border-color: #333333;
color: #FFFFFF;
}
table tbody th a {
color: #333333;
font-weight: bold;
}
table tbody.order-table-footer td {
border-color: #CCCCCC;
border-width: 1px 0 0 0;
border-style: solid;
text-align: right;
}
table tbody tr.heading th {
background-color: #666666;
border-color: #666666;
color: #FFFFFF;
}
table tbody tr.heading th.order-number a {
color: #FFF;
font-weight: bold;
text-decoration: none;
}
table tbody tr.heading th.no-items {
background-color: #A0A0A0;
font-weight: 400;
}
table tbody tr.heading th.breadcrumbs {
background-color: #D8D8D8;
border-color: #D8D8D8;
color: #666666;
font-weight: normal;
}
table tbody tr.even,
table tbody tr.even td {
background-color: #F5F5F5;
}
tbody tr.odd,
tbody tr.odd td {
background-color: #FFFFFF;
}
thead th.id,
tbody td.id,
thead th.id > span,
tbody td.id > span {
border: 0;
display: none;
overflow: hidden;
padding: 0;
visibility: hidden;
}
table td.thumbnail {
text-align: center;
}
table td.thumbnail img {
width: 100px;
height: auto;
}
.quantity,
.total-quantity {
text-align: center;
}
.price,
.weight,
.total-weight {
text-align: right;
}
/* ============ *
* PRINT STYLES *
* ============ */
@media print {
/* Background is always white in print */
html, body {
background: #FFFFFF;
}
a {
text-decoration: none;
}
/* Multiple document separators are not printed */
body > div.container .separator {
display: none;
}
/* Break pages when printing multiple documents */
.container {
page-break-after: always;
}
.container:last-child {
page-break-after: auto;
}
table {
page-break-inside: auto;
}
table tr {
page-break-inside: avoid;
page-break-after: auto;
}
table td,
table th {
padding: 0.4em 1.2em;
page-break-inside: avoid;
page-break-after: auto;
}
/* Print URL after link text */
.document-heading a:after,
.document-footer a:after {
content: " (" attr(href) ")";
}
.visible-print-block {
display: block !important;
}
.visible-print-inline {
display: inline !important;
}
.visible-print-inline-block {
display: inline-block !important;
}
.hidden-print {
display: none !important;
}
}
</style>
</head>
<body id="woocommerce-pip" class="woocommerce-pip invoice">
<div class="container">
<header>
<div class="document-header invoice-header">
<div class="head company-information">
<div class="company-title left">
<h1 class="title">
<a href="{{store.url}}" title="{{{store.name}}}">{{{store.name}}}</a>
</h1>
</div>
<div class="clear"></div>
</div>
<h3 class="order-info">
Invoice for order {{order_number}}
</h3>
<h5 class="order-date">Order Date: {{formatDate completed_at format="MMMM Do YYYY, h:mm:ss a"}}</h5>
<div class="customer-addresses">
<div class="column customer-address billing-address left">
<h3>Billing Address</h3>
<address class="customer-addresss">
{{formatAddress billing_address title="<?php /* translators: woocommerce */ _e( 'Billing Address', 'woocommerce' ); ?>"}}
</address>
</div>
<div class="column customer-address shipping-address left">
<h3>Shipping Address</h3>
<address class="customer-address">
{{formatAddress shipping_address title="<?php /* translators: woocommerce */ _e( 'Billing Address', 'woocommerce' ); ?>"}}
</address>
</div>
<div class="column shipping-method left">
<h3>Shipping Method</h3>
<em class="shipping-method"> No shipping </em>
</div>
<div class="clear"></div>
</div>
<div class="document-heading invoice-heading"></div>
</div>
</header>
<main class="document-body invoice-body">
<div class="document-body-content">
<table class="order-table invoice-order-table">
<thead class="order-table-head">
<tr>
<th class="sku" style="width: 32.631578947368%">SKU</th>
<th class="product" style="width: 43.157894736842%">Product</th>
<th class="quantity" style="width: 11.578947368421%">
Quantity
</th>
<th class="price" style="width: 11.578947368421%">Price</th>
<th class="id" style="width: 1.0526315789474%"></th>
</tr>
</thead>
<tbody class="order-table-body">
{{#each line_items}}
<tr class="row item">
<td class="sku">
<span class="sku">{{sku}}</span>
</td>
<td class="product">
<span class="product-simple product product-name">{{name}}</span><br />
<div class="product-simple product-meta">
{{#with meta}}
<dl class="meta">
{{#each []}}
<dt>{{label}}:</dt>
<dd>{{value}}</dd>
{{/each}}
</dl>
{{/with}}
</div>
</td>
<td class="quantity">
<span class="quantity">{{number quantity precision="auto"}}</span>
</td>
<td class="price">
<span class="price">
<span class="woocommerce-Price-amount amount">
{{#if on_sale}}
<del>{{{money subtotal}}}</del>
<ins>{{{money total}}}</ins>
{{else}}
{{{money total}}}
{{/if}}
</span>
</span>
</td>
<td class="id">
<span data-item-id="1"></span>
</td>
</tr>
</tbody>
<tbody class="order-table-footer">
<tr>
<td class="cart_subtotal" colspan="3">
<strong class="order-cart_subtotal">Subtotal:</strong>
</td>
<td class="value">
<span class="woocommerce-Price-amount amount">{{{money subtotal}}}</span>
</td>
</tr>
{{#if has_discount}}
<tr>
<td class="cart_discount" colspan="3">
<strong class="order-cart_discount">Discount:</strong>
</td>
<td class="value">
<span class="woocommerce-Price-amount amount">{{{money cart_discount negative=true}}}</span>
</td>
</tr>
{{/if}}
{{#each shipping_lines}}
<tr>
<td class="cart_shipping" colspan="3">
<strong class="order-cart_shipping">Shipping:</strong>
</td>
<td class="value">{{{money total}}}<</td>
</tr>
{{/each}}
{{#if has_tax}}
{{#if itemized}}
{{#each tax_lines}}
{{#if has_tax}}
<tr>
<th class="cart_tax" colspan="3">
{{#if ../../incl_tax}}<small>(<?php _ex( 'incl.', 'abbreviation for includes (tax)', 'woocommerce-pos' ); ?>)</small>{{/if}}
<strong class="order-cart_tax">{{title}}:</strong>
</th>
<td class="value">{{{money total}}}</td>
</tr>
{{/if}}
{{/each}}
{{else}}
<tr>
<th class="cart_tax" colspan="3">
{{#if incl_tax}}<small>(<?php _ex( 'incl.', 'abbreviation for includes (tax)', 'woocommerce-pos' ); ?>)</small>{{/if}}
<strong class="order-cart_tax"><?php echo esc_html( WC()->countries->tax_or_vat() ); ?></strong>
</th>
<td colspan="1">{{{money total_tax}}}</td>
</tr>
{{/if}}
<tr>
<td class="payment_method" colspan="3">
<strong class="order-payment_method">Payment method:</strong>
</td>
<td class="value">{{payment_details.method_title}}</td>
</tr>
<tr>
<td class="order_total" colspan="3">
<strong class="order-order_total">Total:</strong>
</td>
<td class="value">
<span class="woocommerce-Price-amount amount">{{{money total}}}</span>
</td>
</tr>
</tbody>
</table>
</div>
<!-- .document-body-content -->
</main>
<br />
<footer class="document-footer invoice-footer">
<hr />
</footer>
<hr class="separator" />
</div>
<!-- .container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment