WebPOS – WooCommerce POS – Point of Sale


Created: 6/2022

Latest updated: 6/2022 – Updated version: 1.0.0

By: VillaTheme

Thank you for purchasing our plugin. If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum. Thanks so much!

 

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 unignorable 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. Shortcut F1 to add new bills.
  • Support for all types of barcode scanners.
  • Add products by Barcode Scanning or search by name or SKU. Shortcut F6 to search for products.
  • Support simple and variable products.
  • Add custom products, shortcut F2 to add a custom product.
  • 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. Shortcut F7 to search for existing customers.
  • Add new customers. Shortcut F3 to add a new customer.
  • Add/remove cart discount (Percentage or fixed amount) and WooCommerce existing coupon. Shortcut F4 to add a discount for the order.
  • Working with offline mode. Support Progressive Web Apps.
  • Automatically sync the offline orders to online.
  • The Settings layout options allow to choose which parts on the POS page will be hidden or shown.

Payment on the POS system

  • Allow customers to use more than one payment method to pay for the same order.
  • Control checkout payment methods, checkout with default or extended woocommerce gateways.
  • Shortcute F9 to choose payment methods
  • Shortcute F10 to check out and print quickly.

Order and customer management 

  • View the POS orders, update or refund for the orders on the POS page.
  • Print the receipt for each order.
  • Set maximum applied coupons for an order on backend.
  • Set a fixed status for the orders created from WooCommerce POS.
  • Send order emails to the customers.
  • Control the order statuses which cashier can edit.
  • View, add, edit customers in 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 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.

Barcode management

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

Receipt management

  • Settings for 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 on today, yesterday, 30 days, 90 days, a year, or a certain time.
  • The reports give information about cashier statistics, and the order total they earn in a range of certain days.

General settings:

  • Add a custom endpoint in the POS page URL
  • Accept to run POS system limitedly on some trust IPs using the Whitelist IP feature.

System Requires

It is recommended using:

1. WooCommerce 5.0.x

2. WordPress 5.0.x

3. PHP 7

 

Download plugin

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

 

Install & Active plugin

Go to PluginsAdd NewUpload PluginChoose 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, 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. Update the customer’s information: The customer information on the POS page can be changed by the cashiers if you allow it.
  3. 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.
  4. Whitelist IP:  You will accept to run POS system limitedly on some trust IPs, just add these IPs and separate them by “,”

 

B. Product configuration 

Go to WebPOS > Settings > Products

  • Use SKU instead of barcode: If enable this option, the SKU of product will alter for the product barcode to search for the product.
  • 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.
  • Allow the cashier to update variation to the cart: The cashier can alter a new variation for the selected variation.
  • Allow the cashier to change the product price: The cashier can update the product price directly on the POS page if she is allowed.
  • 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

  • Set maximum applied coupons: Coupons can be applied on POS orders. You can limit the number of coupons that can be applied per order.
  • Set a fixed status for the orders created from WooCommerce POS: You can assign a fixed order status for the orders created from WooCommerce POS.
  • WooCommerce emails created by the POS orders are sent to: You can choose to send to admin only, the customer only, by Woo default or not send.
  • Update the orders on WooCommerce POS page by cashier: In the order management section of the WooCommerce POS page, you can allow the cashier to update the order by selecting which order statuses are acceptable to update.

 

D. 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.
  • Choose certain payment gateways for WooCommerce POS transactions: Control checkout payment methods, checkout with Cash on Delivery by default or extended woocommerce gateways.

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

In the Receipt section of the plugin, you can customize the receipt template of the POS. There are many settings to configure the receipt layout and contents. You can preview the receipt and print it as a sample.

 

A. General settings for the POS order receipt

