| 1 |
<!-- |
| 2 |
Packing Slip — fulfillment companion. |
| 3 |
|
| 4 |
Items and quantities only, no pricing. Shipping address is the focal |
| 5 |
point so warehouse staff can dispatch at a glance. |
| 6 |
|
| 7 |
Sections, top to bottom: |
| 8 |
|
| 9 |
- Header — store logo, name, address and contact details on the |
| 10 |
left; the document title, order number and date on the right. |
| 11 |
- Ship-to + Order — emphasized shipping address with the customer's |
| 12 |
phone and the shipping method / tracking number(s) pulled from |
| 13 |
the order's shipping line meta. Order meta column shows date, |
| 14 |
status, cashier and a short bill-to reference. |
| 15 |
- Items table — line name (with variation attributes via the |
| 16 |
{{#meta}}…{{/meta}} section), SKU, quantity and a packed checkbox |
| 17 |
column. Footer row sums the order's total quantity via |
| 18 |
totals.total_qty. |
| 19 |
- Customer note — highlighted callout, only shown when a note was |
| 20 |
left on the order. |
| 21 |
- Sign-off + barcode — three blank lines for the picker to record |
| 22 |
name, date and signature, alongside a code128 barcode of the |
| 23 |
order number for scan-on-dispatch. |
| 24 |
- Footer — order number + receipt print time. |
| 25 |
|
| 26 |
To remove a section, delete the matching block. To restyle, edit the |
| 27 |
inline styles on the wrapping element. |
| 28 |
--> |
| 29 |
<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;"> |
| 30 |
|
| 31 |
<!-- ── Header: logo + store / doc title + meta ─────────────── --> |
| 32 |
<header style="display: flex; align-items: flex-start; gap: 22px; padding-bottom: 18px; border-bottom: 2px solid #111827;"> |
| 33 |
{{#store.logo}} |
| 34 |
<div style="flex: 0 0 auto;"> |
| 35 |
<img src="{{store.logo}}" alt="{{store.name}}" style="width: 88px; height: auto; display: block;"> |
| 36 |
</div> |
| 37 |
{{/store.logo}} |
| 38 |
<div style="flex: 1 1 auto; min-width: 0;"> |
| 39 |
<div style="font-size: 22px; font-weight: 700; letter-spacing: -0.01em;">{{store.name}}</div> |
| 40 |
{{#store.address_lines}} |
| 41 |
<div style="margin-top: 2px; color: #6b7280; font-size: 12px;">{{.}}</div> |
| 42 |
{{/store.address_lines}} |
| 43 |
{{#store.phone}}<div style="color: #6b7280; font-size: 12px;">{{store.phone}}{{#store.email}} · {{store.email}}{{/store.email}}</div>{{/store.phone}} |
| 44 |
{{^store.phone}}{{#store.email}}<div style="color: #6b7280; font-size: 12px;">{{store.email}}</div>{{/store.email}}{{/store.phone}} |
| 45 |
</div> |
| 46 |
<div style="flex: 0 0 auto; text-align: right;"> |
| 47 |
<div style="font-size: 16px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;">{{i18n.packing_slip}}</div> |
| 48 |
<div style="font-size: 22px; font-weight: 700; margin-top: 4px;">#{{order.number}}</div> |
| 49 |
<div style="color: #6b7280; font-size: 12px; margin-top: 6px;">{{order.created.datetime}}</div> |
| 50 |
</div> |
| 51 |
</header> |
| 52 |
|
| 53 |
<!-- ── Ship-to / Order meta ─────────────── --> |
| 54 |
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 28px; margin-top: 22px;"> |
| 55 |
|
| 56 |
<div style="padding: 18px 20px; border: 2px solid #111827; border-radius: 10px;"> |
| 57 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 8px; font-weight: 700;">{{i18n.ship_to}}</div> |
| 58 |
{{#customer.shipping_address.address_1}} |
| 59 |
<div style="font-weight: 700; font-size: 16px; margin-bottom: 2px;">{{customer.shipping_address.first_name}} {{customer.shipping_address.last_name}}</div> |
| 60 |
{{#customer.shipping_address.company}}<div style="color: #6b7280; margin-bottom: 6px;">{{customer.shipping_address.company}}</div>{{/customer.shipping_address.company}} |
| 61 |
<div style="font-size: 13px;"> |
| 62 |
<div>{{customer.shipping_address.address_1}}</div> |
| 63 |
{{#customer.shipping_address.address_2}}<div>{{customer.shipping_address.address_2}}</div>{{/customer.shipping_address.address_2}} |
| 64 |
<div>{{customer.shipping_address.postcode}} {{customer.shipping_address.city}}{{#customer.shipping_address.state}}, {{customer.shipping_address.state}}{{/customer.shipping_address.state}}</div> |
| 65 |
{{#customer.shipping_address.country}}<div>{{customer.shipping_address.country}}</div>{{/customer.shipping_address.country}} |
| 66 |
</div> |
| 67 |
{{#customer.shipping_address.phone}}<div style="color: #6b7280; font-size: 12px; margin-top: 8px;">{{customer.shipping_address.phone}}</div>{{/customer.shipping_address.phone}} |
| 68 |
{{/customer.shipping_address.address_1}} |
| 69 |
{{^customer.shipping_address.address_1}} |
| 70 |
<div style="font-weight: 700; font-size: 16px; margin-bottom: 2px;">{{customer.name}}</div> |
| 71 |
{{/customer.shipping_address.address_1}} |
| 72 |
|
| 73 |
{{#shipping.0}} |
| 74 |
<div style="margin-top: 12px; padding-top: 12px; border-top: 1px dashed #d1d5db; font-size: 12px;"> |
| 75 |
{{#shipping}} |
| 76 |
<div style="font-weight: 600;">{{label}}{{#method_id}} <span style="color: #6b7280; font-size: 11px; font-weight: 400;">({{method_id}})</span>{{/method_id}}</div> |
| 77 |
{{#meta}}<div style="color: #6b7280; font-size: 11px; margin-top: 2px;"><strong>{{key}}</strong> {{value}}</div>{{/meta}} |
| 78 |
{{/shipping}} |
| 79 |
</div> |
| 80 |
{{/shipping.0}} |
| 81 |
</div> |
| 82 |
|
| 83 |
<div style="font-size: 12px;"> |
| 84 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 8px; font-weight: 700;">{{i18n.order}}</div> |
| 85 |
<div style="display: flex; justify-content: space-between; padding: 2px 0;"><span style="color: #6b7280;">{{i18n.date}}</span><span>{{order.created.datetime}}</span></div> |
| 86 |
{{#order.wc_status}} |
| 87 |
<div style="display: flex; justify-content: space-between; padding: 2px 0;"> |
| 88 |
<span style="color: #6b7280;">{{i18n.status}}</span> |
| 89 |
<span>{{#order.status_label}}{{order.status_label}}{{/order.status_label}}{{^order.status_label}}{{order.wc_status}}{{/order.status_label}}</span> |
| 90 |
</div> |
| 91 |
{{/order.wc_status}} |
| 92 |
{{#cashier.name}}<div style="display: flex; justify-content: space-between; padding: 2px 0;"><span style="color: #6b7280;">{{i18n.cashier}}</span><span>{{cashier.name}}</span></div>{{/cashier.name}} |
| 93 |
{{#customer.billing_address.address_1}} |
| 94 |
<div style="border-top: 1px solid #e5e7eb; margin-top: 8px; padding-top: 6px;"> |
| 95 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 4px; font-weight: 700;">{{i18n.billed_to}}</div> |
| 96 |
<div>{{customer.name}}</div> |
| 97 |
{{#customer.billing_address.email}}<div style="color: #6b7280; font-size: 11px;">{{customer.billing_address.email}}</div>{{/customer.billing_address.email}} |
| 98 |
</div> |
| 99 |
{{/customer.billing_address.address_1}} |
| 100 |
</div> |
| 101 |
</div> |
| 102 |
|
| 103 |
<!-- ── Items table ─────────────── --> |
| 104 |
<table style="width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 13px;"> |
| 105 |
<thead> |
| 106 |
<tr> |
| 107 |
<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> |
| 108 |
<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> |
| 109 |
<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> |
| 110 |
<th style="text-align: center; font-weight: 600; color: #6b7280; padding: 8px 6px; border-bottom: 1px solid #e5e7eb; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; width: 70px;">{{i18n.packed}}</th> |
| 111 |
</tr> |
| 112 |
</thead> |
| 113 |
<tbody> |
| 114 |
{{#lines}} |
| 115 |
<tr> |
| 116 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top;"> |
| 117 |
<div style="font-weight: 600;">{{name}}</div> |
| 118 |
{{#meta}}<div style="color: #6b7280; font-size: 11px;">{{key}}: {{value}}</div>{{/meta}} |
| 119 |
</td> |
| 120 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; color: #6b7280; font-size: 11px; white-space: nowrap;">{{sku}}</td> |
| 121 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;">{{qty}}</td> |
| 122 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: center;"> |
| 123 |
<span style="display: inline-block; width: 20px; height: 20px; border: 2px solid #9ca3af; border-radius: 4px;"></span> |
| 124 |
</td> |
| 125 |
</tr> |
| 126 |
{{/lines}} |
| 127 |
</tbody> |
| 128 |
<tfoot> |
| 129 |
<tr> |
| 130 |
<td colspan="2" style="padding: 10px 6px; border-top: 2px solid #111827; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;">{{i18n.total}}</td> |
| 131 |
<td style="padding: 10px 6px; border-top: 2px solid #111827; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums;">{{totals.total_qty}}</td> |
| 132 |
<td style="padding: 10px 6px; border-top: 2px solid #111827;"></td> |
| 133 |
</tr> |
| 134 |
</tfoot> |
| 135 |
</table> |
| 136 |
|
| 137 |
<!-- ── Customer note ─────────────── --> |
| 138 |
{{#order.customer_note}} |
| 139 |
<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;"> |
| 140 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 10px; font-weight: 700;">{{i18n.customer_note}}</div> |
| 141 |
<div style="color: #92400e; white-space: pre-wrap;">{{order.customer_note}}</div> |
| 142 |
</div> |
| 143 |
{{/order.customer_note}} |
| 144 |
|
| 145 |
<!-- ── Sign-off + barcode ─────────────── --> |
| 146 |
<div style="display: grid; grid-template-columns: 1fr 220px; gap: 28px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #e5e7eb; align-items: end;"> |
| 147 |
<div style="font-size: 12px;"> |
| 148 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 18px; font-weight: 700;">{{i18n.packed_by}}</div> |
| 149 |
<div style="display: flex; gap: 24px;"> |
| 150 |
<div style="flex: 1;"> |
| 151 |
<div style="border-bottom: 1px solid #9ca3af; height: 22px;"></div> |
| 152 |
<div style="color: #6b7280; font-size: 11px; margin-top: 4px;">{{i18n.signed_name}}</div> |
| 153 |
</div> |
| 154 |
<div style="flex: 1;"> |
| 155 |
<div style="border-bottom: 1px solid #9ca3af; height: 22px;"></div> |
| 156 |
<div style="color: #6b7280; font-size: 11px; margin-top: 4px;">{{i18n.date}}</div> |
| 157 |
</div> |
| 158 |
<div style="flex: 1;"> |
| 159 |
<div style="border-bottom: 1px solid #9ca3af; height: 22px;"></div> |
| 160 |
<div style="color: #6b7280; font-size: 11px; margin-top: 4px;">{{i18n.signature}}</div> |
| 161 |
</div> |
| 162 |
</div> |
| 163 |
</div> |
| 164 |
|
| 165 |
<!-- |
| 166 |
Order barcode — the receipt-renderer pipeline converts <barcode> elements |
| 167 |
into a centered <div> with the SVG inside; the grid column caps its width. |
| 168 |
--> |
| 169 |
<div style="text-align: center;"> |
| 170 |
<barcode type="code128" height="40">{{order.number}}</barcode> |
| 171 |
</div> |
| 172 |
</div> |
| 173 |
|
| 174 |
<!-- ── Footer ─────────────── --> |
| 175 |
<footer style="margin-top: 16px; padding-top: 14px; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; gap: 24px; font-size: 11px; color: #6b7280;"> |
| 176 |
<div>Order #{{order.number}}</div> |
| 177 |
{{#order.printed.datetime}}<div>{{i18n.printed}} {{order.printed.datetime}}</div>{{/order.printed.datetime}} |
| 178 |
</footer> |
| 179 |
|
| 180 |
</div> |
| 181 |
|
