# Zactonz Number Plates for WooCommerce: Layouts & artwork

> Sell made-to-order number plates. Shoppers configure a registration, see it drawn to scale as they type, and the order carries production-ready SVG artwork from the same renderer.

Page: https://developers.zactonz.com/wordpress/plugins/zactonz-number-plates-for-woocommerce/layouts/

Complete documentation for this product: https://developers.zactonz.com/wordpress/plugins/zactonz-number-plates-for-woocommerce.md

## The three layouts

Pick one per product, in the Number plate tab. All three collect the same values and are driven by the same script, so nothing about validation, pricing or artwork changes with the choice.

- **Stacked**: the plate above, the fields in one column under it. Fits any theme and any column width; the safe default.
- **Studio**: the plate held beside the controls, on a tinted stage. It measures its own column rather than the window, so in a narrow theme it folds back to a single column by itself instead of squeezing.
- **Guided**: three numbered steps, one open at a time, built on the browser's own accordion so it needs no script to collapse. Where the browser cannot keep one step open at a time, all three open, which is the Stacked layout again.

Plate type and size are radio groups rather than dropdowns: a shopper comparing four plate types should see four plate types, and a set of mutually exclusive choices is what a radio group is, so it keyboards and announces correctly without help.

## Your theme styles the controls

The plugin sets no colours, no borders on inputs, no button look and no type sizes. It arranges the fields and decides how wide the plate may be, and leaves the rest to your theme, so the configurator matches your shop on the day you install it and still matches it after a redesign. The one edge it draws, the Guided step boxes, is taken from the current text colour at low opacity rather than a grey of its own, so it reads correctly on a dark theme too.

Developers can set the layout for every product that names none with `zctz_np_default_template`, and add a layout of their own with `zctz_np_templates` and `zctz_np_render_template`. See [Developers](https://developers.zactonz.com/wordpress/plugins/zactonz-number-plates-for-woocommerce/developers/).

## One renderer for preview, email and production

There is a single layout engine. The live preview, the file the merchant manufactures from and the thumbnail in the order email all come from the same computation of every position in millimetres. A JavaScript preview would have been a second layout engine free to drift from the first, and a plate that looks right in a browser and wrong at 520 mm is the failure this product exists to avoid.

Lettering is centred between the Euro field and the far border, never stretched to fill the width, because Anlage 4 requires the distance from the lettering to each edge to be equal. The gaps inside the registration have the ranges the regulation gives and stay inside them, which is why a long registration is set a little tighter than a short one and a short registration has wide, equal margins. Everything is measured to the ink rather than to a typesetter's box, so the 8 mm minimum clearance is a distance to the letters themselves.

## Why the artwork contains no text

An SVG that sets text depends on whatever opens it honouring the embedded font, and production software often does not: a plate opened in a cutter or a plotter can come out in a substituted typeface with the umlauts missing, which is both wrong and not registrable. Every character in the download is therefore a filled shape taken from the same font, so the file renders identically everywhere and needs nothing installed. It is also about a fifth of the size, and a product page fetches no font file at all.

## The picture in the cart and the email

The picture shown on the cart, the checkout, the email and the account page is a PNG drawn from the same layout, because mail clients do not render SVG. It is drawn larger than needed and scaled down so curves are smooth, with the working size chosen per request so that a small thumbnail gets full smoothing and a large one does not cost many times more. The largest size the image endpoint will draw is capped. Each picture is a pure function of the registration, the choices, the format and the height, so it carries an ETag and a caller that already holds it is answered without drawing anything.