Back to Top

WordPress WooCommerce AMP

Updated 13 June 2024

In the WordPress WooCommerce AMP Plugin, we have implemented Accelerated Mobile Pages for the Shop page, Category page, Checkout page, Cart page, and most importantly, the Product page. For any web store, these two are the most visited and most navigated pages.

So if these pages load up without any delay then surely it will keep the user interested in the web store.

This will be super beneficial for the site owner as more time a user spends on a web store, chances are that a user will surely make a purchase.

The Accelerated Mobile Pages (AMP) is a way by which developers can create mobile-optimized content once and have it load instantly everywhere.

In today’s era smartphones and tablets have revolutionized the way we access information over the internet.

Searching for an experienced
Woocommerce Company ?
Find out More

Web store owners are trying every bit to reach to maximum users but every time a web page takes too long to load, they lose a user and with it the opportunity to generate more revenue.

Check a brief overview of the plugin –

uAoxeyiaClQ

Support

Dear Customers, if you have a question/query, please raise a ticket at webkul.uvdesk.com. We will do our best to answer as quickly as it is possible.

Don’t give us a low rate without contacting support on the issue you’ve faced with. We are always happy to help you.

Features

  • A dedicated AMP page is created for the respective Shop, Category, Checkout, Cart and the Product Pages.
  • AMP pages can be customized like – Color, favicon & Alignment for the AMP pages.
  • Google Analytics ID can be added that can be used for tracking purposes.
  • The customer can directly add simple products to the cart by clicking the cart icon against the product.
  • The customers can add reviews for products under the Reviews tab.
  • A customer can simply search a product by typing the name of the product in the search bar.
  • If the product is not found then it redirects the customer to the search results page.
  • On selecting a Grouped Product, a customer can choose multiple options and their quantities.
  • The Sidebar feature is integrated with the AMP Product page which includes options like Categories, Subcategories, My Account, etc.
  • The shortcut button to the AMP page is to switch between amp pages and regular web pages.

NOTE: AMP Checkout page only supports the Hosted Payment Method and Offline Payment Method.

Jetpack Installation

The Jetpack plugin is required to be installed prior to using the WooCommerce Mutiple Wishlists plugin.

It can downloaded by clicking on the download button provided and adding it to WooCommerce using the Add New Plugin button.

Installation

The user will get a zip file that needs to be uploaded in the “Add New” menu option in the WordPress admin panel.

For this login to WordPress Admin Panel and in the Dashboard hover your mouse over the “Plugins” menu option select the “Add New” option.

imageWordPress WooCommerce AMP- installation -1

After that, the user will see an option on the top of the page that is “Upload Plugin”,  then click the option to upload the zip file.

WordPress WooCommerce AMP-installation-2

On clicking the “Upload Plugin” option, the user will see a “Choose File” button. Then click on the button to browse for the zip file as per the image below.

WordPress WooCommerce AMP-installation-3

After browsing the file, click on the “Install Now” button so as to install the plugin as per the snapshot.

Installation Of AMP WooCommerce Plugin

Once the user installs the plugin, a message “Plugin installed successfully” displays and an “Activate Plugin” is visible to activate the plugin.

The user needs to click on the “Activate Plugin” button to activate the plugin.

imageWordPress WooCommerce AMP-installation-5

Thus, in this way, you can install the module.

Module Translation

To know how to translate the module, you can click here.

Configuration

After the installation, the admin will configure the AMP settings by navigating through Webkul WC Addons > AMP WooCommerce.

ampadmin1

General Settings

Here, the admin will –

  • Enter the Google Analytics ID that will be used for tracking purposes.
  • Select what to show on the AMP page header – Site Title or Site Logo.

Frontend Settings

ampadmin2

Here, the admin will –

  • Heading font style: The admin can choose the font for the heading on the AMP page.
  • Heading color: Used to choose the color for the heading on the AMP page.
  • Default font style: Used to set the default font style on the AMP page.
  • Text color: Used to set the color of the text on the AMP page.
  • Link color: Used to choose the color of the AMP page link.
  • Shortcut button to AMP page: Used to generate a shortcut button to the AMP page.
  • Background Color: Used to set the background color of the AMP page.
  • Text Alignment: Used to align the AMP page text.
  • Button Background Color: Used to set the background color of the button.
  • Button Text Color: Used to select the color of the text on the button.

PWA Configuration:

ampadmin4

  • PWA Name: Here you need to add the PWA Name
  • PWA Short Name: Add Your PWA’s Short Name Here
  • PWA Background Color: Choose your PWA’s background colour here
  • PWA Theme Color: Here, you need to select your PWA theme colour.

Then you have to select the icon of the app in different size.

ampadmin5

ampadmin6

How to use PWA for WooCommerce AMP

WooCommerce customers can use the Progressive Web Application on both Android and iOS devices.

A customer’s mobile device’s browser can be used to access the website.

Open the URL in Chrome, then click on the three dots, where users will find the Install App button.

wordpresswoocommerceamp1

wordpresswoocommerceamp2

After that, click on the install button. Then the application icon can now be shown on the mobile’s home screen, as shown.

wordpresswoocommerceamp3

wordpresswoocommerceamp4

