Menu Close
    Convert your store into Woocommerce Multi Vendor Marketplace

    Progressive Web App for WooCommerce

    Progressive Web App For WooCommerce

    This plugin will convert your WooCommerce website into a Progressive Web App instantly. The store visitors will experience the high-performance benefits of the Progressive Web App, which is based on a headless architecture.

    The users will be able to come back to your website by launching the app from their mobile home screen and can interact with your website through an app-like interface.

    The Progressive Web App for WooCommerce uses modern web technologies to deliver an app-like experience to the users right within their web browsers. This extension is built on top of the React.js library, which makes it even more powerful, flexible, fast, and scalable.

    Note:  Your website must be https:// enabled for offline caching to work.

    Check the backend configuration – 

    a8FyjXVuKr4

    Check the mobile end workflow – 

    ZfP4lyMFtl0

    What is a Progressive Web App?

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

    Why go for Progressive Web Apps?

    Progressive web apps are helping businesses to increase their conversions, page visits, and session lengths. PWAs also provides a better web experience to mobile users and are also a good option for the businesses that don’t have much investment for developing their 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

    PWA – Example:

    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
       
      pwa for woocommerce working example by webkul

    Features

      • 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 indicators.
      • Work with low-quality internet also.
      • No need to update the Progressive Web Application.
      • It looks & feels like a native application.
      • Increases user engagement in 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.

    Installation

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

    webkul_wc_pwa_installation_add_plugin

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

    webkul_wc_pwa_installation_upload_plugin

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

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

    webkul_wc_pwa_installation_install_plugin

    5th Step: 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.

    webkul_wc_pwa_installation_success_installed_plugin

    Module Translation

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

    Creating Firebase Product Credential

    In order to use this module, you need to have Firebase Project Credentials, which will be used in the backend configuration for setting up the module. Please visit this link and create a new project with your Gmail account.

    firebase get started to create the keys

    1.  After opening the Firebase website, please click on the Add Project button.

    2. A new page will open the as shown below image, here you have to enter your Project Name. Then click on the “Continue” button.

    webkul-woocommerce-pwa

    3. Now enable google analytics for this project and click on the “ Continue” button.

    webkul-woocommerce-pwa -google-analytics

    4. Now you need to configure the Google Analytics. Here you need to select your Analytics location/Country. Then click on the “Create project” button. 

    webkul-woocommerce-pwa create project

    4. After creating your new project click on the Storage and create a new bucket. You can also find the default bucket here.webkul-woocommerce-pwa -add-bucket

    After creating bucket now go to, Settings menu icon and select Project Settings option. Please view the below-attached screenshot. A new Settings page will be opened.

    WooCommerce PWA Webkul Add Firebase to your App

    5. In the General tab find the project ID, web API key, etc. under the setting page.

    Now click on the button as shown in the image below. This will be used to add the firebase to the web app.webkul-woocommerce-pwa -general-setting

    Now, after clicking on the button above Register the app by entering the app nickname and click on register app –

    1st Step – 

    webkul-woocommerce-pwa -nick-name

    2nd Step  – 

    webkul-woocommerce-pwa -add-sdk

    3rd Step – 

    WooCommerce PWA Example Webkul Continue to console

    4th Step – 

    webkul woocommerce pwa add firebase to your project

    5th Step  – 

    Progressive Web Application Webkl Continue to Console

    Now, click the CLOUD MESSAGING tab, here you will find your Project Credentials, copy and save your Server Key (Google Authorization Key) as displayed below.

    These credentials will be used in the Magento configuration.webkul-woocommerce-pwa -firebase-server-key

    Basic Configuration Settings – PWA

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

    • Configuration
    • Mobile App
    • Media

    webkul_wc_pwa_main_configuration

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

    • Enter the Google Authorization Key/ Server 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.

    PWA – Back end 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.
    progressive web app for woocommerce webkul_woocommerce_pwa_mobile_app_backen_module_options_1

    Under the menu option PWA For WooCommerce, there are six 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.

    progressive web app for woocommerce webkul_woocommerce_pwa_add_new_banner

    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.

    progressive web app for woocommerce webkul_woocommerce_pwa_mobile_app_add_banner_4

    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 the Product/Category section.
      progressive web app for woocommerce webkul_wc_pwa_add_banner_productelse if you have chosen Category as Banner Type then select the respective category under this section
      progressive web app for woocommerce webkul_wc_pwa_add_banner_category
    • 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.

    progressive web app for woocommerce featured products

    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.

    progressive web app for woocommerce webkul_woocommerce_progressive_mobile_app_add_featured_products

    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 set up 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.

    progressive web app for woocommerce featured_category_progressive_web_app

    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.

    progressive web app for woocommerce add_category_progressive_web_app_for_woocommerce

    Here, the admin will –

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

    Notifications

    Note: Feature will soon be available.

    Under this section, the admin can set up various app notifications. Here, the admin can find a list of added notifications for the 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.

    progressive web app for woocommerce notification_webkul_progressive_web_app_for_woocommerce

    Add Notification

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

    progressive web app for woocommerce add_notification_webkul_pwa_woocommerce

    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.

    progressive web app for woocommerce send_bulk_notifications_webkul_pwa_woocomerce

    External Links

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

    progressive web app for woocommerce webkul_pwa_external_links_woocommerce

    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.

    progressive web app for woocommerce webkul_wc_pwa_add_external_links

    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.

    How to use – PWA for WooCommerce?

    For Android Devices:

    1st Step: Navigate to the URLhttps://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.

    progressive web app for woocommerce demo_page_woocommerce_web_application_webkul

    2nd Step: 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.

    progressive web app for woocommerce add_pwa_to_home_screen
     

    3rd Step: 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.

    progressive web app for woocommerce pwa woocommerce mobile app

    progressive web app for woocommerce pwa woocommerce mobile app


    For iOS Devices:

    1st Step: Navigate to the URLhttps://pwa-wc.webkul.com/pwa-for-woocommerce/ on your desktop.

    progressive web app for woocommerce demo_page_woocommerce_web_application_webkul

    2nd Step: Open the camera on your iOS device and scan the QR code. Tap the pop-up to open the website URL.

    **Note: You can also directly scan the QR Code from the image displayed in step 1.

    progressive web app for woocommerce iOs_scan_qr_code
     

    3rd Step: Now, you can see the Progressive Web App for WooCommerce. Tap the ‘Share ‘ button to add a shortcut to your mobile home screen.

    progressive web app for woocommerce pwa_woocommerce_webkul_share
     

    4th Step: Select ‘Add to Home Screen‘ option to add a PWA shortcut.

    progressive web app for woocommerce add_to_home_screen_pwa_woocommerce-
     

    5th Step: Now rename the PWA shortcut to something you can recognize and after that tap ‘DONE‘.

    progressive web app for woocommerce pwa_woocomemerce_webkul_done
     

    6th Step: PWA shortcut is visible on your home screen.

    progressive web app for woocommerce pwa_woocomemerce_webkul_doneshort_cut_added
     

    PWA For Guest Users —

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

    progressive web app for woocommerce webkul_wc_pwa_home_screen_pwa_short_cut
     

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

    progressive web app for woocommerce webkul_pwa_wc_splash_screen
     

    PWA for WooCommerceGuest 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
    progressive web app for woocommerce webkul_wc_pwa_mobile_app_home_page
     

    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.

    progressive web app for woocommerce webkul_wc_pwa_mobile_app_home_page
     

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

    progressive web app for woocommerce side_panel_drawer
     

    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 subcategory gets displayed on the screen.

      progressive web app for woocommerce category_section
       
    • Change Product Listing View

      Guests can easily change the product view to – List View or Grid View as required.

      progressive web app for woocommerce list_grid_view_change
       
    • 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.

      progressive web app for woocommerce sort_products
       
    • 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.

      progressive web app for woocommerce product_details_page
       

      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.

      progressive web app for woocommerce review_product_page
       

      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.

      progressive web app for woocommerce review_visible
       
    • Add Product to Cart

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

      progressive web app for woocommerce add_to_cart
       

      The guests can see the success notification for the same.

      add_to_cart_success_message
       

      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.

      cart_data_vsible_to_guest

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

      flat_10_coupon_cart_products
       

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

       billing_shipping_address_addd_by-guest
       

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

      edit_billing_details_guest
       

      Select the shipping method and tap the Proceed button.

      select_address
       

      Choose the payment method and tap Proceed thereafter.

      select_payment
       

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

      review_details
       

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

      continue_shopping
       

    PWA For Registered Users —

    Register/Sign up:

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

    progressive web app for woocommerce sign_up
     

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

    create_account_sign_in
     

    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.

    create_an_account

    After tapping the register button, the user is registered on the online store via the app and the customer can see a success message for the same.

    Here, you can see that the shimmer effect is visible in the PWA app itself. The effect is an unobtrusive loading indicator.

    progressive web app for woocommerce shimmer_effect_success_message_account_creation
     

    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.

    customer_home_page
     

    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 their recently placed orders. The customer can also reorder the already placed order by tapping the Reorder button for the respective placed order.

    Dashboard Sett

     

    Apart from that, customers can make a review for the purchased products by first taping on the respective product under the order list or recent orders. And thereafter, the customer can make a review.

    customer submit review product

     

    Downloadables:

    The 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.

    downloadable_section_progressive_web_app_for_wooCommerce_webkul

     

     

    Account Details:

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

    account_details_progressive_web_apps_webkul_woocommerce

     

     

    Address Book:

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

    billing_information_customer_progressive_web_apps

     

     

    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.

    notification_settings_progressive_web_app_webkul

     

     

    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.

    other_section_progressive_web_app_webkul

     

     

    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.

    Orders:

    Under the orders section, the customers can see a list of the orders that they have placed and can check the details of the same by opening the respective order.

    Downloads:

    The 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, 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 [email protected]

    Supported Framework Version - 3.0.x, 3.1.x, 3.2.x, 3.3.x, 3.4.x, 3.5.x

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    10 comments

  • oumz
    Does it have Web Payments API implemented ?
    • Goldy Bhargava (Moderator)
      Dear Customer,

      By default, you’ll get only default WooCommerce Payment methods. We need to integrate online payment methods to use in the PWA by the help of customization only.

      We also do provide one online payment method integration for free with our PWA plugin.

      To know more kindly email us at [email protected]. So, we can assist you faster and better.

      Thanks

  • Sébastien Chandonay
    Hello, thank you for this work. What are credit card payment methods available ? Is it depends on Woocommerce payment methods ?
  • Ferlyn Daguil
    Does your pwa supports woocommerce composite and bundle products?
    • Archana Tiwari (Moderator)
      Hello There,
      Currently, Composite and bundle products type are not available on default Woocommerce. This module will work for products of default Woocommerce. Further, you can mail us at [email protected] with your complete requirements so that we can assist you accordingly.
      Thanks & Regards,
      Webkul Team
  • Afzal Aatif
    Can I remove the billing address, I just want the shipping address and does this work on any other plugin like email subscription pop up, sales pop up and countdown timer. Please let me know.
    • Rajan Dimri (Moderator)
      Hello there,
      If you want to remove the billing address, then it can be done through customization. Regarding third-party plugin integration, if you want to integrate third-party plugin like email subscription pop up, sales pop up and countdown timer then these can also be integrated through customization.

      You can share your complete requirements at [email protected] so that we can assist you accordingly. Thanks!

  • paycly0
    Thanks for sharing Educative Blog.
    • Nishad Bhan (Moderator)
      Hey There, Thanks for the appreciation. For any doubts or suggestions drop us a mail at [email protected]
  • Back to Top

    Table of Content

    Hide Index