How to Add AMP-Carousel to WC Single Product Gallery

What Will I Learn?

This tutorial demonstrates how to add a fully functional slider via AMP-Carousel to WooCommerce single product page gallery.

Requirements:

• Basic CSS & HTML knowledge;
• Basic PHP knowledge;
• WooCommerce;
• AMP for WordPress (Optional).

The Issue

If you have tried activating AMP for WordPress plugin on WooCommerce website, you might have already noticed that that despite the great job it does, some parts of the default templates need some love before working as intended. Unfortunately, single product image gallery is one of those things.

The Solution

The correct way to change the default product gallery to amp-carousel is by editing your theme’s or child theme’s functions.php. The reason behind this is that WordPress is a growing creature and its development team constantly releases updates, which in turn trigger updates for plugins and themes. In the result, these updates can cause unwanted errors on your website. As an alternative, you can just customize WooCommerce template files in your AMP theme and change the default WooCommerce product gallery to AMP Carousel directly, but you might need to update the code after some WooCommerce updates.

The Code

In order for AMP single product gallery to fully function, you’ll have to add the scripts listed below to your theme. If you don’t have AMP for WordPress – the official AMP plugin – you’ll have to manually add the required amp scripts to head section of the website. Otherwise, this plugin will do the job for you.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>

This is the full code, which has to be inserted into theme’s functions.php. If you want to understand how it works, read the whole step-by-step tutorial below. Note, that this code doesn’t include the CSS.

// Remove Default WC Single Product Gallery
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
// Add AMP-Carousel to WC Single Product Page
add_action( 'woocommerce_before_single_product_summary', 'ampirecity_amp_single_product_gallery', 10 ); 
function ampirecity_amp_single_product_gallery() {
global $product;
$images = $product->get_gallery_image_ids(); 
if( $images ): ?>
   <div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images">
      <amp-carousel id="productGallery"
      lightbox
      width="2048"
      height="1365"
      layout="responsive"
      type="slides"
      on="slideChange:
         gallerySelector.toggle(index=event.index, value=true),
         galleryPreview.goToSlide(index=event.index)">
      <?php foreach( $images as $image ) :
      $image_small = wp_get_attachment_image_src( $image, "thumbnail" );
      $image_medium = wp_get_attachment_image_src( $image, "medium" );
      $image_large = wp_get_attachment_image_src( $image, "large" );
      $alt = get_post_meta( $image, '_wp_attachment_image_alt', true); ?>                      
      <amp-img 
         class="cover"
         src="<?php echo $image_small[0]; ?>"
         srcset="<?php echo $image_medium[0]; ?> 700w,
         <?php echo $image_large[0]; ?> 1024w"
         alt="<?php echo $alt;?>"
         width="2048"
         height="1365"
         layout="fill">
      </amp-img>
      <?php endforeach; 
      $i=0; ?>
      </amp-carousel>
      <amp-selector id="gallerySelector"
      class="carousel-preview"
      on="select:productGallery.goToSlide(index=event.targetOption)"
      layout="container">
         <amp-carousel id="galleryPreview" class="carousel-preview" 
         height="100"
         layout="fixed-height"
         type="carousel">
         <?php foreach( $images as $image ) :
         $image_small = wp_get_attachment_image_src( $image, "thumbnail" );
         $alt = get_post_meta( $image, '_wp_attachment_image_alt', true); ?>                     
            <amp-img option="<?php echo $i++; ?>"
            class="cover"
            src="<?php echo $image_small[0]; ?>"
            alt="<?php echo $alt;?>"
            width="100"
            height="75">
            </amp-img>
         <?php endforeach; ?>
         </amp-carousel>
      </amp-selector>
    </div>
 <?php endif; 
}

Removing Default WC Product Gallery

Firstly, before adding amp-carousel, we need to remove the default WooCommerce single product gallery. It could be done by adding a single line to your AMP theme’s functions.php file. I probably don’t need to tell that if you editing theme files directly, you should just delete gallery part in your single product template file.

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

As you can see below, a single line of code can do the job.

Adding Product AMP-Carousel

Secondly, we want amp-carousel to appear in the place of the default WooCommerce product gallery. For the same reasons as before, the code below needs to be added to functions.php. Though, it should work within WooCommerce template files as well.

