PluginProbe
WCPOS – Point of Sale (POS) plugin for WooCommerce / 1.10.0
WCPOS – Point of Sale (POS) plugin for WooCommerce v1.10.0
1.10.19 1.10.18 1.10.17 1.10.16 1.10.15 1.10.13 1.10.14 1.10.12 1.10.11 1.10.10 1.10.9 1.10.8 untagged-3d9b7ccddc54df87c672 1.10.7 1.10.6 1.10.5 1.10.3 1.10.4 1.10.2 1.10.1 1.10.0 1.9.17 1.9.15 1.9.16 1.9.14 All 163 releases
woocommerce-pos / templates / gallery / invoice.html

invoice.html in WCPOS – Point of Sale (POS) plugin for WooCommerce 1.10.0, at templates/gallery/invoice.html

256 lines 18.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <!--
2 Invoice — full-page A4/Letter layout.
3
4 IMPORTANT: Sample bank details below are fake placeholders. Replace
5 them with your own account details before using this invoice template.
6
7 Designed for unpaid invoices first: when the order's `needs_payment`
8 flag is true, a "How to pay" panel renders with bank-transfer details
9 and a Pay-online QR code linking to WooCommerce's order-pay URL. For
10 paid orders the panel is hidden and the document reads as a standard
11 itemised invoice with totals.
12
13 Sections, top to bottom:
14
15 - Header — logo, store name + address + contact + tax IDs, invoice
16 title, order number, status badge.
17 - Bill-to / Ship-to / Details — billing + shipping addresses with
18 customer tax IDs, plus issued date and cashier.
19 - Items table — line items (with variation + SKU), fees, shipping
20 rows. Tinted column-header row anchors the data zone.
21 - Customer note + Totals + Amount due — note as a left-rail callout
22 when present; totals stack right-aligned; bold dark "Amount due"
23 hero card pulls the total figure (only when unpaid).
24 - How to pay — only when {{order.needs_payment}}. Two columns:
25 fake bank-transfer placeholders (edit to your store's), and a Pay-online QR
26 encoding {{order.payment_url}} (WC's order-pay endpoint) with the
27 URL printed beside it.
28 - Footer — personal note / thank-you + footer imprint.
29
30 To remove a section, delete the matching block. To restyle, edit the
31 inline styles on the wrapping element.
32
33 Note: Logicless output passes through wp_kses_post, which strips
34 <style>, <head>, and document-level tags. Use inline styles only.
35
36 @see https://docs.wcpos.com/templates/receipt-data-reference
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 info + invoice meta ─────────────── -->
41 <header style="display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px;">
42 {{#store.logo}}
43 <div style="flex: 0 0 auto;">
44 <img src="{{store.logo}}" alt="{{store.name}}" style="width: 72px; height: auto; display: block;">
45 </div>
46 {{/store.logo}}
47 <div style="flex: 1 1 auto; min-width: 0;">
48 <div style="font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;">{{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}} &middot; {{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 <div style="font-size: 11px; letter-spacing: 0.22em; color: #6b7280; text-transform: uppercase;">{{#fiscal.document_label}}{{fiscal.document_label}}{{/fiscal.document_label}}{{^fiscal.document_label}}{{i18n.invoice}}{{/fiscal.document_label}}</div>
60 <div style="font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin-top: 4px; line-height: 1;">#{{order.number}}</div>
61 {{#order.status_label}}
62 <div style="display: inline-block; margin-top: 10px; padding: 3px 10px; background: #f3f4f6; color: #1f2937; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;">{{order.status_label}}</div>
63 {{/order.status_label}}
64 {{^order.status_label}}
65 {{#order.wc_status}}
66 <div style="display: inline-block; margin-top: 10px; padding: 3px 10px; background: #f3f4f6; color: #1f2937; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;">{{order.wc_status}}</div>
67 {{/order.wc_status}}
68 {{/order.status_label}}
69 </div>
70 </header>
71
72 <!-- ── Bill-to / Ship-to / Details ─────────────── -->
73 <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 22px;">
74 <div>
75 <div style="font-size: 10px; letter-spacing: 0.18em; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 600;">{{i18n.bill_to}}</div>
76 <div style="font-weight: 600;">{{customer.name}}</div>
77 {{#customer.billing_address.company}}<div style="color: #6b7280; font-size: 12px;">{{customer.billing_address.company}}</div>{{/customer.billing_address.company}}
78 {{#customer.billing_address.address_1}}<div style="color: #4b5563; font-size: 12px; line-height: 1.55; margin-top: 2px;">{{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}}
79 {{#customer.billing_address.city}}<div style="color: #4b5563; font-size: 12px; line-height: 1.55;">{{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}}
80 {{#customer.billing_address.email}}<div style="color: #6b7280; font-size: 11px; margin-top: 4px;">{{customer.billing_address.email}}</div>{{/customer.billing_address.email}}
81 {{#customer.billing_address.phone}}<div style="color: #6b7280; font-size: 11px;">{{customer.billing_address.phone}}</div>{{/customer.billing_address.phone}}
82 {{#customer.tax_ids}}
83 <div style="color: #6b7280; font-size: 11px; margin-top: 4px;"><strong>{{#label}}{{label}}{{/label}}{{^label}}{{type}}{{/label}}</strong> {{value}}</div>
84 {{/customer.tax_ids}}
85 </div>
86
87 <div>
88 {{#customer.shipping_address.address_1}}
89 <div style="font-size: 10px; letter-spacing: 0.18em; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 600;">{{i18n.ship_to}}</div>
90 <div style="font-weight: 600;">{{customer.shipping_address.first_name}} {{customer.shipping_address.last_name}}</div>
91 {{#customer.shipping_address.company}}<div style="color: #6b7280; font-size: 12px;">{{customer.shipping_address.company}}</div>{{/customer.shipping_address.company}}
92 <div style="color: #4b5563; font-size: 12px; line-height: 1.55; margin-top: 2px;">{{customer.shipping_address.address_1}}{{#customer.shipping_address.address_2}}, {{customer.shipping_address.address_2}}{{/customer.shipping_address.address_2}}</div>
93 <div style="color: #4b5563; font-size: 12px; line-height: 1.55;">{{customer.shipping_address.postcode}} {{customer.shipping_address.city}}{{#customer.shipping_address.country}}, {{customer.shipping_address.country}}{{/customer.shipping_address.country}}</div>
94 {{/customer.shipping_address.address_1}}
95 {{#shipping}}
96 {{#meta}}
97 <div style="color: #6b7280; font-size: 11px; margin-top: 4px;"><strong>{{key}}</strong> {{value}}</div>
98 {{/meta}}
99 {{/shipping}}
100 </div>
101
102 <div>
103 <div style="font-size: 10px; letter-spacing: 0.18em; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 600;">{{i18n.details}}</div>
104 <div style="font-size: 12px;">
105 <div style="display: flex; justify-content: space-between; padding: 1px 0;"><span style="color: #6b7280;">{{i18n.issued}}</span><span>{{order.created.datetime}}</span></div>
106 {{#cashier.name}}<div style="display: flex; justify-content: space-between; padding: 1px 0;"><span style="color: #6b7280;">{{i18n.cashier}}</span><span>{{cashier.name}}</span></div>{{/cashier.name}}
107 </div>
108 </div>
109 </div>
110
111 <!-- ── Items ─────────────── -->
112 <table style="width: 100%; border-collapse: collapse; margin-bottom: 18px; font-feature-settings: 'tnum' 1;">
113 <thead>
114 <tr style="background: #f3f4f6;">
115 <th style="text-align: left; padding: 9px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #6b7280;">{{i18n.item}}</th>
116 <th style="text-align: right; padding: 9px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #6b7280; white-space: nowrap;">{{i18n.qty}}</th>
117 <th style="text-align: right; padding: 9px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #6b7280; white-space: nowrap;">{{i18n.unit_price}}</th>
118 <th style="text-align: right; padding: 9px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #6b7280; white-space: nowrap;">{{i18n.discount}}</th>
119 <th style="text-align: right; padding: 9px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #6b7280; white-space: nowrap;">{{i18n.amount}}</th>
120 </tr>
121 </thead>
122 <tbody>
123 {{#lines}}
124 <tr>
125 <td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; vertical-align: top;">
126 <div style="font-weight: 600;">{{name}}</div>
127 {{#meta}}<div style="color: #6b7280; font-size: 11px;">{{key}}: {{value}}</div>{{/meta}}
128 {{#sku}}<div style="color: #6b7280; font-size: 11px; font-family: 'SF Mono', Menlo, Consolas, monospace;">{{sku}}</div>{{/sku}}
129 </td>
130 <td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; vertical-align: top; font-variant-numeric: tabular-nums;">{{qty}}</td>
131 <td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; vertical-align: top; font-variant-numeric: tabular-nums;">
132 {{unit_price_display}}
133 {{#unit_savings}}
134 <div style="color: #6b7280; font-size: 10px;">{{i18n.regular_price}}: <span style="text-decoration: line-through;">{{regular_price_display}}</span></div>
135 {{^savings_in_discounts}}<div style="color: #15803d; font-size: 10px;">{{i18n.savings}}: -{{unit_savings_display}}</div>{{/savings_in_discounts}}
136 {{/unit_savings}}
137 </td>
138 <td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; vertical-align: top; font-variant-numeric: tabular-nums; color: #6b7280;">{{#discounts}}-{{discounts_display}}{{/discounts}}{{^discounts}}&mdash;{{/discounts}}</td>
139 <td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; vertical-align: top; font-weight: 600; font-variant-numeric: tabular-nums;">{{line_total_display}}</td>
140 </tr>
141 {{/lines}}
142 {{#fees}}
143 <tr>
144 <td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6;"><div style="font-weight: 600;">{{label}}</div></td>
145 <td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; font-variant-numeric: tabular-nums;">1</td>
146 <td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; font-variant-numeric: tabular-nums;">{{total_display}}</td>
147 <td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; color: #6b7280;">&mdash;</td>
148 <td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums;">{{total_display}}</td>
149 </tr>
150 {{/fees}}
151 {{#shipping}}
152 <tr>
153 <td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6;"><div style="font-weight: 600;">{{label}}</div></td>
154 <td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; font-variant-numeric: tabular-nums;">1</td>
155 <td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; font-variant-numeric: tabular-nums;">{{total_display}}</td>
156 <td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; color: #6b7280;">&mdash;</td>
157 <td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums;">{{total_display}}</td>
158 </tr>
159 {{/shipping}}
160 </tbody>
161 </table>
162
163 <!-- ── Customer note + Totals + Amount due ─────────────── -->
164 <div style="display: flex; gap: 24px; margin-bottom: 22px; align-items: flex-end;">
165 <div style="flex: 1 1 auto; min-width: 0;">
166 {{#order.customer_note}}
167 <div style="padding: 14px 18px; border-left: 3px solid #111827; background: #f9fafb; font-size: 12px; line-height: 1.55;">
168 <div style="font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #6b7280; font-weight: 700; margin-bottom: 4px;">{{i18n.customer_note}}</div>
169 <div style="color: #4b5563; white-space: pre-wrap;">{{order.customer_note}}</div>
170 </div>
171 {{/order.customer_note}}
172 </div>
173 <div style="flex: 0 0 280px;">
174 <div style="font-size: 13px;">
175 <div style="display: flex; justify-content: space-between; padding: 2px 0;"><span style="color: #6b7280;">{{i18n.subtotal}}</span><span style="font-variant-numeric: tabular-nums;">{{totals.subtotal_display}}</span></div>
176 {{#discounts}}
177 <div style="display: flex; justify-content: space-between; padding: 2px 0;"><span style="color: #6b7280;">{{i18n.discount}}{{#code}} ({{code}}){{/code}}</span><span style="font-variant-numeric: tabular-nums;">-{{total_display}}</span></div>
178 {{/discounts}}
179 {{#totals.tax_total}}
180 <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>
181 {{/totals.tax_total}}
182 <div style="border-top: 2px solid #111827; margin: 8px 0;"></div>
183 <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>
184 {{#totals.total_saved_incl}}
185 <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>
186 {{/totals.total_saved_incl}}
187 {{#totals.refund_total}}
188 <div style="display: flex; justify-content: space-between; padding: 2px 0; font-size: 12px; color: #6b7280;"><span>{{i18n.refunded}}</span><span style="font-variant-numeric: tabular-nums;">-{{totals.refund_total_display}}</span></div>
189 <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>
190 {{/totals.refund_total}}
191 </div>
192
193 {{#order.needs_payment}}
194 <div style="margin-top: 12px; padding: 14px 18px; background: #f3f4f6; color: #111827; border-radius: 8px; text-align: right;">
195 <div style="font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; color: #6b7280;">{{i18n.amount_due}}</div>
196 <div style="font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; line-height: 1; font-variant-numeric: tabular-nums;">{{#totals.net_total}}{{totals.net_total_display}}{{/totals.net_total}}{{^totals.net_total}}{{totals.total_incl_display}}{{/totals.net_total}}</div>
197 </div>
198 {{/order.needs_payment}}
199 </div>
200 </div>
201
202 <!-- ── Payments (only when present) ─────────────── -->
203 {{^order.needs_payment}}
204 {{#payments.0}}
205 <div style="margin-bottom: 18px; padding: 14px 18px; border: 1px solid #e5e7eb; border-radius: 8px;">
206 <div style="font-size: 10px; letter-spacing: 0.18em; color: #6b7280; text-transform: uppercase; font-weight: 700; margin-bottom: 8px;">{{i18n.paid}}</div>
207 {{#payments}}
208 <div style="display: flex; justify-content: space-between; padding: 2px 0; font-size: 12px;"><span>{{i18n.paid_via}} {{method_title}}{{#transaction_id}} <span style="color: #6b7280; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11px;">{{transaction_id}}</span>{{/transaction_id}}</span><span style="font-variant-numeric: tabular-nums;">{{amount_display}}</span></div>
209 {{/payments}}
210 </div>
211 {{/payments.0}}
212 {{/order.needs_payment}}
213
214 <!-- ── How to pay (only when order needs payment) ─────────────── -->
215 {{#order.needs_payment}}
216 <div style="padding: 18px 22px; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 18px;">
217 <div style="font-size: 10px; letter-spacing: 0.18em; color: #6b7280; text-transform: uppercase; font-weight: 700; margin-bottom: 14px;">{{i18n.how_to_pay}}</div>
218 <div style="display: flex; gap: 24px;">
219 <div style="flex: 1; padding-right: 22px; border-right: 1px solid #e5e7eb;">
220 <div style="font-size: 13px; font-weight: 600; margin-bottom: 6px;">{{i18n.bank_transfer}}</div>
221 <table style="border-collapse: collapse; font-size: 12px; line-height: 1.65;">
222 <tr><td style="color: #6b7280; padding-right: 14px;">{{i18n.account}}</td><td>{{store.name}}</td></tr>
223 <tr><td style="color: #6b7280; padding-right: 14px;">FAKE SAMPLE IBAN</td><td style="font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11px;">XX00 FAKE 0000 0000 0000 00</td></tr>
224 <tr><td style="color: #6b7280; padding-right: 14px;">FAKE SAMPLE BIC</td><td style="font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11px;">FAKEBANKXXX</td></tr>
225 <tr><td style="color: #6b7280; padding-right: 14px;">{{i18n.reference}}</td><td><strong>#{{order.number}}</strong></td></tr>
226 </table>
227 </div>
228 <div style="flex: 1; display: flex; gap: 16px; align-items: flex-start;">
229 <div style="flex: 1; min-width: 0;">
230 <div style="font-size: 13px; font-weight: 600; margin-bottom: 6px;">{{i18n.pay_online}}</div>
231 <div style="color: #4b5563; font-size: 12px; line-height: 1.55;">{{i18n.scan_qr_or_visit}}</div>
232 {{#order.payment_url}}
233 <div style="margin-top: 6px; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 10px; color: #111827; word-break: break-all; line-height: 1.5;">{{order.payment_url}}</div>
234 {{/order.payment_url}}
235 </div>
236 {{#order.payment_url}}
237 <div style="flex: 0 0 92px;">
238 <barcode type="qrcode" scale="2">{{order.payment_url}}</barcode>
239 </div>
240 {{/order.payment_url}}
241 </div>
242 </div>
243 </div>
244 {{/order.needs_payment}}
245
246 <!-- ── Footer: personal note + imprint ─────────────── -->
247 <div style="margin-top: 24px; padding-top: 14px; border-top: 1px solid #e5e7eb; text-align: center; color: #6b7280; font-size: 12px; font-style: italic;">
248 {{#store.personal_notes}}{{store.personal_notes}}{{/store.personal_notes}}
249 {{^store.personal_notes}}{{i18n.thank_you_business}}{{/store.personal_notes}}
250 </div>
251 {{#store.footer_imprint}}
252 <div style="margin-top: 10px; text-align: center; font-size: 11px; color: #6b7280;">{{store.footer_imprint}}</div>
253 {{/store.footer_imprint}}
254
255 </div>
256