WebPOS – WooCommerce POS – Point of Sale

Support Purchase

You are selling your products in your physical retail store, you would like to offer your products on any modern web browsers, then manage products, orders, and customers seamlessly, selling based on Point of Sale interface will be an disregard choice.

WebPOS – WooCommerce POS – Point of Sale is a helpful tool for placing orders at the store using the WebPOS interface. WebPOS – WooCommerce POS – Point of Sale helps systematize product information (product types, price, stock, barcode…) and manage your products, orders, and customers seamlessly through the synchronization system. WebPOS – WooCommerce POS – Point of Sale promises to bring a huge advantage for shop retailers, food and drink, and more…

 

PLUGIN’S FEATURES

Place order on the POS system

• Proceed multiple bills for multiple customers at once.
• Support shortcuts that help the cashier to manipulate quickly.
• Support for all types of barcode scanners.
• Add products by Barcode Scanning or search by name or SKU or barcode
• Support simple and variable products.
• Add custom products.
• Change product quantity.
• Switch among variations of a selected variable product on the cart.
• Add/remove items in the cart.
• Change the item price.
• Order note/ item note.
• Search customers by name, email, phone number and assign the customer for the current order.
• Add new customers and assign the customer for the bill
• Add/remove cart discount (Percentage or fixed amount) and WooCommerce existing coupon.
• Set maximum applied coupons for order on the backend.
• The Settings layout options allow you to choose which parts on the POS page will be hidden or shown.There are 8 options for you to toggle a part to be appeared or hidden: Shipping information, Cart subtotal field, Tax field, Suggested amount, Order number of cart items, Cart item stock, Cart item price, Cart item subtotal.

Support Progressive Web Apps

• Working with offline mode using the Progressive Web Apps.
• Automatically sync the offline orders to online.

Payment on the POS system

• Allow customers to use more than one payment method to pay for the same order.
• Control checkout payment methods, check out with default or extended woocommerce gateways.
• Print order receipts automatically after checkout.

Order and customer management 

• View the POS orders, update or refund the orders on the POS page.
• Print the receipt for each order.
• Set a fixed status for the orders created from WooCommerce POS.
• Send order emails to the customers.
• Display the POS order receipt in WooCommerce order emails.
• Control the order statuses that the cashier can edit.
• View, add, edit customers on the POS page.

Today’s transaction

• Observe a list of transactions created today.
• Add new transactions.
• The search box to find today’s transaction. Search a transaction by Transaction ID, Order  ID, Payment Method, Note.
• Transaction information includes Transaction ID, Order ID, Cash inflow, Cash outflow, Payment method, Transaction note, date.

Barcode management

• General settings for the product barcode.
• Design the product barcode.
• Print preview.
• Print the product barcode. Print the barcode for an individual product, some selected products or all products.

Receipt management

• Support multiple receipts
• Settings for customizing the receipt layout and contents.
• Settings for the order item details and the order total section of the receipt.
• Receipt print preview.

Report

• Record the POS transaction history and make statistics in the reports section. This report section will give you a panic picture of revenue figured at a certain time.
• The reports give information about cashier statistics, and the order total they earn on a range of certain days.

Multiple outlets

• Support outlets point of sale for Restaurants/Groceries
• Easy to switch among outlets on POS front end
• Manage outlets: Add/edit/remove outlets.
• Manage outlet stocks: Add and change the stocks for each outlet for both simple and variable products.
• Manage outlet’s information: Name, cashiers, receipt outlets, outlet’s address, phone and mail.
• Support tables for restaurants and cafe:
  • Add unlimited tables
  • Clone table, duplicate the above table row
  • Change the table status, enable or disable
  • Name for the table
  • Assign the number of table seats
  • Add a table description
  • Remove tables
• Friendly interface to manage table statuses: Available, Busy, Disable.

Additional features

• Add a custom endpoint in the POS page URL.
• Accept to run POS system limited on some trust IPs using the Whitelist IP feature.
• Automatically update the POS page with online data each time.
• Support RTL and  responsive.
• Support RTL for receipt.
• Sequential invoice number.
• Options to set required/optional fields when adding a new customer
• Add shipping information for POS orders
• Tax calculation based on a address: Shop base address, outlet address, order shipping address, customer billing address, or customer shipping address.
• Custom CSS for Receipt

Required:

1. WordPress 5.0+
2. PHP 7.0+
3. WooCommerce 7.0+

 

Download plugin

Get the plugin installation package from your account download page and save it to your desktop.

 

