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

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

- Page: https://pluginprobe.com/plugins/woocommerce-pos/1.10.21/code/templates/gallery/quote.html
- Raw: https://pluginprobe.com/plugins/woocommerce-pos/1.10.21/raw/templates/gallery/quote.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/quote.html#L10-L20`.

```html
<!--
Quote / Estimate — pre-sale document.

Items with pricing but no payment section. Designed for B&W printing:
white background, black ink, hierarchy comes from weight, rules,
whitespace and type contrast rather than colour fills. Layout follows
the packing-slip pattern so the two documents read as a pair.

Sections, top to bottom:

  - Header — store logo, name, address and contact details on the
    left; "QUOTE" wordmark, order number and date on the right.
  - Prepared For + Order meta — bordered "Prepared For" box on the
    left (mirroring packing-slip's Ship-to emphasis); right column
    shows date, status (when set), cashier and an optional Ship-to
    sub-block.
  - Items table — item name with variation attributes, SKU, qty,
    unit price and line total. Fees, shipping (with carrier /
    tracking meta) and discounts share the table.
  - Tax summary + totals — per-rate net / tax breakdown on the left,
    subtotal / discount / tax / total stack on the right.
  - Customer note — only when a note was left on the order.
  - Terms & conditions — store policies, falling back to the built-in
    "valid for 30 days" message.
  - Footer — imprint, optional opening hours, and a "this is a
    quote, not a receipt" tagline.

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 / doc title + meta ─────────────── -->
	<header style="display: flex; align-items: flex-start; gap: 22px; padding-bottom: 18px; border-bottom: 2px solid #111827;">
		{{#store.logo}}
		<div style="flex: 0 0 auto;">
			<img src="{{store.logo}}" alt="{{store.name}}" style="width: 88px; height: auto; display: block;">
		</div>
		{{/store.logo}}
		<div style="flex: 1 1 auto; min-width: 0;">
			<div style="font-size: 22px; font-weight: 700; letter-spacing: -0.01em;">{{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: 16px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;">{{i18n.quote}}</div>
			<div style="font-size: 22px; font-weight: 700; margin-top: 4px;">#{{order.number}}</div>
			<div style="color: #6b7280; font-size: 12px; margin-top: 6px;">{{order.created.datetime}}</div>
		</div>
	</header>

	<!-- ── Prepared For + Order meta ─────────────── -->
	<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 28px; margin-top: 22px;">

		<div style="padding: 18px 20px; border: 2px solid #111827; border-radius: 10px;">
			<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 8px; font-weight: 700;">{{i18n.prepared_for}}</div>
			<div style="font-weight: 700; font-size: 16px; margin-bottom: 2px;">{{customer.name}}</div>
			{{#customer.billing_address.company}}<div style="color: #6b7280; margin-bottom: 6px;">{{customer.billing_address.company}}</div>{{/customer.billing_address.company}}
			{{#customer.billing_address.address_1}}
			<div style="font-size: 13px;">
				<div>{{customer.billing_address.address_1}}{{#customer.billing_address.address_2}}, {{customer.billing_address.address_2}}{{/customer.billing_address.address_2}}</div>
				<div>{{customer.billing_address.postcode}} {{customer.billing_address.city}}{{#customer.billing_address.state}}, {{customer.billing_address.state}}{{/customer.billing_address.state}}</div>
				{{#customer.billing_address.country}}<div>{{customer.billing_address.country}}</div>{{/customer.billing_address.country}}
			</div>
			{{/customer.billing_address.address_1}}
			{{#customer.billing_address.email}}<div style="color: #6b7280; font-size: 12px; margin-top: 8px;">{{customer.billing_address.email}}</div>{{/customer.billing_address.email}}
			{{#customer.billing_address.phone}}<div style="color: #6b7280; font-size: 12px;{{^customer.billing_address.email}} margin-top: 8px;{{/customer.billing_address.email}}">{{customer.billing_address.phone}}</div>{{/customer.billing_address.phone}}
			{{#customer.tax_ids}}
			<div style="font-size: 12px; margin-top: 6px;"><strong>{{#label}}{{label}}{{/label}}{{^label}}{{type}}{{/label}}</strong> {{value}}</div>
			{{/customer.tax_ids}}
		</div>

		<div style="font-size: 12px;">
			<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 8px; font-weight: 700;">{{i18n.order}}</div>
			<div style="display: flex; justify-content: space-between; padding: 2px 0;"><span style="color: #6b7280;">{{i18n.date}}</span><span>{{order.created.datetime}}</span></div>
			{{#order.wc_status}}
			<div style="display: flex; justify-content: space-between; padding: 2px 0;">
				<span style="color: #6b7280;">{{i18n.status}}</span>
				<span>{{#order.status_label}}{{order.status_label}}{{/order.status_label}}{{^order.status_label}}{{order.wc_status}}{{/order.status_label}}</span>
			</div>
			{{/order.wc_status}}
			{{#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}}

			{{#customer.shipping_address.address_1}}
			<div style="border-top: 1px solid #e5e7eb; margin-top: 8px; padding-top: 6px;">
				<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 4px; font-weight: 700;">{{i18n.ship_to}}</div>
				<div>{{customer.shipping_address.first_name}} {{customer.shipping_address.last_name}}</div>
				<div style="color: #6b7280; font-size: 11px;">{{customer.shipping_address.address_1}}{{#customer.shipping_address.address_2}}, {{customer.shipping_address.address_2}}{{/customer.shipping_address.address_2}}</div>
				<div style="color: #6b7280; font-size: 11px;">{{customer.shipping_address.postcode}} {{customer.shipping_address.city}}{{#customer.shipping_address.country}}, {{customer.shipping_address.country}}{{/customer.shipping_address.country}}</div>
			</div>
			{{/customer.shipping_address.address_1}}
		</div>
	</div>

	<!-- ── Items table ─────────────── -->
	<table style="width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 13px;">
		<thead>
			<tr>
				<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>
				<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>
				<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>
				<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_price}}</th>
				<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}}</th>
			</tr>
		</thead>
		<tbody>
			{{#lines}}
			<tr>
				<td style="padding: 10px 6px; 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}}
				</td>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; color: #6b7280; font-size: 11px; white-space: nowrap;">{{sku}}</td>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums;">{{qty}}</td>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; 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 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums;">{{line_total_display}}</td>
			</tr>
			{{/lines}}
			{{#fees}}
			<tr>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top;">
					<div style="font-weight: 600;">{{label}}</div>
					{{#meta}}<div style="color: #6b7280; font-size: 11px;">{{key}}: {{value}}</div>{{/meta}}
				</td>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; color: #6b7280;">&mdash;</td>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums;">1</td>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums;">{{total_display}}</td>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums;">{{total_display}}</td>
			</tr>
			{{/fees}}
			{{#shipping}}
			<tr>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top;">
					<div style="font-weight: 600;">{{label}}{{#method_id}} <span style="color: #6b7280; font-size: 11px; font-weight: 400;">({{method_id}})</span>{{/method_id}}</div>
					{{#meta}}<div style="color: #6b7280; font-size: 11px;">{{key}}: {{value}}</div>{{/meta}}
				</td>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; color: #6b7280;">&mdash;</td>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums;">1</td>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-variant-numeric: tabular-nums;">{{total_display}}</td>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums;">{{total_display}}</td>
			</tr>
			{{/shipping}}
			{{#discounts}}
			<tr>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top;">
					<div style="font-weight: 600;">{{i18n.discount}}{{#label}} &middot; {{label}}{{/label}}</div>
					{{#code}}<div style="color: #6b7280; font-size: 11px;">{{i18n.reference}}: {{code}}</div>{{/code}}
				</td>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; color: #6b7280;">&mdash;</td>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; color: #6b7280;">&mdash;</td>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; color: #6b7280;">&mdash;</td>
				<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; vertical-align: top; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums;">-{{total_display}}</td>
			</tr>
			{{/discounts}}
		</tbody>
	</table>

	<!-- ── Tax summary + Totals ─────────────── -->
	<div style="display: grid; grid-template-columns: 1fr 320px; gap: 28px; margin-top: 20px; align-items: start;">
		<div>
			{{#has_tax_summary}}
			<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 8px; font-weight: 700;">{{#tax.display_excl}}{{i18n.tax_summary}}{{/tax.display_excl}}{{#tax.display_incl}}{{i18n.included_tax}}{{/tax.display_incl}}</div>
			<table style="width: 100%; border-collapse: collapse; font-size: 12px;">
				<thead>
					<tr>
						<th style="text-align: left; font-weight: 600; color: #6b7280; padding: 6px; border-bottom: 1px solid #e5e7eb; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;">{{i18n.tax}}</th>
						<th style="text-align: right; font-weight: 600; color: #6b7280; padding: 6px; border-bottom: 1px solid #e5e7eb; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;">{{i18n.taxable_excl_short}}</th>
						<th style="text-align: right; font-weight: 600; color: #6b7280; padding: 6px; border-bottom: 1px solid #e5e7eb; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;">{{i18n.tax_amount_short}}</th>
					</tr>
				</thead>
				<tbody>
					{{#tax_summary}}
					<tr>
						<td style="padding: 6px; border-bottom: 1px solid #f3f4f6;">{{label}}{{#rate}} ({{rate}}%){{/rate}}</td>
						<td style="padding: 6px; border-bottom: 1px solid #f3f4f6; text-align: right; font-variant-numeric: tabular-nums;">{{taxable_amount_excl_display}}</td>
						<td style="padding: 6px; border-bottom: 1px solid #f3f4f6; text-align: right; font-variant-numeric: tabular-nums;">{{tax_amount_display}}</td>
					</tr>
					{{/tax_summary}}
				</tbody>
			</table>
			{{/has_tax_summary}}
		</div>

		<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>
			{{#totals.discount_total}}
			<div style="display: flex; justify-content: space-between; padding: 2px 0;"><span style="color: #6b7280;">{{i18n.discount}}</span><span style="font-variant-numeric: tabular-nums;">-{{totals.discount_total_display}}</span></div>
			{{/totals.discount_total}}
			{{#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}}
		</div>
	</div>

	<!-- ── Customer note ─────────────── -->
	{{#order.customer_note}}
	<div style="margin-top: 24px; padding: 14px 18px; border: 1px solid #e5e7eb; border-left: 3px solid #111827; font-size: 12px; line-height: 1.55;">
		<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 700;">{{i18n.customer_note}}</div>
		<div style="white-space: pre-wrap;">{{order.customer_note}}</div>
	</div>
	{{/order.customer_note}}

	<!-- ── Terms & conditions ─────────────── -->
	<div style="margin-top: 22px; padding: 16px 18px; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 12px; line-height: 1.6;">
		<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 8px; font-weight: 700;">{{i18n.terms_and_conditions}}</div>
		{{#store.policies_and_conditions}}
		<div style="white-space: pre-wrap;">{{store.policies_and_conditions}}</div>
		{{/store.policies_and_conditions}}
		{{^store.policies_and_conditions}}
		<div>{{i18n.quote_validity}}</div>
		{{/store.policies_and_conditions}}
	</div>

	<!-- ── Footer ─────────────── -->
	<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;">
		<div style="flex: 1 1 0; min-width: 0;">
			{{#store.footer_imprint}}{{store.footer_imprint}}{{/store.footer_imprint}}
		</div>
		{{#store.opening_hours}}
		<div style="flex: 1 1 0; min-width: 0; text-align: center;">
			<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; font-weight: 700; margin-bottom: 4px;">{{i18n.opening_hours}}</div>
			<div style="color: #374151;">{{store.opening_hours}}</div>
			{{#store.opening_hours_notes}}<div>{{store.opening_hours_notes}}</div>{{/store.opening_hours_notes}}
		</div>
		{{/store.opening_hours}}
		{{^store.opening_hours}}{{#store.opening_hours_notes}}
		<div style="flex: 1 1 0; min-width: 0; text-align: center;">
			<div>{{store.opening_hours_notes}}</div>
		</div>
		{{/store.opening_hours_notes}}{{/store.opening_hours}}
		<div style="flex: 1 1 0; min-width: 0; text-align: right; color: #111827; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;">
			{{i18n.quote_not_receipt}}
		</div>
	</footer>

</div>

```
