| 1 |
<!-- |
| 2 |
Detailed Receipt — A4 receipt with everything turned on. |
| 3 |
|
| 4 |
This template is designed as a starting point: it shows every section a |
| 5 |
WooCommerce POS receipt can include, so you can keep what you need and |
| 6 |
delete the rest. Most blocks are wrapped in {{#section}}…{{/section}} |
| 7 |
guards, so they automatically disappear when the underlying data is |
| 8 |
empty (no shipping address, no refunds, no customer note, etc.). |
| 9 |
|
| 10 |
Sections, top to bottom: |
| 11 |
|
| 12 |
- Header — store logo, name, address, contact details and tax IDs, |
| 13 |
plus the order status badge, document title, order number and date. |
| 14 |
- Bill-to / Ship-to / Order — customer billing and shipping |
| 15 |
addresses, customer tax IDs, cashier name and order status. |
| 16 |
- Items table — line items with variation attributes, SKU, quantity, |
| 17 |
unit price excl. tax, tax rate, tax amount, and line total incl. |
| 18 |
tax. Fees, shipping (with carrier / tracking meta) and discounts |
| 19 |
(with coupon codes) appear in the same table. |
| 20 |
- Tax summary + totals — per-rate net / tax / gross breakdown on |
| 21 |
the left, and subtotal / discount / total / paid / change on the |
| 22 |
right. |
| 23 |
- Refunds — one card per refund with id, date, who refunded it, |
| 24 |
reason, returned line items and total refunded. |
| 25 |
- Customer note — highlighted callout, only shown when a note was |
| 26 |
left on the order. |
| 27 |
- Payments + order barcode — payment methods with transaction id, |
| 28 |
tendered and change, alongside a configurable barcode of the order |
| 29 |
number for scan-on-return. |
| 30 |
- Personal note — italic message centered at the bottom (falls back |
| 31 |
to "Thank you for your purchase"). |
| 32 |
- Terms & footer — store policies, footer imprint, opening hours |
| 33 |
and receipt print time. |
| 34 |
|
| 35 |
To remove a section, delete the matching block. To restyle, edit the |
| 36 |
inline styles on the wrapping element. |
| 37 |
--> |
| 38 |
<div style="box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 13px; line-height: 1.45; color: #1f2937; padding: 32px 36px;"> |
| 39 |
|
| 40 |
<!-- ── Header: logo + store / doc title + meta ─────────────── --> |
| 41 |
<header style="display: flex; align-items: flex-start; gap: 22px; padding-bottom: 18px; border-bottom: 2px solid #111827;"> |
| 42 |
{{#store.logo}} |
| 43 |
<div style="flex: 0 0 auto;"> |
| 44 |
<img src="{{store.logo}}" alt="{{store.name}}" style="width: 88px; height: auto; display: block;"> |
| 45 |
</div> |
| 46 |
{{/store.logo}} |
| 47 |
<div style="flex: 1 1 auto; min-width: 0;"> |
| 48 |
<div style="font-size: 22px; font-weight: 700; letter-spacing: -0.01em;">{{store.name}}</div> |
| 49 |
{{#store.address_lines}} |
| 50 |
<div style="margin-top: 2px; color: #6b7280; font-size: 12px;">{{.}}</div> |
| 51 |
{{/store.address_lines}} |
| 52 |
{{#store.phone}}<div style="color: #6b7280; font-size: 12px;">{{store.phone}}{{#store.email}} · {{store.email}}{{/store.email}}</div>{{/store.phone}} |
| 53 |
{{^store.phone}}{{#store.email}}<div style="color: #6b7280; font-size: 12px;">{{store.email}}</div>{{/store.email}}{{/store.phone}} |
| 54 |
{{#store.tax_ids}} |
| 55 |
<div style="color: #6b7280; font-size: 12px;">{{#label}}{{label}} {{/label}}{{value}}</div> |
| 56 |
{{/store.tax_ids}} |
| 57 |
</div> |
| 58 |
<div style="flex: 0 0 auto; text-align: right;"> |
| 59 |
{{#order.wc_status}} |
| 60 |
<div style="display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #f3f4f6; color: #1f2937; border-radius: 999px; font-weight: 700; font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;"> |
| 61 |
<span style="width: 6px; height: 6px; border-radius: 50%; background: #6b7280;"></span> {{#order.status_label}}{{order.status_label}}{{/order.status_label}}{{^order.status_label}}{{order.wc_status}}{{/order.status_label}} |
| 62 |
</div> |
| 63 |
{{/order.wc_status}} |
| 64 |
<div style="font-size: 11px; letter-spacing: 0.16em; color: #6b7280; text-transform: uppercase; margin-top: 8px;">{{#fiscal.document_label}}{{fiscal.document_label}}{{/fiscal.document_label}}{{^fiscal.document_label}}{{i18n.tax_invoice}}{{/fiscal.document_label}}</div> |
| 65 |
<div style="font-size: 22px; font-weight: 700; margin-top: 2px;">#{{order.number}}</div> |
| 66 |
<div style="color: #6b7280; font-size: 12px; margin-top: 6px;">{{i18n.date}} {{order.created.datetime}}</div> |
| 67 |
</div> |
| 68 |
</header> |
| 69 |
|
| 70 |
<!-- ── Bill-to / Ship-to / Order ─────────────── --> |
| 71 |
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-top: 22px;"> |
| 72 |
<div> |
| 73 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 6px;">{{i18n.bill_to}}</div> |
| 74 |
<div style="font-weight: 600;">{{customer.name}}</div> |
| 75 |
{{#customer.billing_address.company}}<div style="color: #6b7280;">{{customer.billing_address.company}}</div>{{/customer.billing_address.company}} |
| 76 |
{{#customer.billing_address.address_1}}<div style="color: #6b7280;">{{customer.billing_address.address_1}}{{#customer.billing_address.address_2}}, {{customer.billing_address.address_2}}{{/customer.billing_address.address_2}}</div>{{/customer.billing_address.address_1}} |
| 77 |
{{#customer.billing_address.city}}<div style="color: #6b7280;">{{customer.billing_address.postcode}} {{customer.billing_address.city}}{{#customer.billing_address.state}}, {{customer.billing_address.state}}{{/customer.billing_address.state}}{{#customer.billing_address.country}}, {{customer.billing_address.country}}{{/customer.billing_address.country}}</div>{{/customer.billing_address.city}} |
| 78 |
{{#customer.billing_address.email}}<div style="color: #6b7280; font-size: 11px; margin-top: 6px;">{{customer.billing_address.email}}</div>{{/customer.billing_address.email}} |
| 79 |
{{#customer.billing_address.phone}}<div style="color: #6b7280; font-size: 11px;{{^customer.billing_address.email}} margin-top: 6px;{{/customer.billing_address.email}}">{{customer.billing_address.phone}}</div>{{/customer.billing_address.phone}} |
| 80 |
{{#customer.tax_ids}} |
| 81 |
<div style="color: #6b7280; font-size: 11px; margin-top: 4px;"><strong>{{#label}}{{label}}{{/label}}{{^label}}{{type}}{{/label}}</strong> {{value}}</div> |
| 82 |
{{/customer.tax_ids}} |
| 83 |
{{^customer.tax_ids}} |
| 84 |
{{#customer.tax_id}}<div style="color: #6b7280; font-size: 11px; margin-top: 4px;"><strong>{{i18n.customer_tax_id}}</strong> {{customer.tax_id}}</div>{{/customer.tax_id}} |
| 85 |
{{/customer.tax_ids}} |
| 86 |
</div> |
| 87 |
|
| 88 |
<div> |
| 89 |
{{#customer.shipping_address.address_1}} |
| 90 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 6px;">{{i18n.ship_to}}</div> |
| 91 |
<div style="font-weight: 600;">{{customer.shipping_address.first_name}} {{customer.shipping_address.last_name}}</div> |
| 92 |
{{#customer.shipping_address.company}}<div style="color: #6b7280;">{{customer.shipping_address.company}}</div>{{/customer.shipping_address.company}} |
| 93 |
<div style="color: #6b7280;">{{customer.shipping_address.address_1}}{{#customer.shipping_address.address_2}}, {{customer.shipping_address.address_2}}{{/customer.shipping_address.address_2}}</div> |
| 94 |
<div style="color: #6b7280;">{{customer.shipping_address.postcode}} {{customer.shipping_address.city}}{{#customer.shipping_address.country}}, {{customer.shipping_address.country}}{{/customer.shipping_address.country}}</div> |
| 95 |
{{/customer.shipping_address.address_1}} |
| 96 |
{{#shipping}} |
| 97 |
{{#meta}} |
| 98 |
<div style="color: #6b7280; font-size: 11px; margin-top: 4px;"><strong>{{key}}</strong> {{value}}</div> |
| 99 |
{{/meta}} |
| 100 |
{{/shipping}} |
| 101 |
</div> |
| 102 |
|
| 103 |
<div style="font-size: 12px;"> |
| 104 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 6px;">{{i18n.order}}</div> |
| 105 |
<div style="display: flex; justify-content: space-between;"><span style="color: #6b7280;">{{i18n.cashier}}</span><span>{{cashier.name}}</span></div> |
| 106 |
{{#order.wc_status}} |
| 107 |
<div style="display: flex; justify-content: space-between;"> |
| 108 |
<span style="color: #6b7280;">{{i18n.status}}</span> |
| 109 |
<span>{{#order.status_label}}{{order.status_label}}{{/order.status_label}}{{^order.status_label}}{{order.wc_status}}{{/order.status_label}}</span> |
| 110 |
</div> |
| 111 |
{{/order.wc_status}} |
| 112 |
</div> |
| 113 |
</div> |
| 114 |
|
| 115 |
<!-- ── Item table ─────────────── --> |
| 116 |
<table style="width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 13px;"> |
| 117 |
<thead> |
| 118 |
<tr> |
| 119 |
<th style="text-align: left; font-weight: 600; color: #6b7280; padding: 8px 6px; border-bottom: 1px solid #e5e7eb; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;">{{i18n.item_short}}</th> |
| 120 |
<th style="text-align: left; font-weight: 600; color: #6b7280; padding: 8px 6px; border-bottom: 1px solid #e5e7eb; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;">{{i18n.sku_short}}</th> |
| 121 |
<th style="text-align: right; font-weight: 600; color: #6b7280; padding: 8px 6px; border-bottom: 1px solid #e5e7eb; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;">{{i18n.qty_short}}</th> |
| 122 |
<th style="text-align: right; font-weight: 600; color: #6b7280; padding: 8px 6px; border-bottom: 1px solid #e5e7eb; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;">{{i18n.unit_excl_short}}</th> |
| 123 |
<th style="text-align: right; font-weight: 600; color: #6b7280; padding: 8px 6px; border-bottom: 1px solid #e5e7eb; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;">{{i18n.tax_rate_short}}</th> |
| 124 |
<th style="text-align: right; font-weight: 600; color: #6b7280; padding: 8px 6px; border-bottom: 1px solid #e5e7eb; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;">{{i18n.tax_amount_short}}</th> |
| 125 |
<th style="text-align: right; font-weight: 600; color: #6b7280; padding: 8px 6px; border-bottom: 1px solid #e5e7eb; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;">{{i18n.total_incl_tax_short}}</th> |
| 126 |
</tr> |
| 127 |
</thead> |
| 128 |
<tbody> |
| 129 |
{{#lines}} |
| 130 |
<tr> |
| 131 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top;"> |
| 132 |
<div style="font-weight: 600;">{{name}}</div> |
| 133 |
{{#meta}}<div style="color: #6b7280; font-size: 11px;">{{key}}: {{value}}</div>{{/meta}} |
| 134 |
</td> |
| 135 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; color: #6b7280; font-size: 11px; white-space: nowrap;">{{sku}}</td> |
| 136 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums;">{{qty}}</td> |
| 137 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums;"> |
| 138 |
{{unit_price_excl_display}} |
| 139 |
{{#unit_savings_excl}} |
| 140 |
<div style="color: #6b7280; font-size: 10px;">{{i18n.regular_price}}: <span style="text-decoration: line-through;">{{regular_price_excl_display}}</span></div> |
| 141 |
{{^savings_in_discounts}}<div style="color: #15803d; font-size: 10px;">{{i18n.savings}}: -{{unit_savings_excl_display}}</div>{{/savings_in_discounts}} |
| 142 |
{{/unit_savings_excl}} |
| 143 |
</td> |
| 144 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; color: #6b7280;">{{#taxes}}{{rate}}% {{/taxes}}</td> |
| 145 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums; color: #6b7280;">{{#taxes}}{{amount_display}} {{/taxes}}</td> |
| 146 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums;">{{line_total_incl_display}}</td> |
| 147 |
</tr> |
| 148 |
{{/lines}} |
| 149 |
{{#fees}} |
| 150 |
<tr> |
| 151 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top;"> |
| 152 |
<div style="font-weight: 600;">{{label}}</div> |
| 153 |
{{#meta}}<div style="color: #6b7280; font-size: 11px;">{{key}}: {{value}}</div>{{/meta}} |
| 154 |
</td> |
| 155 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; color: #6b7280; font-size: 11px;">—</td> |
| 156 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums;">1</td> |
| 157 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums;">{{total_excl_display}}</td> |
| 158 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; color: #6b7280;">{{#taxes}}{{rate}}% {{/taxes}}</td> |
| 159 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums; color: #6b7280;">{{#taxes}}{{amount_display}} {{/taxes}}</td> |
| 160 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums;">{{total_incl_display}}</td> |
| 161 |
</tr> |
| 162 |
{{/fees}} |
| 163 |
{{#shipping}} |
| 164 |
<tr> |
| 165 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top;"> |
| 166 |
<div style="font-weight: 600;">{{label}}{{#method_id}} <span style="color: #6b7280; font-size: 11px; font-weight: 400;">({{method_id}})</span>{{/method_id}}</div> |
| 167 |
{{#meta}}<div style="color: #6b7280; font-size: 11px;">{{key}}: {{value}}</div>{{/meta}} |
| 168 |
</td> |
| 169 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; color: #6b7280; font-size: 11px;">—</td> |
| 170 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums;">1</td> |
| 171 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums;">{{total_excl_display}}</td> |
| 172 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; color: #6b7280;">{{#taxes}}{{rate}}% {{/taxes}}</td> |
| 173 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums; color: #6b7280;">{{#taxes}}{{amount_display}} {{/taxes}}</td> |
| 174 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums;">{{total_incl_display}}</td> |
| 175 |
</tr> |
| 176 |
{{/shipping}} |
| 177 |
{{#discounts}} |
| 178 |
<tr style="color: #15803d;"> |
| 179 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top;"> |
| 180 |
<div style="font-weight: 600;">{{i18n.discount}}{{#label}} · {{label}}{{/label}}</div> |
| 181 |
{{#code}}<span style="font-size: 11px;">{{i18n.reference}}: {{code}}</span>{{/code}} |
| 182 |
</td> |
| 183 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; font-size: 11px;">—</td> |
| 184 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right;">—</td> |
| 185 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right;">—</td> |
| 186 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right;">—</td> |
| 187 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right;">—</td> |
| 188 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums;">-{{total_incl_display}}</td> |
| 189 |
</tr> |
| 190 |
{{/discounts}} |
| 191 |
</tbody> |
| 192 |
</table> |
| 193 |
|
| 194 |
<!-- ── VAT breakdown + Summary ─────────────── --> |
| 195 |
<div style="display: grid; grid-template-columns: 1fr 320px; gap: 28px; margin-top: 20px; align-items: start;"> |
| 196 |
<div> |
| 197 |
{{#has_tax_summary}} |
| 198 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 8px;">{{#tax.display_excl}}{{i18n.tax_summary}}{{/tax.display_excl}}{{#tax.display_incl}}{{i18n.included_tax}}{{/tax.display_incl}}</div> |
| 199 |
<table style="width: 100%; border-collapse: collapse; font-size: 12px;"> |
| 200 |
<thead> |
| 201 |
<tr> |
| 202 |
<th style="text-align: left; font-weight: 600; color: #6b7280; padding: 8px 6px; border-bottom: 1px solid #e5e7eb; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;">{{i18n.tax}}</th> |
| 203 |
<th style="text-align: right; font-weight: 600; color: #6b7280; padding: 8px 6px; border-bottom: 1px solid #e5e7eb; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;">{{i18n.taxable_excl_short}}</th> |
| 204 |
<th style="text-align: right; font-weight: 600; color: #6b7280; padding: 8px 6px; border-bottom: 1px solid #e5e7eb; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;">{{i18n.tax_amount_short}}</th> |
| 205 |
<th style="text-align: right; font-weight: 600; color: #6b7280; padding: 8px 6px; border-bottom: 1px solid #e5e7eb; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;">{{i18n.taxable_incl_short}}</th> |
| 206 |
</tr> |
| 207 |
</thead> |
| 208 |
<tbody> |
| 209 |
{{#tax_summary}} |
| 210 |
<tr> |
| 211 |
<td style="padding: 8px 6px; border-bottom: 1px solid #f3f4f6;">{{label}}</td> |
| 212 |
<td style="padding: 8px 6px; border-bottom: 1px solid #f3f4f6; text-align: right; font-variant-numeric: tabular-nums;">{{taxable_amount_excl_display}}</td> |
| 213 |
<td style="padding: 8px 6px; border-bottom: 1px solid #f3f4f6; text-align: right; font-variant-numeric: tabular-nums;">{{tax_amount_display}}</td> |
| 214 |
<td style="padding: 8px 6px; border-bottom: 1px solid #f3f4f6; text-align: right; font-variant-numeric: tabular-nums;">{{taxable_amount_incl_display}}</td> |
| 215 |
</tr> |
| 216 |
{{/tax_summary}} |
| 217 |
</tbody> |
| 218 |
</table> |
| 219 |
{{/has_tax_summary}} |
| 220 |
</div> |
| 221 |
|
| 222 |
<div style="font-size: 13px;"> |
| 223 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 8px;">{{i18n.subtotal}}</div> |
| 224 |
<div style="display: flex; justify-content: space-between; padding: 2px 0;"><span style="color: #6b7280;">{{i18n.subtotal_excl_tax}}</span><span style="font-variant-numeric: tabular-nums;">{{totals.subtotal_excl_display}}</span></div> |
| 225 |
{{#totals.discount_total_incl}} |
| 226 |
<div style="display: flex; justify-content: space-between; padding: 2px 0; color: #15803d;"><span>{{i18n.discount}}</span><span style="font-variant-numeric: tabular-nums;">-{{totals.discount_total_incl_display}}</span></div> |
| 227 |
{{/totals.discount_total_incl}} |
| 228 |
{{#totals.tax_total}} |
| 229 |
<div style="border-top: 1px solid #e5e7eb; margin: 8px 0;"></div> |
| 230 |
<div style="display: flex; justify-content: space-between; padding: 2px 0;"><span style="color: #6b7280;">{{i18n.total_excl}}</span><span style="font-variant-numeric: tabular-nums;">{{totals.total_excl_display}}</span></div> |
| 231 |
<div style="display: flex; justify-content: space-between; padding: 2px 0;"><span style="color: #6b7280;">{{#tax.display_excl}}{{i18n.total_tax}}{{/tax.display_excl}}{{#tax.display_incl}}{{i18n.included_tax}}{{/tax.display_incl}}</span><span style="font-variant-numeric: tabular-nums;">{{totals.tax_total_display}}</span></div> |
| 232 |
{{/totals.tax_total}} |
| 233 |
<div style="border-top: 2px solid #111827; margin: 8px 0;"></div> |
| 234 |
<div style="display: flex; justify-content: space-between; padding: 4px 0; font-size: 18px; font-weight: 700;"><span>{{i18n.total}}</span><span style="font-variant-numeric: tabular-nums;">{{totals.total_incl_display}}</span></div> |
| 235 |
{{#totals.total_saved_incl}} |
| 236 |
<div style="display: flex; justify-content: space-between; padding: 2px 0; color: #15803d;"><span>{{i18n.total_saved}}</span><span style="font-variant-numeric: tabular-nums;">{{totals.total_saved_incl_display}}</span></div> |
| 237 |
{{/totals.total_saved_incl}} |
| 238 |
{{#totals.refund_total}} |
| 239 |
<div style="display: flex; justify-content: space-between; padding: 2px 0; font-size: 12px; color: #b91c1c;"><span>{{i18n.refunded}}</span><span style="font-variant-numeric: tabular-nums;">-{{totals.refund_total_display}}</span></div> |
| 240 |
<div style="display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; font-weight: 600; border-top: 1px solid #e5e7eb;"><span>{{i18n.net_total}}</span><span style="font-variant-numeric: tabular-nums;">{{totals.net_total_display}}</span></div> |
| 241 |
{{/totals.refund_total}} |
| 242 |
{{#totals.change_total}} |
| 243 |
<div style="display: flex; justify-content: space-between; padding: 2px 0; font-size: 11px; color: #6b7280;"><span>{{i18n.change}}</span><span style="font-variant-numeric: tabular-nums;">{{totals.change_total_display}}</span></div> |
| 244 |
{{/totals.change_total}} |
| 245 |
</div> |
| 246 |
</div> |
| 247 |
|
| 248 |
<!-- ── Refunds ─────────────── --> |
| 249 |
{{#refunds.0}} |
| 250 |
<div style="margin-top: 24px; padding: 16px 18px; background: #fff1f2; border: 1px solid #fecdd3; border-radius: 10px; font-size: 12px; line-height: 1.5; color: #1f2937;"> |
| 251 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 10px; font-weight: 700;">{{i18n.returned_items}}</div> |
| 252 |
{{#refunds}} |
| 253 |
<div style="padding-top: 2px; margin-top: 10px;"> |
| 254 |
<div style="display: flex; justify-content: space-between; gap: 16px; margin-bottom: 4px;"> |
| 255 |
<strong style="font-size: 13px;">#{{id}}</strong> |
| 256 |
{{#date.datetime}}<span style="color: #6b7280; font-size: 11px;">{{date.datetime}}</span>{{/date.datetime}} |
| 257 |
</div> |
| 258 |
<div style="color: #6b7280; font-size: 11px; margin-bottom: 8px;"> |
| 259 |
{{#refunded_by_name}}{{refunded_by_name}}{{/refunded_by_name}} |
| 260 |
{{#reason}} · {{reason}}{{/reason}} |
| 261 |
{{#gateway_title}} · {{gateway_title}}{{/gateway_title}} |
| 262 |
</div> |
| 263 |
{{#lines}} |
| 264 |
<div style="display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; padding: 2px 0;"> |
| 265 |
<div>{{name}}{{#sku}} <span style="color: #6b7280; font-size: 11px;">({{sku}})</span>{{/sku}}</div> |
| 266 |
<div style="text-align: right; color: #6b7280;">{{qty}}×</div> |
| 267 |
<div style="text-align: right; font-variant-numeric: tabular-nums;">{{total_display}}</div> |
| 268 |
</div> |
| 269 |
{{/lines}} |
| 270 |
<div style="border-top: 1px solid #fecdd3; margin-top: 10px; padding-top: 8px; display: flex; justify-content: space-between; gap: 16px; font-weight: 700;"> |
| 271 |
<span>{{i18n.total_refunded}}</span><span style="font-variant-numeric: tabular-nums;">{{amount_display}}</span> |
| 272 |
</div> |
| 273 |
</div> |
| 274 |
{{/refunds}} |
| 275 |
</div> |
| 276 |
{{/refunds.0}} |
| 277 |
|
| 278 |
{{#order.customer_note}} |
| 279 |
<div style="margin-top: 24px; padding: 16px 18px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; font-size: 12px; line-height: 1.5; color: #1f2937;"> |
| 280 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 10px; font-weight: 700;">{{i18n.customer_note}}</div> |
| 281 |
<div style="color: #92400e; white-space: pre-wrap;">{{order.customer_note}}</div> |
| 282 |
</div> |
| 283 |
{{/order.customer_note}} |
| 284 |
|
| 285 |
<!-- ── Payments + Order barcode ─────────────── --> |
| 286 |
<div style="display: grid; grid-template-columns: 1fr 320px; gap: 28px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #e5e7eb; align-items: start;"> |
| 287 |
<div> |
| 288 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 8px;">{{i18n.paid}}</div> |
| 289 |
<div style="font-size: 12px;"> |
| 290 |
{{#payments}} |
| 291 |
<div style="display: flex; justify-content: space-between; padding: 2px 0;"><span><strong>{{method_title}}</strong></span><span style="font-variant-numeric: tabular-nums;">{{amount_display}}</span></div> |
| 292 |
{{#transaction_id}}<div style="font-size: 11px; color: #6b7280; padding-left: 4px;">{{transaction_id}}</div>{{/transaction_id}} |
| 293 |
{{#tendered}}<div style="font-size: 11px; color: #6b7280; padding-left: 4px; display: flex; justify-content: space-between;"><span>{{i18n.tendered}}</span><span style="font-variant-numeric: tabular-nums;">{{tendered_display}}</span></div>{{/tendered}} |
| 294 |
{{#change}}<div style="font-size: 11px; color: #6b7280; padding-left: 4px; display: flex; justify-content: space-between;"><span>{{i18n.change}}</span><span style="font-variant-numeric: tabular-nums;">{{change_display}}</span></div>{{/change}} |
| 295 |
{{/payments}} |
| 296 |
</div> |
| 297 |
</div> |
| 298 |
|
| 299 |
<!-- |
| 300 |
Order barcode — the receipt-renderer pipeline converts <barcode> elements into a centered <div> with |
| 301 |
the SVG inside; we cap that wrapper's width and float it to the |
| 302 |
right via flex. |
| 303 |
--> |
| 304 |
<div style="display: flex; justify-content: flex-end;"> |
| 305 |
<div style="width: 220px;"> |
| 306 |
<barcode type="code128" height="40">{{order.number}}</barcode> |
| 307 |
</div> |
| 308 |
</div> |
| 309 |
</div> |
| 310 |
|
| 311 |
<!-- ── Personal note (italic), centered ─────────────── --> |
| 312 |
<div style="margin-top: 24px; padding-top: 14px; border-top: 1px solid #e5e7eb; text-align: center; color: #6b7280; font-size: 12px; font-style: italic;"> |
| 313 |
{{#store.personal_notes}}{{store.personal_notes}}{{/store.personal_notes}} |
| 314 |
{{^store.personal_notes}}{{i18n.thank_you_purchase}}{{/store.personal_notes}} |
| 315 |
</div> |
| 316 |
|
| 317 |
<!-- ── Terms & footer ─────────────── --> |
| 318 |
{{#store.policies_and_conditions}} |
| 319 |
<div style="margin-top: 24px; padding: 16px 18px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 12px; line-height: 1.5; color: #1f2937;"> |
| 320 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 10px; font-weight: 700;">{{i18n.terms_and_conditions}}</div> |
| 321 |
<div style="color: #6b7280; white-space: pre-wrap;">{{store.policies_and_conditions}}</div> |
| 322 |
</div> |
| 323 |
{{/store.policies_and_conditions}} |
| 324 |
|
| 325 |
<footer style="margin-top: 16px; padding-top: 14px; border-top: 1px solid #e5e7eb; display: flex; align-items: flex-start; gap: 24px; font-size: 11px; color: #6b7280;"> |
| 326 |
<div style="flex: 1 1 0; min-width: 0;"> |
| 327 |
{{#store.footer_imprint}}{{store.footer_imprint}}{{/store.footer_imprint}} |
| 328 |
</div> |
| 329 |
{{#store.opening_hours}} |
| 330 |
<div style="flex: 1 1 0; min-width: 0; text-align: center;"> |
| 331 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; font-weight: 700; margin-bottom: 4px;">{{i18n.opening_hours}}</div> |
| 332 |
<div style="color: #374151;">{{store.opening_hours}}</div> |
| 333 |
{{#store.opening_hours_notes}}<div>{{store.opening_hours_notes}}</div>{{/store.opening_hours_notes}} |
| 334 |
</div> |
| 335 |
{{/store.opening_hours}} |
| 336 |
{{^store.opening_hours}}{{#store.opening_hours_notes}} |
| 337 |
<div style="flex: 1 1 0; min-width: 0; text-align: center;"> |
| 338 |
<div>{{store.opening_hours_notes}}</div> |
| 339 |
</div> |
| 340 |
{{/store.opening_hours_notes}}{{/store.opening_hours}} |
| 341 |
{{#order.printed.datetime}} |
| 342 |
<div style="flex: 1 1 0; min-width: 0; text-align: right;"> |
| 343 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; font-weight: 700; margin-bottom: 4px;">{{i18n.printed}}</div> |
| 344 |
<div style="color: #374151;">{{order.printed.datetime}}</div> |
| 345 |
</div> |
| 346 |
{{/order.printed.datetime}} |
| 347 |
</footer> |
| 348 |
|
| 349 |
</div> |
| 350 |
|