Install & Active plugin

Go to Plugins/ Add New/ Upload Plugin/ Choose file/ Select webpos-woocommerce-pos-point-of-sale.zip / click “Install Now“/ click “Active plugin”.

 

You can see this video on how to install and use the plugin:

After downloading and installing the plugin. You will follow these below steps to opera the web pos system.

Step 1: Go to WebPOS > Settings >General, enable to activate the plugin.

 

Step 2: Go to the POS page on the front end.

 

Step 3: Add Cashier accounts to allow the cashiers to make POS transactions.

Go to Dashboard > Users > Add New. Enter the cashier’s information and select the role “cashier”. Finally, Add New user.

 

 

Step 4: Login using the newly created cashier account.

On My account page, the cashier can go to the POS page if she is already logged in. Go to My account > Visit POS.

Step 5: After logging in with the cashier account, now the cashier is ready to make POS transactions on the POS system.

 

Settings

In the Settings, you will set up the general configurations of Products,  Customers, Orders, and Payments on the WooCommerce POS page.

A. General configuration 

Go to WebPOS > Settings > General,  enable to use of the plugin.

 

1. Enable to activate all plugin functions.
2. Add a custom endpoint in the POS page URL: You can flexibly edit the endpoint in the POS page URL by the text you want.
3. Tax: Enable to use WooCommerce tax rates and calculations
4. Calculate tax based on: You can choose to calculate tax based on one of the addresses: Shop base address, outlet address, order shipping address, customer billing address, or customer shipping address.
5. Whitelist IP:  You will accept to run POS system limitedly on some trust IPs, just add these IPs and separate them by “,”
6. Auto sync POS bill: Unpaid orders in the POS appear as bills in the ‘Point of Sale’ tab. To save them to the server or display them on other devices, activate this option
7. Auto sync time: Automatically update the POS page with online data each time. Set 0 to disable data auto-sync.
8. Default template: You can create as many receipt templates as you want in the Receipt section and select one template as the default in the Default template field
9. Receipt direction: support both Left to Right and Right to Left
10. Select template to print: Enable or disable this option to allow the cashier to select a receipt templat before checkout. You can follow this guide steps.

 

B. Product configuration 

Go to WebPOS > Settings > Products

1. Use SKU instead of barcode: If enable this option, the product barcode will be automatically assigned as the product SKU, so you will not need to enter a value for the barcode.
2. Use product meta instead of barcode: Override the product barcode with another field by entering the metafield key. Leave blank to not set.
3. Allow the cashier to add custom product to the cart:  In case, new products have not been updated to the store, cashiers can add new custom products to the cart.
4. Allow the cashier to update variation to the cart: The cashier can alter a new variation for the selected variation.
5. Allow the cashier to change the product price: The cashier can update the product price directly on the POS page if she is allowed.
6. The cashier can change the product price: Determine which cashiers have access to update the product price on the POS page.

 

C. Order configuration

Go to WebPOS > Settings > Orders

1. Sequential invoice numbering: You can use a custom order number to print receipts in a sequential order. This option is only applicable to the new order.
2. Custom order number:
3. Set maximum applied coupons: Coupons can be applied on POS orders. You can limit the number of coupons that can be applied per order.
4. Order status: Pick a default status for orders which is created on POS page
5. Send orders email: How the order emails are sent after POS order is placed
   • None: Emails are not sent
   • Woo default: Emails are sent based on settings in WooCommerce >> Settings >> Emails
   • Only send to admin: Only sends admin emails in the WooCommerce Emails settings
   • Only send to customer: Only sends customer emails in the WooCommerce Emails settings
6. Show receipt in email: Allow the display of the POS order receipt in WooCommerce email orders. To use this feature, you must install the WooCommerce Email Template Customizer plugin, just follow this guide.
7. Show orders on POS page: Show the orders that were created on specific days. To display all orders, leave the field blank.
8. Allow the cashier to update orders: Cashier can up order info
9. The cashier can update orders: Assign the cashiers who are allowed to update the orders.
10. Order status can edit: The status of POS orders that the cashier can change.
11. Order search fields: Select fields used to search an existing POS order.

D. Customers configuration

Go to WebPOS > Settings > Customers

1. Mandatory fields: Select which fields are mandatory when adding a new customer.
2. Customer search fields: Select fields used to search and add an existing customer for the POS order.
3. Update customer: The customer information on the POS page can be changed by the cashiers if you allow it
4. The cashier can update customer: Select certain cashier who can update customer’s info

 

 

