Guide for WooCommerce POS Customer Kiosk Checkout

• The customers can view, select, and order the products themselves.
• The cart is updated in real time when adding and deleting products.
• The POS system can also be used by Guest users to order products.
• Customers can use different payment methods as enabled by the admin for purchases.
• The admin can enable coupons in the backend for the POS system so that customers can use them.
• The admin can create notices and display them on the POS screen.
• The plugin is enabled by PWA for efficient handling and fast performance.
• Customers can reset the cart and sign out from the POS system if it is enabled by the admin from the backend.
• The admin can choose the notification type, either push notification or toast notification.
• The admin can manage customer checkout payment options from the POS payment section.
• WooCommerce POS Customer Kiosk Checkout is now multisite compatible

The user will get a zip file which they have to upload in the “Add New” menu option in the WordPress admin panel.

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

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

Then click 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.

Post 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. Additionally, an option to activate the plugin.

Click on “Activate Plugin” to activate the installed plugin.

Know how to translate the module.

NOTE: To generate JSON from your translations, save your translation file in the default WordPress languages directory then run the following command in the same directory:

Note xx_YY refers to the locale (eg. en_US)
“`wp i18n make-json wc_pos-xx_YY.po –no-purge

The admin has to flush the permalink by navigating to Settings > Permalinks so that the links to the POS store work correctly.

After successfully installing the WooCommerce POS Customer Checkout plugin, the admin needs to configure the following,

Customer POS

They have to navigate to WooCommerce Point Of Sale > Customer POS.

Notice Templates: The admin can add new notices, edit them, and also delete them under this tab.
They can enable or disable the notices to display on the customer POS screen.

Bulk action is also available to mass Delete, Enable, or Disable the notices.
Search by Title functionality for filtering the notices based on titles.

Next, the admin needs to navigate to the Settings>Customer POS tab, under it, they’ll configure the following sections,

General

General Configurations

Customer POS Heading Login: The admin can set the heading that will be displayed on the login page.

Enable Guest Users for order via Customer POS: Using this option, the admin can allow or disallow guest users to order via the Customer POS.

Customer POS Panel Configurations

Customer POS Logo to POS screen header: The admin can enable or disable the customer POS logo for displaying on the POS screen header.

Coupon to Customer POS screen: The admin can enable or disable the option for customers to apply coupons on the POS system.

Reset Button to Customer POS screen: If enabled it will display a reset button on the main POS screen and it will also empty the cart.

SignOut Button to Customer POS screen: This setting when enabled will display a signout button on the POS screen and users can signout from the POS using it.

Modal Animation Configurations

Select Modal Entry Animation: There are several modal entry animations to choose from for the Customer POS screen such as Slide up, Slide from Top,.

Slide from backward, Slide Top forward, Swing in, Bounce, and None.

Select Modal Exit Animation: Similarly, there are several modal exit animations such as Slide down, Slide out top, Slide center, Slide top backward, Scale out, swing out, and None.

Order & Stock Configurations

Quantity For Low Stock Warning: A setting to set a quantity for displaying a low stock warning on the POS screen.

Choose Notification type: The admin selects the notification type to receive alerts for bookings created by customers. The available options are push notification and toast notification.

Note: The Customer POS inventory will work the same as the WooCommerce Point of Sale Inventory.

PWA

Web App Settings

• Name and Short Name: The admin can set the names and short names for the following fields that will be visible in the web application.
• Theme and Background color: The admin can even set the theme and background color of the application.

Media Settings

This section will contain the App Icon in different dimensions.
Note: A new updated manifest.json file is generated every time something is changed and the PWA setting is saved.

Payments

The WooCommerce POS Customer Checkout plugin comes with the Cash and Stripe payment method by default.

The Cash payment method is already present and Stripe can be installed by tapping on “Install Stripe” as shown in the image below,

After installation, the Stripe Payment method will be available for the admin to configure and enable or disable it as well for the customers to use on the POS.

Admin also has the option to edit the payment methods, the options provided in them are as follows,

Manage Payment options for the Customer Checkout end

Edit Payment

Payment Name: Enter the name of the payment method.

Slug for Payment: To set the slug of the payment method.

Payment Description: Text area to describe the payment method.

Outlet’s Payment: Options to assign the payment as Global or assign it to a particular outlet.

Payment Status: The admin can enable or disable the status of the payment method.

Additionally, The Stripe payment gateway has the below fields for its configuration,

Endpoint

The admin sets the Endpoint for the Customer POS on this tab. This endpoint determines where the complete UI is rendered.

Appearance

Customer POS UI: This will modify the customer UI appearance, offering two options: old style and new style.

The first page is the Customer Login Screen to access the customer POS. In it, credentials are input by the admin. The admin needs to enter the username and password.

Once Logged In, the POS system is ready for use by the customers. The front-end screen will be visible in which products and the cart will be displayed parallelly.

Functionalities

Customers will also view the product categories and search for products through the provided search bar.

On the right-hand side, the cart is displayed with real-time updates. Whenever a customer adds or deletes a product, it will be updated instantly.

There is a bell icon on top of the cart to view notices and offers. To empty the cart at once, there is a delete button available as well.

A Reset and Signout button is also visible on the left side of the POS system. Both buttons are enabled or disabled by the admin.

The customers can then click on the Proceed button to continue the checkout process.

Next, The customer will proceed to the cart for further processing. Here they will check their cart, edit product quantity, or delete them as well.

They can also enter coupon codes for discounts and add notes regarding their order.

Cart Section

If they want to view or add more products, they can click on Back to Home to go back. If they wish to proceed further for checkout, they’ll click on Proceed.

After clicking on Proceed, if the Guest User is enabled by the admin, then credentials are not asked. However if disabled, the customer will need to enter the credentials to proceed further.

They will enter the Customer Username and Email to log in. If the user doesn’t already exist then the POS system will create a new user with the credentials entered.

The customer will also select the mode of payment on the same checkout page. The admin enables or disables the payment methods from the backend.

Once the customer completes the above, they can tap on Proceed to Payment to make the payment or Back to Cart to return to the Cart.

The Cash and Stripe payment options are available by default in the plugin.

When the customer selects Cash and taps on Proceed to Payment, the order is complete. Further, it redirects them to the order details page, which displays the item(s) ordered along with the following.

• Order Number
• Order Date
• Payment Method
• Payment Status

If selecting Stripe, the customer will enter the details required to make the payment for the order.
Instead of redirecting to another page, the customer will fill in the card details on the same page.

After filling in the details, the customer will complete the payment by tapping on Pay.

POS User End – Flow

Admin can select the notification type.

Which includes two dropdown options: Toast Notification and Push Notification.

The image below illustrates this.

whenever the customer places an order then POS user gets a notification.

POS end

This is the POS interface that displays all the items which are visible on the customer screen.

View order

Clicking on the notification opens the “View Order” interface shown below.

Print invoice

Invoice for the ordered product.

Push Notification

Push notification indicates that the customer’s order has been received.

That’s all for the WooCommerce POS Customer Checkout plugin. If you have any queries or suggestions regarding the WooCommerce Extensions then you can get back to us through webkul.uvdesk.com.