Product Gallery Carousel in Bricks

Bricks 1.5 (beta and above) has a handy bricks/element/settings filter that enables us to change element settings before it is output.

This tutorial shows how it can be used to replace the images of a Carousel element’s instance (if present) with those set in the Product Gallery when viewing single product pages on the front end.

Edit the template that applies to single WooCommerce products with Bricks.

Add a Carousel element.

Select the Carousel element and configure it to your liking like setting 20px spacing, the number of items to show to 3, and enabling the lightbox.

Make a note of the element ID.

Add the following in your child theme‘s functions.php or a code snippets plugin like WPCodeBox:

/* Set a Carousel element's images to be the product gallery images on single products */
add_filter( 'bricks/element/settings', 'bl_product_gallery_in_carousel', 10, 2 );
function bl_product_gallery_in_carousel( $settings, $element ) {

	// if this is not the correct element or if WooCommerce is not active or if this is not a singular product page, return the default settings array
	if ( $element->id !== 'akiopt' || ! class_exists( 'woocommerce' ) || ! is_singular( 'product' ) ) {
		return $settings;
	}

	// ensure the global $product variable is in scope
	global $product;
	
	// if $product is not an object, return the default settings array
	if ( $product === false ) {
		return $settings;
	}

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

	// declare an empty array to store the new images settings
	$new_images_settings = [];

	// loop through the product gallery image IDs and construct the new image settings array
	foreach( $product_gallery_images_ids as $id ) {
		$new_images_settings[] = array(
			'id' => $id,
			'url' => wp_get_attachment_url( $id ),
			'full' => wp_get_attachment_image_src( $id, 'full' )[0],
		);
	}

	// replace the element's images settings array with the above array
	if ( ! empty( $new_images_settings ) ) {
		$settings['items']['images'] = $new_images_settings;
	}

	return $settings;
}

Replace akiopt with the ID of your Bricks Carousel element.

Note that the gallery images won’t be visible in the builder. To see them in action, visit a product page on the front end that has a few product gallery images.

For products that do not have any gallery images, nothing will be output. If you wish to assign a default set of images to be shown for such products, simply go back and edit the single product template with Bricks and select your desired default images in the Carousel element. They will be used only for products that don’t have at least 1 image in the product gallery.

Credit: Jenn Lee.

Update 1

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

after

$product_gallery_images_ids = $product->get_gallery_image_ids();

add:

// get WooCommerce product featured image ID
$product_featured_image_id = $product->get_image_id();

// add featured image ID at the beginning of the attachment IDs array
array_unshift( $product_gallery_images_ids, $product_featured_image_id );