E. Payment configuration

Go to WebPOS > Settings > Payments: 

• Allow customer to pay in multiple payment methods: Allow customers to use more than one payment method to pay for the same order.
• Payment: Select payment methods for WebPOS orders in available WooCommerce payment methods. Apart from these payment methods,  Cash will always be accepted at the POS store.

 

 

Product Barcode

Each product will be identified by a barcode. Product barcodes are unique, they are generated under certain standards such as Code 128, Code 38, EAN 13, UPC.

In the Product Barcode section, you can configure options on how the product barcode is displayed, and the print barcode function.

• Print barcode function and preview barcode appearance.
• Design the barcode under a certain standard: Code 128, Code 38, EAN 13, UPC, customize the barcode’s layout and style, a custom CSS section to design the barcode personally.

After the designed barcodes of the products are printed out, you will label them on each product. The cashier will sweep the barcode on the products by a barcode scanner to make WooCommerce POS transactions.

A. General settings for the product barcode

Go to WebPOS > Product Barcode to configure the barcode of products.

 

1. Enable print barcode: Enable the barcode print function.
2. Use the barcode of the parent product: If variation products have no barcode, use the barcode of the parent product instead.
3. Product preview: Get a product to preview its barcode.
4. Barcode preview: Observe what the barcode looks like visually.

B. Design the product barcode

1. Barcode type: Select a barcode standard to apply: Code 128, Code 38, EAN 13, UPC.
2. Page width: Adjust the width of the barcode page.
3. Numbers of barcodes to preview 
4. Numbers of barcodes on one row
5. Barcode margin: Adjust the barcode margin.
6. Barcode content: Customize the barcode contents using available shortcodes.

   {product_name} – Product name

   {barcode_image} – Product barcode image

   {barcode} – Product barcode

   {price_html} – Price html

   {regular_price} – Regular price

   {sale_price} – Sale price. Use regular price if no sale price

   {width} – Product width

   {height} – Product height

   {length} – Product length

   {weight} – Product weight

7. Custom CSS: Personalize the barcode design.

 

C. Print sample and print the product barcodes

1. Print sample: Print a sample of the selected preview product

2. Print Barcode: Click on the Print Barcode, you will be redirected to the product editing list page where you can bulk print the barcode of a product, some assigned products or all products.

2.1. Print the barcode of an individual product: Click on the icon on each product to print that product barcode. With the variable products, it is able to print the barcode of all variations or each variation.

2.2. Bulk print the barcode of some selected products or all products.If the barcodes of variable products are in the print list, print the parent product’s barcode only.

 

 

 

 

Receipt Template Configuration

Go to the Receipt section to configure receipts for the POS transactions. There are 3 types of receipt to build and you can add new receipt template as per your needs.

• POS receipt
• Kitchen receipt
• Order item receipt

There are 3 default templates which can’t be removed. These templates will work in case you have no other template. But you can add your own and deactivate the default ones. We’ll learn about them right below. Each template editing page has preview template right next to the options.

 

POS RECEIPT

This is the receipt the cashier prints when an order placed successfully and the payment is done.

Note 1: In the General settings, there is an option to allow the cashier to select a receipt template before checkout.

Note 2: To allow the cashier to print a receipt template before checkout:

• Step 1: Go to Settings > General, enable the Select template to print option.
• Step 2: On the POS front end page, disable the Auto-print receipt after checkout
• Step 3: Once clicking on the Checkout for an order, a Print receipt popup appears and lets the cashier choose a receipt template to print for that order.

a. General settings for the POS order receipt

Go to WebPOS > Receipt > General 

1. Activate: Enable/Disable the template
2. Receipt name: Fill in the name for this template
3. Direction: Support Left to Right and Right to Left.
4. Enable logo: Add a logo to your receipt
5. Logo: You are able to select an image to be your receipt logo if you enabled option Logo above.
6. Logo position: Set the position for the logo icon on the receipt: Left, right or center.
7. Logo width: Change the width of the logo.
8. Logo border radius: Change the border radius of the logo
9. Page width: Adjust the width of the receipt page
10. Page margin: Adjust the margin of the receipt page.
11. Contact Information: Add your address of the point of sale. You can use available shortcodes about the shop’s contact information.

    • {site_title} – Site Title

    • {address_1} – Address line 1

    • {address_2} – Address line 2

    • {city} – City

    • {state} – State

    • {country} – Country

    • {phone} – Phone

    • {email} – Email

