Single Product Page

Single product templates are product-aware TemplateX views. Product values such as {{ price_html }}, {{ featured }}, {{ product:image }}, and {{ gallery_images }} are available without wrapping the page in {{ query:products }}.

Smallest Single Product Page#

<main class="product-page">  {{ notices }}  <h1>{{ title }}</h1>  <div>{{ price_html }}</div>  {{ if short_description }}    <div>{{ short_description }}</div>  {{ /if }}  {{ cart:add }}    <button type="submit">Add to cart</button>  {{ /cart:add }}</main>

{{ price_html }} and {{ short_description }} are value tags. They print once and do not have closing tags.

{{ cart:add }} is a paired tag because it wraps the button and any option controls that belong inside the add-to-cart form.

Product-Aware Paths#

TemplateX treats these source paths as WooCommerce product contexts:

Use resources/views/single-product.php for a normal WordPress single product template.

Use resources/views/woocommerce/... only when you intentionally want a WooCommerce template override. See Template Overrides.

Product Images#

Use {{ product:image }} for the main product image when it should update with the selected variation. Use {{ gallery_images }} for the extra WooCommerce gallery images:

<main class="product-page">  <section class="product-gallery">    {{ product:image class="product-image" size="large" }}    {{ gallery_images }}      <figure>        <img src="{{ url }}" alt="{{ alt }}">      </figure>    {{ /gallery_images }}  </section>  <section class="product-summary">    <h1>{{ title }}</h1>    <div>{{ price_html }}</div>    <div>{{ short_description }}</div>  </section></main>

{{ product:image }} is a value tag. Attributes such as class, loading, and alt are added to the generated <img>. The optional size argument chooses the WordPress image size and is not rendered as an HTML attribute.

Inside {{ gallery_images }}, {{ url }} belongs to the gallery image. Outside that loop, {{ url }} belongs to the product post.

Variable Product Form#

Add variation controls inside {{ cart:add }}:

<main class="product-page">  {{ notices }}  <section>    {{ product:image class="product-image" size="large" }}  </section>  <section>    <h1>{{ title }}</h1>    <div>{{ price_html }}</div>    {{ cart:add variation_url open_cart }}      <p>Size</p>      {{ variation:pills for="size" class="border px-4 py-2" active_class="bg-black text-white" }}        {{ label }}      {{ /variation:pills }}      <button type="submit">Add to cart</button>    {{ /cart:add }}  </section></main>

When a visitor chooses a valid variation, TemplateX updates nearby product value tags such as {{ price_html }}, {{ price }}, {{ regular_price }}, {{ sale_price }}, {{ discount }}, {{ sku }}, and {{ stock_status }}.

Product Details#

Use product values for badges and supporting details:

<main class="product-page">  {{ notices }}  <h1>{{ title }}</h1>  {{ if on_sale }}    <span>Sale</span>  {{ /if }}  <div>{{ price_html }}</div>  {{ if sku }}    <p>SKU: {{ sku }}</p>  {{ /if }}  {{ if in_stock }}    {{ cart:add }}      <button type="submit">Add to cart</button>    {{ /cart:add }}  {{ else }}    <p>This product is currently out of stock.</p>  {{ /if }}  <section>    <h2>Description</h2>    <div>{{ description }}</div>  </section></main>

{{ description }}, {{ short_description }}, {{ price_html }}, and {{ rating_html }} can contain WooCommerce HTML. TemplateX outputs them as safe WordPress HTML.

Categories, Tags, And Attributes#

<aside class="product-meta">  {{ categories }}    <a href="{{ url }}">{{ name }}</a>  {{ /categories }}  {{ tags }}    <a href="{{ url }}">#{{ name }}</a>  {{ /tags }}  <dl>    {{ attributes }}      <dt>{{ label }}</dt>      <dd>{{ value }}</dd>    {{ /attributes }}  </dl></aside>

These are collections. They use opening and closing tags because they can contain multiple items.

When To Use Native WooCommerce Pieces#

TemplateX gives you clean access to common product values and forms. WooCommerce still has deeper product features such as grouped product tables, plugin-added tabs, review templates, and extension-specific markup.

If a product extension depends on a specific WooCommerce template part, override that WooCommerce template part under resources/views/woocommerce/ instead of rebuilding the behavior from scratch.