Product details page

Build the page each product opens on from the product blocks, control its address, and choose what buyers see under each plan.

One page for every product

All your products share one product details page. TierMint shows a product on it when a visitor opens that product's address. It is an ordinary WordPress page, so you lay it out in the block editor or a page builder like any other page.

On activation, TierMint creates this page with the product blocks already on it and selects it under TierMint → Settings → General → Product details page. See Storefront pages.

The product blocks

The page is built from small blocks, each showing one part of the product. Find them in the block inserter under TierMint.

Block	What it shows
Product Image	The product's main image.
Product Overview	The product name as the page heading, then the short overview. Keep this block on the page, or add your own heading, so the product name shows.
Product Pricing Tiers	The plan selector, the quantity and the Add to cart button.
Product Description	The full description.
Product Screenshots	The screenshot gallery.
Product Meta	The product's categories and tags, its latest version and the date of its latest release.
Product Changelog	The release notes from the product's latest releases. It is not on the page by default.

The page TierMint creates stacks the first six blocks in that order. You can move them, remove some, put them in columns or add other blocks between them. The Product page pattern (block inserter, Patterns, TierMint) inserts the same set again, so you can go back to the default layout at any time.

A block whose field is empty shows nothing. A product with no image and no screenshots still shows its name, plans and description, with no empty frames.

The overview and description come from the product's Overview and Full description fields, and the images from its Media fields. You edit them on the product's edit screen under TierMint → Products. See Products and pricing tiers.

Show a specific product

Each product block has a Product setting. Left at Current product (from page URL), the block shows the product the visitor opened. Pick a product instead, and the block shows that product wherever you place it, for example to feature one product's pricing on a landing page.

In the editor, a block set to the current product shows your first published product, so you can see the layout while you work. Where a field is empty, the editor shows sample content in its place.

Use the all-in-one Product Details block

The Product Details block shows the whole product on its own: image, name, overview, plans, description and screenshots. It also gives you a two-column layout. Its Layout setting has two options:

• two-column (the default) puts the main image and a small screenshot gallery on one side, and the name, overview, plans and Add to cart on the other. The description runs full width below. The buying panel stays in view while the taller side scrolls.
• single stacks everything in one column: image, name, overview, plans, description, then the screenshots.

The two columns show only when the block itself is wide enough. In a theme's normal, narrow content column or on a small screen, the block stacks into one column. To give it room, set the block's alignment to Wide in the block toolbar.

The Product page (two-column) pattern inserts a wide Product Details block with the Product Meta block lined up below it.

Plans and quantity

The plan selector lists only the plans a buyer can buy. An archived pricing tier never shows.

The quantity follows the selected plan. A plan sold one unit at a time shows the quantity as plain text. A plan that allows a range shows a box that starts at the plan's minimum. Whatever the buyer types, the cart keeps the quantity between the plan's minimum and maximum. The cart shows quantities the same way: plain text for a single-unit line, and a box for a range.

Details under each plan

Each plan can list short facts under its name, such as "1-year license" or "5 activations". A plan with a lifetime license and no activation limit shows "Lifetime license" and "Unlimited activations". The lines come from the plan's own fields, set on the product edit screen. They show only for a product with Licensed product on.

The Product Pricing Tiers and Product Details blocks each have two switches in their block settings. Both are on by default:

Switch	Shows
Show license length	Each plan's license length.
Show activation limit	How many sites each plan can activate.

The switches work per block, so you can show every line on the product page and fewer on a pricing block elsewhere. The same lines also show in the cart and in the checkout order summary.

With TierMint Pro, a recurring plan also shows how often it bills, such as "Billed monthly", and its free trial, such as "14-day free trial". These lines have no switch.

What happens after Add to cart

By default the buyer stays on the page and sees "Added to your cart." with a Go to checkout link. To send buyers straight to checkout, change After adding to the cart under TierMint → Settings → General. See Store settings.

If a plan or product cannot be added, an error shows in the same place.

Screenshots and the lightbox

