{"id":805654,"date":"2020-06-22T04:38:23","date_gmt":"2020-06-22T04:38:23","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=805654\/"},"modified":"2022-08-13T12:01:14","modified_gmt":"2021-02-22T14:48:55","slug":"woocommerce-pwa-user-manual","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/user-manual\/woocommerce-pwa-user-manual\/","title":{"rendered":"WooCommerce PWA Mobile App – User Manual"},"content":{"rendered":"

1.0 Introduction<\/h2>\n

This readymade plugin is designed & developed by KnowBand to convert your running WooCommerce store into a feature-rich Progressive Web Application. Once the eCommerce store is transformed into PWA Application, whenever any user opens the store URL in the mobile browser, the concerned person will be asked to \u201cAdd PWA To Home Screen\u201d. Once the WooCommerce PWA Mobile App is added to the home screen of the mobile device, the user can browse the store on the app like any other application.<\/p>\n

The WooCommerce PWA Mobile App is a web application that actually doesn\u2019t rely on app publish on Google Play and Apple App Store. The users can simply add the Progressive Web App to the mobile device and use like any other application.<\/p>\n

1.1 Compelling Features to Choose WooCommerce PWA:<\/h3>\n

– Faster loading & quick performance
\n– Fully customizable home screen with the DIY editor
\n– All website shipping & payment methods support
\n– Engaging user-friendly interface
\n– No dependency on App stores
\n– Fully branded to your store
\n– Email & Social Login (Google & Facebook)
\n– Multi-lingual & RTL support
\n– Offline mode working
\n– Live synchronization b\/w website & app
\n– Both android and iOS compatible
\n– One page checkout
\n– Lightweight application
\n– CMS pages management<\/p>\n

1.2 View WooCommerce PWA Demo<\/h3>\n

Explore module and PWA app features from the below demo links:<\/p>\n

Module Admin Panel:<\/strong> https:\/\/wcdemo1.knowband.com\/pwa\/wp-login.php<\/a>
\nPWA Demo App:<\/strong>\u00a0https:\/\/wcdemo1.knowband.com\/pwa\/pwa-app\/<\/a>
\nNote-<\/strong>\u00a0Copy-paste URL in the mobile browser and \u201cAdd To Home Screen\u201d.<\/p>\n

[IMP] Notes For iOS:<\/h4>\n

\u2013> iOS devices do not offer any inbuilt \u201cAdd To Home Screen\u201d prompt, so users need to manually add the PWA Mobile App to the home screen of iPhone or iPad.<\/p>\n

\u2013> iOS does not support web push notifications. Hence the push notifications won’t be received on the PWA installed on the iPhone or iPad.<\/p>\n

[NEW UPDATE]\u00a0WooCommerce\u00a0PWA supports RTL Language Scripts:<\/h4>\n

The\u00a0WooCommerce Progressive Web App\u00a0Creator now supports all worldwide languages including RTL (Right To Left) ones like Arabic, Hebrew, Persian, etc. The store admin can now even add RTL languages on WooCommerce PWA Mobile App.<\/p>\n

2.0 Admin Panel Screens:<\/h2>\n

Explore all settings under Admin Panel of WooCommerce PWA Mobile App and check how they work with the help below detailed screenshots:<\/p>\n

2.1 General Settings:<\/h3>\n

\"general-settings\"<\/p>\n

a) Show\/hide Preview:<\/strong> Tap on the eye button to display\/hide preview phone in the admin panel.
\nb) Enable\/Disable:<\/strong> Enable the module to PWA work on mobile devices.
\nc) Enable Request Log Reporting:<\/strong> Enable error log on mobile.
\nd) Redirect on Cart Page when Add To Cart:<\/strong> Control redirection of Add To Cart button whenever any user taps Add To Cart button.
\ne) Display Short Description:<\/strong> Enable and display a short description for the product (if added on the website product page).
\nf) Display Add To Home Screen Pop Up:<\/strong> Offer pop-up message \u201cAdd To Home Screen\u201d and allow users to add the PWA app on the mobile devices.
\ng) Enable Logo:<\/strong> Add your brand logo on the header of the WooCommerce PWA Mobile App.<\/p>\n

\"general-settings-2\"<\/p>\n

