WooCommerce Mobile App Builder – User Manual

woocommerce-mobile-app-builder

1.0 Introduction

We all are vigilant with the fact that mobile applications play a vital role in user engagement nowadays. If you are a WooCommerce store owner and probing for a convenient way to develop an eCommerce application for your website, you will find the right solution here.

WooCommerce Mobile App Builder by Knowband provides you with native Android/iOS application which would surely fulfill all the requirements for the growth of your store. WooCommerce Android/iOS mobile app creator allows you to upgrade your eCommerce website into smartphone application in the seamless way possible.

The mobile apps developed by WooCommerce mobile app maker come up with a flawless and reliable app experience for the users which will surely bridge the gap between you and your sellers. All you need to do is to specify your business requirements and expectations and then leave the rest to Knowband team.

1.1 WooCommerce Mobile App Features

The advanced features which come up with WooCommerce Android/iOS mobile app maker can make your business a sure success in the competitive market. These are the key features offered by WooCommerce Mobile App Creator:

Now that you are fully aware of how WooCommerce mobile app maker works, it’s time to look at some of its unmatched features in detail:

1. Web Admin Interface

The store admin gets complete access to the web admin interface of WooCommerce mobile app maker after the module is installed on the store.

2. Design Control

The admin gets full design control to customize the app accordingly. WooCommerce mobile app builder allows you to design banners, sliders, push notifications etc. from the backend interface.

3. Customizable app themes

By default, four theme colors are provided in mobile apps. You can even choose a new one from the provided color charts.

4. Custom fonts

The mobile apps by WooCommerce mobile app creator come with 10+ types of fonts styles. If you want any other font for your store, we can incorporate it in the application.

5. Tablet Optimization

Developed mobile apps are tablet and mobile optimized. This makes the app work seamlessly on every handheld device.

6. Synchronization between the store and mobile app

WooCommerce mobile app builder synchronizes the app and your web store in real time. All the data related to inventory or order automatically gets updated on the application.

7. Multi-lingual support

WooCommerce mobile app maker provides multi-lingual support in applications. It even supports RTL writing styles in application along with 18 different languages. Still, if there is any other language you want for your application, we can add it over a small amount of fee. Following is the list of languages supported in the mobile application:

  • Bulgarian
  • Czech
  • Dutch
  • English
  • Finnish
  • French
  • German
  • Greek
  • Hungarian
  • Italian
  • Polish
  • Portuguese
  • Romanian
  • Russian
  • Slovak
  • Swedish
  • Spanish
RTL Compatible languages:
  • Arabic
  • Aramaic
  • Azeri
  • Dhivehi/Maldivian
  • Hebrew
  • Urdu
  • Persian/Farsi
  • Kurdish

and others.

8. Multi-currency

WooCommerce mobile app developer supports all the currencies available at your store.

9. Unlimited Push Notifications

WooCommerce mobile app maker allows the store owners to send unlimited push notifications to the app users. This feature can help you notify the users about the order success, order status update and abandoned cart.

10. Promotional Banners

Banners and sliders are provided in the mobile applications which can be used for announcing new deals and offerings seasonal sale and discounts.

11. Live Chat Support

Zopim chat services allow you to provide 24/7 user assistance directly by the mobile application.

12. Facebook and Google Login

WooCommerce mobile app maker provides social login option in the app to make the registration and login process quick for the users. Google+ and Facebook options are added to the app by default.

13. Coupon and Voucher support

WooCommerce mobile app builder supports all types of coupons and vouchers available on your store.

14. Native Payment method support

WooCommerce mobile app creator supports all sorts of payment methods. PayPal and COD payment methods are by default incorporated in the application.

15. Product sharing

Users can share your store products on different social media platforms directly from the product page of your screen.

16. All sorts of product support

All sorts of product support are provided in WooCommerce mobile app builder for Android/iOS as simple, virtual, configurable, bundled and grouped products.

17. Multiple shipping methods

WooCommerce mobile app creator is compatible with all shipping methods available on your store.

Voice Search option of WooCommerce mobile app builder allows the users to seamlessly search the store products. This feature is missing from the iOS platform.

