WooCommerce React Native Cell App transforms your web site right into a native app for cellular gadgets, suitable with each iOS and Android.
This permits prospects to buy conveniently whereas on the transfer. It’s designed to be quick and straightforward to make use of.
The app offers actual time updates for orders, prospects, and merchandise. It includes a helpful search bar that helps customers discover merchandise rapidly.
Push notifications preserve customers up to date on vital info. Each visitor customers and people with accounts can store by way of the app.
For registered customers, there’s a dashboard accessible. They’ll view their account info, monitor orders, handle addresses, and entry downloads from the app.
You can even check out the WooCommerce Supply Boy App, which connects the admin and supply boys with options for monitoring and chatting.
- Transforms the WooCommerce retailer right into a cellular app utilizing React Native.
- Orders, prospects, and merchandise are up to date in actual time.
- Encompasses a search bar for locating merchandise simply.
- Features a notification space for countless push notifications.
- The class web page exhibits all of the classes accessible on the web site.
- Even visitor customers can store for merchandise by way of the app.
- Registered customers can log in utilizing their electronic mail or username.
- The My Account part within the app offers entry to the dashboard, together with choices to view addresses, orders, and account info.
Set up of WooCommerce React Native Cell App
The person will get a zipper file that he has to add within the “Add New” menu choice within the WordPress admin panel.
For this, login to WordPress Admin Panel then Below the Dashboard, hover your mouse over the “Plugins” menu choice which brings out a Sub-Menu then choose the “Add New” choice.
After this, you will note an choice on the highest of your web page that’s “Add Plugin”, Now clicks the choice to add the zip file.
By clicking on the “Add Plugin” choice, beneath that you will note a button “Select File” click on on the button to browse for the zip file as per the snapshot beneath.
After searching the file, click on the “Set up Now” button to put in the plugin as per the snapshot.
Now when the plugin is put in accurately, you will note the success message & an choice to activate the plugin.
Henceforth now, click on on “Activate Plugin” to activate the put in plugin.
After the plugin is put in efficiently, it’s seen beneath the Put in Plugins part as per the picture beneath,
To discover ways to translate the module, you possibly can click on right here.
Activate and Replace Plugin
Examine find out how to activate your WooCommerce plugin by way of the acquisition code and get updates on Webkul Modules straight on the Plugins web page.
The administrator can handle and configure the app from the backend with just some steps.
Utilizing the admin panel, they will oversee the house web page, refresh banner photos, set up featured merchandise and classes, and ship notifications.
Furthermore, the admin dashboard offers entry to admin permitting them to change varied settings.
Banners
Within the Banner Picture part, the admin can oversee or add new banner photos for the Mobikul WooCommerce React Native Cell App.
They’ll additionally deal with a number of photos directly, together with transferring them to the trash.
To edit an current picture, the admin merely must click on the edit button.
Now, by tapping on the Add Picture button the admin can add Banner Photos as proven within the picture beneath,
Right here, the admin might want to add the banner picture, handle the sorting of the banner, choose the kind of the banner, choose the product/class id standing of the banner picture.
To point out on the cellular app after which click on on save.
Carousels
WooCommerce React Native cellular app options carousels that showcase merchandise and classes.
Admin can simply view the checklist of carousels by clicking on the Carousel tab within the admin panel.
So as to add the brand new carousel the admin will click on on the Add Carousel button. After that, the next type will seem together with the title, kind, product/ class, and standing.
Lastly, the admin will put it aside to show it to the cellular utility.
Featured Merchandise
The admin can handle the featured product checklist from the admin panel and handle the featured product in bulk to maneuver the merchandise within the trash.
So, the admin also can click on on the edit button to edit the prevailing product and click on on the “Add Featured Product” button so as to add the extra featured product to the app.
Now after clicking on the Add Featured Product, the admin can add extra featured product as proven within the image-
Right here, the admin can Type the order of the product, choose the product from the Product title, and allow the standing of the featured product and click on on the save.
Featured Classes
From the admin panel, the admin can handle the Featured Class.
The admin can handle the prevailing featured class checklist or add the extra featured class from the dashboard as proven within the picture –
Right here, the admin can Type the order of the chosen featured class, choose the featured class based on the necessities, and allow or disable the standing of the chosen featured class.
Click on on save to indicate on the cellular app as proven within the picture below-
Notifications
The admin has the power to deal with notifications and also can create extra ones to ship to cellular gadgets through the app.
So, the admin can both handle the present notifications or hit the Add Notification button to incorporate extra.
Moreover, for each notification, there shall be choices to edit, delete, and ship them out.
The admin can ship a notification by urgent the Ship Notification Button for any explicit alert.
This motion will ship notifications to all prospects who’re utilizing the cellular app.
To boost the relevance and smoothness of the notification course of, Firebase Cloud Messaging is utilized on this context.
These notifications are meant for the admin to speak with customers by way of the cellular app.
Moreover, by deciding on Add Notification, the admin can enter the small print of the notification, as illustrated within the picture beneath.
Right here, the admin can-
- Add the picture for the notification
- Enter the title of the notification
- Enter the content material for the notification
- Choose the kind of the notification as product or class
- Choose the product/class id from the checklist
- Allow or disable the standing of the notification and click on on the Save button.
Homepage Configuration
The admin can configure the homepage settings by navigating by way of Mobikul>Dwelling web page configuration.
Admin can customise the app homepage as they need it to be exhibited to the shopper.
They’ll set the order of various sections to be displayed on the homepage in the way in which they need.
Stroll By way of Data
The admin can handle the Stroll By way of Data from the admin backend panel.
The admin can handle the prevailing one or add a brand new one by clicking on add stroll info as talked about beneath:
Right here the admin can add the Stroll By way of Picture, give a title title, add the outline, select the color code and set the standing to allow or disable as talked about within the beneath snapshot:
Exterior Hyperlinks
The admin can arrange Exterior Hyperlinks to regulate the CMS pages.
To do that, they only have to enter the Title of the CMS web page and the hyperlink the place the button will take customers when clicked.
Settings
The admin can entry the settings configuration by navigating by way of Mobikul>Settings, which offers many choices to vary the app brand and options.
App Icon Function
The admin can change the app icon by importing the picture of the icon as required.
Splash Picture
The admin can add the splash picture they need to show when the person opens the app.
Create Barcode Performance
The admin can simply create a barcode for a product by following these steps:
- Go to Product > All Merchandise.
- Choose the product for which the barcode must be created.
- Click on on Edit to open the product particulars.
The interface proven beneath will seem. Right here, the admin can enter the barcode quantity within the barcode particulars part for the chosen product.
Lastly, click on the Replace button to save lots of the modifications.
Splash Display screen
Mobikul WooCommerce React Native Cell App options an interactive and straightforward to make use of homepage. On the backside, there’s a navigation bar with sections for Dwelling, Class, Account, and Extra.
Admin has the power so as to add further sliders to the entrance web page, permitting prospects to view featured and new merchandise proper from the app’s homepage.
Moreover, the admin can personalize the homepage to fulfill their particular wants.
Dwelling Web page
WooCommerce React Native Cell App Dwelling Web page
Product Search
Clients can seek for their desired merchandise by way of the devoted Search bar offered within the app.
They’ll merely faucet on the Magnifier icon and begin typing to seek for the product of their alternative.
Notifications
Admin can add Notifications on the app from the admin backend which will be seen by the shoppers on the App.
A devoted Notification part is offered for a similar on the app.
Notifications
Classes
The Class web page permits prospects to view and seek for merchandise primarily based on Classes. They’ll faucet on a specific class which is able to then show the checklist of merchandise related to the class.
Class Web page
Account
Clients can view the dashboard and examine their account particulars from the Account part.
If a person will not be logged in, they’ll initially should Log in to entry the Account web page.
Product Web page
The Product Web page shows the all of the related info associated to the product listed on the shop.
Subsequently, prospects can view and purchase their desired merchandise from this web page.
Product Web page
Cart Web page
As soon as the shopper faucets on Add to Cart button on the product web page, they’ll navigate to the Cart Web page.
From right here, prospects can view, edit and replace their cart. They’ll additionally add coupon codes and proceed for checkout from this web page.
Cart Web page
Checkout Web page
After tapping on the Proceed button on the Cart, prospects are redirected to the Checkout web page.
They’ll add or edit their Billing and Delivery addresses together with deciding on the transport strategies.
Checkout Web page
Fee Methodology
To Pay for his or her orders, prospects faucet on the Proceed button on Checkout web page which redirects them to the Fee Methodology web page.
The fee strategies enabled by the admin seem right here for the shoppers to pay for his or her orders.
Fee Web page
Evaluation and Fee Web page
After deciding on the fee technique, prospects faucet on the Proceed button once more to overview their order particulars and make the fee by tapping on the Make Fee button.
Extra Part
The Extra Part within the App homes varied web site hyperlinks comparable to My Account, Store and Welcome. Utilizing it, prospects can examine their Account particulars in addition to the Store and Welcome sections.
To navigate to Extra part, prospects faucet on the Extra button within the backside bar.
Extra Part
So that’s all concerning the walkthrough of the WooCommerce React Native Cell App.
In case you have any extra queries, please drop us an electronic mail on [email protected] or create a ticket.
Present Product Model – 1.0.0
Supported Framework Model – WordPress 6.7.x, WooCommerce 9.7.x
WooCommerce React Native Cell App transforms your web site right into a native app for cellular gadgets, suitable with each iOS and Android.
This permits prospects to buy conveniently whereas on the transfer. It’s designed to be quick and straightforward to make use of.
The app offers actual time updates for orders, prospects, and merchandise. It includes a helpful search bar that helps customers discover merchandise rapidly.
Push notifications preserve customers up to date on vital info. Each visitor customers and people with accounts can store by way of the app.
For registered customers, there’s a dashboard accessible. They’ll view their account info, monitor orders, handle addresses, and entry downloads from the app.
You can even check out the WooCommerce Supply Boy App, which connects the admin and supply boys with options for monitoring and chatting.
- Transforms the WooCommerce retailer right into a cellular app utilizing React Native.
- Orders, prospects, and merchandise are up to date in actual time.
- Encompasses a search bar for locating merchandise simply.
- Features a notification space for countless push notifications.
- The class web page exhibits all of the classes accessible on the web site.
- Even visitor customers can store for merchandise by way of the app.
- Registered customers can log in utilizing their electronic mail or username.
- The My Account part within the app offers entry to the dashboard, together with choices to view addresses, orders, and account info.
Set up of WooCommerce React Native Cell App
The person will get a zipper file that he has to add within the “Add New” menu choice within the WordPress admin panel.
For this, login to WordPress Admin Panel then Below the Dashboard, hover your mouse over the “Plugins” menu choice which brings out a Sub-Menu then choose the “Add New” choice.
After this, you will note an choice on the highest of your web page that’s “Add Plugin”, Now clicks the choice to add the zip file.
By clicking on the “Add Plugin” choice, beneath that you will note a button “Select File” click on on the button to browse for the zip file as per the snapshot beneath.
After searching the file, click on the “Set up Now” button to put in the plugin as per the snapshot.
Now when the plugin is put in accurately, you will note the success message & an choice to activate the plugin.
Henceforth now, click on on “Activate Plugin” to activate the put in plugin.
After the plugin is put in efficiently, it’s seen beneath the Put in Plugins part as per the picture beneath,
To discover ways to translate the module, you possibly can click on right here.
Activate and Replace Plugin
Examine find out how to activate your WooCommerce plugin by way of the acquisition code and get updates on Webkul Modules straight on the Plugins web page.
The administrator can handle and configure the app from the backend with just some steps.
Utilizing the admin panel, they will oversee the house web page, refresh banner photos, set up featured merchandise and classes, and ship notifications.
Furthermore, the admin dashboard offers entry to admin permitting them to change varied settings.
Banners
Within the Banner Picture part, the admin can oversee or add new banner photos for the Mobikul WooCommerce React Native Cell App.
They’ll additionally deal with a number of photos directly, together with transferring them to the trash.
To edit an current picture, the admin merely must click on the edit button.
Now, by tapping on the Add Picture button the admin can add Banner Photos as proven within the picture beneath,
Right here, the admin might want to add the banner picture, handle the sorting of the banner, choose the kind of the banner, choose the product/class id standing of the banner picture.
To point out on the cellular app after which click on on save.
Carousels
WooCommerce React Native cellular app options carousels that showcase merchandise and classes.
Admin can simply view the checklist of carousels by clicking on the Carousel tab within the admin panel.
So as to add the brand new carousel the admin will click on on the Add Carousel button. After that, the next type will seem together with the title, kind, product/ class, and standing.
Lastly, the admin will put it aside to show it to the cellular utility.
Featured Merchandise
The admin can handle the featured product checklist from the admin panel and handle the featured product in bulk to maneuver the merchandise within the trash.
So, the admin also can click on on the edit button to edit the prevailing product and click on on the “Add Featured Product” button so as to add the extra featured product to the app.
Now after clicking on the Add Featured Product, the admin can add extra featured product as proven within the image-
Right here, the admin can Type the order of the product, choose the product from the Product title, and allow the standing of the featured product and click on on the save.
Featured Classes
From the admin panel, the admin can handle the Featured Class.
The admin can handle the prevailing featured class checklist or add the extra featured class from the dashboard as proven within the picture –
Right here, the admin can Type the order of the chosen featured class, choose the featured class based on the necessities, and allow or disable the standing of the chosen featured class.
Click on on save to indicate on the cellular app as proven within the picture below-
Notifications
The admin has the power to deal with notifications and also can create extra ones to ship to cellular gadgets through the app.
So, the admin can both handle the present notifications or hit the Add Notification button to incorporate extra.
Moreover, for each notification, there shall be choices to edit, delete, and ship them out.
The admin can ship a notification by urgent the Ship Notification Button for any explicit alert.
This motion will ship notifications to all prospects who’re utilizing the cellular app.
To boost the relevance and smoothness of the notification course of, Firebase Cloud Messaging is utilized on this context.
These notifications are meant for the admin to speak with customers by way of the cellular app.
Moreover, by deciding on Add Notification, the admin can enter the small print of the notification, as illustrated within the picture beneath.
Right here, the admin can-
- Add the picture for the notification
- Enter the title of the notification
- Enter the content material for the notification
- Choose the kind of the notification as product or class
- Choose the product/class id from the checklist
- Allow or disable the standing of the notification and click on on the Save button.
Homepage Configuration
The admin can configure the homepage settings by navigating by way of Mobikul>Dwelling web page configuration.
Admin can customise the app homepage as they need it to be exhibited to the shopper.
They’ll set the order of various sections to be displayed on the homepage in the way in which they need.
Stroll By way of Data
The admin can handle the Stroll By way of Data from the admin backend panel.
The admin can handle the prevailing one or add a brand new one by clicking on add stroll info as talked about beneath:
Right here the admin can add the Stroll By way of Picture, give a title title, add the outline, select the color code and set the standing to allow or disable as talked about within the beneath snapshot:
Exterior Hyperlinks
The admin can arrange Exterior Hyperlinks to regulate the CMS pages.
To do that, they only have to enter the Title of the CMS web page and the hyperlink the place the button will take customers when clicked.
Settings
The admin can entry the settings configuration by navigating by way of Mobikul>Settings, which offers many choices to vary the app brand and options.
App Icon Function
The admin can change the app icon by importing the picture of the icon as required.
Splash Picture
The admin can add the splash picture they need to show when the person opens the app.
Create Barcode Performance
The admin can simply create a barcode for a product by following these steps:
- Go to Product > All Merchandise.
- Choose the product for which the barcode must be created.
- Click on on Edit to open the product particulars.
The interface proven beneath will seem. Right here, the admin can enter the barcode quantity within the barcode particulars part for the chosen product.
Lastly, click on the Replace button to save lots of the modifications.
Splash Display screen
Mobikul WooCommerce React Native Cell App options an interactive and straightforward to make use of homepage. On the backside, there’s a navigation bar with sections for Dwelling, Class, Account, and Extra.
Admin has the power so as to add further sliders to the entrance web page, permitting prospects to view featured and new merchandise proper from the app’s homepage.
Moreover, the admin can personalize the homepage to fulfill their particular wants.
Dwelling Web page
WooCommerce React Native Cell App Dwelling Web page
Product Search
Clients can seek for their desired merchandise by way of the devoted Search bar offered within the app.
They’ll merely faucet on the Magnifier icon and begin typing to seek for the product of their alternative.
Notifications
Admin can add Notifications on the app from the admin backend which will be seen by the shoppers on the App.
A devoted Notification part is offered for a similar on the app.
Notifications
Classes
The Class web page permits prospects to view and seek for merchandise primarily based on Classes. They’ll faucet on a specific class which is able to then show the checklist of merchandise related to the class.
Class Web page
Account
Clients can view the dashboard and examine their account particulars from the Account part.
If a person will not be logged in, they’ll initially should Log in to entry the Account web page.
Product Web page
The Product Web page shows the all of the related info associated to the product listed on the shop.
Subsequently, prospects can view and purchase their desired merchandise from this web page.
Product Web page
Cart Web page
As soon as the shopper faucets on Add to Cart button on the product web page, they’ll navigate to the Cart Web page.
From right here, prospects can view, edit and replace their cart. They’ll additionally add coupon codes and proceed for checkout from this web page.
Cart Web page
Checkout Web page
After tapping on the Proceed button on the Cart, prospects are redirected to the Checkout web page.
They’ll add or edit their Billing and Delivery addresses together with deciding on the transport strategies.
Checkout Web page
Fee Methodology
To Pay for his or her orders, prospects faucet on the Proceed button on Checkout web page which redirects them to the Fee Methodology web page.
The fee strategies enabled by the admin seem right here for the shoppers to pay for his or her orders.
Fee Web page
Evaluation and Fee Web page
After deciding on the fee technique, prospects faucet on the Proceed button once more to overview their order particulars and make the fee by tapping on the Make Fee button.
Extra Part
The Extra Part within the App homes varied web site hyperlinks comparable to My Account, Store and Welcome. Utilizing it, prospects can examine their Account particulars in addition to the Store and Welcome sections.
To navigate to Extra part, prospects faucet on the Extra button within the backside bar.
Extra Part
So that’s all concerning the walkthrough of the WooCommerce React Native Cell App.
In case you have any extra queries, please drop us an electronic mail on [email protected] or create a ticket.
Present Product Model – 1.0.0
Supported Framework Model – WordPress 6.7.x, WooCommerce 9.7.x