h) Splash Screen Background Color:<\/strong> Choose and set the color for the splash screen of the WooCommerce Progressive Web App.
\ni) Name for PWA App:<\/strong> Enter the desired name for WooCommerce PWA App. It will be displayed once the user add app on the mobile devices.
\nj) Image for App Icon:<\/strong> Add app icon image in the admin panel.
\nk) Select Font of the App:<\/strong> Choose the font for your WooCommerce PWA Mobile App.
\nl) Select Layout for Home Page:<\/strong> Choose from pre-added home screen layout for the WooCommerce PWA App.<\/p>\n

\"general-settings-3\"<\/p>\n

m) App Button Color:<\/strong> Choose button color for PWA Mobile App.
\nn) App Theme Color:<\/strong> Choose theme color for PWA App.
\no) App Background Color:<\/strong> Choose the background color for the PWA App.
\np) Enable Tab Bar:<\/strong> Enable tab bar on the bottom of the PWA App for quick and easier navigation.
\nq) Custom CSS:<\/strong> Enter CSS code to improve look and feel of web-view pages of PWA App like web-view payment, CMS pages, etc.<\/p>\n

2.2 Push Notifications Settings<\/h3>\n

Push notifications are the best marketing tool for the PWA app for WooCommerce. The store admin can simply promote the store products and deals to app users and bring more sales and revenue.\u00a0Enter all details in push notification settings by creating a Firebase project:<\/p>\n

How to set up a Firebase Account?<\/strong><\/p>\n

Step 1:<\/strong>\u00a0Login Google Firebase<\/p>\n

\"firebase\"<\/p>\n

Step 2:<\/strong>\u00a0Create a New Project
\nAs you click on Add Project, the following dialog box will pop up:<\/p>\n

\"create-project\"
\nIt will take a few seconds to create the project. Once the project is ready, click continue.<\/p>\n

\"continue-project\"<\/p>\n

Step 3:<\/strong>\u00a0Manage Project Settings
\nOnce the project is created, click on Project Settings.<\/p>\n

\"project-settings\"<\/p>\n

Step 4:<\/strong>\u00a0Go to Authentication options:<\/p>\n

\"authentication-options\"
\nStep 5:<\/strong>\u00a0Find Firebase Keys
\nIn the project settings, click on Cloud messaging settings. From here, you can directly get the server key.<\/p>\n

\"firebase-key\"
\nStep 6:<\/strong>\u00a0Add your Web-App to Firebase<\/p>\n

\"web-app-to-firebase\"<\/p>\n

\"web-app-to-firebase\"<\/p>\n

Step 7:<\/strong>\u00a0Get other firebase related details and paste the same in PWA module admin panel.<\/p>\n

\"firebase-details\"<\/p>\n

Step 8:<\/strong>\u00a0Get firebase server key from cloud messaging tab in Settings:<\/p>\n

\"firebase-key\"<\/p>\n

Step 9:<\/strong>\u00a0Add your domain in authentication>>sign-in.<\/p>\n

\"firebase-server-key\"<\/p>\n

\"firebase-server-key\"<\/p>\n

A) Successful Order Push Notification:<\/h4>\n

Enable\/Disable automated Push Notification to be sent to app users whenever they place successful order from the WooCommerce PWA app.<\/p>\n

\"order-success-notification\"<\/p>\n

B) Order Status Update Push Notification:<\/h4>\n

Enable\/Disable automated Push Notification sent whenever order status from the app gets updated. The WooCommerce PWA mobile app users can keep an eye on the details of previous orders.<\/p>\n

\"order-status-update\"<\/p>\n

C) Abandoned Cart Push Notification:<\/h4>\n

Enable\/Disable automated push notification sent to users abandoning products in cart without successful purchase. This push notification will be sent to users automatically after the entered time interval.<\/p>\n

\"abandoned-cart-notification\"<\/p>\n

2.3 Push Notifications History<\/h3>\n

Complete push notification history of successfully sent push notifications will be seen here. The store admin can keep a track of previously sent push notifications from here.<\/p>\n

A) Send Notification:<\/h4>\n

Personalize and send push notification manually to PWA app users as per the need. The store admin can configure these notifications on their own & send them to WooCommerce PWA app users.<\/p>\n

\"send-push-notification\"<\/p>\n

2.4 Home Page Layout:<\/h3>\n

The WooCommerce PWA Mobile App offers a customizable Home Screen whose layout can be designed from the admin panel with a few mouse clicks and drag-drop. The attractive layout as per running festival, sale, occasion etc. can surely help in improving sales through WooCommerce PWA Mobile Apps.<\/p>\n

\"home-page-layout\"<\/p>\n

