Styling and template overrides

Match the TierMint storefront to your brand with the Appearance settings, CSS custom properties, class overrides and theme template overrides.

Set colors and fonts without CSS

Open TierMint → Settings → Appearance. Each field sets one or more of the design tokens. Leave a field empty to keep the default, which its help text shows.

Setting	What it changes	Also set for you
Primary color	Buttons, links and selected states. Default #2563eb. Pick a color dark enough for white button text.	The hover, soft and focus shades.
Text color	Body text inside the components. Default #111827.
Surface color	Cards, panels and form fields. Default #ffffff.	The raised and alternate surface shades.
Page background	The background behind full-page areas such as the checkout and the account page. Default #f6f7f9.
Border color	Borders and dividers. Default #e5e7eb.	The stronger border on form controls.
Success color	Success notices and badges. Default #15803d.	The tinted background of a success notice.
Error color	Error notices and badges. Default #b91c1c.	The tinted background of an error notice.
Corner radius	How rounded buttons, inputs and cards are: Default, Small or Large.	All three radius sizes.
Font family	A CSS font stack for every component, such as Inter, Arial, sans-serif. Empty keeps the built-in system font stack. The stack can have up to 300 characters. Each family must be a plain name or a quoted name of letters, digits, spaces, underscores or hyphens. Anything else shows an error when you save, and no change in that save is stored.

The Font family setting does not load a font file. Use a font your theme already loads, or a system font.

These settings write the same custom properties you can set in CSS, so everything else on this page still applies. The settings cover the most used colors. For other shades, spacing and shadows, use CSS.

Override the design tokens with CSS

TierMint's CSS reads its colors, sizes and fonts from --tiermint-* custom properties, defined on :root in tiermint-tokens.css. Set any of them in your child theme's stylesheet, in WordPress's Additional CSS (Appearance → Customize → Additional CSS in a classic theme) or with a snippet plugin. Every component picks up the change.

The default colors meet WCAG AA contrast (at least 4.5:1) for text on their intended backgrounds. TierMint does not warn you about a low-contrast override, so check your own colors.

Color tokens

Token	Default	Used for
--tiermint-color-primary	#2563eb	The accent color: buttons, links, the highlighted plan's border.
--tiermint-color-primary-hover	#1d4ed8	A primary button on hover.
--tiermint-color-primary-contrast	#ffffff	Text and icons on the primary color, such as button labels.
--tiermint-color-primary-soft	#eff6ff	A light accent tint, such as the selected payment method row and a ghost button on hover.
--tiermint-color-page	#f6f7f9	The background behind cards on full-page areas.
--tiermint-color-surface	#ffffff	Cards, panels and form fields.
--tiermint-color-surface-alt	#f9fafb	Summary panels, table headers, the filter bar and other inset areas.
--tiermint-color-surface-raised	#ffffff	Raised cards such as the checkout summary and order cards. In a dark theme, give it a lighter value than the surface so cards stand out.
--tiermint-color-text	#111827	Body text.
--tiermint-color-text-muted	#4b5563	Secondary text, such as helper labels and tier names.
--tiermint-color-text-subtle	#6b7280	The lightest text, such as field help, section labels and captions.
--tiermint-color-border	#e5e7eb	Borders and dividers. --tiermint-border uses it too.
--tiermint-color-border-strong	#d1d5db	Borders on inputs, selects and secondary buttons.
--tiermint-color-focus	#2563eb	The keyboard focus ring.
--tiermint-color-overlay	rgba(17, 24, 39, 0.7)	The dark backdrop behind the screenshot lightbox.
--tiermint-color-success	#15803d	Success accents, such as feature list bullets and the checkout confirmation heading.
--tiermint-color-success-bg	#f0fdf4	The background of a success notice or badge.
--tiermint-color-error	#b91c1c	Error text and borders, such as the cart error message.
--tiermint-color-error-bg	#fef2f2	The background of an error notice or badge.
--tiermint-color-warning	#b45309	Warning accents.
--tiermint-color-warning-bg	#fffbeb	The background of a warning notice or badge.
--tiermint-color-info	#0369a1	Information accents, such as the checkout login banner.
--tiermint-color-info-bg	#f0f9ff	The background of an information notice or badge.

Shape and shadow tokens

Token	Default	Used for
--tiermint-radius-sm	6px	Small controls, such as checkboxes.
--tiermint-radius	8px	Buttons, inputs and panels.
--tiermint-radius-lg	12px	Cards and the outer checkout panel.
--tiermint-radius-full	9999px	Pill-shaped badges.
--tiermint-border	1px solid var(--tiermint-color-border)	Most borders. Change --tiermint-color-border to recolor them all.
--tiermint-shadow-sm	0 1px 2px rgba(17, 24, 39, 0.06)	A light lift for cards.
--tiermint-shadow-md	0 4px 12px rgba(17, 24, 39, 0.08)	A card on hover, a sticky summary.
--tiermint-shadow-lg	0 12px 32px rgba(17, 24, 39, 0.12)	Overlays and popovers.

