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;
}