A user may start an application by clicking on it.After clicking on the application, a splash screen appears.

The icon for the app is displayed on the splash screen. The app opens in the same way as the native app.

wordpresswoocommerceamp5

wordpresswoocommerceamp6

Workflow

A WooCommerce site allows its customers to surf through the home page of the store very smoothly.

The buyer can navigate through various categories of the store, go to any product page either from the homepage or by navigating through categories or simply by searching in the web store, and various other features.

But the most important thing or feature for any web store is whether it is user-friendly & mobile-friendly or not.

If a web store takes more time to load up then it’s sure that the users will abandon the page.

So implementing WordPress WooCommerce AMP Plugin for the most visited pages will attract more users to your web store and provides the store owner with the opportunity to earn revenue.

In WooCommerce we have implemented AMP on the Shop page, Category page, Checkout page, Cart page, and on the Product Page.

pwa-wc-webkul-woocommerce-amp-simulator-2

Add to Cart

The AMP configured the shop page for simple and variable. If the customer clicks on any product, it redirects the customer to the product page. On clicking the cart icon, the customer can easily add the products to the cart.

On clicking the cart icon for a simple product the customer will be redirected to the Cart Page, where the customer can go through the product details and proceed to checkout to make a purchase as shown in the image given below.

amp7

amp8

Checkout Page

On clicking the Proceed to Checkout button, it redirects the user to the Checkout Page as shown in the image below.

The customer can simply Review the Order Details, fill in the Billing Details, add the Order Note, if needed, and select a Payment Method.

Once the customer selects a Payment Method from the given options, the customer can click on Place Order and make a purchase.

amp9

amp9

amp11

amp12

After placing the order, the customer will be redirected to the Order Received page where the customer can view the Order Details.

order-invoice

Shop page

The most important thing for every e-commerce store is the products that are present in it. On the shop page, all the products of the store are listed.

A faster loading and mobile-optimized web pages for the shop page of the web store will attract and engage more users and henceforth, it will generate more purchases from the users.

The AMP configured shop page for variable products would appear as shown below.

amppp

amp14

amp15

amp16

AMP Lightbox Gallery:

The module also supports the “lightbox gallery” feature for the products with multiple images.

amp33

amp34

Clicking on the image will open the lightbox gallery and display the images of that product as shown below.

The buyer can even change theiw also.

amp35

amp36

Category Page

A user generally goes to the categories present in the store, and implementing WordPress Woocommerce AMP plugin on the category page allows the users to quickly navigate through the categories.

amp17

amp18

Product Page

The most important thing for every e-commerce store is the products that are present in it.

If everything is fast and works great in the web store but the product page is slow in loading up then it’s frustrating for the user and the user might leave the page or not go for the purchase.

So implementing WordPress Woocommerce AMP Plugin on a product page is quite useful.

The user can go to a product page from anywhere, from the home page, category page, or from google or any other search engine’s results page.

A faster loading and mobile-optimized web pages for the products of the web store will attract and engage more users and henceforth it will generate more purchases from the users.

WooCommerce product page for simple products after configuring AMP looks as shown in the image below.

amp19

amp20

Grouped Products

On selecting a Grouped Product, a customer can choose multiple options and their quantities as shown in the image below.

On selecting the options for the products, the customer can simply add the products to the cart by clicking on the Add to Cart button.

amp21

amp22

Search Product Feature

The Search Product is a major necessity for any e-commerce website as it saves a customer’s time. The WordPress WooCommerce AMP Plugin has a feature to search for a product on a product page.

A customer can hit the search icon marked in the image below, and look for the products on the product page.

Also, the customer can simply type the name of the product in the search tab, as shown in the image below.

amp23

amp24

If any product by the name which the customer enters is available, the products will display under SEARCH RESULTS as shown in the image below.

The user can simply choose the products and proceed to purchase.

If the customer types the name of a product that is not available with the website, it redirects the customer to the Search Result Page.

amp25

amp26

One of the interesting features of the WordPress Woocommerce AMP Plugin is the Sidebar integration with the AMP product page.

On clicking the marked icon in the image below the customers can view the Sidebar feature integrated with the AMP Product page.

The image below displays the sidebar which includes options like ‘Categories’, ‘Subcategories’, ‘My Account’, etc.

It becomes very easy for the buyers to navigate to my account page directly from the options present in the Sidebar.

amp29

amp30

Reviews and Description

The customer can simply click on any product on the product page. The product will display and the customer can view the Description of the product as well as add Reviews.

The customer can add a review for any product under the Reviews tab as shown in the image below.

amp31

amp32

Thus, that is all for the WordPress WooCommerce AMP Plugin still have any issue feel free to add a ticket and let us know your views to make the module better at webkul.uvdesk.com

Current Product Version - 2.0.0

Supported Framework Version - WordPress: 6.5.3, WooCommerce: 8.8.3

Blog Version - WordPress: 6.5.3, WooCommerce: 8.8.3
  • Version WordPress: 6.5.3, WooCommerce: 8.8.3
  • Version WordPress: 6.4.1, WooCommerce: 8.3.0
  • Version WordPress: 6.1.0 ;WooCommerce: 7.0.1
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home

Table of Content