Opens in a new tab
18th Aug '23
/
12 comments

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:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Filtering Breadcrumbs in Bricks

Filtering Breadcrumbs in Bricks

Using the bricks/breadcrumbs/items filter to modify Bricks' breadcrumbs’ element programmatically.
Categories:
Create A Customizable AJAX Add To Cart Button In Bricks Builder

Create A Customizable AJAX Add To Cart Button In Bricks Builder

In Bricks, you can simply create an Add To Cart button from a dynamic data / function {woo_add_to_cart}. This button supports AJAX as well if…
Pro
On Sale Ribbon for WooCommerce Products Query Loop in Bricks

On Sale Ribbon for WooCommerce Products Query Loop in Bricks

Showing a SALE ribbon for products that are output using Bricks‘ Query Loop.
Categories:
How To Remove the Featured Image from WooCommerce Product Gallery

How To Remove the Featured Image from WooCommerce Product Gallery

Product Gallery on single product pages in WordPress include the product's featured image by default. If you are looking to exclude it so only the…
Categories: