Elementor widgets

Add TierMint widgets and dynamic tags to pages you build with Elementor, and style each widget with TierMint's colors and corner radius.

What you need

The widgets need the free Elementor plugin. Elementor Pro is not needed. When Elementor is not active, TierMint adds nothing to your site for it.

The widgets render through the same components as the TierMint shortcodes and blocks. A Buy Button widget gives the same markup as [tiermint_buy] or the Buy Button block.

Turn the Elementor integration on or off

The integration is on by default, so the widgets appear as soon as Elementor is active. To turn it off:

1. Open TierMint → Settings → Integrations.
2. Turn off Elementor widgets.
3. Click Save changes.

This removes the TierMint widgets and dynamic tags from the Elementor editor, and the display conditions of TierMint Pro, without deactivating Elementor. Turn it back on to restore them.

Find the TierMint widgets

In the Elementor editor, open the Widgets panel and search for "TierMint". The widgets also sit together in a TierMint category.

Available widgets

Ten storefront components are Elementor widgets. Each widget's settings match the attributes of its shortcode.

Widget	What it shows	Settings explained on
TierMint Buy Button	A button that adds one pricing tier of a product to the cart.	[tiermint_buy_button]
TierMint Pricing Table	One column per product, each with its own buy button.	[tiermint_pricing_table]
TierMint Checkout	The checkout: order summary, buyer details and payment.	[tiermint_checkout]
TierMint Product Grid	Cards for your published products, with an optional filter bar.	[tiermint_product_grid]
TierMint Product Details	A whole product: image, name, overview, plans, description and screenshots, in one or two columns.	Product details page
TierMint Login	A sign-in form, or a greeting and log-out link for a signed-in visitor.	[tiermint_login_form]
TierMint Registration	A sign-up form. The customer sets a password from an emailed link.	[tiermint_registration_form]
TierMint Password Reset	The lost-password request and the set-new-password form.	[tiermint_password_reset_form]
TierMint Licenses	The signed-in customer's licenses and their sites.	[tiermint_license_manager]
TierMint Downloads	The customer's downloadable files.	[tiermint_downloads_list]

The Licenses and Downloads widgets show a sign-in prompt to a visitor who is not signed in. Use them to build your own account page.

The other components, such as the cart summary, the account dashboard and the single product parts, have no widget. Place them with their shortcodes in Elementor's Shortcode widget.

TierMint Pro adds Subscriptions, Invoices and Upgrade Prompt widgets, more dynamic tags and display conditions, described in Elementor features in TierMint Pro.

Set up a widget

Select the widget and open its Content tab. Each setting there comes from the same list as the shortcode attributes, so a widget's Show price switch and show_price="true" hold the same value.

Kind of setting	Control	Examples
On or off	Switch	Show price, Show features
A fixed set of choices	Select showing the stored values	Columns, Order by, Layout
A number	Number field	Price tier, Highlighted product, Products per page
Products	Searchable select of your published products	Buy Button's Product, Pricing Table's Products, Product Details' Product
Categories or tags	Searchable select	Product Grid's Categories and Tags
A link	URL field	Login's Redirect URL and Registration URL
Anything else	Text field	Labels, headings

The product select lists up to 100 published products, loaded only inside the editor, so your visitors' pages run no extra product query. If your store has more products, pick them in the block editor, whose product picker searches the whole catalog, or use the shortcode, which takes any product id.

On the Product Details widget, leave Product empty to show the product the visitor opened.

Sample previews in the editor

A widget that has nothing real to show yet shows sample content in the Elementor canvas, with the caption "Sample preview. Real data appears on the live page." You see it on a Buy Button or Pricing Table before you pick a product, on a Checkout while your own cart is empty, and on Licenses and Downloads while your own account has none. The sample never appears on the published page. There the widget shows your real data. With nothing to show, a Buy Button or Pricing Table shows nothing, and Checkout, Licenses and Downloads show a short message such as "Your cart is empty."

Style a widget

Each TierMint widget has a Style tab with five controls. Each one sets a TierMint design token on that widget only.

Control	Token it sets
Primary color	--tiermint-color-primary, the color of buttons and highlights
Text color	--tiermint-color-text
Surface color	--tiermint-color-surface, the card and field background
Corner radius	--tiermint-radius, in px, em or rem
Base font size	--tiermint-font-size-base, in px, em or rem

Leave a control empty to keep the store-wide value. To style every component at once, use TierMint → Settings → Appearance or CSS, as the styling page explains.

Use a dynamic tag

TierMint adds two dynamic tags in a TierMint group. You can use them in text fields, such as a heading's title or a button's text.

Tag	What it outputs
TierMint Product Name	A product's name.
TierMint Product Price	The price of a product's default tier, in your store currency.

1. Click the Dynamic Tags icon next to a text field.
2. Pick a tag from the TierMint group.
3. Enter the product id in the tag's Product field.

A product's id is the number at the end of its edit address in TierMint → Products, such as #/products/12. With no product id, or a product that has no tier for sale, the tag outputs nothing.