User Guide for WooCommerce React Native Mobile App

WooCommerce React Native Mobile App transforms your website into a native app for mobile devices, compatible with both iOS and Android.

This allows customers to shop conveniently while on the move. It’s designed to be fast and easy to use.

The app provides real time updates for orders, customers, and products. It features a useful search bar that helps users find products quickly.

Push notifications keep users updated on important information. Both guest users and those with accounts can shop through the app.

For registered users, there’s a dashboard available. They can view their account information, track orders, manage addresses, and access downloads from the app.

You can also take a look at the WooCommerce Delivery Boy App, which connects the admin and delivery boys with features for tracking and chatting.

• Transforms the WooCommerce store into a mobile app using React Native.
• Orders, customers, and products are updated in real time.
• Features a search bar for finding products easily.
• Includes a notification area for endless push notifications.
• The category page shows all the categories available on the website.
• Even guest users can shop for products through the app.
• Registered users can log in using their email or username.
• The My Account section in the app provides access to the dashboard, along with options to view addresses, orders, and account information.

The user will get a zip file that he has to upload in the “Add New” menu option in the WordPress admin panel.

For this, login to WordPress Admin Panel then Under the Dashboard, hover your mouse over the “Plugins” menu option which brings out a Sub-Menu then select the “Add New” option.

After this, you will see an option on the top of your page that is “Upload Plugin”, Now clicks the option to upload the zip file.

By clicking on the “Upload Plugin” option, below that you will see a button “Choose File” click on the button to browse for the zip file as per the snapshot below.

After browsing the file, click the “Install Now” button to install the plugin as per the snapshot.

Now when the plugin is installed correctly, you will see the success message & an option to activate the plugin.

Henceforth now, click on “Activate Plugin” to activate the installed plugin.

After the plugin is installed successfully, it is visible under the Installed Plugins section as per the image below,

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

Check how to activate your WooCommerce plugin through the purchase code and get updates on Webkul Modules directly on the Plugins page.

The administrator can manage and configure the app from the backend with just a few steps.

Using the admin panel, they can oversee the home page, refresh banner images, organize featured products and categories, and send notifications.

Moreover, the admin dashboard provides access to admin allowing them to modify various settings.

Banners

In the Banner Image section, the admin can oversee or add new banner images for the Mobikul WooCommerce React Native Mobile App.

They can also handle multiple images at once, including moving them to the trash.

To edit an existing image, the admin simply needs to click the edit button.

Now, by tapping on the Add Image button the admin can add Banner Images as shown in the image below,

Here, the admin will need to upload the banner image, manage the sorting of the banner, select the type of the banner, select the product/category id status of the banner image.

To show on the mobile app and then click on save.

Carousels

WooCommerce React Native mobile app features carousels that showcase products and categories.

Admin can easily view the list of carousels by clicking on the Carousel tab in the admin panel.

To add the new carousel the admin will click on the Add Carousel button. After that, the following form will appear including the title, type, product/ category, and status.

Finally, the admin will save it to display it to the mobile application.

Featured Products

The admin can manage the featured product list from the admin panel and manage the featured product in bulk to move the products in the trash.

So, the admin can also click on the edit button to edit the existing product and click on the “Add Featured Product” button to add the more featured product to the app.

Now after clicking on the Add Featured Product, the admin can add more featured product as shown in the image-

Here, the admin can Sort the order of the product, select the product from the Product name, and enable the status of the featured product and click on the save.

Featured Categories

From the admin panel, the admin can manage the Featured Category.

The admin can manage the existing featured category list or add the more featured category from the dashboard as shown in the image –

Here, the admin can Sort the order of the selected featured category, select the featured category according to the requirements, and enable or disable the status of the selected featured category.

Click on save to show on the mobile app as shown in the image below-

Notifications

The admin has the ability to handle notifications and can also create additional ones to send to mobile devices via the app.

So, the admin can either manage the current notifications or hit the Add Notification button to include more.

Additionally, for every notification, there will be options to edit, delete, and send them out.