19. Simplified checkout

Simplified checkout feature eases the order submission process. WooCommerce mobile app thus makes the shopping pretty easy and fun for the users.

20. Order tracking

Android/iOS mobile app creator for WooCommerce provides order tracking feature in mobile apps. Users can find the updated status of their placed order whenever required.

1.2 Additional Merchant Benefits of WooCommerce Mobile App Maker for Android/iOS

  • The WooCommerce mobile app builder offers an effortless means to create your own Android/iOS eCommerce mobile app.
  • With the multi-lingual and multi-currency support, the app builder allows the admin to localize their business and tap a customer base globally.
  • The real-time synchronization offered by WooCommerce mobile app maker reduces the manual efforts of store admin.
  • The eCommerce apps support all types of products, shipping as well as payment methods.
  • Push notifications provided by WooCommerce mobile app developer increase the engagement and conversion rates of customers.
  • The WooCommerce app maker comes with a free support of three months.

2.0 WooCommerce Mobile App Demo

Want to see how these features function in the application? We have integrated our demo store with the application where you can explore the app and experience all the app features and functionalities. You just need to follow the instructions given below:

  1. Download and install the Nautica WooCommerce Mobile App from Google play store. You can easily find it by searching “Nautica” keyword on Google play store.
  2. Open the App and click on “View Demo” button as shown:

woocommerce-app-demo

  1. The home screen of the app will have the content of our demo store as shown in the following snapshot:

woocommerce-app-home-screen

2.1 How to test your store as WooCommerce Mobile App?

Knowband’s WooCommerce mobile app maker even allows you to experience your store on the application. These simple steps will walk you through the process to test your store on an Android or iOS application:

Step 1. Download free WooCommerce Android app builder or free WooCommerce iOS app builder from the Knowband store.

Step2. Install WooCommerce demo mobile app from the Google Play Store or Apple App Store as per your testing device.

Step 3. Enter the store URL on the splash screen of the application and browse your store on the mobile application.

We hope that you have liked the demo of the eCommerce mobile app and it would have satisfied you. So, this is the right time for you to get the paid version of the mobile app with unlocked features. The next section will guide you through the process.

2.2 How to get WooCommerce Mobile App builder?

Follow these four easy steps to get your app ready:

woocommerce-app-development

The WooCommerce mobile app builder makes it easier for the store owners to go mobile. Follow the steps mentioned below to create your own mobile application:

Step 1. First, you require to purchase the WooCommerce mobile app builder module from Knowband. You can get it from here.

Step 2. Once you have bought the WooCommerce Android/iOS mobile app builder Plugin, you will be presented with a pre-requisites form, asking for details about your app. You’ll be required to share the following things with us:

  • Splash image (1280×1920 png)
  • App icon (512×512 png)
  • Theme color (Blue, Orange, Green, Black)
  • Website URL
  • Website Name
  • Desired social login option name out of Facebook and Google.

Step 3. Our development team will customize the mobile application as per the details shared in the questionnaire. The APK file for the app will be shared with you after customization.

Step 4. Now, you can publish this mobile application (apk) file on Google Play Store and Apple Store by yourself or you may get it done by us for a small fee.

3.0 WooCommerce Mobile App Builder Installation

Following four steps will walk you through the whole process of module installation:

Step 1: After purchasing the WooCommerce Mobile App Builder Module, you will get the following files as listed below:

  1. Compressed file in ZIP format (It contains the source code of the plugin)
  2. User Manual

Step 2: Go to the dashboard of WordPress->Plugin->Add New

wocommerce-module-dashboard

Step 3: You will be redirected to a new interface. Click Upload Plugin.

upload-plugin

Step 4: Next window will ask you to upload the file. Click on Choose file and Upload the zipped file.

upload-the-zipped-file

That’s it. You have installed the module successfully.

4.0 Web Module Screens

WooCommerce mobile app builder is way simple to be managed from the backend. Its configuration only requires few mouse clicks and button toggles from the backend.

4.1 General Setting

General settings contain the following configuration options of WooCommerce Mobile App Maker:

general-settings

  • Enable Plugin: Enabling the WooCommerce mobile app creator will make the module work and a connection is established between the mobile app and your store.
  • Enable Request Log Reporting (Optional): Enable log reporting to get the report on any abnormal behavior of the application.
  • Enable Live Chat Support (Optional): Enabling live chat support function will reflect the live chat option in the application. After enabling this feature, it is mandatory to enter the chat API keys.

general-settings

  • Category Image Width: Enter the width of the category images displayed in the application.
  • Category Image Height: Enter the height of category images displayed in the application.
  • Product Image Width: Enter the width of the product images displayed in the app.
  • Product Image Height: Enter the height of the product images displayed in the application.
  • Start Date from which Products will be considered as new: Enter the date from which you want your store products to be considered as new arrivals on the application.
  • Number of products to be considered as new: You can enter the number of products to be displayed as new in the application.

4.2 Push Notification Settings

The WooCommerce mobile app maker provides the push notification service in your application to market your products. These notifications are fully customizable from the backend of WooCommerce Android/iOS mobile app maker module.

push-notifications-settings

  1. Firebase Server Key: – In order to configure the Push Notifications for the application you will require Firebase Server key. It allows you to send a push notification to a particular Application.

Note: In order to get the Firebase Server Key, refer to the link mentioned below:

https://www.knowband.com/blog/user-manual/android-mobile-app-builder-configuration/#creating-a-project-at-firebase-console

  1. Enable/Disable Order Success Notification: – Enable/Disable Push Notification for the new orders placed by users. Enter the title and message that has to be sent in the Push Notification after the Order is placed successfully.
  1. Enable/Disable Order Status Update Notification: – Enable/Disable the Push Notification for notifying the customers regarding the change in the Order Status. Enter the title and message that has to be sent in the Push Notification for the updated order status.
  1. Enable/Disable Abandoned Cart Notification: – Enable/Disable Push notifications for the cart that has been abandoned by the user. Enter the title and message that has to be sent in the Push Notification for the Abandoned Cart by the app users.
  1. Time Interval: – This is a time interval (in hours) for sending the Push Notification for the Abandoned Cart to the users who have items in their cart.

4.3 Push Notification History

Push notifications can easily take your store products to every place where you ever want to reach. The push notifications offered in WooCommerce mobile app creator are fully customizable from the backend interface.

The admin can create new notifications by clicking on Send Notification buttons as shown below:

push-notification-historySend Notification:

This option opens the pop-up window allowing you to configure the push notification as per the requirement.

send-notification

  1. Title of the Push Notification: – The title of the Push Notification that has to be sent to the users.
  1. Message of the Push Notification: – The message that has to be sent in the Push Notification.
  1. Image:- Select relevant image for the push notification.
  1. Redirection Activity: – The Application page where the user will be redirected after he clicks on the Push Notification. It gives three option: –
  • Home
  • Category
  • Product
  1. Select the Category/Product: – You will have to select the category/product based on the type of the selection of the redirection activity.
  1. Send Notification: – This button is used to send the notification configured above.

4.4 Slideshow Setting

The sliders are displayed at the top of the application and can be configured from backend.

slideshow-settings

  1. Enable/Disable: Enable/Disable the slideshow in the application from the back-end of the WooCommerce mobile app maker.
  1. Limit: You can even set the no of images appearing in the slideshow.
  1. Image Width: Set the width of the images used in the slideshow.
  1. Image Height: Set the height of the images used in the slideshow.
  1. Link Type: The app page which you want to link with the sliders. It has two options:
  • Category
  • Product
  1. Link To: Select specific category or product you want to link with the slide.
  1. Sort Order: Sort order allows you to set the order in which the sliders will appear in the application.
  1. Action: You can even remove the slides if required.
  1. Add new: Clicking on the add new option allows you to add a new slide in the slideshow. You have to link the slider and add an image.

4.5 Banner Setting

Banners are displayed just below the sliders on the homepage. You can configure the banners from the backend and even add as many as you require.

