Build1 publisher2 min readPublished
EU storefronts must embed the Commission's legal-guarantee notice untouched, QR code included
EU shops must show the Commission's official legal-guarantee notice, issued in 24 languages, unaltered on the storefront and in order emails. One WooCommerce build hit two snags, a block checkout that skips the classic hook and an English notice with no PNG for email.
The Engineer · Build desk
What happened
- A developer's dev.to guide says three EU rules for online shops changed this year, with one of them taking effect on Sunday 27 September 2026.
- The European Commission publishes a single official legal-guarantee notice, with a blue header and a QR code, in all 24 EU languages as SVG, PNG and PDF files.
- The Commission's practical guidelines, as the guide summarises them, require that file in colour and unchanged, with no recolouring, cropping, font changes or edits to the QR code.
- The same notice has to appear in the order confirmation email as well as on the storefront.
Compiled by The EngineerSomething wrong?How this is made
Why it matters
- constraint Theme styling cannot reach the notice itself, so the only design decisions left to a storefront team are where the notice sits and what opens it.
- exposure A multilingual shop can ship the correct image with the wrong link, because the link target changes with each language while the rule ties it to the QR code's destination.
- decision Teams sending English order emails have to pick between an SVG that many mail clients drop and a text fallback that is not the official file.
The author implemented all three rules for WooCommerce and wrote "Not legal advice." near the top of the post [16]. Its first section covers the guarantee notice, but the text does not say which of the three rules the Sunday date belongs to [1]. The other two are a withdrawal function for online contracts under Directive (EU) 2023/2673, and new always-banned practices, generic environmental claims among them, under Directive (EU) 2024/825 [17].
Every seller of goods to EU consumers has to show the notice [2]. In the author's markup it sits inside a native `<details>` element whose `<summary>` reads "Your legal guarantee rights", wrapping a 595 by 842 image that links to a self-hosted SVG [8]. One click on that summary opens the notice, matching the Commission's own example of prominent display [6]. Under the image, a text link to europa.eu/youreurope/guarantees covers the rule that a clickable link must always go to the QR code's destination [5][8]. This is good, plain engineering. The snippet has no script, and the author says it works even inside site builders that sandbox custom HTML in an iframe [8].
Checkout is where the obvious approach fails. Since WooCommerce 8.3, new shops get the block checkout by default, and `woocommerce_review_order_before_submit` never fires there [10]. React renders the inner part of that block, so HTML injected inside it can disappear [11]. The author's fix works one level up. A `render_block_woocommerce/checkout` filter prepends the notice to the block's HTML, so it sits right before the part React controls [11].
Email has its own format problem. Many mail clients do not render SVG, so the author uses the Commission's PNG in the order email [12]. "Curiously, the PNG package has 23 languages and is missing English, which only exists as SVG and PDF," the author wrote [13]. Against 24 official languages, that leaves one gap, and it is the language the post is written in [15]. For English emails the author falls back to the sentence plus link [14].
What to watch
- The Commission adding English to its PNG package, so English order emails can carry the official image.
- Confirmation, against the directives' own texts, of the application date for each of the three rules.
- A WooCommerce extension point for content inside the checkout block that would replace the render_block workaround.