| 1 |
<!-- |
| 2 |
Standard Receipt (RTL) — Right-to-left counterpart to standard-receipt.html. |
| 3 |
|
| 4 |
Designed for Arabic, Hebrew, Persian and Urdu sites. The shipped strings |
| 5 |
already translate via the standard i18n pipeline — only the layout is |
| 6 |
mirrored here. |
| 7 |
|
| 8 |
Convention: use CSS logical properties (text-align: start/end, |
| 9 |
margin-inline-start/end, padding-inline-start/end) so each rule resolves |
| 10 |
correctly under dir="rtl" without manual flipping per call site. Do NOT |
| 11 |
re-introduce physical text-align: left/right or margin-left/right — |
| 12 |
they break under either direction. |
| 13 |
|
| 14 |
unicode-bidi: plaintext is applied to the outer wrapper and to any field |
| 15 |
that may contain mixed Arabic/Hebrew/Persian/Urdu and Latin runs (store |
| 16 |
name, customer note, personal notes, footer imprint), so embedded Latin |
| 17 |
phone numbers and brand names render in their natural direction. |
| 18 |
|
| 19 |
Uses the logicless template engine with section blocks: |
| 20 |
{{#key}}...{{/key}} — iterate arrays or show block for truthy values |
| 21 |
{{^key}}...{{/key}} — show block when value is empty/falsy |
| 22 |
{{.}} — current value (for arrays of strings) |
| 23 |
{{key.path}} — dot-path placeholder substitution |
| 24 |
|
| 25 |
Money fields are auto-formatted as currency. |
| 26 |
No PHP required — just HTML, CSS, and placeholder variables. |
| 27 |
|
| 28 |
Note: Logicless output passes through wp_kses_post, which strips |
| 29 |
<style>, <head>, and document-level tags. Use inline styles only. |
| 30 |
|
| 31 |
@see https://docs.wcpos.com/templates/receipt-data-reference |
| 32 |
--> |
| 33 |
<div dir="rtl" style="box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-family: 'Tahoma', 'Segoe UI', 'Cairo', 'Amiri', 'Geeza Pro', system-ui, sans-serif; font-size: 13px; line-height: 1.45; color: #1f2937; padding: 32px 36px; unicode-bidi: plaintext;"> |
| 34 |
|
| 35 |
<!-- ── Header: logo + store info + order meta ─────────────── --> |
| 36 |
<header style="display: flex; align-items: flex-start; gap: 22px; padding-bottom: 18px; border-bottom: 2px solid #111827;"> |
| 37 |
{{#store.logo}} |
| 38 |
<div style="flex: 0 0 auto;"> |
| 39 |
<img src="{{store.logo}}" alt="{{store.name}}" style="width: 88px; height: auto; display: block;"> |
| 40 |
</div> |
| 41 |
{{/store.logo}} |
| 42 |
<div style="flex: 1 1 auto; min-width: 0;"> |
| 43 |
<div style="font-size: 22px; font-weight: 700; letter-spacing: -0.01em; unicode-bidi: plaintext;">{{store.name}}</div> |
| 44 |
{{#store.address_lines}} |
| 45 |
<div style="margin-top: 2px; color: #6b7280; font-size: 12px;">{{.}}</div> |
| 46 |
{{/store.address_lines}} |
| 47 |
{{#store.phone}}<div style="color: #6b7280; font-size: 12px;">{{store.phone}}</div>{{/store.phone}} |
| 48 |
{{#store.tax_ids}} |
| 49 |
<div style="color: #6b7280; font-size: 12px;">{{#label}}{{label}} {{/label}}{{value}}</div> |
| 50 |
{{/store.tax_ids}} |
| 51 |
</div> |
| 52 |
<div style="flex: 0 0 auto; text-align: end;"> |
| 53 |
{{#order.status_label}} |
| 54 |
<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; margin-bottom: 8px;"> |
| 55 |
<span style="width: 6px; height: 6px; border-radius: 50%; background: #6b7280;"></span> {{order.status_label}} |
| 56 |
</div> |
| 57 |
{{/order.status_label}} |
| 58 |
{{^order.status_label}} |
| 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; margin-bottom: 8px;"> |
| 61 |
<span style="width: 6px; height: 6px; border-radius: 50%; background: #6b7280;"></span> {{order.wc_status}} |
| 62 |
</div> |
| 63 |
{{/order.wc_status}} |
| 64 |
{{/order.status_label}} |
| 65 |
<div style="font-size: 11px; letter-spacing: 0.16em; color: #6b7280; text-transform: uppercase;">{{#fiscal.document_label}}{{fiscal.document_label}}{{/fiscal.document_label}}{{^fiscal.document_label}}{{i18n.receipt}}{{/fiscal.document_label}}</div> |
| 66 |
<div style="font-size: 22px; font-weight: 700; margin-top: 2px;">#{{order.number}}</div> |
| 67 |
<div style="color: #6b7280; font-size: 12px; margin-top: 6px;">{{order.created.datetime}}</div> |
| 68 |
{{#cashier.name}}<div style="color: #6b7280; font-size: 12px;">{{i18n.cashier}}: {{cashier.name}}</div>{{/cashier.name}} |
| 69 |
{{#customer.name}}<div style="color: #6b7280; font-size: 12px;">{{i18n.customer}}: {{customer.name}}</div>{{/customer.name}} |
| 70 |
{{#customer.tax_ids}}<div style="color: #6b7280; font-size: 11px; margin-top: 2px;">{{#label}}{{label}} {{/label}}{{value}}</div>{{/customer.tax_ids}} |
| 71 |
</div> |
| 72 |
</header> |
| 73 |
|
| 74 |
<!-- ── Items ─────────────── --> |
| 75 |
<table style="width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 13px;"> |
| 76 |
<thead> |
| 77 |
<tr> |
| 78 |
<th style="text-align: start; 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> |
| 79 |
<th style="text-align: end; 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> |
| 80 |
<th style="text-align: end; 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> |
| 81 |
</tr> |
| 82 |
</thead> |
| 83 |
<tbody> |
| 84 |
{{#lines}} |
| 85 |
<tr> |
| 86 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6;"> |
| 87 |
<div style="font-weight: 600;">{{name}}</div> |
| 88 |
{{#line_savings}}<div style="color: #6b7280; font-size: 10px; text-align: start;"><span style="text-decoration: line-through;">{{line_regular_total_display}}</span><span style="color: #15803d;"> · {{i18n.savings}} -{{line_savings_display}}</span></div>{{/line_savings}} |
| 89 |
</td> |
| 90 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; text-align: end; font-variant-numeric: tabular-nums;">{{qty}}</td> |
| 91 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; text-align: end; font-variant-numeric: tabular-nums;">{{line_total_display}}</td> |
| 92 |
</tr> |
| 93 |
{{/lines}} |
| 94 |
{{#fees}} |
| 95 |
<tr> |
| 96 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6;"><div style="font-weight: 600;">{{label}}</div></td> |
| 97 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; text-align: end; font-variant-numeric: tabular-nums;">1</td> |
| 98 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; text-align: end; font-variant-numeric: tabular-nums;">{{total_display}}</td> |
| 99 |
</tr> |
| 100 |
{{/fees}} |
| 101 |
{{#shipping}} |
| 102 |
<tr> |
| 103 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6;"><div style="font-weight: 600;">{{label}}</div></td> |
| 104 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; text-align: end; font-variant-numeric: tabular-nums;">1</td> |
| 105 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; text-align: end; font-variant-numeric: tabular-nums;">{{total_display}}</td> |
| 106 |
</tr> |
| 107 |
{{/shipping}} |
| 108 |
{{#discounts}} |
| 109 |
<tr style="color: #15803d;"> |
| 110 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6;"><div style="font-weight: 600;">{{i18n.discount}}{{#label}} · {{label}}{{/label}}</div></td> |
| 111 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; text-align: end;">—</td> |
| 112 |
<td style="padding: 10px 6px; border-bottom: 1px solid #f3f4f6; text-align: end; font-variant-numeric: tabular-nums;">-{{total_display}}</td> |
| 113 |
</tr> |
| 114 |
{{/discounts}} |
| 115 |
</tbody> |
| 116 |
</table> |
| 117 |
|
| 118 |
<!-- ── Totals (flush to visual end edge — left under RTL) ─────────────── --> |
| 119 |
<div style="margin-top: 20px; max-width: 280px; margin-inline-start: auto; font-size: 13px;"> |
| 120 |
<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> |
| 121 |
{{#totals.tax_total}} |
| 122 |
<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> |
| 123 |
{{/totals.tax_total}} |
| 124 |
<div style="border-top: 2px solid #111827; margin: 8px 0;"></div> |
| 125 |
<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> |
| 126 |
{{#totals.total_saved_incl}} |
| 127 |
<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> |
| 128 |
{{/totals.total_saved_incl}} |
| 129 |
{{#totals.refund_total}} |
| 130 |
<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> |
| 131 |
<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> |
| 132 |
{{/totals.refund_total}} |
| 133 |
</div> |
| 134 |
|
| 135 |
<!-- ── Refunds summary (only when refunds present) ─────────────── --> |
| 136 |
{{#refunds.0}} |
| 137 |
<div style="margin-top: 20px; padding: 14px 16px; background: #fff1f2; border: 1px solid #fecdd3; border-radius: 8px; font-size: 12px; line-height: 1.5;"> |
| 138 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 8px; font-weight: 700;">{{i18n.returned_items}}</div> |
| 139 |
{{#refunds}} |
| 140 |
<div style="display: flex; justify-content: space-between; gap: 12px; padding: 4px 0;"> |
| 141 |
<div> |
| 142 |
<strong>#{{id}}</strong>{{#date.datetime}} <span style="color: #6b7280; font-size: 11px;">· {{date.datetime}}</span>{{/date.datetime}} |
| 143 |
{{#reason}}<div style="color: #6b7280; font-size: 11px;">{{reason}}</div>{{/reason}} |
| 144 |
</div> |
| 145 |
<div style="font-variant-numeric: tabular-nums; font-weight: 700;">{{amount_display}}</div> |
| 146 |
</div> |
| 147 |
{{/refunds}} |
| 148 |
</div> |
| 149 |
{{/refunds.0}} |
| 150 |
|
| 151 |
<!-- ── Customer note (only when present) ─────────────── --> |
| 152 |
{{#order.customer_note}} |
| 153 |
<div style="margin-top: 20px; padding: 14px 16px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; font-size: 12px; line-height: 1.5;"> |
| 154 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; font-weight: 700;">{{i18n.customer_note}}</div> |
| 155 |
<div style="color: #92400e; white-space: pre-wrap; unicode-bidi: plaintext;">{{order.customer_note}}</div> |
| 156 |
</div> |
| 157 |
{{/order.customer_note}} |
| 158 |
|
| 159 |
<!-- ── Payments ─────────────── --> |
| 160 |
{{#payments.0}} |
| 161 |
<div style="margin-top: 24px; padding-top: 18px; border-top: 1px solid #e5e7eb;"> |
| 162 |
<div style="font-size: 10px; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; margin-bottom: 8px;">{{i18n.paid}}</div> |
| 163 |
{{#payments}} |
| 164 |
<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> |
| 165 |
{{#tendered}}<div style="font-size: 11px; color: #6b7280; padding-inline-start: 4px; display: flex; justify-content: space-between;"><span>{{i18n.tendered}}</span><span style="font-variant-numeric: tabular-nums;">{{tendered_display}}</span></div>{{/tendered}} |
| 166 |
{{#change}}<div style="font-size: 11px; color: #6b7280; padding-inline-start: 4px; display: flex; justify-content: space-between;"><span>{{i18n.change}}</span><span style="font-variant-numeric: tabular-nums;">{{change_display}}</span></div>{{/change}} |
| 167 |
{{/payments}} |
| 168 |
</div> |
| 169 |
{{/payments.0}} |
| 170 |
|
| 171 |
<!-- ── Footer ─────────────── --> |
| 172 |
<div style="margin-top: 24px; padding-top: 14px; border-top: 1px solid #e5e7eb; text-align: center; color: #6b7280; font-size: 12px; font-style: italic; unicode-bidi: plaintext;"> |
| 173 |
{{#store.personal_notes}}{{store.personal_notes}}{{/store.personal_notes}} |
| 174 |
{{^store.personal_notes}}{{i18n.thank_you_purchase}}{{/store.personal_notes}} |
| 175 |
</div> |
| 176 |
{{#store.footer_imprint}} |
| 177 |
<div style="margin-top: 10px; text-align: center; font-size: 11px; color: #6b7280; unicode-bidi: plaintext;">{{store.footer_imprint}}</div> |
| 178 |
{{/store.footer_imprint}} |
| 179 |
|
| 180 |
</div> |
| 181 |
|