banner-settings

  1. Enable/Disable: Enable/Disable the banners in the application from the back-end of the WooCommerce mobile app maker.
  1. Limit: You can even set the no of banners appearing in the application.
  1. Image Width: Set the width of the images used in the banners.
  1. Image Height: Set the height of the images used in the banners.
  1. Link Type: The app page which you want to link with the banners. It has two options:
  • Category
  • Product
  1. Link To: Select specific category or product you want to link with the banner.
  1. Sort Order: Sort order allows you to set the order in which the banners will appear in the application.
  1. Action: You can even remove the banners if required.
  1. Add new: Clicking on the add new option allows you to add a new slide in the slideshow. You have to link the slider and add an image.

4.6 Payment Methods

WooCommerce Android/iOS mobile app maker supports all types of payment methods. PayPal and COD payment options are by default incorporated in the apps.

payment-methods

  1. Enable/disable PayPal: You can enable/disable the PayPal payment method just by toggling the button in the background.
  1. Select Mode: You can select the native payment environment from the sandbox or live option. These settings allow the users to test the payment methods before proceeding.
  1. Client ID: Enter the appropriate client ID of PayPal merchant account. It identifies the account to which the Payment has to be made while placing the order.
  1. Enable/disable Cash On Delivery: You can enable/disable the Cash On Delivery payment method from the backend.

Featured products appear below the slideshow on the home page of the application. You can easily configure them from the backend.

featured-products

  1. Enable/disable featured products: Toggle the button to enable/disable the featured products on the application.
  1. Limit: You can even limit the number of products appearing under featured products.
  1. Product Image Width: You can set the width of the product image.
  1. Product Image Height: You can set the height of the product image.

4.8 Special Products

Special Products appear below featured products in horizontal scrolling.

special-products

  1. Enable/disable Specials: Toggle the button to enable/disable the special products on the application.
  1. Limit: You can even limit the number of products appearing under specials.
  1. Product Image Width: You can set the width of the product image.
  1. Product Image Height: You can set the height of the product image.

4.9 Best Seller Products

Bestseller products of your store appear just below the specials in horizontal scrolling. You can configure them as depicted in the snapshot:

best-seller-products

  1. Enable/disable Specials: Toggle the button to enable/disable the best seller products on the application.
  1. Limit: You can even limit the number of products appearing as best sellers.
  1. Product Image Width: You can set the width of the product image.
  1. Product Image Height: You can set the height of the product image.

4.10 Latest Products

Latest products are shown at the bottom of the home page screen and can be configured as:

latest-products

  1. Enable/disable Specials: Toggle the button to enable/disable the latest products on the application.
  1. Limit: You can even limit the number of products appearing as the latest products.
  1. Product Image Width: You can set the width of the product image.
  1. Product Image Height: You can set the height of the product image.

4.11 Information Pages

The WooCommerce mobile app also allows the store admin to display various CMS pages and their related details. Admin can even add a new page if there is a requirement.information-pages

4.12 Google Login

WooCommerce mobile app maker provides Google login option in the mobile app for seamless user login and registration.

google-login

  1. Enable /disable Google Login: You can enable/disable the Google login option from the backend module.
  2. Google JSON file: Upload the Google JSON file.

4.13 Facebook Login

WooCommerce mobile app creator allows you to provide easy and quick Facebook login to app users.

facebook-login

  1. Enable /disable Facebook Login: You can enable/disable the Facebook login option from the admin interface of the WooCommerce mobile app builder module.
  1. Facebook App ID: Enter the App ID of your created Facebook application.

4.14 Sample Data

Sample data is also provided in the back-end of WooCommerce mobile app creator. It allows all the newbie store owners to fill the complete default data with a single click.

sample-pages

5.0 Mobile App Screens

5.1 Splash Screen

The splash screen will be the first screen of your app that will be displayed to the users. In the lower end of the splash screen is the demo option to explain how you can customize the design of the application.

splash-screen

1. Theme Color –

By default, four theme colors are available, but you can add a new one by clicking on ‘+’ option if any custom color is required.

2. Select Language –

WooCommerce mobile app creator supports all native languages. We have incorporated 18+ international languages in the application by default. Also, if you want any other language to be added to the list, we can incorporate that free of cost.