12. Bill Title: Name for the title of the receipt.
13. Bill title font size: Adjust the font size of the bill title.
14. Bill font size: Change the font size of the entire bill.
15. Footer message: The message you leave at the footer of the receipt.
    • You can add shortcodes in this footer area, and print the receipt footer including the shortcode, you can use {order_id} for the id order parameter in the shortcode.
16. Order info column: Column the order info on the bill, it can be set to 1 or 2 columns
17. Enable order date create: Add the order created date to the receipt
    • Order date create label: Edit the label
18. Enable order number: Add the order number to the receipt
    • Order number label: Edit the label
19. Enable cashier: Enable to display of the cashier’s name on the receipt.
    • Cashier label: Change the cashier label displayed on the receipt.
20. Enable customer: Enable to display customer’s name on the receipt.
    • Customer label: Edit the label
    • Customer information
      • Email
      • Full name
      • First name
      • Last name
      • Company
      • Company or Full name
21. Enable customer phone: Enable to display customer’s phone number on the receipt.
    • Customer phone label: Change the customer phone number label displayed on the receipt.
22. Enable customer address: Change the customer address label display on the receipt.
    • Customer address label: Edit the label
    • Customer address: Enable to display customer’s address on the receipt. You can use available shortcodes about the customer address:

      • {address_line_1} – Address line 1

      • {address_line_2} – Address line 2

      • {city} – City

      • {state} – State

      • {country} – Country

23. Custom CSS: Design the receipt as your desire

b. Order item details on the receipt

Go to WebPOS > Receipt > Order item details.

1. Template of items field: Choose a style of how the items field displays on the receipt. They can be flat or block style.
   
2. Enable product note: Enable to display the product note on the receipt.
   • Product note label: The title of the product note on the receipt.
3. Product ID: Enable to display of product ID on the receipt.
   • Product ID label: Edit the label
4. Product SKU: Enable to show product SKU on the receipt
   • Product SKU label: Edit the label
5. Product price: Enable to display of product price on the receipt.
   • Product price label: Change the product price label displayed on the receipt.
6. Product Quantity: Enable to display of product quantity on the receipt.
   • Product quantity label: Edit the label
7. Product subtotal: Enable to display of product subtotal on the receipt.
   • Product subtotal label: Change the product subtotal label displayed on the receipt.
8. Product label: Change the column title on the receipt.
9. Enable product variation: Enable or disable to display or hide the variations of the variable products on the receipt.
10. Limit in product name: The maximum number of characters allowed in the product title.

 

c. Order total on the receipt

Go to WebPOS > Receipt > Order total.

1. Enable order note: Enable to display the order note on the receipt.
   • Order note label: The title of the order note on the receipt.
2. Order total tax: Enable to display the order total tax on the receipt.
   • Total tax label: Change the order total tax label displayed on the receipt.
3. Enable order shipping: Enable to display the order shipping on the receipt.
   • Shipping label: Change the shipping label displayed on the receipt.
4. Order coupon: This is an existing WooCommerce coupon, enable to display this type of coupon on the receipt.
   • Coupon label: Change the coupon label displayed on the receipt.
5. Order POS discount: This type of discount is generated directly for a POS order by the plugin, enabling to display of this type of discount on the receipt.
   • POS discount label: Change the POS discount label displayed on the receipt.
6. Display the paid: Enable to display the paid amount of the customer on the receipt.
   • Paid label: Change the paid label displayed on the receipt.
7. Display the change: Enable to display the change on the receipt.
   • Change label: Edit the change label displayed on the receipt
8. Order total: Enable to display the order total on the receipt.
   • Order total label: Change the order total label displayed on the receipt.

 

KITCHEN RECEIPT

This is the kitchen bill that the cashier/waiting staff sends to the kitchen so the chefs prepare the order

1. Activate: Toggle the option to enable or disable this template
2. Receipt name: Edit the receipt template name
3. Direction: Choose the template direction as either right-to-left (RTL) or left-to-right (LTR). This works independently from the site language – You can make the receipt template RTL even when your site language is LTR and vice versa
4. Page width: Adjust the width of the receipt page
5. Page margin: Adjust the margin of the receipt page
6. Bill title: Specify the title to be displayed on the receipt
7. Bill title font size: Adjust the font size of the bill title
8. Bill font size: Change the font size specifically for the bill title
9. Eat-in label: Edit the label for eat-in note
10. Takeaway label: Edit the label for takeaway note
11. Enable order date create: Enable this option to add the order created date to the receipt
12. Order date create label: Edit the label for order created date if you’ve enabled the option above
13. Enable cashier: Enable to display of the cashier’s name on the receipt
14. Cashier label: Change the cashier label displayed on the receipt if you’ve enabled the option above
15. Product label: Label for the product title column
16. Product label: Label for the quantity column
17. Footer message: Add a custom message in footer
18. Custom css: Add custom CSS to design the template to your needs

 

