Select Page

User Guide for WooCommerce POS Customer Checkout

satyam.pandey545
Published: March 21, 2024

WooCommerce POS Customer Checkout allows the customers to use the POS system themselves. They can use it to view, order products, and complete the checkout.

This Plugin reduces the hassle for customers to go to POS agents. This, in turn, increases the accessibility for customers in the ordering process.

Note: The Point of Sale System for WooCommerce is required to be installed before using the WooCommerce POS Customer Checkout plugin.

The WooCommerce POS Customer Checkout plugin is also compatible with WooCommerce’s new High-Performance Order Storage(HPOS) feature.

  • 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 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.

Add new

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.

Upload plugin

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.

choose file

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

Install now

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.

Activate 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.

permalink

Admin Configuration – Customer POS

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.
Note: The Customer POS inventory will work the same as the WooCommerce Point of Sale Inventory.

general settings

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.

PWA settings

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,

install stripe

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.

stripe installed

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

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.

edit payment

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

stripe configuration

Endpoint

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

endpoint configuration

Customer POS Screen – Flow

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.

customer login screen

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.

customer POS screen

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.

cart screen

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.

customer details

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.

choose payment method

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
order processing

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.

stripe payment

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

Current Product Version – 1.0.0

Supported Framework Version – WordPress-6.4.3 WooCommerce-8.6.1 WooCommerce POS-5.1.0

Source: webkul.com