3. Choose Font –

By default, WooCommerce mobile app maker provides 12+ fonts and you can go for any of them. If you want any other font for your app, we can add them free of cost.

4. View Your Store –

You can also see your store by entering your store URL in the required field.

5. View Demo –

We have integrated eCommerce mobile app with our demo store by default. You can experience the app features and functionalities with demo option.

5.2 Home Screens

The intuitive product and category screens of mobile apps bound the users to dig into your store. Let’s see what are the home screens which you will encounter, once you have installed the store:

1. Menu Screen

You can see the menu by clicking on the navigation bar which is at the left side of the home screen of the WooCommerce mobile app. The menu provides the following options to users:

1. My Account:home-screen

Users can have access to their account where he/she can view their order history or update their account details.

2. Categories: 

Allow users to view categories in two levels User can select a category from here and see the products on product listing screen of selected screen.

3. About Us:

Allows users can view store about us page.

4. Contact Us:

Allows users can view store contact us page.

5. Login/ Logout:

Allows the user to login/ logout of their store account.

2. Sliders:

Sliders are displayed at the top of the home screen. Sliders consist of different promotional images which get changed after a fixed time interval as of a slideshow. You can easily customize the number of slides appearing on the front end. These sliders basically redirect your users to the specific product or category screen of the application.sliders-and-banners

Note: Make sure that sliders are enabled from the backend. Keep the size of the images to be used in them of size 400*600 for clear image preview on the app.

3. Banners:

Banners are displayed just below the sliders. You can redirect the user to any category or product screen with the help of these banner images. All the required configuration settings are there in the backend interface of WooCommerce Mobile App Maker.

Note: Make sure that banner module is enabled on store and size of the banners must be >= (600*400) w*h for clear image preview on eCommerce mobile app.

 

Collection of featured products is displayed just below the banners in the form of the grid. featured-and-special-productsThese products are the same products which are visible on the front end of your store. You can even limit the number of products from the Admin interface.

 5. Latest:

The latest arrivals of your store are displayed below the featured products in horizontal scrolling. These are same products that are visible on your storefront. The users can simply scroll and see the latest products of your store.

 

6. Special Products:

Just below the latest arrivals are the special products of your store. These are also displayed in the horizontal scrolling and are the same products which are displayed at your storefront.

specials-products

7. Best Seller Products:

Bestseller products are displayed below the special products on the home screen. These are the same products displayed on your storefront. Bestseller products are displayed horizontally so that user can scroll and find more products easily.

There is a search icon in the top right of the screen. Users can simply click the icon and search products.

9. Shopping Cart:

Near the search icon, the cart icon is present on the home page of the screen. Users can view and manage the product saved in their cart from here.

5.3 Category

Users can simply land on the category pages just by selecting any of the categories options from the menu on home screen. In WooCommerce mobile app you can easily display all of your store categories. There is also an option to display uncategorized products in the application. Categories section exhibits following functionalities:category-page-screen

Users will be navigated to category screen on the selection of any category from the menu on home screen. Category section offers various functionalities:

1. Sort:

Sort feature allows the users to sort the products on the basis of price, color or size (high to low or low to high).

2. Filter:

Users would be able to apply filtration to the products on the basis of attributes as price, color, size etc.

3. Product Listing:

Category products are listed in the grid view. Users can simply scroll below and get the whole collection of products.

5.4 Sorting

sorting-feature

5.5 Filter

product-filter-feature

Users can simply search any product available on the store just by entering the related keyword in the search icon.

product-search-feature

5.7 Product

The eCommerce mobile app maker for WooCommerce supports all types of products. The Product screen allows the users to view product details such as product image, description, and attributes (size or color).  Product section offers various functionalities:

product-page-screen

1. Product option and description:

Users can simply search any product available on the store just by entering the related keyword in the search icon.

2. Add to Cart:

Users can simply add the product to their shopping cart by clicking Add to Cart button shown at the bottom of the screen.

3. Product Sharing:

Users are also allowed to share the product links with others by clicking on the product share option.

5.8 Shopping Bag