ORDER ITEM RECEIPT 

This is the product decal which contains general info of the product

1. Activate: Enable/Disable this template
2. Receipt name: Edit the receipt template name
3. Direction: Choose the template direction as either right-to-left (RTL) or left-to-right (LTR). This works independently from the site language – You can make the receipt template RTL even when your site language is LTR and vice versa
4. Page width: Adjust the width of the receipt page to your desired dimension
5. Page margin: Adjust the margin of the receipt page as per your needs
6. Bill title: Edit the title to display in the decal
7. Takeaway label: Edit label indicating takeaway items
8. Bill title font size: Adjust the font size of the bill title
9. Bill font size: Change the font size of the entire bill
10. Product price label: Label for product price
11. Enable order date: Add the order date to the receipt
12. Footer message: Add a custom message in the footer
13. Custom css: Add custom CSS to design the template to your needs

 

 

 

 

Reports

WebPOS – WooCommerce POS – Point of Sale recorded the POS transaction history and make statistics in the reports section. This report section will give you a panic picture of revenue figured on today, yesterday, 30 days, 90 days, a year, or a certain time.

The reports give information about cashier/outlet/payment statistics, and the order total they earn in a range of certain days.

Go to WebPOS > Reports

Order value at a certain time

Number of orders , order total by cashier at a certain time

 

Click “Print” to print report

Managing Outlets in Backend

Before we go to the detailed instruction of Outlets, we’ll learn how to enter an outlet POS page. You can go to an outlet POS page from frontend, as instructed in this documentation. Alternatively, you can do the same on the backend using the shortcut “Visit POS” or “Kitchen view” when hovering the Outlet

 

Now let’s get started.

 

A. Outlet overview

Go to the Outlets section in the backend to create and manage all outlets of POS transactions. There are 2 types of outlets (Groceries and Restaurants), so there will have settings for these 2 types of outlets.

1. Add new: Create as many outlets as you want to sell with POS.

2. Available outlets: List of available outlets for POS. There will be a default outlet of your current POS site. You can edit, delete, change the outlet’s status, quickly view outlet information on the outlet list page.

3. Bulk action: Treat bulk outlets at once. You can select many outlets, then change statuses’: Enable, disable or delete them.

4. Assign product stock: Go to the Product list page to manage stocks of the outlets. Go to the D. Manage outlet stocks section for more information.

 

B. Create an outlet

Go to Outlets, Click “Add new” to create new outlets.

1. Activate: Set the outlet’s status: Active or deactive.
2. Outlet name: Name for the outlet.
3. Outlet cashier: Assign (a) cashiers for this outlet.
4. Receipt: Set the receipt of this outlet. Each outlet may be unique, so they may need their own receipt. Go to the Receipt template configuration to create new receipt. Visit this documentation.
5. Kitchen receipt: This is the kitchen bill that the cashier/waiting staff sends to the kitchen so the chefs can prepare the food. Go to the Receipt template configuration to create new receipt. Visit this documentation.
6. Order item receipt: This is the product decal which contains the general info of the order item. Go to Receipt template to configure/create new template. Visit this documentation.
7. Address Line 1: Enter the outlet address line 1.
8. Address Line 2: Enter the outlet address line 2 (If any).
9. City: Enter the city where the outlet is located.
10. Country / State: Select the country, the state or province in which your outlet is located.
11. Postcode / ZIP: The postal code, if any, in which your outlet is located.
12. Phone: Enter the outlet’s phone number.
13. Email: Enter the outlet’s email.

 

C. Resraurant/ Cafe POS mode

Go to the Outlets > Tables, this part supports the outlets such as restaurants, cafes.

1. Status: The table’s status is indicated by the word “Status” If the table is not available, select ‘Disable’.

2. Name: You will name for the table, it should be a memoriable and unique name of the customer.

3. Seats: Set the number of seats of the table.

4. Description: Give a description for the table.

5. Add new: Add new table

6. Clone: Duplicate the above table row.

7. Remove: Remove a table.

 

 

D. Manage outlet stocks

You can click on the Assign product stock button or go to the admin product list to manage the stocks of the outlets.

 

