# woocommerce-pos/1.10.21/templates/gallery/invoice.html

WCPOS – Point of Sale (POS) plugin for WooCommerce, version 1.10.21. 256 lines.

- Page: https://pluginprobe.com/plugins/woocommerce-pos/1.10.21/code/templates/gallery/invoice.html
- Raw: https://pluginprobe.com/plugins/woocommerce-pos/1.10.21/raw/templates/gallery/invoice.html
- Modified: 2026-08-25T07:52:20+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/woocommerce-pos/1.10.21/code/templates/gallery/invoice.html#L10-L20`.

```html
<!--
Invoice — full-page A4/Letter layout.

IMPORTANT: Sample bank details below are fake placeholders. Replace
them with your own account details before using this invoice template.

Designed for unpaid invoices first: when the order's `needs_payment`
flag is true, a "How to pay" panel renders with bank-transfer details
and a Pay-online QR code linking to WooCommerce's order-pay URL. For
paid orders the panel is hidden and the document reads as a standard
itemised invoice with totals.

Sections, top to bottom:

  - Header — logo, store name + address + contact + tax IDs, invoice
    title, order number, status badge.
  - Bill-to / Ship-to / Details — billing + shipping addresses with
    customer tax IDs, plus issued date and cashier.
  - Items table — line items (with variation + SKU), fees, shipping
    rows. Tinted column-header row anchors the data zone.
  - Customer note + Totals + Amount due — note as a left-rail callout
    when present; totals stack right-aligned; bold dark "Amount due"
    hero card pulls the total figure (only when unpaid).
  - How to pay — only when {{order.needs_payment}}. Two columns:
    fake bank-transfer placeholders (edit to your store's), and a Pay-online QR
    encoding {{order.payment_url}} (WC's order-pay endpoint) with the
    URL printed beside it.
  - Footer — personal note / thank-you + footer imprint.

To remove a section, delete the matching block. To restyle, edit the
inline styles on the wrapping element.

Note: Logicless output passes through wp_kses_post, which strips
<style>, <head>, and document-level tags. Use inline styles only.

@see https://docs.wcpos.com/templates/receipt-data-reference
-->
<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;">

	<!-- ── Header: logo + store info + invoice meta ─────────────── -->
	<header style="display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px;">
		{{#store.logo}}
		<div style="flex: 0 0 auto;">
			<img src="{{store.logo}}" alt="{{store.name}}" style="width: 72px; height: auto; display: block;">
		</div>
		{{/store.logo}}
		<div style="flex: 1 1 auto; min-width: 0;">
			<div style="font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;">{{store.name}}</div>
			{{#store.address_lines}}
			<div style="margin-top: 2px; color: #6b7280; font-size: 12px;">{{.}}</div>
			{{/store.address_lines}}
			{{#store.phone}}<div style="color: #6b7280; font-size: 12px;">{{store.phone}}{{#store.email}} &middot; {{store.email}}{{/store.email}}</div>{{/store.phone}}
			{{^store.phone}}{{#store.email}}<div style="color: #6b7280; font-size: 12px;">{{store.email}}</div>{{/store.email}}{{/store.phone}}
			{{#store.tax_ids}}
			<div style="color: #6b7280; font-size: 12px;">{{#label}}{{label}} {{/label}}{{value}}</div>
			{{/store.tax_ids}}
		</div>
		<div style="flex: 0 0 auto; text-align: right;">
			<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>
			<div style="font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin-top: 4px; line-height: 1;">#{{order.number}}</div>
			{{#order.status_label}}
			<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>
			{{/order.status_label}}
			{{^order.status_label}}
			{{#order.wc_status}}
			<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>
			{{/order.wc_status}}
			{{/order.status_label}}
		</div>
	</header>

	<!-- ── Bill-to / Ship-to / Details ─────────────── -->
	<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 22px;">
		<div>
			<div style="font-size: 10px; letter-spacing: 0.18em; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 600;">{{i18n.bill_to}}</div>
			<div style="font-weight: 600;">{{customer.name}}</div>
			{{#customer.billing_address.company}}<div style="color: #6b7280; font-size: 12px;">{{customer.billing_address.company}}</div>{{/customer.billing_address.company}}
			{{#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}}
			{{#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}}
			{{#customer.billing_address.email}}<div style="color: #6b7280; font-size: 11px; margin-top: 4px;">{{customer.billing_address.email}}</div>{{/customer.billing_address.email}}
			{{#customer.billing_address.phone}}<div style="color: #6b7280; font-size: 11px;">{{customer.billing_address.phone}}</div>{{/customer.billing_address.phone}}
			{{#customer.tax_ids}}
			<div style="color: #6b7280; font-size: 11px; margin-top: 4px;"><strong>{{#label}}{{label}}{{/label}}{{^label}}{{type}}{{/label}}</strong> {{value}}</div>
			{{/customer.tax_ids}}
		</div>

		<div>
			{{#customer.shipping_address.address_1}}
			<div style="font-size: 10px; letter-spacing: 0.18em; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 600;">{{i18n.ship_to}}</div>
			<div style="font-weight: 600;">{{customer.shipping_address.first_name}} {{customer.shipping_address.last_name}}</div>
			{{#customer.shipping_address.company}}<div style="color: #6b7280; font-size: 12px;">{{customer.shipping_address.company}}</div>{{/customer.shipping_address.company}}
			<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>
			<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>
			{{/customer.shipping_address.address_1}}
			{{#shipping}}
			{{#meta}}
			<div style="color: #6b7280; font-size: 11px; margin-top: 4px;"><strong>{{key}}</strong> {{value}}</div>
			{{/meta}}
			{{/shipping}}
		</div>

		<div>
			<div style="font-size: 10px; letter-spacing: 0.18em; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 600;">{{i18n.details}}</div>
			<div style="font-size: 12px;">
				<div style="display: flex; justify-content: space-between; padding: 1px 0;"><span style="color: #6b7280;">{{i18n.issued}}</span><span>{{order.created.datetime}}</span></div>
				{{#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}}
			</div>
		</div>
	</div>

	<!-- ── Items ─────────────── -->
	<table style="width: 100%; border-collapse: collapse; margin-bottom: 18px; font-feature-settings: 'tnum' 1;">
		<thead>
			<tr style="background: #f3f4f6;">
				<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>
				<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>
				<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>
				<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>
				<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>
			</tr>
		</thead>
		<tbody>
			{{#lines}}
			<tr>
				<td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; vertical-align: top;">
					<div style="font-weight: 600;">{{name}}</div>
					{{#meta}}<div style="color: #6b7280; font-size: 11px;">{{key}}: {{value}}</div>{{/meta}}
					{{#sku}}<div style="color: #6b7280; font-size: 11px; font-family: 'SF Mono', Menlo, Consolas, monospace;">{{sku}}</div>{{/sku}}
				</td>
				<td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; vertical-align: top; font-variant-numeric: tabular-nums;">{{qty}}</td>
				<td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; vertical-align: top; font-variant-numeric: tabular-nums;">
					{{unit_price_display}}
					{{#unit_savings}}
					<div style="color: #6b7280; font-size: 10px;">{{i18n.regular_price}}: <span style="text-decoration: line-through;">{{regular_price_display}}</span></div>
					{{^savings_in_discounts}}<div style="color: #15803d; font-size: 10px;">{{i18n.savings}}: -{{unit_savings_display}}</div>{{/savings_in_discounts}}
					{{/unit_savings}}
				</td>
				<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>
				<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>
			</tr>
			{{/lines}}
			{{#fees}}
			<tr>
				<td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6;"><div style="font-weight: 600;">{{label}}</div></td>
				<td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; font-variant-numeric: tabular-nums;">1</td>
				<td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; font-variant-numeric: tabular-nums;">{{total_display}}</td>
				<td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; color: #6b7280;">&mdash;</td>
				<td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums;">{{total_display}}</td>
			</tr>
			{{/fees}}
			{{#shipping}}
			<tr>
				<td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6;"><div style="font-weight: 600;">{{label}}</div></td>
				<td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; font-variant-numeric: tabular-nums;">1</td>
				<td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; font-variant-numeric: tabular-nums;">{{total_display}}</td>
				<td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; color: #6b7280;">&mdash;</td>
				<td style="padding: 10px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums;">{{total_display}}</td>
			</tr>
			{{/shipping}}
		</tbody>
	</table>

	<!-- ── Customer note + Totals + Amount due ─────────────── -->
	<div style="display: flex; gap: 24px; margin-bottom: 22px; align-items: flex-end;">
		<div style="flex: 1 1 auto; min-width: 0;">
			{{#order.customer_note}}
			<div style="padding: 14px 18px; border-left: 3px solid #111827; background: #f9fafb; font-size: 12px; line-height: 1.55;">
				<div style="font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #6b7280; font-weight: 700; margin-bottom: 4px;">{{i18n.customer_note}}</div>
				<div style="color: #4b5563; white-space: pre-wrap;">{{order.customer_note}}</div>
			</div>
			{{/order.customer_note}}
		</div>
		<div style="flex: 0 0 280px;">
			<div style="font-size: 13px;">
				<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>
				{{#discounts}}
				<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>
				{{/discounts}}
				{{#totals.tax_total}}
				<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>
				{{/totals.tax_total}}
				<div style="border-top: 2px solid #111827; margin: 8px 0;"></div>
				<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>
				{{#totals.total_saved_incl}}
				<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>
				{{/totals.total_saved_incl}}
				{{#totals.refund_total}}
				<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>
				<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>
				{{/totals.refund_total}}
			</div>

			{{#order.needs_payment}}
			<div style="margin-top: 12px; padding: 14px 18px; background: #f3f4f6; color: #111827; border-radius: 8px; text-align: right;">
				<div style="font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; color: #6b7280;">{{i18n.amount_due}}</div>
				<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>
			</div>
			{{/order.needs_payment}}
		</div>
	</div>

	<!-- ── Payments (only when present) ─────────────── -->
	{{^order.needs_payment}}
	{{#payments.0}}
	<div style="margin-bottom: 18px; padding: 14px 18px; border: 1px solid #e5e7eb; border-radius: 8px;">
		<div style="font-size: 10px; letter-spacing: 0.18em; color: #6b7280; text-transform: uppercase; font-weight: 700; margin-bottom: 8px;">{{i18n.paid}}</div>
		{{#payments}}
		<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>
		{{/payments}}
	</div>
	{{/payments.0}}
	{{/order.needs_payment}}

	<!-- ── How to pay (only when order needs payment) ─────────────── -->
	{{#order.needs_payment}}
	<div style="padding: 18px 22px; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 18px;">
		<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>
		<div style="display: flex; gap: 24px;">
			<div style="flex: 1; padding-right: 22px; border-right: 1px solid #e5e7eb;">
				<div style="font-size: 13px; font-weight: 600; margin-bottom: 6px;">{{i18n.bank_transfer}}</div>
				<table style="border-collapse: collapse; font-size: 12px; line-height: 1.65;">
					<tr><td style="color: #6b7280; padding-right: 14px;">{{i18n.account}}</td><td>{{store.name}}</td></tr>
					<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>
					<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>
					<tr><td style="color: #6b7280; padding-right: 14px;">{{i18n.reference}}</td><td><strong>#{{order.number}}</strong></td></tr>
				</table>
			</div>
			<div style="flex: 1; display: flex; gap: 16px; align-items: flex-start;">
				<div style="flex: 1; min-width: 0;">
					<div style="font-size: 13px; font-weight: 600; margin-bottom: 6px;">{{i18n.pay_online}}</div>
					<div style="color: #4b5563; font-size: 12px; line-height: 1.55;">{{i18n.scan_qr_or_visit}}</div>
					{{#order.payment_url}}
					<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>
					{{/order.payment_url}}
				</div>
				{{#order.payment_url}}
				<div style="flex: 0 0 92px;">
					<barcode type="qrcode" scale="2">{{order.payment_url}}</barcode>
				</div>
				{{/order.payment_url}}
			</div>
		</div>
	</div>
	{{/order.needs_payment}}

	<!-- ── Footer: personal note + imprint ─────────────── -->
	<div style="margin-top: 24px; padding-top: 14px; border-top: 1px solid #e5e7eb; text-align: center; color: #6b7280; font-size: 12px; font-style: italic;">
		{{#store.personal_notes}}{{store.personal_notes}}{{/store.personal_notes}}
		{{^store.personal_notes}}{{i18n.thank_you_business}}{{/store.personal_notes}}
	</div>
	{{#store.footer_imprint}}
	<div style="margin-top: 10px; text-align: center; font-size: 11px; color: #6b7280;">{{store.footer_imprint}}</div>
	{{/store.footer_imprint}}

</div>

```
