WooCommerce React Native POS Mobile App

WooCommerce React Native POS Mobile App allows the store owners to manage the POS system just by operating the mobile phones. The sales agent can generate the invoice, complete order, and make payment using their mobile devices very easily.

Moreover, this is a native app that allows a seamless operation in both the platforms that are iOS and Android. This system will be most usable in case the physical stores are having a long queue of people that makes the available sales agent insufficient.

In such emergency cases, the extra sales agents can work using their mobile phone and manage the complete scenario in just some minutes, as it will make the checkout process faster.

The complete system is synchronized so the changes done at any end will be reflected in all the other ends like the web store. Meanwhile, let’s have a basic knowledge about React Native.

Check the React Native POS Mobile App workflow –

What is React Native?

React Native is a Javascript framework provided by Facebook in 2015 that renders the native mobile application for Android and iOS. This is used for building the user interface targeting the mobile application, not the web browsers.

This allows the web developers to code the mobile application using the Javascript library with completely native kind of experience. Moreover, it helps you to create reusable UI components because react native is faster, scalable, and easier.

Note: The main configuration of this WooCommerce React Native POS Mobile App will be done from the web end plugin so it is a must to purchase and install the Point of Sale System for WooCommerce plugin first.

• Real-Time Synchronization
• Easy Product Search
• Interactive Home Page
• React Native App
• Online Mode
• Print Invoice
• Discount Coupon
• Invoice Generation
• SKU Product Search
• Cash Drawer Checking
• Order List
• Create New Customers
• Manage Printer
• Seamless Checkout
• Change product quantity from cart page

Mobile App Functionalities

Initially when the sales agent will start the mobile application, then the first requirement is to log in to the mobile application.

First of all, the admin will enter the login credentials in the mobile application. The credentials will include the Username/ Email and Password.

Just after login the sales agent will navigate to the Cash Drawer page and enter the Opening Amount and click on Submit Button.

This opening amount will be added to the cash drawer of the sales agent that can be used to make the cash returns to the customers in future sales.

Further, the homepage of the mobile application includes four options in bottom Navigation bar, that are as follows:

• Home
• Orders
• Categories
• More

The sales agent will be able to see the list of products under this section. In the starting, the sales agent can see NO SALE written on the floating rectangle box as shown in the left image below.

Whereas, if the sales agent will click on the desired product then the product will get added to cart and its price will increase accordingly. Further, the subtotal will be visible in the rectangle box as shown in the right image below:

The sales agent can click on the product multiple times to increase the quantity of the same. The quantity of multiple product types added to the cart will also be visible in the same floating box.

Search Product

Moreover, the sales agent can also search the desired product by typing its name in the search box as shown in the image box.

The sales agent can click on the orders option for checking the previous customer orders. The order list includes brief details like Order ID, Ordet total, and Date of order as shown in the left image below:

Further, the sales agent can view any order by clicking on it. The details of order will include the date of order placed, items ordered, customer notes, coupon details, and price details.

By clicking on the Generate Invoice button, the sales agent can point the order invoice for the customer.

Further, the sales agent will get directed to the print pdf page and the sales agent can connect with the desired printer. And simply by this, the sales agent can print invoices using the mobile application.

Note: In case the printer is not available to work, then the sales agent can also save the PDF and send it via mail to the customer.

Under the category option, the sales agent will find the list of categories available in the store. After viewing any specific category its respective products will be listed.

For example, the Music category is viewed and the list of music albums available are visible as shown in the right image below:

Under this option, the sales agent can see some more amazing functionalities related to the WooCommerce React Native Mobile Application. These are as follows :

• Printer
• Counter
• Customers
• Reset
• Account
• Logout

Printer

This is one of the most amazing features, as sales can connect the available printer to the mobile application and print the invoice for the customers.

The best point is this, even after using the mobile application, the sales agent can perform all the basic POS system activities.

After clicking on the printer option, the sales agent will navigate to the Choose Printer page. There the sales agent can select the WIFI Printer option and connect to the available printer to print the invoice.

Note: The app supports WIFI printer connectivity for now. In case you want the Bluetooth printer connectivity, then it will be done by paid customization. For that you can connect with our team.

Counter

Under this section, the sales agent can check current amount in the drawer. The sales agent can close the drawer when they are for the day.

Customers

Under this section, the sales agent can check the list of all the customers created from the backend or using this mobile application.

The sales agent can see the name and email for each customer and can also search for the desired customer by typing the name in the search box.

Using the delete icon, the sales agent can also delete the customer if any such requirement raises up.

By clicking on the Add Customer icon on the top right corner, the customer can create a new customer and add it to the existing list.

The basic details required are Name, Email, and Address to create the new account as shown in the image below:

The Reset button in Point Of Sales gives the power to the POS user to refresh the app’s frontend. After clicking the reset button, the frontend will be refreshed while removing the product from the cart and the sales agent will be redirected to the order list page with an empty cart as shown in the right image below:

After resetting the app, cash drawer amount will again reach to the initially added amount by sales agent.

Account Information

Under the account information section, the sales agents will check the details of their own account. They can also reset their password.

Logout

By clicking on the logout option the sales agent will simply get logged out from the mobile application.

The sales agent will simply make the checkout process as shown in the process below. First of all the sales agent will add the products to the cart from the list of products as shown in the image below:

The subtotal will be visible in the floating bar as shown in the above image. Click on the button on which the subtotal is visible and it will redirect the sales agent to the cart page. Here the sales agent will see the list of specific products.

The sales agent can also apply the discount code and under that, the price details will be visible. Price details include the Subtotal, Discount, Tax, and Total amount. The discount can be applied using the coupon code and its details will be visible under price details.

Add Product Quantity

Meanwhile, the sales agent can also change the quantity of the product from, cart page by clicking on the quantity dropdown. Also, by clicking on the View More option the desired quantity can be added just by typing as shown in the images below:

Also, the sales agent can also sect the customer for the respective order by clicking on the customer option. The list is shown in the image below:

Further, the sales agent will process the payment by clicking on the CONFIRM AND ACCEPT PAYMENT button as shown in the image below. After that, the list of payment methods will be visible like Paypal, Stripe, etc.

After selecting the mode of payment, the sales agent will navigate to the Collect Cash page. There the sales agent will enter the received amount. The sales agent can also add the customer note for the order that will be visible with the order details.

Finally, after clicking on the DONE button, the order will be completed and the customer will navigate to the order success page.

An email is also sent to the customer for order details. The success page shows the Cash Collected, Order Total, and Change Due. The customer can also click on the Back To Home button for navigating to the home screen.

Eventually, when the order is complete, the sales agent can check the drawer amount that will be increased. Because the order amount will be added to the drawer amount. 

That’s all for the WooCommerce React Native POS Mobile App. If you have any queries or suggestions regarding the extension then you can get back to us at webkul.uvdesk.com.