WooCommerce POS Customer Cart Screen

• Adds secondary customer-Facing Screen to WooCommerce POS.
• Show WooCommerce POS Cart on a secondary WooCommerce POS Customer Display.
• Show Order Details that are products, discounts, and the amount total on the POS Customer Cart Screen.
• The WooCommerce POS Cart Screen Show Order Details to the Customer.
• No Physical Connection or POSBox is required to launch the secondary screen.
• Thus, a separate WooCommerce POS Customer screen can be launched for each POS Outlet.
• Each POS Outlet can have different configurations for its secondary screen.
• Firebase configuration settings can also be made for the POS.
• WooCommerce POS Customer Cart Screen is multisite compatible.
• This module is now compatible with WooCommerce’s new High-Performance Order Storage (HPOS) feature.

The user will get a zip file that he has to upload in the “Add New” menu option in the WordPress admin panel.

For this login to 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 this, 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.

To know how to translate the module, you can click here.

Checkout how to Activate WooCommerce Plugin through the purchase code and get updates on Webkul Modules directly on the Plugins page.

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

After the successful installation, the admin can configure the Customer Cart Screen by navigating through Settings > Customer Cart Screen

The admin can configure the settings which includes

Firebase Setting

API Key, Storage Bucket, Auth Domain, Messaging Sender Id, Database URL, App Id, Project Id, Measurement Id.

For getting the required keys as shown in the above-shown screenshot admin will have to create the keys through firebase and for that admin can follow the below-mentioned steps.

Admin will have to first log in to firebase with their Gmail account and get started as shown below to add a project, by clicking on create a new Firebase project

When adding the project the admin need to set the project name as shown below.

Now enable google analytics and click on continue.

Admin can either use the default firebase account or create a new one.

Once you create the project, it will show a message as shown below.

After you click on continue you will see the page as shown below, here you need to click on add app and then need to select the platform

Now need to select the platform

You will have to click on the Web App to be set as marked on the above-attached screenshot followed by opening a form as shown in below attached screenshot and filling the form.

Once you do so you will see that it will open the Add Firebase SDK section as shown below you will find all the keys and you can click on continue to console as shown in below.

After clicking on next and next, you will be redirected to Firebase console

Now to view the real time databse navigate to build then Realtime Databse, here you will get a real-time databse url , here we can also set the rules.

To configure the security rules, navigate to Rules under the Realtime Database, make the necessary changes if required, and then enable them.

Now you will find all the required keys in the Firebase Settings and copy them to the wooCommerce Customer cart screen configuration.

Note:

1. In free version has only 100 connections

2. has only 1 GB of Storage

3. 360 MB download/day

For complete plan details, the admin can also check the firebase pricing.

Main Slider Settings

Slide Effect: In this, the admin can choose the primary slider sliding effect on the customer cart screen.

Slide Delay: In order to delay the slide, the admin needs to enter the timing in milliseconds. 500 ms is the minimum.

Slide Direction: The admin can use this to change the direction of the main slider in the customer cart screen.

Slide Speed: Here, the admin must enter the millisecond timing for the sliding speed.

Bottom Slider Settings:

Similarly, The admin can control the following options for the bottom slider.

Card Slider Settings

Here the admin can manage the following options for the card slider.

Other Setting

Video Control: The admin can enable the video control feature here to manage the video on the customer cart screen.

Description Type: Here, the admin can choose the type of product description to display on the customer cart screen page.

Enable Real Time App: From here, admin selects the real time application either as Firebase or Socket.

Afterward, the admin needs to click on the Save Configuration.

Additionally, if the Admin selects Socket as Real Time App, then they also have to configure the Node Server. For that the tap on the Node Server, it is viewed as below,

Here, they have to configure the following,

Node Server ( Domain / IP ) Address: Enter the domain/ip without http or www prefix.

Node Server PORT: Enter the Node server Port number.

Server HTTPS status: Enable or Disable the Server HTTPS status.

Node Server Timeout: Enter the node server retry timeout.

Start/Stop Server: Button to Start or Stop the Server.

Now, if the Server HTTPS status is enabled, then admin enters the Node Server SSL keys in their respective sections as below,

Customer Screen Configuration

The admin can configure the customer screen by navigating -Point Of Sale>Outlet>(edit an Outlet)>Customer Cart Screen.

The store owner can specify multiple values in the section-

• Heading– The title of the page that the customer will view.
• Cart visible status– The cart will appear in front of the customer if this is enabled; otherwise, only a slider will appear.
• Enable Video Option– Enable this to add the video to the customer cart screen.
• Customer Screen Video – The admin can upload a video here for the POS customer cart screen.

• Slideshow Card Images: Upload slideshow card images for the POS customer cart screen if the video is enabled; otherwise, leave it blank.
• Slideshow Bottom Images: Here the admin can upload slideshow bottom images for the customer cart screen page.

• Thankyou image: Here the admin can upload thank you image for the customer cart screen after a successful order.

Now lets see the customer end experience when the POS agent is processing checkout.

Thus, by navigating the Menu section>Customer Cart in the POS the sales agent can enable the other view for the customer. Herein, two URL is created as the sales agent clicks on this option.

Note– The generated URL can be added on the same browser.

In POS the select Cart Status can be enabled and disabled by the POS agent. For this, the POS agent needs to navigate through Settings > Other Settings > Select Cart Status.

If the cart visible status is enabled then the cart will be visible in front of the customer as per the below screenshot.

Furthermore, the customer can view the same products, order total, and discount.

The customer end and the POS Sales agent end here remain synchronized in real-time to reflect the changes.

That is, any change done by the sales agent in the POS will also reflect on the customer screen as well,.

The customer cart screen will appear as shown in the below image if the cart’s visible status is disabled or empty.

Afterward, the order has been placed the thank you image will be visible to the customer on the cart screen as per the below image.

That’s all for the WooCommerce POS Customer Screen. If you have any queries or suggestions regarding the extension then you can get back to us at webkul.uvdesk.com.