WooCommerce App Docs

Last updated 28 days ago

Getting started

Setup ionic environment - to know more about ionic environment setup see ionic framework official document - https://ionicframework.com/docs/intro/installation/

Unzip downloaded files

Change your details in App Project/config.xml. Change id, name, description, author, email, href

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<description>An awesome WooCommerce app.</description>
<author email="support@mstoreapp.com" href="http://mstoreapp.com/">Mstoreapp Team</author>

CD App Project

$ cd App

Add android and ios platform to your project

$ ionic cordova platform add android
$ ionic cordova platform add ios

Wordpress Plugin Installation

To install plugin mstoreapp-mobile-app for WordPress follow these steps.

Install Redux Frameworks. If you have not installed yet - https://wordpress.org/plugins/redux-framework/

  1. In Wordpress admin panel. Plugins > Add New > Upload plugin > Choose file Chose downloaded mstoreapp-mobile-app.zip file and Install and activate


  1. Unzip downloaded mstoreapp-mobile-app.zip and Upload the mstoreapp-mobile-app folder to the wp-content/plugins/ directory.

  2. Activate the plugin through the Plugins menu in WordPress.

WooCommerce API

  1. It's required to turn on the WordPress permalink on Settings > Permalinks

  2. Visit WooCommerce > Settings > API tab and tick the Enable REST API Checkbox

  3. Go to API > Keys/Apps

Select Add Key

Select the user in user field and add a description. Choose level of access Read/Write. then select the button Generate API Key and WooCommerce will generate API keys for that user.

Now you should see two new keys, These two keys are your Consumer Key and Consumer Secret

Add url, keys, OneSignal app id, Google project id and webClient id in /src/providers/service/config.ts file. Note - OneSignal app id, Google project id and webClient are optional and you can add when configuring push notification and social login

url: any = 'http://example.com';
consumerKey: any = 'ck_bf87b818dfd31d3dsfg4543hdjbcd82cb5f3b07e';
consumerSecret: any = 'cs_11f6613b7eeefdsfhg456ac814058b67cda9c5';
oneSignalAppId: any = '2916e1f4-b655-47b4-8ac8-4e7fdf06c';
googleProjectId: any = '5734632549046';
webClientId: any = '456352511209-fbam1kgj6354543tretdgfdgtvfidbs1.apps.googleusercontent.com';
appDir: any = 'ltr';

Also add details in /src/providers/service_android/config.ts

Get post id for About us, Privacy and Policy, Terms and Conditions. You will find post id on URL bar while editing post

Go to Wordpress > Mobile Options. Add Banners Blocks, Category Blocks, Product Blocks and Settings.

There are two service folder at App Project/src/providers. service and service_android

  1. service folder is default one. It will work for iOS and for the browser. While building iOS app you can delete service_android

  2. While building android app delete service folder and rename service_android to service

Now you can run your app. Due to CORS, your app may not work on browser. Try ionic serve --port 8080.

$ ionic serve --port 8080
$ ionic cordova build android
$ ionic cordova build ios

Debug apk may take time to load on some android devices. you need to build --prod to load faster

ionic cordova build android --prod
ionic cordova build ios --prod

If you have an issue read FAQ Or Feel free to contact me

https://codecanyon.net/user/hakeemnala Or send me a mail with details of the issue and your purchase code, URL, API, keys admin panel access hakeem.nala@gmail.com