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 Pro 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.

Note

This also works with Image Gallery elements.

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 );
Instant access to all 250+ Bricks code tutorials with BricksLabs Pro

6 comments

  • Mariusz Nowak

    Hi,
    unfortunately this tutorial does not work with Bricks 1.9.3. Carousel element does not display content. When I rollback to 1.9.2 everything went back to normal.

  • Joffrey Persia

    Hi,

    Thank you !

    It could be great to have a tutorial to create a simple div > img of all the gallery product
    Not necessary nest them in a slider. SO we can manipulate it with more freedom.

    Cheers,

  • Keviin Cosmos

    Thanks! ๐Ÿ˜Š

    This would be a nice update if possible.
    I like this product page hero: https://najell.com/da/p/najell-easy-soft-cloud-pink

    1. Multiple images on each variant
    2. When clicking on a variant color/button/select field then show the gallery for that variant.

    Makes sense?

    Again, thanks for this code already!

  • Patrik Varga

    Great tutorial! Thank your and Jen's work!

    Could you expand the features a bit?
    Currently, I dynamically call up the main image of the product with an "image block".
    Underneath, I call up the gallery images with a "Carousel block".
    How can the two be connected? When the user clicks on the carousel image, does it appear instead of the "fixed" image and not in a lightbox window? (practically, this is how almost all webshops work)

    Another question for which I could not find a solution is how to switch the carousel to portrait mode? (Thus, the carousel and the featured image would be next to each other and not below each other.)

Leave your comment