Template TypesWooCommerce Templates

WooCommerce Templates

Build custom single product and shop/archive layouts with the Composer widget and WooCommerce data providers. Requires WooCommerce and Pro.

UiChemy's Theme Builder includes two WooCommerce-specific template types: Single Product for individual product pages, and Products Archive for the shop and category listing pages. Both give you full access to WooCommerce product data via the product Twig provider and the get_products() loop.

WooCommerce templates require WooCommerce and UiChemy Pro to both be active. They cover product display, cart/checkout flows still use WooCommerce's own output. See How the Composer Works and Free vs Pro.

Single Product Template

A Single Product template replaces WooCommerce's default product page layout. You control exactly where the title, price, images, description, and add-to-cart area appear.

Create one:

  1. Go to UiChemy → Theme Builder.
  2. Click + Add New → Single Product.
  3. It opens in the WordPress editor (Gutenberg) by default, or in Elementor if it's installed and you choose it. Use Edit on the template card to reopen it later.
  4. Add the Composer widget to the canvas.
  5. Build the product layout.
  6. Click Update to activate it, there are no display conditions to set for this type, see below.

The product provider:

<div class="single-product uc-boxed">

  <div class="product-gallery">
    <img
      src="{{ product.thumbnail.src('woocommerce_single') }}"
      alt="{{ product.thumbnail.alt }}"
    >
  </div>

  <div class="product-details">
    <nav class="product-breadcrumb">
      <a href="{{ product.categories.link }}">{{ product.categories.name }}</a>
    </nav>

    <h1 class="text-heading-h1">{{ product.title }}</h1>

    <div class="product-rating">
      ★ {{ product.average_rating }} ({{ product.review_count }} reviews)
    </div>

    <div class="product-price">{{ product.price|raw }}</div>

    <div class="product-short-desc">{{ product.short_description|raw }}</div>

    <div class="product-actions">
      {% if product.is_in_stock %}
        <a href="{{ product.add_to_cart_url }}" class="btn-primary">Add to Cart</a>
      {% else %}
        <button class="btn-disabled" disabled>Out of Stock</button>
      {% endif %}
    </div>

    {% if product.sku %}
      <p class="text-body-sm">SKU: {{ product.sku }}</p>
    {% endif %}
  </div>

</div>

No display conditions. A Single Product template applies to every WooCommerce product page as soon as it's active, there's no way to scope it to a specific product or category. If you activate more than one Single Product template, the most recently activated one wins.

Products Archive Template

A Products Archive template controls the shop page, product category pages, and product tag pages. Use the get_products() loop to render the product grid.

Create one:

  1. Go to UiChemy → Theme Builder.
  2. Click + Add New → Products Archive.
  3. It opens in the WordPress editor (Gutenberg) by default, or in Elementor if it's installed and you choose it. Use Edit on the template card to reopen it later.
  4. Add the Composer widget to the canvas.
  5. Build the shop layout.
  6. Click Update to activate it, there are no display conditions to set for this type, see below.

Archive layout with a loop:

<div class="shop-page uc-boxed">

  {% if term %}
    <header class="shop-header">
      <h1 class="text-heading-h1">{{ term.name }}</h1>
      {% if term.description %}
        <p>{{ term.description }}</p>
      {% endif %}
    </header>
  {% else %}
    <header class="shop-header">
      <h1 class="text-heading-h1">Shop</h1>
    </header>
  {% endif %}

  <div class="uc-grid-3 product-grid">
    {% for product in get_products({
      posts_per_page: 12,
      orderby: 'date',
      order: 'DESC',
      paged: current_page()
    }) %}
      <article class="product-card">
        <a href="{{ product.link }}" class="product-image-link">
          <img
            src="{{ product.thumbnail.src('woocommerce_thumbnail') }}"
            alt="{{ product.thumbnail.alt }}"
          >
          {% if product.is_on_sale %}
            <span class="sale-badge">Sale</span>
          {% endif %}
        </a>
        <div class="product-card-body">
          <h2 class="text-heading-h4">
            <a href="{{ product.link }}">{{ product.title }}</a>
          </h2>
          <div class="product-price">{{ product.price|raw }}</div>
          <a href="{{ product.add_to_cart_url }}" class="btn-outline">Add to Cart</a>
        </div>
      </article>
    {% endfor %}
  </div>

  {{ loop_pagination()|raw }}

</div>

No display conditions. A Products Archive template applies to the main shop page and every product category page as soon as it's active, there's no way to scope it to a single category. If you activate more than one Products Archive template, the most recently activated one wins.

Order Received Template

An Order Received template replaces WooCommerce's thank-you page, the page customers see after they place an order.

Order Received isn't in the Theme Builder's + Add New list. Create it through AI to WordPress by asking your AI tool for an order received or thank-you page template. Like the other WooCommerce templates, it needs WooCommerce and UiChemy Pro.

The template can show the customer's order details, such as the order number, status, total, the items ordered, the billing address, and any downloads.

Tips

Frequently Asked Questions

Creating Templates

See the general template-creation flow this builds on.

Assigning Conditions

Narrow this template down beyond Product as a target.

WooCommerce Data

Pull in price, stock, and other product fields dynamically.

Loops

Build a product grid with get_products.

Archive Templates

See the general archive-template pattern this follows.

Was this page helpful?