Kiln for Bricks Buy Kiln

Modules / Query loops & dynamic data

Query loop: product variations

Show every variation of a variable product as its own card: one card per color or size on a product page, the variations of each product inside a product loop, or all variations in an archive.

#34 of 39 modules by votes

  • On by default
  • Needs Bricks 2.4 or newer, and WooCommerce 11.1 or newer
  • Tested with Bricks 2.4.3
Buy Kiln · all 39 modules, US$79 a yearBrowse the other 38 modules

Tile 34 of 39, ranked by votes · Recording in progress

Where to find it in the builder

Container, Block and Div, Content tab: the fields above sit directly under the query settings. They show once the query type is Product variations (Kiln). Product categories shows only for All variable products.

How to use it

  1. Select a Container, Block or Div and turn on its query loop.
  2. In the query editor, set the type to Product variations (Kiln).
  3. In Variations of, choose where the variations come from:
    • The current product (or the parent loop's product), the default.
    • All variable products.
  4. For All variable products, pick Product categories to limit the loop. The default is Any.
  5. Tick In stock only to leave out variations that are not in stock.
  6. Set Number, the most variations the loop shows (1 to 100; 12 when empty).
  7. Choose the Order: Variation order (the default), Price: low to high, Price: high to low or Newest first.
  8. Build the card inside the loop. Bricks' product tags such as price, SKU, stock, image and title now read the variation.

Dynamic data tags

Kiln adds four tags under the Kiln group:

  • {kiln_variation_attributes}: the attributes, for example "Color: Red, Size: M".
  • {kiln_variation_link}: the product page with this variation selected.
  • {kiln_variation_add_to_cart_url}: the add-to-cart URL.
  • {kiln_variation_parent_title}: the title of the parent product.

How it works with Bricks' add to cart

Bricks' Add to cart element does not handle a variation. Use a Button and link it to {kiln_variation_add_to_cart_url}. When a variation has an "Any ..." attribute, there is no value to add, so the tag returns the product page and the visitor chooses there.

Limits

  • Only enabled variations of published, password-free products appear. Site-wide, products hidden from the catalog are left out as well.
  • In stock only means the stock status "in stock". Variations on backorder are excluded.
  • Site-wide with Variation order, the variations of one product stay together, newest product first.
  • With The current product (or the parent loop's product), the loop reads the nearest enclosing product loop. If there is none, it reads the product being viewed, or the previewed product in the builder.
  • Developers can change the query arguments with the kiln/variations_loop/args filter.

Settings

None. Turn the module on in Bricks > Kiln (it is on by default).

Requirements

Bricks 2.4 or newer, and WooCommerce 11.1 or newer.