Spacing tokens

Token	Default	Used for
--tiermint-space-1	0.25rem	Tight inline gaps.
--tiermint-space-2	0.5rem	Gaps between closely related items.
--tiermint-space-3	0.75rem	Compact padding.
--tiermint-space-4	1rem	Gaps between stacked blocks.
--tiermint-space-5	1.5rem	Gaps between form fields and between grid items.
--tiermint-space-6	2rem	Card padding and the gap between sections in a card.
--tiermint-space-7	3rem	Larger gaps, such as between the product details columns.
--tiermint-space-8	4rem	The largest gap.

Type tokens

Token	Default	Used for
--tiermint-font-sans	a system font stack	The font of every component.
--tiermint-font-size-xs	0.75rem	Badges, help text and fine print.
--tiermint-font-size-sm	0.875rem	Field labels, buttons, tier names and captions.
--tiermint-font-size-base	1rem	Body text and form inputs.
--tiermint-font-size-lg	1.125rem	Headings inside a component, such as a plan name.
--tiermint-font-size-xl	1.375rem	Larger headings, such as the checkout title.
--tiermint-font-size-2xl	1.75rem	The product name on the product page.
--tiermint-line-height-tight	1.25	Headings and buttons.
--tiermint-line-height-base	1.6	Body text.
--tiermint-font-weight-medium	500	Slightly stronger text.
--tiermint-font-weight-semibold	600	Labels, buttons and headings.
--tiermint-font-weight-bold	700	Totals and titles.

Every component takes its font from --tiermint-font-sans, so a TierMint checkout looks the same under any theme. To use your theme's font instead, set the token to inherit:

:root {
	--tiermint-font-sans: inherit;
}

Shared building blocks

A small shared stylesheet, tiermint-base.css, holds the classes the components share: .tiermint-button (with --primary, --secondary, --ghost, --danger and --small variants), .tiermint-input, .tiermint-select, .tiermint-checkbox, .tiermint-field, .tiermint-card, .tiermint-notice, .tiermint-badge and .tiermint-table. Component markup carries these classes next to its own, so a token change restyles both.

How your CSS wins over TierMint's

The token stylesheet is the only TierMint stylesheet in a CSS cascade layer, @layer tiermint. CSS outside a layer always beats layered CSS. So your own :root block wins over the token defaults, with no !important and no specificity tricks:

:root {
	--tiermint-color-primary: darkslateblue;
}

A color you set under TierMint → Settings → Appearance prints in a :root:root block, so it wins over a plain :root rule in your theme. If your :root override has no effect, check whether the Appearance settings set the same token. Clear it there, or give your rule more weight, for example with :root:root:root.

The component stylesheets and tiermint-base.css are not layered, so the components keep their look against a theme's own input, button, a and heading rules. Your rules for component classes work on normal specificity, and one class is often enough:

.tiermint-buy-button__button {
	padding: 1rem 2rem;
}

TierMint scopes many control and button rules under .tiermint-component, so that a theme rule such as input[type="text"] cannot outrank them. If your rule has no effect, add the same scope:

.tiermint-component .tiermint-buy-button__button {
	padding: 1rem 2rem;
}

Apart from the reduced-motion rule, TierMint's CSS uses no !important.

Theming recipes

Change the brand color everywhere

Set the tokens once on :root:

:root {
	--tiermint-color-primary: #7c3aed;
	--tiermint-color-primary-contrast: #ffffff;
	--tiermint-radius: 2px;
}

Every component that reads these tokens picks them up, including ones you add later.

Restyle one component

Set the tokens on a component class instead of :root. Each component's outer element has the class tiermint-component and its own class, such as tiermint-pricing-table:

.tiermint-pricing-table {
	--tiermint-color-primary: #f97316;
	--tiermint-color-surface-alt: #fff7ed;
}

To change only one of several pricing tables on a page, wrap that one in an element with your own class, for example with a Group block's Additional CSS class(es) field, and scope the rule to that class.

Put a component on a dark background

Set the surface, text and border tokens together on a wrapper, so text stays readable:

.tiermint-dark-section {
	--tiermint-color-surface: #111827;
	--tiermint-color-surface-alt: #1f2937;
	--tiermint-color-surface-raised: #1f2937;
	--tiermint-color-text: #f3f4f6;
	--tiermint-color-text-muted: #cbd5e1;
	--tiermint-color-text-subtle: #94a3b8;
	--tiermint-color-border: #374151;
	--tiermint-color-border-strong: #4b5563;
	--tiermint-color-primary: #3b82f6;
	--tiermint-color-primary-hover: #60a5fa;
	--tiermint-color-primary-contrast: #ffffff;
}

.tiermint-dark-section .tiermint-pricing-table__name {
	color: var(--tiermint-color-text);
}

Plan names in the pricing table take your theme's heading color, so the second rule sets them too.

<div class="tiermint-dark-section">
	[tiermint_pricing_table product_ids="12,14,19"]
</div>

