WooCommerce Product Gallery Images in Bricks Query Loop

Updated on 22 July 2024

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 enable PHP query editor.

Paste:

// product object from the current post ID
$product = wc_get_product( get_the_ID() );

// get the product gallery attachment IDs
$product_gallery_images_ids = $product->get_gallery_image_ids();

// add featured image's ID at the front
// array_unshift( $product_gallery_images_ids, get_post_thumbnail_id( $id ) );

if ( $product_gallery_images_ids ) {
  return [
    'post_type' => 'attachment',
    'post_status' => 'inherit',
    'posts_per_page' => 40, // a large number
    'no_found_rows' => true,
    'post__in' => $product_gallery_images_ids,
    'orderby' => 'post__in',
  ];
} else {
  return [
    'post__in' => [ 0 ],
  ];
}

If you’d like to include the product’s featured image at the beginning, uncomment

// array_unshift( $product_gallery_images_ids, get_post_thumbnail_id( $id ) );

so it is

array_unshift( $product_gallery_images_ids, get_post_thumbnail_id( $id ) );

Select the Image element and set its data source to

{post_id}

Select your desired image size.

Step 2

Let’s ensure that the Section gets rendered only if the product gallery is not empty.

Add this Dynamic data condition on the Section:

{query_results_count:appvzr}

Replace appvzr with the Bricks ID of the query-loop enabled Block.