WooCommerce Templates
How to build custom single product pages and product archive layouts using the Protuno Theme Builder and WooCommerce data providers.
Protuno'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 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 A Single Product Template
- Go to Protuno → Theme Builder
- Click + Add New → Single Product
- Drag the Proton widget onto the canvas
- Build the product layout
- Click Update, then set display conditions
The product Provider
Inside the Proton widget, the product Twig provider resolves to the currently viewed product:
<div class="single-product pr-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>
Display Conditions For Single Products
| Condition | When to use |
|---|---|
| All Products | All WooCommerce product pages |
| Single Product → specific product | Override layout for one product |
| Product Category → specific category | Different layout for a category |
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 A Products Archive Template
- Go to Protuno → Theme Builder
- Click + Add New → Products Archive
- Drag the Proton widget onto the canvas
- Build the shop layout
- Click Update, then set display conditions
Archive Layout With Loop
<div class="shop-page pr-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="pr-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>
Display Conditions For Archives
| Condition | When to use |
|---|---|
| Products Archive (general) | The main shop page and all category pages |
| Product Category → specific category | Different layout for one category |
Tips
Variable products: product.add_to_cart_url for a variable product links to the product page (not a direct add-to-cart URL) so customers can select variants. Your template handles both simple and variable products correctly with this.
Filtering products by current 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 (single product main image), woocommerce_gallery_thumbnail (gallery thumbnails). Use these for the best-cropped images.