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).
Quick Navigation
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.
CSS will get only this far, therefore single product page template needs some extra coding.
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.
|
1 |
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> |
|
1 |
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script> |
|
1 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
// Remove Default WC Single Product Galleryremove_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.
|
1 |
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.
Now we have a blank slate ready for the AMP Carousel to be added.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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.
|
1 2 |
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.
Now that amp-carousel I sup and running, the only thing is missing is the gallery thumbnail navigation.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?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.
|
1 2 3 |
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.
If you done everything correctly, the result should be similar to this.
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.