The Product Screenshots block shows the screenshots as a grid of thumbnails. Each thumbnail links to the full-size image, so the gallery works with JavaScript off.

With JavaScript on, a click on a thumbnail opens the image in an overlay on the same page. Icon buttons labeled "Previous screenshot" and "Next screenshot" for screen readers, or the arrow keys, move through the screenshots. The overlay closes with its "Close" button, a click outside the image, or the Escape key.

The Product Meta block

The Product Meta block shows a short line of facts: the product's categories, its tags, its latest version and the date it was last updated. It is at the end of the page TierMint creates.

Each category and tag links to your store page, filtered to that category or tag, so buyers can reach the store from any product without a menu. If no store page is set, the categories and tags show as plain text.

The version and date come from the product's latest published release, the same releases that feed updates. A product with no published release shows only its categories and tags. A product with none of these shows nothing.

Switch	Shows
Show categories	The product's categories.
Show tags	The product's tags.
Show version	The latest published version number.
Show last updated	The date of the latest published release.

The Product Changelog block

The Product Changelog block shows the release notes from the product's most recent releases. TierMint turns the changelog you write for each release from Markdown into HTML, the same notes buyers see on the update screen. Add the block where you want the notes, for example below the description.

Only published releases show. A beta or release candidate build from TierMint Pro release channels is a draft until you publish it, so it never shows here. With no published release, the block shows nothing.

Setting	Default	What it does
Releases to show	0	How many recent releases to list. 0 shows the full history, up to 20.
Show version heading	On	Shows the version number as a heading above each release's notes.
Show release dates	On	Shows the date each release was published.
Show compatibility	On	Adds a line under each release with its Requires WordPress, Tested up to and Requires PHP values. A release with none of them set shows no line.

The product address

A product's address is built from the product details page's address:

• With plain permalinks (Settings → Permalinks set to Plain), the product slug is a query argument, for example ?page_id=12&tiermint_product=my-app. This needs no setup.
• With any other permalink setting, the address is the page path followed by the product slug, for example /product/my-app/.

To change the base, change the page's slug. Rename it from product to apps, and every product address becomes /apps/my-app/. TierMint updates its rewrite rules when you save the page, so you do not have to visit the WordPress permalink settings.

An address whose slug does not match a published product returns a normal "not found" page.

Child pages under the product page

The product address uses every path directly under the product details page. If the page is at /product/, then /product/anything/ is always read as a product address. So you cannot have a real child page at /product/faq/: give that page another parent. This does not apply with plain permalinks.

Links from the store grid

The Product Grid block links each card to its product's details page. The card's text is the product's overview, or the description when there is no overview. The card title and the image both open the details page. If no product details page is set, the cards show plain text instead of links.

Each card can also show an add-to-cart button. Show buy buttons in the product grid under TierMint → Settings → General sets the store-wide default, and it is on by default. Turn it off to make the grid browse only, so buyers go to the details page to buy. A grid block can override the default in its own settings, for example to show buttons on one featured grid only.

Page builders and shortcodes

Every product block is also a shortcode, for editors and builders that take shortcodes: [tiermint_product_images], [tiermint_product_overview], [tiermint_product_pricing_tiers], [tiermint_product_description], [tiermint_product_screenshots], [tiermint_product_meta], [tiermint_product_changelog] and [tiermint_product_details]. The all-in-one shortcode takes the layout too:

[tiermint_product_details layout="single"]

For Elementor, TierMint adds a TierMint Product Details widget. It shows the whole product, like the Product Details block, with the same layout setting. The separate product parts are blocks and shortcodes only, not Elementor widgets. See Elementor widgets.

Search and social sharing

On a product address, TierMint sets the browser title to the product name and your site name. It also adds a canonical link and Open Graph tags for the title, description, image and address. The description comes from the product's overview, or its full description when there is no overview. The image is the Social share image, or the Main image when that is empty.

With TierMint Pro, you can set a different title and description for each product. They then replace the page title and the Open Graph tags. See Product SEO fields.