> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# 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.

<Callout kind="info">
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](/uichemy-composer/uichemy-widget/how-it-works#what-the-widget-cant-do) and [Free vs Pro](/uichemy-composer/getting-started/free-vs-pro).
</Callout>

### 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:**

```html
<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:**

```html
<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.

<Callout kind="info">
Order Received isn't in the Theme Builder's **+ Add New** list. Create it through [AI to WordPress](/ai-to-wordpress/set-up) 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**.
</Callout>

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

<ExpandableGroup>
  <Expandable title="Variable products" default-open="false">
    `product.add_to_cart_url` for a variable product links to the product page (not a direct add-to-cart action), so customers can select variants. Your template handles simple and variable products correctly either way.
  </Expandable>

  <Expandable title="Filtering by category in the archive loop" default-open="false">
    On a category archive page, the `term` provider gives you the current term, pass it to the loop:

    ```twig
    {% for product in get_products({
      posts_per_page: 12,
      paged: current_page(),
      tax_query: [{
        taxonomy: 'product_cat',
        field: 'slug',
        terms: [term.slug]
      }]
    }) %}
    ```
  </Expandable>

  <Expandable title="WooCommerce image sizes" default-open="false">
    WooCommerce registers its own image sizes, `woocommerce_thumbnail` (catalog listing), `woocommerce_single` (main product image), `woocommerce_gallery_thumbnail` (gallery thumbnails). Use these for correctly cropped images.
  </Expandable>
</ExpandableGroup>

### Frequently Asked Questions

<ExpandableGroup>
  <Expandable title="What do I need to use WooCommerce templates?" default-open="false">
    Both **WooCommerce** and **UiChemy Pro** must be active on your site.
  </Expandable>

  <Expandable title="Can I use a different product layout for one category?" default-open="false">
    No. A Single Product template applies to every product page, and a Products Archive template applies to the shop and every product category page. If you activate more than one, the most recently activated one wins.
  </Expandable>

  <Expandable title="Do these templates change the cart and checkout pages?" default-open="false">
    No. Cart, checkout, and account pages keep WooCommerce's own layout. To customize the thank-you page, see [Order Received Template](#order-received-template).
  </Expandable>
</ExpandableGroup>

### Related

<Columns cols={2}>
  <Card title="Creating Templates" href="/uichemy-plugin/theme-builder/creating-templates">
    See the general template-creation flow this builds on.
  </Card>
  <Card title="Assigning Conditions" href="/uichemy-plugin/theme-builder/assigning-conditions">
    Narrow this template down beyond Product as a target.
  </Card>
  <Card title="WooCommerce Data" href="/uichemy-composer/design-data/woocommerce-data">
    Pull in price, stock, and other product fields dynamically.
  </Card>
  <Card title="Loops" href="/uichemy-composer/design-data/loops">
    Build a product grid with `get_products`.
  </Card>
  <Card title="Archive Templates" href="/uichemy-plugin/theme-builder/archive-templates">
    See the general archive-template pattern this follows.
  </Card>
</Columns>