Adding WooCommerce Templates for AMP Website

What Will I Learn?

This tutorial demonstrates how to add WooCommerce template files to your AMP WordPress theme to make your website AMP-friendly.

Requirements:

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

Creating AMP-Friendly WooCommerce Website

First and foremost as of yet there is no simple way to create AMP-friendly WooCommerce website with default plugins and templates. AMP for WordPress is a great help, but depending on your theme there will be a varied amount of cleaning and extra coding required to do. It is no simple task. This tutorial alone will not show how to achieve that, but it is a great place to start. With time, I’ll add more and more AMP WooCommerce tutorials until it covers all basic needs.

Adding WooCommerce Templates Files to Theme

Before having an AMP-friendly ecommerce website, we need to add WooCommerce templates to an AMP WordPress theme. Some themes might have WooCommerce files already in place, but assuming that you found this article on Google search – yours is not. Fixing that is an easy task and it doesn’t really differ from doing the same thing on themes not compatible with AMP. It could be achieved by following these two simples steps:

1. Getting WooCommerce Template Files

You can get all the required template files from WooCommerce plugin itself. I recommend getting the latest files from the official WooCommerce plugin page here, but if you need a specific version – copy it from your website via ftp. Actually, all of the WooCommerce files are not required, but just a “templates” sub-directory.

2. Uploading WooCommerce Template Files to Theme

You need to copy paste templates folder from WooCommerce directory to your theme’s root directory.  The only change required to after copying the files is to rename directory’s name from “templates” to “woocommerce”. Hierarchy within doesn’t need to be changed.

Editing WooCommerce template files within your theme will help to avoid a potential crash of your website after a WooCommerce iupdate, but if you want to keep up to date, you’ll have to update the template files in the same manner and add the custom code again.

3. Activating WooCommerce on Theme’s Functions.php

Now that we have the WooCommerce template files in place, we need to activate them via functions.php. Otherwise, your theme won’t know that they are there and will just ignore it like any other random files. Good thing, it is easier than it sounds. All you need to do is to add this code below to your theme’s functions.php file.

// Add Woocommerce Support
function ampirecity_add_woocommerce_support() {
add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'ampirecity_add_woocommerce_support' );

That is it. Now your WooCommerce pages should run using theme’s files. You can test it by adding any random code to the main shop template file archive-product.php. Once you are sure that WooCommerce loads its template files from theme, you can proceed to the next step.

Editing WooCommerce Templates

Adding WooCommerce template files to your theme is just setting the scene for the actual work to come, but before that we need to clean our newly added template files of everything what is unnecessary. If you are not sure about the segments yet, feel free to leave them. You can hide them using the CSS, but don’t forget to remove everything you don’t need. Having unnecessary code is counter-productive to the whole purpose of ultra-fast websites, built with AMP framework.

Filtering WooCommerce Pages on Global Templates

Some parts within WooCommerce pages are using the global templates like header.php or footer.php. This is standard for WordPress. The best way to hide or show content on your global templates is is_woocommerce() function. It select all the pages, which are using WooCommerce templates. Find an example of the code usage below:

<?php if (is_woocommerce()) {
  // Do this
} else {
  // Do that
}; ?>

This filter is great, but without a doubt from time to time you’ll have to be more specific. To achieve a more precise filtering consider using one of those functions:

• is_shop() – returns true on archive pages(shop).
• is_product_category() – returns true on category archive pages.
• is_product_category( ‘cities’ ) – returns true on specific category archive page.
• is_product_category( array( ‘cities’, ‘capitals’ ) ) – returns true on specific category archive pages.
• is_product_tag() – returns true on tag archive pages. Could be filtered to specific tags in the same manner as categories.
• is_product() – returns true on single product page.
• is_cart() – returns true on cart page.
• is_checkout() – returns true on checkout page.
• is_account_page() – returns true on woocommerce account page.
• is_wc_endpoint_url() – returns true on successful/unsuccessful order page.

Boosing WooCommerce with AMP

Again, AMP for WordPress plugin is a great help to this endeavor. After it is activated, you can easily do the cleanup on your WooCommerce template files to achieve the desired front-end results. Though it is not where it all ends. The website might look like a duck, but it doesn’t work like a duck yet. More work is required to give that fluid user experience to your clients everybody is yearning for.

AMP can skyrocket your e-commerce business, built on WordPress and WooCommerce. Unfortunately, it is not a playground for children. If you are not familiar with AMP, WordPress and WooCommerce, it will either require a lot of your time, or you won’t achieve what you ought to. In this case, consider hiring a professional AMP developer, or an AMP consultant to guide you through the process.

Developing AMP WooCommerce

Making WooCommerce to be fully functional on AMP WordPress website is a difficult task. There is no single guide of how to do it. You can find other blog entries related to AMP WooCommerce development below:

• Add WooCommerce Cart Button to AMP Theme
• Add AMP-Carousel to Single Product Gallery

Originally posted on 9/14/2020
WordPress 5.5.1
AMP 2.0.1
WooCommerce 1.4.6.