Go to WebPOS > Receipt > General 

  • Logo: Add a logo to the receipt if you need, choose an image from your gallery.
  • The receipt page width: Adjust the width of the receipt page
  • The receipt page margin: Adjust the margin of the receipt page.
  • 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

  • Bill Title: Name for the title of the receipt.
  • Bill title font size: Adjust the font size of the bill title.
  • Bill font size: Change the font size of the entire bill.
  • Footer message: The message you leave at the footer of the receipt.

  • Order info column: Column the order info on the bill, it can be set to 1 or 2 columns
  • Order date display: Enable to display the order date on the receipt.
  • Order date label: Change the order date label displayed on the receipt.
  • Order ID display: Enable to display the order ID information on the receipt.
  • Order ID label: Change the order ID label displayed on the receipt.
  • Cashier name display: Enable to display the cashier’s name on the receipt.
  • Cashier label: Change the cashier label displayed on the receipt.
  • Customer: Enable to display customer’s name on the receipt.
  • Customer label: Change the customer label display on the receipt.
  • Customer information: Select customer data displayed on the receipt, it can be: Email; Full name; First name, or Lastname.
  • Customer phone: Enable to display customer’s phone number on the receipt.
  • Customer phone label: Change the customer phone number label display on the receipt.
  • Customer address label: Change the customer address label display on the receipt.
  • 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

 

B. Order item details on the receipt

Go to WebPOS > Receipt > Order item details.

  • Template of items field: Choose a style how the items field displays on the receipt. They can be a flat or block style.

 

  • Product ID: Enable to display product ID on the receipt.
  • Product price: Enable to display product price on the receipt.
  • Product price label: Change the product price label displayed on the receipt.
  • Product Quantity: Enable to display product quantity on the receipt.
  • Product quantity label: Change the product quantity label displayed on the receipt.
  • Product subtotal: Enable to display product subtotal on the receipt.
  • Product subtotal label: Change the product subtotal label displayed on the receipt.
  • Product label: Change the column title on the receipt.
  • 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.

  • Order total: Enable to display the order total on the receipt.
  • Order total label: Change the order total label displayed on the receipt.
  • 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.
  • Order shipping: Enable to display the order shipping on the receipt.
  • Shipping label: Change the shipping label displayed on the receipt.
  • 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.
  • Order POS discount: This type of discount is generated directly for a POS order by the plugin, enabling to display this type of discount on the receipt.
  • POS discount label: Change the POS discount label displayed on the receipt.
  • 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.
  • Display the change: Enable to display the change on the receipt.
  • Change label: Edit the change label displayed on the receipt

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 statistics, and the order total they earn in a range of certain days.

Go to WebPOS > Reports

Point Of Sale on the Woocommerce POS Page

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 checking out
  • 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 products whic are existed.

  • Add a product by Barcode Scanner or search by the product’s name or SKU. The shortcut F6 to search for products quickly.
  • Enter product names directly on the search box to add products to the cart.
  • Click on the button to add a custom product to the cart.  The shortcut F2 to add a custom product.
  • The cashier can add new custom products to the cart if these products are not available in the inventory just by clicking the plus button next to the product search box. 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:

  1. 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.
  2. Adjust product quantity to add to the cart: The cashier can increase, decrease the number of item quantities in the cart.
  3. 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
  4. Remove item: The cashier can remove each item out of the cart.
  5. Remove all products: The cashier can remove all items out of the cart.
  6. Add/ remove item notes: The cashier can add and remove a note in each product item.
  7. 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 (require); Phone; Address; Country; State; City; Postcode/Zip code.

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

This area displays the discount, 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.
  • There are 2 types of discount: Direct discount (percentage or fixed amount), and WooCommerce existing coupon.
  • The maximum number of coupon that can be applied per order can be limited in WebPOS > Orders: Maximum applied coupon.

 

7.2. Payment methods.

  • Click on the Payment method (Multi)button or the shortcute F9 to choose payment methods.
  • Allow customers to use more than one payment method to pay for the same order.
  • Control checkout payment methods, checkout with default or extended woocommerce gateways.

7.3. 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, 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 (Customer’s name and email). If the customer does not leave their information, set as a guest by default.
    • 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

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.

There are 6 options for you to toggle a part to be appeared or hidden:

  • Cart subtotal field
  • Tax field
  • Suggested amount
  • Order number of cart items
  • Cart item price
  • Cart item subtotal

 

 

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

Extra Information


Thank you for your attention!

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