Live Demo Buy Now

WordPress WooCommerce AMP

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.

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.

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 quick 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

  • Dedicated AMP page is created for the respective Shop, Category, Checkout, Cart and the Product Pages.
  • AMP pages can be customized like – Color, Logo, Font type & Alignment for the AMP pages.
  • Google Analytics ID can be added that can be used for tracking purpose.
  • The customer can directly add simple products to the cart by clicking the cart icon against the product.
  • For variable products, the customer can click on the dotted icon against the variable product and choose the options.
  • Customers can share the product over multiple social platforms like WhatsApp, Twitter, Facebook etc.
  • 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 customer can click on the AMP scroll icon on the bottom right corner of Product Page, Cart Page, Checkout Page etc and navigate to the top of the page.
  • The Sidebar feature is integrated with the AMP Product page which includes the options like Shop, Cart, Checkout, My Account etc.

Installation

The user will get a zip file which 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.

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

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

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

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.

Configuration

After the installation, the admin will configure the AMP settings by going to settings under the dashboard as shown below in the snapshot.

Here the admin will put in the Google Analytics Id that will be used for the tracking purposes. The admin will select what to show on the AMP page header – Site Title or Site Logo.

Admin can set the text configurations and configure the heading color, heading text color, link color, font style, and the shortcut button to AMP page to show or hide from the Shop page.

Admin will also set the header section settings wherein he will set the background color, header font style, and the text alignment for the header section text and can also configure the button settings accordingly.

After configuring the settings for the AMP pages admin will click the save button to save the configuration settings.

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.

Add to Cart

The AMP configured shop page for simple and variable products appears as shown the image below. If the customer clicks on any product, it redirects the customer to the product page.

A cart icon, as marked in the image below, will be present for every simple product. On clicking the cart icon, the customer can easily add the products to the cart. For variable products, a dotted icon is present as marked in the image below. On clicking the dotted icon, the customers can choose the options for the variable product. 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.

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. 

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

Social Share

WordPress WooCommerce comes with an interesting through which the customer can share the page displaying the product over any social platform like Twitter, Whatsapp, facebook etc.

The product displaying a product which a customer can share over social networks is shown in the image below.

Shop page

The most important thing for every e-commerce store are 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.

AMP Lightbox Gallery:

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

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

The buyer can even change view also.

Category Page

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

Product Page

The most important thing for every e-commerce store are 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.

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.

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 in the product page.

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

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 which is not available with the website, it redirects the customer to the Search Result Page.

The AMP Scroll

The AMP Scroll icon is visible to the customer at the right bottom corner of the Product Page, Shop Page, Cart Page, Checkout Page etc as marked in the image below.

The AMP Scroll enhances the scroll process as the customer can click on the scroll icon and directly reach the top of the Product Page, Cart Page, Checkout Page etc.

SideBar Integration in Pages

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 the options like ‘Shop’, ‘Cart’, ‘Checkout’, ‘Categories’, ‘My Account’, etc.

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

The AMP page for variable products in Woocommerce product page would look as shown in the image below.

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.

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 - 1.0.0

Supported Framework Version - WooCommerce 3.1.x, WooCommerce 3.0.x, WooCommerce 2.6.x

. . .

Comment

Add Your Comment

Be the first to comment.

css.php

Index