Change these tokens as a set: a dark background alone leaves dark text on it. For a full dark theme, also darken the notice backgrounds (--tiermint-color-success-bg and the other -bg tokens) so notices do not glow. TierMint ships no prefers-color-scheme rule of its own, so a dark look comes only from your tokens.

Class names you can target

Components use BEM names: .tiermint-{component}__{element}, with a --{modifier} suffix for a variant. The highlighted pricing table plan, for example, is .tiermint-pricing-table__plan with .tiermint-pricing-table__plan--highlight added. Some names from the shipped markup:

• .tiermint-buy-button__button, .tiermint-buy-button__price
• .tiermint-cart-summary__table, .tiermint-cart-summary__checkout, .tiermint-cart-summary__error
• .tiermint-product-grid__item, .tiermint-product-grid__filters
• .tiermint-pricing-table__plan--highlight, .tiermint-pricing-table__badge
• .tiermint-checkout__submit, .tiermint-checkout__confirmation
• .tiermint-login-form--logged-in, .tiermint-login-form__logout

We do not rename these classes casually between releases, so you can target them in your own CSS. Use a class rule when a token is too broad, for example to change the padding of one button.

A note after every price

Every catalog price can carry a short note after it, such as "one-time payment" or "per license". There is none by default. Add one with the tiermint_price_note filter. The note shows on every price, in the store grid, the product page, the pricing table and the buy button, so keep it store-wide. HTML tags are stripped, and an empty note shows nothing.

add_filter( 'tiermint_price_note', fn () => 'per license' );

The note sits in .tiermint-price__note, in a smaller, muted text. With a sale price it shows once, after the pair. TierMint Pro tax-inclusive pricing uses the same filter for its "incl. tax" note.

The login form inside .tiermint-login-form comes from WordPress's wp_login_form(), so it uses WordPress's ids and classes, such as #loginform, #wp-submit and .login-remember. Target them under .tiermint-login-form, as TierMint does.

To style a single Elementor widget, use the widget's Style tab. The Elementor widgets page lists its controls.

Reduced motion

When a visitor's system asks for reduced motion (prefers-reduced-motion: reduce), TierMint cuts animation and transition times to almost zero and turns off smooth scrolling inside every .tiermint-component. There is nothing to set up, and no setting turns it off.

Override a component template

CSS changes how things look. To change the markup itself, copy the component's PHP template into your theme.

1. Find the template in the plugin at templates/components/{component}.php, for example templates/components/cart-summary.php.
2. Copy it to tiermint/components/{component}.php in your child theme or theme, for example wp-content/themes/your-theme/tiermint/components/cart-summary.php.
3. Edit the copy.

TierMint looks for the theme copy first, with locate_template(), and uses its own template when there is none. Copy only the files you change. The component name is the shortcode name without tiermint_, with hyphens: buy-button, pricing-table, account-dashboard and so on.

Each template gets one variable, $data, an array of everything the component prepared for that render, such as product names, formatted prices and links. The comment at the top of each template lists its keys. Read values as $data['key'], the same way the shipped templates do.

Shared pieces in templates/components/partials/ always load from the plugin and cannot be overridden. Keep the require lines that load them, or copy their markup into your template.

TierMint also filters each component's markup where it reaches the page, with wp_kses() and a list of the HTML its own templates use: what WordPress allows in post content, plus forms, form fields and the editor sample image. If your copy prints something outside that list, such as an onclick attribute or an <iframe>, TierMint removes it. A <script> or <style> tag is removed too, but the code inside it then shows on the page as text, so load scripts and styles from files with wp_enqueue_script() and wp_enqueue_style(). To allow another element or attribute, add it with the tiermint_kses_allowed_html filter:

add_filter( 'tiermint_kses_allowed_html', function ( $tags ) {
	$tags['input']['pattern'] = true;

	return $tags;
} );

The filter also gets a second argument that names the list it is building: component for a whole component, image for WordPress image markup inside a template, and form for the sign-in form fields. The image and form lists run inside the template, and the whole component then passes the component list, so markup you add for image or form must be on the component list too. A callback that ignores the argument, like the one above, adds to all three.

If TierMint finds no template at all, the component shows nothing. It never shows a PHP warning on the page.

When TierMint loads its CSS and JavaScript

TierMint does not load its files on every page. It loads the token stylesheet, the shared stylesheet and a component's own CSS and JavaScript only on a page where that component renders. A page with only a login form loads the token, shared and login form stylesheets. Stripe's script loads only with the checkout, and only when Stripe is set up. In the block editor, all component styles load so the previews look right.

Where a component renders affects where its stylesheet prints. TierMint finds shortcodes in the content of the page being viewed, and TierMint widgets in its Elementor layout, before the page head prints, so their styles print in the head. A component that renders from somewhere else, such as a widget area or a template file that calls do_shortcode(), loads its stylesheet partway through the page, and WordPress prints it in the footer. The styles still apply, but the component can show unstyled for a moment, and an optimization plugin that only handles head styles can miss them. If you see this, move the shortcode into the page content, or let your optimization plugin include footer styles.