Turn or Convert any Woocommerce Store to a Mobile App

Mobile apps also offer a personalized shopping experience. All the product-related details and comparisons can be easily done online and offline.

In this article, we are going to describe in details, each step that is required to integrate this Woocommerce template, built with React Native integrated with your own Woocommerce store.

All you really need to do to have your app ready to be published to App Store(ios) or Google Play Store(Android) can be summarised to the steps below.

• Generate necessary Woocommerce keys.

• Create a Stripe account

• link stripe account

• Run your app.

You should note that no coding is done here.

And your end result should look like this:

Check out the template here

Generate necessary Woocommerce keys.

• To generate the consumer keys, you will have to log in to your Admin Dashboard in WordPress.

• Go to WooCommerce -> Settings -> Advanced -> REST API -> Add Key.

• For the permissions, please choose “Read/Write”

• This will generate two API keys; Consumer public and Consumer secret.

Use these keys, and update your app config file, with these keys.

In the downloaded project folder, locate src/config.js file and open it,

Here, You have to update just 3 fields:

• Store URL

• Consumer key

• Consumer secret key

You should note that details on getting started and linking stripe to your mobile app is added to the template folder.

Getting your mobile app to Run

• First, make sure you have Node install.

• We have chosen yarn to manage dependencies; since things are quite fast with yarn.

• Install yarn here: “https://classic.yarnpkg.com/en/docs/install/#mac-stable" If you do not currently have it installed.

• To install dependencies, run command:

yarn install  

Make sure you have metro bundler started on a different tab by running the command :

yarn start

For Android - Running on a Device.

Visit here and click on the android tab to get a detailed description on how to run on an android device.

For IOS - Running on a Simulator

• Make sure you have Xcode installed.

• Navigate or Change directory to the iOS folder.

• Run command:

pod install

• Come back to the project directory and

• Run command:

npx react-native run-ios

#woocommerce #mobile #app