Go to each product editing page, you can manage the stocks of simple and variable products:

+ For simple products:

+ For variable products:

 

 

Point Of Sale on the Woocommerce POS Page

POS for Restaurant/Cafe

POS for Restaurant/Cafe tutorial video

The plugin includes a dedicated Restaurant Point of Sale (POS) feature designed to facilitate seamless order management in restaurant settings. First, you simply need to add your food as WooCommerce products and let’s get started.

1. Enable POS for Restaurant/Cafe and setup settings
2. Access Kitchen View
3. Order process on POS page
4. Send order to kitchen
5. Auto sync item status in 2 screens

1. Enable POS for Restaurant/Cafe and configure setup: 

1. Enable: Enable POS for restaurant/cafe. When you enable this option, there will be a shortcut “Kitchen view” under each outlet in Outlets page when hovering.
2. Receipt: Cashier can print receipt to the kitchen using the Kitchen Bill button as below
   
   
3. Separated print individual order items by quantity:
   • Not print
   • On the POS page: There’s button “Product decal” on the POS page to print
   • On the kitchen mode: When chef clicks “Wait to serve” on Kitchen View, Product Decal is printed
     
     
4. Endpoint: Kitchen view page endpoint
5. Cancel dishes: After the order is sent to the kitchen and being prepared, the Trashbin symbol of the associated item is still visible, allowing customer to cancel that item if they change their mind.
6. Who can see: Users with selected role(s) can access the Kitchen view

 

2. Access Kitchen View

To access the Kitchen View page, you must:

• Enable Restaurant/Cafe mode (option 1)
• Fill in “Endpoint” (option 4)

After completing the setup, hover over the outlet name to see the option that redirects to ‘Kitchen View’

 

3. At the POS page, the waiting staff selects and adds items to the order.

In this step, waiting staff marks it as “Eat-in” (green kitchen utensils) or “Takeaway” (red utensils)

* In Kitchen view, the takeaway item is marked with different background

 

4. Send the order to the kitchen

4.1. Send to kitchen by Kitchen bill

If the Kitchen view is disabled (no endpoint set), waiting staff can send the order to the kitchen by using “Kitchen bill” option (Receipt enabled).

4.2. Send the order to the Kitchen view. 

The chefs have access to the Kitchen view. After customer is happy with their order, waiting staff sends it to the kitchen using “Send to kitchen” buttons on top or bottom of the POS page as followings:

 

The kitchen gets the order, and chefs can see it on their Kitchen view. No need for them to refresh the page—it updates automatically.

Item Status:

• This dish is being prepared: Normally, the food is marked as “This dish is being prepared” which means it’s in the queue for processing.
• Wait to Serve: Chefs can also mark items as “Wait to Serve” if the food is done prepared and ready to serve.
• Completed: When the item is picked by waiting staff and brought to the customer, they hit “Completed,” and the food disappears from the Kitchen view, notifying the waiting staff the new status on the POS page

There’re 2 ways for the chefs to view the orders on the Kitchen view:

* Sort by ordering time

*Sort by bills

5. Auto sync item status in 2 screens – POS page and Kitchen view: Once the food is ready, it goes back to the waiting staff.

On the POS page, waiting staff gets orders updating without refreshing the page. Read details about each order item status here.

A. POS Page Interface

When you visit a WooCommerce POS page, you can see a global POS page interface will be presented with the following functional areas.

1. Menu: Click on the button to go to menus on the POS page. The menus include Point of Sale, Orders, Today transaction, Customers, My account, Logout.

2. Shortcut buttons.

• Auto-print receipt after checkout
• Keyboard shortcuts: Keyboard shortcuts are keys or combinations of keys that provide an alternative way to do something on the POS page that you’d typically do with a mouse.  Hovering the Keyboard shortcut icon at the top right corner of the POS page, you can see the keyboard shortcut annotation list.
  • F1: Add a new bill
  • F2: Add custom product
  • F3: Add new customer
  • F4: Add discount
  • F6: Search for product
  • F7: Search customer
  • F8: Focus on customer paid
  • F9: Choose payment method
  • F10: Checkout and Print
  • ESC: Close anything
  •  Increase the number of products
  •  Decrease the number of products
• Support Progressive Web Apps. When switching between online and office mode, change the color of the connection. Green represents online, and yellow represents offline.

3. Bill tab: The cashier can proceed multiple bills for multiple customers at once. The shortcut F1 to add new bills.

4. Add and search products

There are some ways to add products to the cart, the cashier can add custom products or existed products.