The shopping cart of eCommerce mobile app allows the users to view all the products stored in the bag for purchase.

1. Product Listing:shopping-bag

Users can easily see all the products added in the cart along with their price.

2. Update quantity:

Users can even update the product quantity directly in the shopping cart by clicking Update Quantity option.

3. Remove from the cart:

There is also an option to remove the product from the shopping cart.

4. Continue Shopping:

By clicking on the Continue Shopping option, the users will be redirected to the home page to browse more products.

5. Continue to Checkout:

Users can proceed to the checkout page directly by clicking on the Continue To Checkout option.

5.9 Checkout

WooCommerce mobile app maker offers a simplified checkout approach to your users. The checkout screen provides information about shipping details, Billing details, Order Summary, Shipping Methods, and total Payment Summary.

1. Shipping Address:app-checkout

Users can view the complete shipping details in this screen

Add/ Edit Shipping Address:

Users are allowed to edit the product shipping details and can add even a new one.

2. Billing Address:

It even provides all the billing details selected by the user.

Add/ Edit billing address:

Users can even view the products added in the cart along with the complete summary.

3. Order Summary:

Provides detail of product(s) added to cart by the user.

 

4. Order Comment:app-checkout-screen

Users can even write order comment which would be visible to the store admin at the backend.

5. Payment Summary:

It provides the complete detail of the total cost of the shopping cart.

6. Proceed to payment:

Users can go to Payment page simply by clicking on Proceed To Payment option.

7. Proceed to payment:

Users can go to Payment page simply by clicking on Proceed To Payment option.

5.10 Payment

On the payment screen, the user can find the list all the available payment options to choose from. WooCommerce mobile app creator supports all type of payment methods and even allows the store admin to add new from the backend. We have by default integrated two native payment method PayPal and Cash On Delivery.

Users can simply click on Make Payment option to complete the transaction.

In-built payment methods                                                                                                             
payment-methods

Your store payment methods

payment-by-wire

5.11 Login

WooCommerce Android/iOS mobile app maker provides quick social login options. Facebook and Google login is provided in the eCommerce mobile apps. It eases the login and registration process for the eCommerce app users.

1. Login:app-social-login

Users will be able to access the app just by entering the login credentials of the users.

2. Signup:

For every new app user, sign up option is there to create the new account by filling the necessary details.

3. Forget Password:

E-commerce mobile app allows the users to recover the lost password with Forget Password option.

4. Facebook Login:

Users can log in and browse the app with their Facebook account.

5. Google Login:

Users can also log in and browse the app with their Google account.

Note:

  1. To create Facebook App and obtain the App ID, refer the following link:

https://www.knowband.com/blog/user-manual/android-mobile-app-builder-configuration/#prerequisites-for-creating-facebook-app-for-android-will-be-provided-by-knowband

  1. To create Google App, refer the following link:

https://www.knowband.com/blog/user-manual/android-mobile-app-builder-configuration/#prerequisites-for-creating-google-app-for-android-will-be-provided-by-knowband

5.12 My Account

My Account screen of WooCommerce Android/iOS mobile app allows the users to view their complete account details. It also contains the list of all the previous orders placed by the users. My account screen has the following functionalities:

1. Order History:

Provides the details of the order(s) being placed by the user such as order id, date of submission, order status.my-account-screen

2. Update Profile:

Users are allowed to update their personal details. Users can update their name and password stored in the application.

3. Shipping Address:

Users can view all the stored addresses directly by clicking on the shipping addresses option.

4. Order Detail:

Users can view the complete details of the previously placed orders as order id, order status etc. whenever required.

5. Re-order feature:

Reorder feature allows the users to purchase the previously ordered products directly from the My Account screen.

5.13 Order Detail

Order detail screen of WooCommerce mobile app allows the users to find and track their previous placed orders from the app. It has complete information about order status, shipping address, payment details, and total cost.

order-details

5.14 Add Address

If required, users can conveniently add new shipping address directly from the mobile app.add-new-shipping-address Watch the complete functionalities of WooCommerce Mobile App Maker plugin in this video tutorial                                                    

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

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