Get WooCommerce Product Featured Image and Gallery Images as Carousel

functions.php code

important note: this carousel/slider will need bricks builder swiper.js and swiper.css so add a empty carousel on the page and make display:none something so bricks loads the needed libraries for slider.

<?php
// Add the custom tag to the dynamic tags list
add_filter( 'bricks/dynamic_tags_list', 'register_product_images_slider' );
function register_product_images_slider( $tags ) {
    $tags[] = [
        'name'  => '{product_image_slider}',
        'label' => 'Product Image Slider',
        'group' => 'Custom Tags',
    ];

    return $tags;
}

// Render the custom tag
add_filter( 'bricks/dynamic_data/render_tag', 'render_product_images_slider', 10, 3 );
function render_product_images_slider( $tag, $post, $context = 'text' ) {
    if ( $tag !== 'product_image_slider' ) {
        return $tag;
    }

    // Ensure it's a WooCommerce product
    if ( 'product' !== $post->post_type ) {
        return 'Not a product';
    }

    // Get the featured image URL
    $featured_image_id = get_post_thumbnail_id( $post->ID );
    $featured_image_url = $featured_image_id ? wp_get_attachment_url( $featured_image_id ) : '';

    // Get the gallery image URLs as an array
    $gallery_image_ids = get_post_meta( $post->ID, '_product_image_gallery', true );
    $gallery_image_ids = $gallery_image_ids ? explode( ',', $gallery_image_ids ) : [];
    $gallery_image_urls = array_map( 'wp_get_attachment_url', $gallery_image_ids );

    // Combine the featured image URL and gallery image URLs into a single array
    $image_urls = [];

    if ( $featured_image_url ) {
        $image_urls[] = $featured_image_url;
    }

    foreach ( $gallery_image_urls as $url ) {
        if ( $url ) {
            $image_urls[] = $url;
        }
    }

    // Build the Swiper slider HTML with a unique class name
    $slider_html = '<div class="swiper-container custom-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(".custom-swiper-slider", {
                loop: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        });
    </script>';

    return $slider_html;
}

// Replace the custom tag in content dynamically
add_filter( 'bricks/dynamic_data/render_content', 'render_product_images_slider_in_content', 10, 3 );
function render_product_images_slider_in_content( $content, $post, $context = 'text' ) {
    if ( strpos( $content, '{product_image_slider}' ) !== false ) {
        $product_image_slider = render_product_images_slider( 'product_image_slider', $post, $context );
        $content = str_replace( '{product_image_slider}', $product_image_slider, $content );
    }

    return $content;
}
?>