WooCommerce Product Gallery Images in Bricks Query Loop

Looking to output the images attached to Product gallery on a single WooCommerce product page in a Bricks query loop?

While it is possible to use the built-in "Product gallery" element or feed in the product gallery images to an "Image Gallery" element via this tutorial, you might want to use a query loop sometimes for more control.

This Pro tutorial shows how this can be achieved using a Media post type query. We shall also ensure that the Section gets output only if there is at least 1 product gallery image for any given product.

Step 1

Edit the template that applies to single Products with Bricks.

Add a Section and inside its Container, an optional "Product Gallery" Heading element and below that a Block element inside a Container.

Add an Image inside the Block.

Enable query loop on the Block.

Click the query icon and set its Post type to Media.

Select the Image element and set its data source to

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Instant access to all 250+ Bricks code tutorials with BricksLabs Pro