• Add a product by Barcode Scanner or search by the product’s name, SKU or barcode. The shortcut F6 to search for products quickly.
• Enter product names directly on the search box to add products to the cart.
• The cashier can add new custom products to the cart if these products are not available in the inventory just by clicking the button next to the product search box (shortcut F2 to add a custom product). The cashier can add the name, price, and quantity of the custom product.  Go to WebPOS > Products to configure: Allow the cashier to add custom product to the cart 

5. Display and adjust the selected items in the cart

After adding products to the cart. The selected products will be displayed in this area. The cashier can adjust the cart items including:

a. Change among variations of variable products on the cart: Switch among variations of the selected variable products on the cart. Go to the WebPOS > Products to configure: Allow the cashier to update variation the cart.

b. Adjust product quantity to add to the cart: The cashier can increase, decrease the number of item quantities in the cart.

c. Change the item price directly: The cashier can change the price of each item if she is allowed. Go to the WebPOS > Products to configure: Allow the cashier to change the product price

d. Remove item: The cashier can remove each item out of the cart.

e. Remove all products: The cashier can remove all items out of the cart.

f. Add/ remove item notes: The cashier can add and remove a note in each product item.

g. Add/remove order notes: The cashier can add and remove a note for each order.

 

6. Add new users and search existing customers.

• Enter customer information to find an existing customer on the search box to assign for the order, press F7 for a quick customer search. The cashier can search by the customer name, email, phone number.
• Click on the button if a customer is new. The cashier can create the new customer and add new customer information (Include: First name; Last name; Emails; Phone; Address; Country; State; City; Postcode/Zip code.) You can control which fields are required and which are optional when adding a new customer, go to Settings > Customers > Mandatory fields to control.

7. Discount, shipping, payment method, order total, and checkout.

This area displays the discount, shipping, payment method, order total, and checkout for the order on the WooCommerce POS page.

7.1. Cart discount and coupon.

The cashier can apply/remove discounts for POS orders.

• Click on the Discount button or the shortcut F4 to apply discounts or add fee.
• There are 2 types of discount: Cart discount (percentage or fixed amount), and WooCommerce existing coupon.
• Add Cart Fee with percentage or fixed value
• The maximum number of coupon that can be applied per order can be limited in WebPOS > Orders: Maximum applied coupon.

7.2. Shipping

Shipping method on POS is used in some cases when incurring shipping costs such as customers request the shop to ship; the shop delivers directly and takes charge, or the shop contacts a third shipping company to deliver and take charge.

 

• Shipping method: The cashier will enter the name of shipping method and shipping cost.
• Shipping address: Enter the shipping address and save.

 

7.3. Payment methods.

You have the option of paying with one or more payment methods. Note: Cash always display as a default payment gateway.

• Allow paying in one payment method.
  • Disable the Multiple payment methods option.
  • Customer will pay by one of the available payment methods set in the Payment fields in the back end

 

• Allow paying in more than one payment methods
  • Enable the Multiple payment methods option.
  • Allow customers to pay in more than one payment method in the same order.

 

 

7.4. Order details and checkout

The order detail will be displayed on the right side of the WooCommerce POS page and let the cashier know about the order information including the subtotal, tax, shipping method, discounts, need to pay, paid, change and payment method of the POS order. Then click on the Checkout button or the shortcut F10 to check out the order and print the order’s receipt.

 

B. Order Management on POS Page

On the WooCommerce POS page, the cashier can choose and quickly check all POS orders in the Order menu.

On the POS order page, you can:

 

• Observe a list of POS orders that will display including the order information. When clicking on each order, the order item detail and order total will display.
  • Order ID
  • Order date and time
  • Customer information
  • Order total
  • Number of items
  • Order item details
• The cashier can print the receipt on the POS order page.
• Search an order by order number, order total, customer email, customer name
• The cashier may update the order information and refund the order if she is allowed by the admin in WebPOS > Orders: Allow the cashier to update orders
  Note: When the cashier makes updates to the order, WebPOS generates a new order containing all the freshly edited details, and cancel the initial order
  
• Filter orders based on types:
  • POS: Orders which are placed on POS page by cashier
  • Online orders: Normal WooCommerce orders
  • POS offline: POS order that is placed when the store does not have an internet connection. The order is stored locally and is processed once the store regains an internet connection

 

 

C. Today’s Transaction Visibility

On the WooCommerce POS page, there is a menu to check all today’s transactions.

On this POS today transaction page, you can:

