WooCommerce Templates

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.

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 for editing in Gutenberg by default. Use Edit on the template card to reopen it later. Elementor needs to be active on the site either way.
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 for editing in Gutenberg by default. Use Edit on the template card to reopen it later. Elementor needs to be active on the site either way.
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.

Tips

Variable products. 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.

Filtering by category in the archive loop. On a category archive page, the term provider gives you the current term, pass it to the loop:

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

WooCommerce image sizes. 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.

Related