WooCommerce Product Data

Protuno 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 Proton 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 (lightning bolt) on a field, click it, and choose from the WooCommerce group.

Text Tags

URL Tags

Image Tags

The product Twig Provider

Inside a Proton 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="pr-grid-3">
  {% for product in get_products({
    posts_per_page: 9,
    orderby: 'date',
    order: 'DESC'
  }) %}
    <article class="pr-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 templates with the Theme Builder (single product, shop archive, cart, checkout), the product Twig provider automatically resolves to the correct product in context:

• On a single product page: product is that product
• Inside a product loop (get_products): product is the loop variable
• On a shop archive or category archive: product resolves from get_the_ID() in loop context

Frequently Asked Questions

The product.price|raw outputs HTML, can I strip the HTML tags? Use {{ product.price|raw|striptags }} to get the plain text price without the currency symbol markup. If you only want the numeric value, use {{ product.regular_price }} or {{ product.sale_price }}.

How do I show a star rating? Output {{ product.average_rating }} and build the star display in HTML/CSS. You can use {% for i in range(1, 5) %} to render star icons and compare against the rating value.

Can I link to WooCommerce cart or checkout? Yes. Use the Checkout URL dynamic tag, or in Twig: access the checkout URL via a custom approach or simply hardcode your checkout page path since WooCommerce page URLs are stable.

Related

• Dynamic Content Overview
• Dynamic Data With Twig
• Loops & Listings
• Dynamic Tags: Bind Content Without Code
• Theme Builder: WooCommerce Templates