Get WooCommerce Featured Image and Varitation Images as Slider, Bricks Builder

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