WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

How to Add a Single Bootstrap Carousel to a Single Product Gallery using WooCommerce

Today we are going to show you how to replace the WooCommerce Gallery and Thumbnails to a single Bootstrap 4 Carousel.

We’re going to assume that you have already added WooCommerce Support and WooCommerce Product Gallery Slider, if not, you can add these by adding the following code to your functions.php file:


add_theme_support('woocommerce');
add_theme_support( 'wc-product-gallery-slider' );

# You can also add Lightbox Gallery as follows:
add_theme_support( 'wc-product-gallery-lightbox' );

So if you have added a featured image and a gallery to your single product, once styled you will end up something that looks like this:

This already works as a slider, but you have to use the thumbnails to navigate between the different images.

The way that we added a Bootstrap 4 carousel to this in place of the thumbnails was as follows:

Step 1

Navigate to the following directory; /wp-content/plugins/woocommerce/templates/single-product

Copy the product-image.php to your child theme folder, for this; this will be placed in /your-theme/woocommerce/single-product directory.

It’s always best-practise to copy any WooCommerce templates to your theme or child folder, the reason for this is that these files wouldn’t end up being replaced if you update the file in the /plugins/ directory.

Step 2

We are now going to remove the following section from the product-image.php file:


<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
	<figure class="woocommerce-product-gallery__wrapper">
		<?php
		if ( $product->get_image_id() ) {
			$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
		} else {
			$html  = '<div class="woocommerce-product-gallery__image--placeholder">';
			$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
			$html .= '</div>';
		}

		echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

		do_action( 'woocommerce_product_thumbnails' );
		?>
	</figure>
</div>

And we are going to replace this with the following:


<?php
    global $product;

    $attachment_ids = $product->get_gallery_image_ids();
    $image_links[] = get_the_post_thumbnail_url();
    $product_inc = 1;

    foreach( $attachment_ids as $attachment_id ) {
        $image_links[] = wp_get_attachment_url( $attachment_id );
    }
?>

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
	<!-- Product Carousel -->
	<div id="product-carousel" class="carousel slide carousel-fade" data-ride="carousel">
		<div class="carousel-inner" role="listbox">
			<?php
			    foreach( $image_links as $image_link_url ) { ?>
			    	<div class="carousel-item <?php echo ($product_inc==1)?'active':''; ?>">
			        	<?php echo '<img class="prod-car-img" src="'.$image_link_url.'" />'; ?>
			        </div>
			        <?php $product_inc++;
			    }
			?>
		</div>	
		<a class="carousel-control-prev" href="#product-carousel" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="carousel-control-next" href="#product-carousel" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>						
	</div><!-- #Product Carousel -->
</div>

Result

To summarise what we have done here, we have basically added the ‘featured-image’ to an array (image_links[]). We then looped through the thumbnails to get the image URL’s of the product gallery and then looped the array containing all images together in the Bootstrap 4 Carousel.

What do you end up with?

We now have a Bootstrap 4 Carousel which combines the featured image with the product gallery, we have removed the thumbnails and instead added a Bootstrap 4 carousel in its place.

Awesome huh?

If you need any help, or if this has helped you; please leave a comment below!

Happy coding folks!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital-related. His main expertise is with WordPress and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

One thought on “How to Add a Single Bootstrap Carousel to a Single Product Gallery using WooCommerce

Join the discussion

Related Posts

Related - Bootstrap 4 – Mobile Nav Bar Slide from Left / Right

CSS / 23rd June 2021

Bootstrap 4 – Mobile Nav Bar Slide from Left / Right

Read More Related - How to Change Breakpoints with Bootstrap

CSS / 3rd October 2020

How to Change Breakpoints with Bootstrap

Read More