WooCommerce Product Data

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

URL tags:

Image tags:

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:

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.

Style Cart, Checkout, and Account Pages With Woo Tags

Cart, checkout, and My Account pages run WooCommerce's own purchase flow, so UiChemy never replaces them. Instead, you design the layout around them and drop in a Woo tag where WooCommerce's part should appear. Your store keeps taking orders, and the page still looks like the rest of your site.

Add a tag in your section's HTML, for example <uichemy-woo-cart />:

In the editor, these tags show a labelled placeholder instead of a live cart, because a real cart needs a shopper's session. Check the live page to see the real thing.

Cart, Orders, and Reviews as Data (Pro)

With UiChemy Pro, you can design these parts yourself in Twig instead of using WooCommerce's default look.

Cart (cart) works on every page, so it's perfect for a header cart badge, a mini-cart panel, or a free-shipping bar. When there's no shopper session (for example in the editor), it reports an empty cart.

{% if cart.free_shipping_min > 0 %}
  <div class="ship-bar"><span style="width: {{ cart.free_shipping_progress }}%"></span></div>
  <p>{{ cart.free_shipping_remaining }} away from free shipping</p>
{% endif %}

Order (order) is the receipt on an Order Received template: order.number, order.status_label, order.date, order.items, order.total, and more. It's only shown to the shopper who placed the order, so it can't leak someone else's details.

Reviews come from product.reviews, or get_comments({ post_id: product.id, min_rating: 4 }) for a filtered list. Each review has author, rating, rating_html, content, verified, date, and avatar. To also let shoppers write a review, add <uichemy-woo-reviews />.

Shop Filters and Sorting (Pro)

Build a filter sidebar, price slider, and sort menu right in your product listing. Everything is a normal URL, so filtered pages can be shared and bookmarked.

Read the visitor's choice with request.get('color') and pass it to get_products() as a tax_query or meta_query.

To update the results without a full page reload, give each area an id and add data-uich-filter="#results,#filters" to the filter form or link. Include the sidebar too, so its counts and active states stay in sync. A reset link uses data-uich-filter-reset="color,size". If anything goes wrong, it falls back to a normal page load.

Frequently Asked Questions

Related