Progressive Web App for WooCommerce

A Progressive web app is a website that looks and feels like an app. What this means is that the users can access all information and capabilities without downloading and installing the mobile app.

Progressive web apps are helping the businesses to increase their conversions, page visits, and session lengths. PWAs also provides a better web experience to the mobile users and are also a good option for the businesses that don’t have much investment for developing their own mobile app.

To sum up, here are some of the benefits to reap –

• Offline support
• Less data usage
• Faster loading times
• Improved performance
• Engaging user experiences
• Always updated app

Check how AliExpress witnessed incredible results after changing to a Progressive Web App:

• 104% increase in conversions for new users
• 2x more pages visited per session
• 74% increase in time spent per session
   

• • Light Weight App.

• • Easy to customize and make changes.

• • More user-friendly than a web application.
  • Offline support for the PWA.

• • Shimmer Effect used for unobtrusive loading indicator.

• • Work with low-quality internet also.

• • No need to update the Progressive web Application.

• • Looks & feels like a native application.

• • Increases user engagement on the store.

• • Customize the color for the Splash Screen background and theme.

• • Set the Text within the Splash Screen.
  • Add the App Icon Text visible on the mobile device.

Step 1: Login to WordPress Admin Panel and navigate through ‘Plugins->Add New‘.

Step 2: Click on the ‘Upload Plugin‘ button on the top of your page to upload the zip file.

Step 3: Now, tap ‘Choose File‘ button to browse for the zip file.

Step 4: After selecting the zip file, tap the ‘Install Now‘ button so as to install the plugin.

Step 5: After successful installation, a success message is visible along with an option to ‘activate‘ the plugin. Tap on ‘Activate Plugin‘ to activate the installed plugin.

After the successful installation of the extension, the admin will navigate through PWA For WooCommerce->Settings. Here, we have 3 different sections to configure –

• Configuration
• Mobile App
• Media

For the Configuration section, the admin of the web store will –

• Enter the Google Authorization Key(Will be used for sending the Push Notifications)
• Enter the User ID(you can make use of any user name, it’s used for security)
• Set the Password(set a password for the entered user name)

For the Mobile App Section, the admin will –

• Enter the Name that’s visible within the Splash Screen
• Enter the Short Name for or the App Shortcut visible on the mobile device
• Choose the Theme Color for the Splash Screen that is visible on the mobile device
• Choose the Background Color for the Splash Screen that is visible on the mobile device

Lastly, for the Media section, the admin will Upload the App Icon of different sizes as mentioned –

• 48*48
• 96*96
• 144*144
• 96*196

After making all the settings, tap the Save button at the bottom to save your configuration.

After the successful installation of the extension, the admin of the web store will find the ‘PWA For WooCommerce‘ menu option in the admin backend side panel.

Under the menu option PWA For WooCommerce, there are 6 sub-menu options –

• Banners
• Featured Products
• Featured Categories
• Notifications
• External Links
• Settings

Let’ go through each of these configuration settings for the extension. The settings configured here will get reflected within the Progressive Web App itself.

Banners

Here, the admin can add the banners that are then visible within the PWA Web App. Apart from that, the admin can find a list of banners that have been added and can edit and delete them as well.

Add a New Banner

To add a new banner tap the ‘Add Banner‘ button at the top side. This brings up the section to add a new banner.

Here, add the required details for the new banner by –

• Uploading an Image for the banner
• Select the Banner Type as – Product or Category
• According to the selection above, if Banner Type is selected as Product then choose the Products under Product/Category section.
  else if you have chosen Category as Banner Type then choose the respective category under this section
  
• Set the Status of the New Banner as Enabled or Disabled
• Lastly, tap the Save button to add the respective banner.

Featured Products

Under this section, the admin can set up the App Featured Products. After setting up the app featured products, the featured products will be visible under the featured section within the progressive web application.

Add Featured Products

To add featured products, tap on the ‘Add Product‘ button at the top. This brings up the Products page. Here, the admin can make any product as featured by enabling the ‘Featured‘ icon under the Star column.

After marking the Star for the products that you want to make as featured, the respective products are visible under the Featured products section on the Progressive web app.

Featured Categories

Under this section, the admin will setup the ‘Featured Categories‘ that are shown on the progressive web app. Apart from that, the admin will be able to delete any added category individually or in mass as well.

Add Featured Category

To add a new featured category, tap the ‘Add Featured Category‘ button at the top. This brings up the section to add a new category.

Here, the admin will –

• Set the Sort Order for the Category
• Select the Category to make as featured
  
  
• Now enable the status of the category and then tap the Save button to save the category.
  

Notifications

Note: Feature will soon be available.

Under this section, the admin can setup the various app notifications. Here, the admin can find a list of added notifications for app homepage. The admin can also delete and send notifications in bulk by selecting the notifications first and then choosing the respective option from the ‘Actions‘ drop-down.

Add Notification

To add a new app notification, tap the ‘Add Notification‘ button. This brings up the section as shown below in the snapshot.

To add a new notification, the admin will –

• Upload an Image for the Notification
• Set the Title for the Notification
• Enter the Content of the Notification
• Select the Type as Product or Category
• If Product is selected then choose ‘product‘ for the ‘Product/Category‘ option, else if Category is selected then choose the respective Category for the Product/Category option
• Choose the Status of the Notification as Enabled or Disabled

Send Notifications

To send the notifications, check the respective notifications and from the Actions drop-down tap the ‘Send Bulk Notifications‘ button.

External Links

Under this section, the admin will be able to add the external links. The external links are actually links to external resources like – the Company website, Privacy Policy, Blog, etc.

