Guide for WooCommerce POS QR Code Ordering System

WooCommerce POS QR Code Ordering System allows customers to book orders by scanning QR on the restaurant table.

The vendor will receive the order based on the table number, accept it, and serve the order directly to the customer’s table.

Note:

• First, user must install the WooCommerce Point of Sales and WooCommerce Restaurant Point of Sales module.
• WooCommerce POS QR Code Ordering System is the add-on for WooCommerce Restaurant Point of Sales.
• This module is compatible with WooCommerce’s new High Performance Order Storage (HPOS) feature.
• Customer QR inventory will work the same as WooCommerce Point of Sale Inventory.

• The admin can design and set up the QR code template.
• The admin also has the option to configure modal animations.
• In POS, the admin can establish a limit on product quantities to show when items are low in stock.
• The admin can set up the QR code for tables in the restaurant as well.
• The admin has the power to enable or disable the coupon feature on the customer POS screen.
• For the customer’s POS screen, the admin can turn on the reset button.
• The admin can also add a logo to the header of the POS display.
• The admin can choose the type of notification, either toast or push.
• WooCommerce POS QR Code Ordering System is not multisite compatible.

The user will get a zip file for the WooCommerce POS Paypal Reader Native SDK that needs to be uploaded in the “Add New” menu option in the WordPress admin panel.

For this login to WordPress Admin Panel and in the Dashboard hover your mouse over the “Plugins” menu option and select the “Add New” option.

After this, the user will see an option on the top of the page that is “Upload Plugin”, click the option to upload the zip file.

On clicking the “Upload Plugin” option, the user will see a “Choose File” button. Click on the button to browse for the zip file as per the image below.

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

Once the user installs the plugin, a message “Plugin installed successfully” displays, and an “Activate Plugin” is visible to activate the plugin.

Therefore, the user can click on the “Activate Plugin” button to activate the plugin.

Check how to activate your WooCommerce plugin through the purchase code.

Check the steps for module updates on the WooCommerce plugin page.

You can check more about WooCommerce plugin translation.

Once the module installation is complete, the admin will set up the WooCommerce POS QR Code Ordering System.

Restaurant POS Settings

Now, the admin can navigate from Restaurant POS > Settings > Customer QR. After that, the admin can configure the general setting.

General Configuration

• Enable Guest Users to order via Customer POS: Allows users to place orders without personal information, treating them as the default POS customers.

Customer POS Panel Configuration

• Enable Customer POS Logo to POS screen header: Admin can allow a logo to appear on the customer’s POS screen by enabling the option.
• Enable Coupon to Customer POS screen: Admin allows customers to apply coupons directly on the POS screen with the enable option.
• Enable Reset Button to Customer POS screen: Admin can enable a reset option for customers to clear all POS data.
• Choose Notification Type: Admin can choose toast or push notifications for order alerts.

Modal Animation Configuration

• Select Modal Entry Animation: The admin can select the start animation modal over the customer POS screen.
• Select Modal Exit Animation: Select exit animation for modal over the customer POS screen.

Order & Stock Configuration

• Quantity For Low Stock Warning: Admin can fill customer POS product quantity for showing low stock warning.

PWA

Once the general setting is complete, the admin can continue with the PWA setting.

Web APP Settings

• Name: Admin can enter the name for the Customer POS Progressive Web App.
• Short Name: The admin can enter a short name for the Customer POS Progressive Web App.
• Theme Color: The admin can select a theme color for the Customer POS Progressive Web App.
• Background Color: The admin can select the background color for the Customer POS Progressive Web App.

Media Settings

The admin can upload the app icon in various sizes, as specified by the required dimensions.

• App Icon (48×48)
• App Icon (96×96)
• App Icon (144×144)
• App Icon (196×196)

Payments

After that, the admin can configure payment settings in the Restaurant POS. First, install the Stripe payment gateway.

After successfully installing Stripe, it will appear as a payment option in the Customer POS Payments.

After that, the admin can set the payment information for the restaurant POS.

• Payment Name: The admin can enter the payment name.
• Payment Slug: The admin can enter the payment slug.
• Payment Description: The admin can payment description.
• Payment Outlet: Admin can select the payment outlet.
• Payment Status: The admin can select the payment status for the payment.

Therefore, the admin can update the payment and proceed with further steps.

Also, the admin can now add, edit, delete, or disable payments as needed.

When the admin clicks “Edit” on the payment settings, they can update the necessary details and then save the changes to apply the updates.

QR template

Now, the admin can set up the template for the QR. First, the admin will start with the general configuration.

In the general configuration, the admin can set the template by selecting elements. Admin changes the logo and text of the QR code.

When the admin clicks the QR logo then IMG Element Properties will open. Then it allows the admin to change the logo properties accordingly.

When the admin clicks on the QR text, the DIV Element Properties will open, allowing the admin to adjust the logo properties as needed.

After that, the admin can set the QR code setting by editing the QR.

After clicking on Edit QR, the QR Code Properties will open, allowing the admin to modify the settings as needed.

Lastly, the admin can set up the QR page with page width and page height.

Once all settings are configured by the admin. After that, the admin can preview the QR code before saving it.

Then, the admin can proceed to save the template.

Customer QR

Now, the admin can set the customer POS Endpoint where the complete UI will render.

Restaurant POS outlet

Once restaurant POS settings are completed. Then, the admin can navigate to the Restaurant POS > Outlet.

After that, the admin can view the outlet list.

Now, the admin can add, import, edit, or manage the existing outlet available in the list.

When the admin starts managing the outlet, the admin can add an outlet for the POS user :

• Outlet Name: Admin can enter the restaurant POS outlet name.
• Outlet Address: Admin provides the address of the outlet.
• Select Status: Admin can choose the outlet’s operational status (e.g., active, deactive).
• Outlet City: Admin can enter the city where the outlet is located
• Outlet Postcode: Admin can fill outlet postal code for the address.
• Select Invoice Template: Admin can choose the template to be used for invoicing.
• Additional Payment Option: Admin can add any extra payment options available at the outlet.
• Outlet Country: Admin can select the country where the outlet is based.
• Outlet State: Admin can select the state or region of the outlet’s location.

Once all details are filled in all the outlet details, the admin can save or update the outlet.

After that, the admin can proceed with managing the product.

After that, the admin can view the table QR and print the QR to attach to the customer table.

Firstly, the admin can print the QR code and place it on the customer table.

After that, customers can scan the code and proceed with order booking. Then, the product list will be visible to the customer on the customer product screen.

Now, customers can select the product and proceed to add products to the cart.

After that, customers can apply the coupon and note to the POS user.

Then, the customer can select the payment to proceed further.

After that, customer can select the payment method and click “Proceed to Payment“. Then, the order starts to be prepared and created.

Once the order is preparation begins and created for the payment. Then, the customer can enter their payment details to complete the payment.

After that, customers can place an order.

After that, the customer will receive order completion details directly on their mobile screen.

Additionally, customers can view completed orders by tapping the icon at the top right corner of the Customer Product Screen.

Push notification

Now, the POS user receives order information through a push notification on their screen.

Toast notification

The POS user now receives order confirmation via a toast notification on their screen.

That’s all for the WooCommerce POS QR Code Ordering System.

For technical assistance, please raise a ticket or contact us via email at support@webkul.com.

For any queries or custom development needs, connect with our WooCommerce POS Development Services.

To explore more features and enhance your online store, visit our range of WooCommerce plugins.