functions.php code
important: this carousel/slider will need bricks builder swiper.js and swiper.css so add a empty carousel on the page and make display:none so bricks loads the needed libraries for slider.
// {product_variation_slider} // Add the custom tag to the dynamic tags list add_filter( 'bricks/dynamic_tags_list', 'register_product_variation_slider' ); function register_product_variation_slider( $tags ) { $tags[] = [ 'name' => '{product_variation_slider}', 'label' => 'Product Variation Slider', 'group' => 'Custom Tags', ]; return $tags; } // Render the custom tag add_filter( 'bricks/dynamic_data/render_tag', 'render_product_variation_slider', 10, 3 ); function render_product_variation_slider( $tag, $post, $context = 'text' ) { if ( $tag !== 'product_variation_slider' ) { return $tag; } // Ensure it's a WooCommerce product if ( 'product' !== $post->post_type ) { return 'Not a product'; } // Get the product $product = wc_get_product( $post->ID ); // Check if the product is a variable product if ( $product ) { // Get the main product image $featured_image_id = $product->get_image_id(); $featured_image_url = $featured_image_id ? wp_get_attachment_url( $featured_image_id ) : ''; // Check for variable product and variations $image_urls = []; if ( $product->is_type( 'variable' ) ) { $variations = $product->get_available_variations(); $variation_image_urls = []; foreach ( $variations as $variation ) { $variation_product = wc_get_product( $variation['variation_id'] ); $variation_image_id = $variation_product->get_image_id(); if ( $variation_image_id ) { $variation_image_urls[] = wp_get_attachment_url( $variation_image_id ); } } // Combine the main image with the variation images if ( $featured_image_url ) { $image_urls[] = $featured_image_url; } $image_urls = array_merge( $image_urls, $variation_image_urls ); // Remove duplicate image URLs $image_urls = array_unique( $image_urls ); } else { // For non-variable products, only use the featured image if ( $featured_image_url ) { $image_urls[] = $featured_image_url; } } // Build the slider HTML if ( ! empty( $image_urls ) ) { $slider_html = '<div class="swiper-container variation-swiper-slider">'; $slider_html .= '<div class="swiper-wrapper">'; foreach ( $image_urls as $url ) { $slider_html .= '<div class="swiper-slide">'; $slider_html .= '<img src="' . esc_url( $url ) . '" alt="Product Image">'; $slider_html .= '</div>'; } $slider_html .= '</div>'; // Close swiper-wrapper $slider_html .= '<div class="swiper-pagination"></div>'; // Pagination $slider_html .= '<div class="swiper-button-next"></div>'; // Next button $slider_html .= '<div class="swiper-button-prev"></div>'; // Prev button $slider_html .= '</div>'; // Close swiper-container // Add inline JavaScript to initialize the Swiper slider $slider_html .= ' <script> document.addEventListener("DOMContentLoaded", function() { var swiper = new Swiper(".variation-swiper-slider", { loop: true, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); }); </script>'; return $slider_html; } } return 'No product image available.'; } // Replace the custom tag in content dynamically add_filter( 'bricks/dynamic_data/render_content', 'render_product_variation_slider_in_content', 10, 3 ); function render_product_variation_slider_in_content( $content, $post, $context = 'text' ) { if ( strpos( $content, '{product_variation_slider}' ) !== false ) { $product_variation_slider = render_product_variation_slider( 'product_variation_slider', $post, $context ); $content = str_replace( '{product_variation_slider}', $product_variation_slider, $content ); } return $content; }