add_action( 'woocommerce_before_single_product_summary', 'ampirecity_amp_single_product_gallery', 10 );
function ampirecity_amp_single_product_gallery() {
   global $product;
   $images = $product->get_gallery_image_ids();
   if( $images ): ?>
   <div class="woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images">
      <amp-carousel id="productGallery"
         lightbox
         width="2048"
         height="1365"
         layout="responsive"
         type="slides">
         <?php foreach( $images as $image ) :
         $image_small = wp_get_attachment_image_src( $image, "thumbnail" );
         $image_medium = wp_get_attachment_image_src( $image, "medium" );
         $image_large = wp_get_attachment_image_src( $image, "large" );
         $alt = get_post_meta( $image, '_wp_attachment_image_alt', true); ?>
         <amp-img
            class="cover"
            src="<?php echo $image_small[0]; ?>"
            srcset="<?php echo $image_medium[0]; ?> 700w,
            <?php echo $image_large[0]; ?> 1024w"
            alt="<?php echo $alt;?>"
            width="2048"
            height="1365"
            layout="fill">
            </amp-img>
         <?php endforeach; ?>
      </amp-carousel>
   </div>
   <?php endif;
}

Here, I will not go into the details of the code as I have it all covered in this tutorial of creating amp-friendly gallery with amp-carousel and ACF. The main difference is how the gallery is fed. Obviously, we want to take WooCommerce gallery images for amp-carousel. Therefore, we want to get gallery image ids to build our amp single product gallery, which could be achieved in only two lines of code.

global $product;
$images = $product->get_gallery_image_ids();

Further, you might want to address the aspect ratio of amp-carousel and the images within. In my case, most of the photos within website work well with width="2048" and height="1365". I would recommend to find the best aspect ratio for you. This way amp-carousel will work nicely without a need of an extra CSS. Also, note that I’ve wrapper amp-carousel with div containing the default WooCommerce single product gallery classes to trigger the default CSS. This is not required, but reduces the amount of code, which has to be added manually.

Adding Product Gallery Thumbnails

Thirdly, in order for the AMP WooCommerce single product gallery to appear just as the default one, a thumbnail gallery navigation has to be inserted below the main slides gallery. Luckily, AMP has a built-in solution for that. In a nutshell, the mechanics behind AMP gallery with carousel navigation is to combine two amp-carousel elements into one.

<?php $i=0; ?>
<amp-selector id="gallerySelector"
   class="carousel-preview"
   on="select:productGallery.goToSlide(index=event.targetOption)"
   layout="container">
   <amp-carousel id="galleryPreview" class="carousel-preview" 
      height="100"
      layout="fixed-height"
      type="carousel">
      <?php foreach( $images as $image ) :
      $image_small = wp_get_attachment_image_src( $image, "thumbnail" );
      $alt = get_post_meta( $image, '_wp_attachment_image_alt', true); ?>                     
      <amp-img option="<?php echo $i++; ?>"
         class="cover"
         src="<?php echo $image_small[0]; ?>"
         alt="<?php echo $alt;?>"
         width="100"
         height="75">
      </amp-img>
      <?php endforeach; ?>
   </amp-carousel>
</amp-selector>

Lastly, with thumbnail navigation implemented below our product gallery, the only thing that remains is to connect both AMP carousels. In the code above, I’ve already added the required attribute into it, but the main slider needs an extra few lines of coded added to it. Just add these attributes somewhere within amp-carousel tag.

on="slideChange:
    gallerySelector.toggle(index=event.index, value=true),
    galleryPreview.goToSlide(index=event.index)"

Please, note that the second line must have the correct ID of amp-selector element, and the third one – the ID of amp-carousel within.

With all set and done, my single product page finally looks just as I wanted. Thanks to CSS, it is possible to customize both the main product gallery slider and thumbnail navigation carousel as much as you want. The latter could be implemented in a similar manner as a responsive amp gallery.

Need Help?

In conclusion, AMP will improve your WooCommerce website loading speed, therefore it will help with search engine result, such as Google, and have lesser drop-off rates, thus will increase your sales. If you are new to AMP development, or WordPress and WooCommerce, creating a fully working AMP-friendly E-Commerce website might be a too big of a challenge for yourself. You should consider hiring an AMP development professional, and out your time, where you are at your best.

Versions

WordPress 5.5.1
AMP 2.0.1
WooCommerce 4.6.1.