Add a New Link

To add a new link, the admin needs to tap on the ‘Add Row‘ button which brings up another external link to add.

Here, the admin will –

• Enter the Title for the Link that will be visible on the side panel of the Progressive Web App
• Enter the URL where the Link should redirect the customer to and then tap the ‘Save Changes‘ button.

For Android Devices:

Step 1: Navigate to the URL – https://pwa-wc.webkul.com/pwa-for-woocommerce/ on your desktop and scan the QR Code available on the page using your android mobile device.

**Note: You can also directly scan the QR Code from the image displayed below.

Step 2: After scanning the QR Code, you will be redirected to the Progressive Web App for WooCommerce. Tap the ‘Add PWA to Home Screen‘ notice(from the bottom of the screen) to add a shortcut of the PWA to your mobile home screen.

 

Step 3: This brings up a pop-up. Tap the ‘Add‘ button on the right. Now, the PWA shortcut is added to your mobile home/app screen.

On you mobile home screen tap the PWA icon to open the Progressive Web App for WooCommerce.

 

Tapping the icon brings up a splash screen. The color configuration for the splash screen can be set from the backend configuration settings.

 

PWA for WooCommerce – Guest User

The guest users can see the home screen displaying the –

• Side Panel Shortcut
• Search Icon
• Shopping Cart
• Popular Products
• New Products
• Trending Banners
• Featured Products

 

Within the PWA for WooCommerce, the guest users can navigate to the left drawer by tapping the 4 horizontal lines at the top left-hand corner.

 

This brings up the side panel of the PWA for WooCommerce.

 

From the Side Panel, the guest can –

• Navigate to Categories
  To open a category just tap on it and the content of that particular category or it’s sub–category gets displayed on the screen.
   
• Change Product Listing View
  Guests can easily change the product view to – List View or Grid View as required.
   
• Sort Products By
  The guests can sort the products by – Position High to Low, Sort by Popularity, Sort by Average Rating, Sort by Recent, Sort by price Low to High and High to Low.
   
• Go to Product Page
  The guests can navigate to the products from the category section. Here, the guests can see the details of the products that include – Name, Price, Ratings, Description of the Product, Stock Quantity, etc.
   

  Here, the guests can also see the reviews that the customers have made regarding the product.
  To add a review tap on the ‘Add Your Review‘ button. This brings up the section to add your review. Enter the review and tap Submit Review after that.

   

  After that, the guest can see a success notification for the same.

   

   

  On the product page, the guest can see the product review after the admin enables it from the backend.

   
• Add Product to Cart
  After entering the product quantity to purchase the guest can tap the ‘Add to Cart‘ button on the PWA.
   

  The guests can see the success notification for the same.

   

  After tapping the Cart icon, the guest can see the product in the shopping cart. Here, the guest can update the product quantity, remove the item from the cart, go back to the app home page, and proceed to checkout.

  The guest can also apply coupons at the checkout time. After applying a coupon, the cart gets updated and the guest receives flat 10% off.

   

  Now tap Proceed to make a checkout. The guest will tap the Edit Address to add his Billing and Shipping Address.

   

  Enter the required details and then tap the Save Address button at the bottom.

   

  Select the shipping method and tap the Proceed button.

   

  Choose the Payment method and tap Proceed thereafter.

   

  Lastly, review the order and tap the Proceed button to complete the purchase.
  

   

  After completing the purchase, the Guest can tap the Continue Shopping button to go back to the app home page.

   

Register/Sign up:

To register tap the Sign In on the side panel of the PWA.

 

This brings up another section where the a user can login using his account credentials or can create a new account.

 

Create An Account:

To create a new account at the online store tap the ‘Create An Account‘ button. This brings up the section to register where the user needs to enter his email address and password for creating an account at the online WooCommerce store.

 

Sign In:

To sign in, enter the User name and password for your account and tap Log In after that. After login, the customer can see his side panel by tapping the 4 horizontal lines.

 

After Sign In, the customer has the following account options – 

• Dashboard 
• Orders 
• Downloads 
• Account Details
• Address Book
• Preferences->Notification Settings
• Others

Let’s go through each section’s overview.

Dashboard: 

Under here, the customer will be able to check his recent orders.

Apart from that, can make a review for the purchased products by taping on the respective product in the order first.

 

and then making a review for the same.

 

The customer can also reorder the placed order by tapping the Reorder button for the respective order.

 

Orders:

Here, the customer can check their placed orders and can check the details, reorder, and submit a review for the products as well.

 

Downloads:

Customers can check their downloadable products under the downloads section. Also the customers can check the details of the respective downloadable products like – expired or not, remaining downloads etc.

 

Account Details:

Here, the customer can edit their personal details like their First Name, last name, and their email address. Apart from that, the customers can also change their password.

Address Book:

The customer can edit their address details which include the Billing and Shipping Information.

 

Notification Settings:

Here, the customer can enable the notifications for receiving push notifications from the store. The customer just needs to enable the Receive Notifications option by tapping the toggle button and then tap the Save Settings button.

Others:

Here, the customer can find the links that the store admin has added from the admin backend panel in the configuration settings for the Progressive Web App for WooCommerce.

The customer can navigate to the respective links by tapping on them. For example, the customer taps on Privacy Policy and then the customer is navigated to the respective page for the same.

Log Out:

Tapping on the Log out button signs out the customer from his account and redirects the customer to the login section again.

Support

Dear Customers, for any question/query, please raise a Ticket at our HelpDesk system.

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 have faced with.

We are always happy to help you out. You can also get back to us via mail support@webkul.com