Add a new layout from this tab or edit the previously added ones. The home page configuration settings offers the following elements:<\/p>\n

a) Top Categories:\u00a0<\/strong><\/p>\n

\"top-categories\"<\/p>\n

b) Square Banner:\u00a0<\/strong><\/p>\n

\"square-banner\"<\/p>\n

c) Horizontal Sliding Banner:\u00a0<\/strong><\/p>\n

\"horizontal-sliding-banner\"<\/p>\n

d) Grid Banners:\u00a0<\/strong><\/p>\n

\"grid-banner\"<\/p>\n

e) Countdown Timer Banner:\u00a0<\/strong><\/p>\n

\"countdown-timer-banner\"<\/p>\n

f) Square Products:\u00a0<\/strong><\/p>\n

\"square-product\"<\/p>\n

g) Sliding Products:\u00a0<\/strong><\/p>\n

\"sliding-products\"<\/p>\n

h) Grid Products:\u00a0<\/strong><\/p>\n

\"grid-product\"<\/p>\n

2.5 Information Pages:<\/h3>\n

Add CMS pages on the app and offer informative content to WooCommerce PWA Mobile App users.<\/p>\n

\"information-pages\"<\/p>\n

How to get Facebook App details?<\/h3>\n

Facebook App can be created by following below-mentioned steps:-<\/p>\n

Step 1:<\/strong>\u00a0Go to given\u00a0URL: https:\/\/developers.facebook.com\/apps\/<\/p>\n

Step 2:<\/strong>\u00a0Click on the \u201cAdd a New App\u201d button.<\/p>\n

\"add-new-app\"<\/a><\/p>\n

Step 3&4:<\/strong>\u00a0Enter your App name and email id, then click on \u201cCreate App ID\u201d button.<\/p>\n

\"create-app-id\"<\/a><\/p>\n

Step 5&6:<\/strong>\u00a0After clicking on Create App ID you will have to\u00a0go through a security check as shown:<\/p>\n

\"create-app-id\"<\/a><\/p>\n

Step 7:<\/strong>\u00a0Click on \u201cSetting\u201d tab.<\/p>\n

\"fb-app-setting\"<\/a><\/p>\n

Step 8-13:<\/strong>\u00a0Two option will be available in the\u00a0dropdown, Basic and Advanced, click on \u201cBasic\u201d. And then enter your \u201cApp Domain\u201d,\u00a0\u201cContact Email\u201d, \u201dPrivacy\u00a0URL\u201d, \u201dTerms and Conditions\u00a0URL\u201d, \u201dAdd Logo\u201d, \u201dSelect Category\u201d and click on \u201cSave Changes\u201d button.
\nApp Domains:
\nyourdomain.com is\u00a0correct
\nyourdomain.com\/store is\u00a0incorrect
\nwww.domain.com is\u00a0incorrect<\/p>\n

\"fb-app-id\"<\/a><\/p>\n

Step 14:<\/strong>\u00a0Now click on \u201c+Add Platform\u201d.<\/p>\n

\"add-platform\"<\/a>
\nStep 15:\u00a0<\/strong>And select Website as Platform.<\/p>\n

\"choose-platform\"<\/a><\/p>\n

Step 16:<\/strong>\u00a0Now Enter your site URL.<\/p>\n

\"enter-website-url\"<\/a>
\nStep 17&18:<\/strong>\u00a0Click on \u201cProducts+\u201d and select Facebook login.<\/p>\n

\"facebook-login\"<\/a>
\nStep 19:<\/strong>\u00a0Select web as the platform for the app.<\/p>\n

\"choose-platform\"<\/a><\/p>\n

Step 20:<\/strong>\u00a0Now click on save.<\/p>\n

\"facebook-app-id\"<\/a>
\nStep 21&22:\u00a0<\/strong>Click on Settings and add a Valid OAuth Redirect URIs.
\nValid OAuth Redirect URIs:
\nhttps:\/\/example.com\/pwa-app\/login<\/p>\n

\"redirect-URL\"<\/a><\/p>\n

Step 23&24:<\/strong>\u00a0Click on \u201cApp review\u201d. And\u00a0mark \u201cMake \u2018your app name\u2019 Public\u201d to Yes.<\/p>\n

\"app-review\"<\/a>
\nFinal Step:<\/strong>\u00a0Copy the App ID and App Secret and paste it into the fields provided in the module.<\/p>\n

\"final-step\"<\/a><\/p>\n

How to get Google App details?<\/h3>\n