The admin can send a notification by pressing the Send Notification Button for any particular alert.

This action will deliver notifications to all customers who are using the mobile app.

To enhance the relevance and smoothness of the notification process, Firebase Cloud Messaging is utilized in this context.

These notifications are meant for the admin to communicate with users through the mobile app.

Additionally, by selecting Add Notification, the admin can input the details of the notification, as illustrated in the image below.

Here, the admin can-

• Upload the image for the notification
• Enter the title of the notification
• Enter the content for the notification
• Select the type of the notification as product or category
• Select the product/category id from the list
• Enable or disable the status of the notification and click on the Save button.

Homepage Configuration

The admin can configure the homepage settings by navigating through Mobikul>Home page configuration.

Admin can customize the app homepage as they want it to be displayed to the customer.

They can set the order of different sections to be displayed on the homepage in the way they want.

Walk Through Information

The admin can manage the Walk Through Information from the admin backend panel.

The admin can manage the existing one or add a new one by clicking on add walk information as mentioned below:

Here the admin can upload the Walk Through Image, give a title name, add the description, choose the colour code and set the status to enable or disable as mentioned in the below snapshot:

External Links

The admin can set up External Links to control the CMS pages.

To do this, they just need to input the Title of the CMS page and the link where the button will take users when clicked.

Settings

The admin can access the settings configuration by navigating through Mobikul>Settings, which provides many options to change the app logo and features.

App Icon Feature

The admin can change the app icon by uploading the image of the icon as required.

Splash Image

The admin can upload the splash image they want to display when the user opens the app.

Create Barcode Functionality

The admin can easily create a barcode for a product by following these steps:

1. Go to Product > All Products.
2. Select the product for which the barcode needs to be created.
3. Click on Edit to open the product details.

The interface shown below will appear. Here, the admin can enter the barcode number in the barcode details section for the selected product.

Finally, click the Update button to save the changes.

Mobikul WooCommerce React Native Mobile App features an interactive and easy to use homepage. At the bottom, there’s a navigation bar with sections for Home, Category, Account, and More.

Admin has the ability to add extra sliders to the front page, allowing customers to view featured and new products right from the app’s homepage.

Additionally, the admin can personalize the homepage to meet their specific needs.

Product Search

Customers can search for their desired products through the dedicated Search bar provided in the app.

They’ll simply tap on the Magnifier icon and start typing to search for the product of their choice.

Notifications

Admin can add Notifications on the app from the admin backend which can be viewed by the customers on the App.

A dedicated Notification section is provided for the same on the app.

Categories

The Category page allows customers to view and search for products based on Categories. They’ll tap on a particular category which will then display the list of products associated with the category.

Account

Customers can view the dashboard and check their account details from the Account section.

If a user is not logged in, they’ll initially have to Log in to access the Account page.

Product Page

The Product Page displays the all the relevant information related to the product listed on the store.

Subsequently, customers can view and buy their desired products from this page.

Cart Page

Once the customer taps on Add to Cart button on the product page, they’ll navigate to the Cart Page.

From here, customers can view, edit and update their cart. They can also add coupon codes and proceed for checkout from this page.

Checkout Page

After tapping on the Proceed button on the Cart, customers are redirected to the Checkout page.

They will add or edit their Billing and Shipping addresses along with selecting the shipping methods.

Payment Method

To Pay for their orders, customers tap on the Proceed button on Checkout page which redirects them to the Payment Method page.

The payment methods enabled by the admin appear here for the customers to pay for their orders.

Review and Payment Page

After selecting the payment method, customers tap on the Proceed button again to review their order details and make the payment by tapping on the Make Payment button.

More Section

The More Section in the App houses various website links such as My Account, Shop and Welcome. Using it, customers can check their Account details as well as the Shop and Welcome sections.

To navigate to More section, customers tap on the More button in the bottom bar.

So that is all about the walkthrough of the WooCommerce React Native Mobile App. Explore React Native App Development for WooCommerce with this comprehensive guide by Webkul.

If you have any more queries, please drop us an email on support@webkul.com or create a ticket.