• Observe a list of transactions created today.
• The search box to find today’s transaction. Search a transation by Transaction ID, Order  ID, Payment Method, Note.
• Transaction information includes Transaction ID; Order ID; Cash inflow; Cash outflow; Payment method, Transaction note, date.
• Add new transactions by clicking on the button.

• • Select the type of new transaction: Cash in or cash out
  • Add respective amount of the Cash in or Cash out.
  • Add the reason for the new transaction.

D. Managing Customers/Users on POS Page

On the WooCommerce POS page, the customer’s menu allows the cashier to manage customers/users who are ordered through the POS page.

Go to the Customers menu

 

 

• Observe a list of WooCommerce customers and users. When clicking on a customer, the customer information will be displayed including First name; Last name; Email; Phone; Address; Country; State; City; Postcode.
• Search an existing customer. The shortcut F7 to search for existing customers.
• Add new or edit the customers and users’ information.

E. Setting layout

You can choose which parts on the POS page will be hidden or shown in the Setting layout menu.

Go to the Setting layout menu.

Configure the options to hide or show some parts on the POS page.

 

1. Style: Product Grid and Basic
   • Product Grid: All items visible in grid layout. Cashier scrolls and clicks the item to add to bill, they can also search the item using search field/F6
     
   • Basic: Cashier searches items using the search field/F6 at the top, found items are shown in the dropdown for cashier to add to bill
     
2. Auto add to cart if only one product found: If the search result returns only one item, auto add that item to bill
3. Hide cart item information: Show/Hide specific fields in the cart section in the bill
   • Order number of cart items
   • Cart item stock
   • Cart item price
   • Cart item subtotal
4. Hide checkout form information: Show/Hide fields in the checkout form
   • Cart subtotal field
   • Tax field
   • Paid amount
   • Change amount
   • Suggested amount
   • Shipping information

 

 

F. Outlets on Frontend

When you have many outlets, let’s create them in the WebPOS > Outlets in the backend. The following instructions will guide you on how to sell on many POS outlets.

A – Choose an outlet: After creating your outlets, go to the front end POS page, the cashier will be asked which outlet they will sell at, and choose one.

Once the cashier would need to change among outlets, they can go to the Switch outlets Menu, and change.

B – Access tables: With the restaurants/cafes, the cashier can manage tables on the front end in the Tables Menu or click on the icon

C – Manage tables:

– The number of tables: will be determined by the number of tables you created in the WebPOS > Outlets > Tables in the backend.

– Table statuses: The table statuses can be: Available, Busy, Disable, and they will be distinshed by the color, the cashier can filter the table status.

• Available tables: Ready to serve customers
• Busy tables: Already served the customers
• Disable tables: The tables are not available (Set in the back end)

– Order for a table: The cashier will click on a table to order food/drink for that table.

POS Transactions Management in Backend

Once orders are created on the WooCommerce POS page, all transactions will be saved on the Transaction page in the plugin backend.

Go to WebPOS > Transactions

On the transaction page you can:

• Observe all transactions created by WooCommerce POS. Transaction information includes:
  • Transaction ID
  • Cashier
  • Order ID
  • Cash inflow
  • Cash outflow
  • Payment method
  • Transaction note
  • Transaction date and time.
• Filter the transactions by a cashier.
• Filter the transactions by date.
• Remove transactions

Plugin	Author	Compatible
REDIS – WooCommerce Dynamic Pricing and Discounts	VillaTheme	Fully
CURCY – WooCommerce Multi Currency	VillaTheme	Fully
WooCommerce Email Template Customizer	VillaTheme	Fully
WPML	https://wpml.org/	Fully
Polylang	WP SYNTEX	Fully
Points and Rewards for WooCommerce v2.1.0	WP Swings	Allow customers to apply points on the POS page

 

* Guide: Compatibility with WooCommerce Email Template Customizer plugin.

Follow these full steps to display the POS order receipt in the email template built by the WooCommerce Email Template Customizer plugin.

Step 1: You must have the WooCommerce Email Template Customizer plugin – Free version or Premium version installed.

Step 2: Go to this link to build WooCommerce order emails. In fact, the POS order receipt will appear in the WooCommerce order emails.

Step 3: In the WooCommerce order emails template, drag and drop the WC Hook element to the before order table position to display the POS order receipt in the email.

Drag and drop the WC Hook element to the before order table position 

 

POS order receipt appears in the WooCommerce order emails

 

Thank you for your attention!

If you have any question, please create a topic at our FORUM, we will support within 24 hours.