WooCommerce Product Data

Use UiChemy's WooCommerce dynamic tags and the product Twig provider to build custom product pages, product cards, and shop templates.

UiChemy adds a full set of WooCommerce dynamic tags for binding product data to Elementor widget controls without code, plus a product Twig provider for outputting any product field directly in a Composer widget's HTML.

WooCommerce integration requires WooCommerce to be installed and active, plus UiChemy Pro. The product Twig provider and WooCommerce dynamic tags are only available when WooCommerce is active.

WooCommerce Dynamic Tags

Dynamic tags let you bind product data to any Elementor widget control that supports dynamic content, no code needed. In the Elementor panel, look for the dynamic tag icon on a field, click it, and choose from the WooCommerce group.

Text tags:

Tag	What it outputs
Product Title	Product name
Product ID	Numeric product ID
Product SKU	Product SKU string
Product Price	Formatted price HTML (auto, regular, or sale)
Stock Status	"In stock", "Out of stock", or "On backorder"
Stock Quantity	Number of items in stock
Product Type	simple, variable, grouped, external
Average Rating	Numeric rating (e.g. 4.5)
Sale Badge	Outputs the sale text (default: "Sale!") only if the product is on sale
Short Description	Product short description (HTML)
Description	Product full description (HTML)
Product Categories	Comma-separated category list with links
Product Tags	Comma-separated tag list with links
Product Attribute	Value of a specific product attribute
Purchase Note	Purchase note text
Product Slug	URL slug

URL tags:

Tag	What it outputs
Product URL	Permalink to the product page
Add to Cart URL	Direct add-to-cart URL (variable products redirect to the product page)
Checkout URL	WooCommerce checkout page URL
Back to Shop URL	WooCommerce shop page URL

Image tags:

Tag	What it outputs
Product Featured Image	Product featured image
Product Gallery Image	A specific image from the product gallery by index (0 = first)

The `product` Twig Provider

Inside a Composer widget's HTML panel, the product provider gives you direct access to every field of the current product:

<article class="product-card">
  <div class="product-image">
    <img
      src="{{ product.thumbnail.src('woocommerce_thumbnail') }}"
      alt="{{ product.thumbnail.alt }}"
    >
    {% if product.is_on_sale %}
      <span class="sale-badge">Sale</span>
    {% endif %}
  </div>

  <div class="product-body">
    <h2 class="text-heading-h3">{{ product.title }}</h2>
    <p class="product-cats">{{ product.categories.name }}</p>
    <div class="product-price">{{ product.price|raw }}</div>

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

All product fields:

Expression	Output
`product.title`	Product name
`product.id`	Numeric ID
`product.slug`	URL slug
`product.link`	Permalink
`product.price`	Formatted price HTML, use `\|raw`
`product.regular_price`	Regular price (raw number)
`product.sale_price`	Sale price (raw number)
`product.is_on_sale`	Boolean
`product.sku`	SKU string
`product.stock_status`	instock, outofstock, onbackorder
`product.stock_quantity`	Integer or empty
`product.is_in_stock`	Boolean
`product.add_to_cart_url`	Add-to-cart URL
`product.average_rating`	Number (e.g. 4.5)
`product.review_count`	Integer
`product.short_description`	Short description HTML, use `\|raw`
`product.description`	Full description HTML, use `\|raw`
`product.thumbnail.src`	Featured image URL (full size)
`product.thumbnail.src('medium')`	Featured image at a specific size
`product.thumbnail.alt`	Featured image alt text
`product.meta('key')`	Custom field / product meta value
`product.currency` / `product.currency_symbol`	Store currency code and symbol
`product.sale_percentage`	Discount percentage while on sale
`product.is_featured` / `is_downloadable` / `is_virtual`	Boolean product flags
`product.total_sales`	Number of units sold
`product.categories` / `product.tags` / `product.brand`	Taxonomy terms assigned to the product
`product.attribute('name')` / `product.attributes`	A specific attribute value, or all of them
`product.weight` / `dimensions`	Shipping weight and dimensions
`product.related()` / `upsells` / `cross_sells`	Related product collections
`product.variations`	Variation data for variable products
`product.gallery`	The product's image gallery

This list covers the most commonly used fields. The product provider exposes considerably more of WooCommerce's product data than fits here, if a field exists on a WooCommerce product, there's usually a matching product.* expression for it.

Building a Product Listing With Loops

Use get_products() in a {% for %} loop to build a dynamic product grid:

<div class="uc-grid-3">
  {% for product in get_products({
    posts_per_page: 9,
    orderby: 'date',
    order: 'DESC'
  }) %}
    <article class="uc-blog-card product-card">
      <a href="{{ product.link }}">
        <img
          src="{{ product.thumbnail.src('woocommerce_thumbnail') }}"
          alt="{{ product.thumbnail.alt }}"
        >
      </a>
      <div class="card-body">
        {% if product.is_on_sale %}
          <span class="text-label" style="color: var(--color-brand)">Sale</span>
        {% endif %}
        <h3 class="text-heading-h4">{{ product.title }}</h3>
        <div class="product-price">{{ product.price|raw }}</div>
        <a href="{{ product.add_to_cart_url }}" class="btn">Add to Cart</a>
      </div>
    </article>
  {% endfor %}
</div>

Filter by category:

{% for product in get_products({
  posts_per_page: 6,
  tax_query: [{
    taxonomy: 'product_cat',
    field: 'slug',
    terms: ['featured']
  }]
}) %}

Filter to featured and in-stock only:

{% for product in get_products({
  posts_per_page: 8,
  meta_key: '_featured',
  meta_value: 'yes',
  meta_query: [{
    key: '_stock_status',
    value: 'instock'
  }]
}) %}

Theme Builder and WooCommerce

When building WooCommerce Theme Builder templates, Single Product and Products Archive, the product Twig provider automatically resolves to the correct product in context:

On a Single Product template: product is that product.
Inside a product loop (get_products): product is the loop variable.
On a Products Archive template: product resolves per item in loop context.

Cart and checkout pages aren't Theme Builder template types, they render WooCommerce's own output. The product provider and dynamic tags above are for product and shop display; use the Checkout URL and Add to Cart URL tags to link to those pages.

Frequently Asked Questions

Dynamic Content Overview

See how WooCommerce data fits among the other data options.

Twig

See the full expression syntax product data is built on.

Loops

Build a product grid with get_products.

Dynamic Tags

Bind a single product field with no code.

WooCommerce Theme Builder Templates

See product data powering a real WooCommerce template.

Was this page helpful?