Convert a WooCommerce Store Into a Mobile App

In this tutorial, we are going to learn how to use our beautiful React Native WooCommerce template to convert any WooCommerce store into a native mobile app. We are going to assume you’ve already downloaded the source code, and you are ready to get your app integrated with your own WooCommerce store.

woocommerce store

On a high-level, here are all the steps you need to follow in order to set up absolutely everything, from user onboarding to payments. Once you finish all these setup steps, you’ll be able to literally submit your app to the App Store and Google Play. On each section, we provide links with even more detailed guides on how to achieve certain things, so please follow those if you get stuck anywhere or need more information:

  1. Running the app on iOS and Android
  2. Link your own WooCommerce store
  3. Set up your own Stripe account
  4. (Optional) Re-skin the app to fit your needs

The app template will automatically fetch & display all products, categories and store information from your WooCommerce website. Mobile users can add products to cart and initiate the check out process. The orders will be placed automatically into your WooCommerce store, and the payment will happen via Stripe, which is why you need a Stripe account to actually receive payments.

Don’t worry if not everything makes sense just yet. Let’s get started.

1. Running the app on iOS and Android

Follow the detailed instructions from here on how to run the app on both iOS and Android.

2. Link your own WooCommerce store

In the downloaded app template folder, open src/ShopertinoConfig.js file, wooCommerceConfig field. This file contains all the WooCommerce configuration data that you need in order to link the mobile app to your own WooCommerce online storefront. You need to update 3 fields:

  • Your website URL
  • A consumer key
  • A consumer secret key

To get the consumer keys, go to your, open your Admin Dashboard in WordPress, go to WooCommerce -> Settings -> Advanced -> REST API -> Add Key. Choose “Read/Write” for the permissions.

This will generate two API keys: consumer public and consumer secret.

fetch woocommerce react native

Use these keys, and update wooCommerceConfig variable in src/ShopertinoConfig.js, with your own store information:

wooCommerceConfig: {
  url: 'https://www.instakotlin.com',
  consumerKey: 'ck_139a326ad306fb0f82dfa2b767dcc4225eb169e3',
  consumerSecret: 'cs_356958bd8d2add5e21d3edca49400b43a384f1a2',
},

Build and run the app again in your preferred environment (iOS or Android), and now you should start seeing your own products and categories. Simple, right?

3. Integrate your own Stripe account for payments

Find detailed instructions here.

Please contact us if you run into any issues with any of the steps we described, or if you have additional questions that are not covered in the documentation. At Instamobile, we are always looking to improve our products, and the documentation is no exception.

 

Shopping Cart