Design & Layout

The plugin ships with a small, theme-aware stylesheet. It sets no fixed heights or font sizes, so the form and the tracking card follow your theme’s typography and widths.

Where the output appears#

Everything appears on the page where you put the [leet_order_tracking] shortcode: the form at the top, and the result card (or an error message with a Try Again button) below it after a lookup. The plugin adds nothing to product, cart, checkout or account pages.

Colours and spacing#

Colours, radius and spacing are CSS custom properties. Override them in your theme’s Additional CSS (Appearance → Customize) or in your child theme’s stylesheet:

:root {
	--leet-ot-bg: transparent;        /* background behind the form */
	--leet-ot-card-bg: #ffffff;       /* form and result card background */
	--leet-ot-border: #d9d9d9;        /* borders and input outlines */
	--leet-ot-text: inherit;          /* text colour */
	--leet-ot-accent: #007bff;        /* Track Order button */
	--leet-ot-accent-hover: #0056b3;  /* button hover */
	--leet-ot-accent-text: #ffffff;   /* button text */
	--leet-ot-error: #c62828;         /* error message colour */
	--leet-ot-radius: 6px;            /* corner radius */
	--leet-ot-gap: 20px;              /* spacing between elements */
}

For finer control, the markup uses these classes: .leet-ot-container and .leet-ot-card (the form), .leet-ot-info and .leet-ot-order-card (the result), .leet-ot-row (each “Label: value” line), .leet-ot-status-{status} (the status badge, for example .leet-ot-status-completed), .leet-ot-remarks-{status}, .leet-ot-eta, .leet-ot-tracking, .leet-ot-tracking-link and .leet-ot-error-container.

Translating the texts#

Every label on the form and the tracking card can be translated. The plugin loads translations from its languages/ folder and ships a .pot template there; create a .po/.mo pair for your locale with a tool such as Poedit or Loco Translate, or use WordPress’s own translation tools.