WooCommerce POS Customer Cart Screen

WooCommerce POS Customer Screen will help the customer to visualize the checkout screen. Thus, allowing to help the customer to verify the cart before the final products.

The customer screen works in synchronization with the POS agent screen. However, the projected screen is connected to the POS without any special physical device like a POS/IoT Box. The system allows the customer to validate the products, discounts, order total, and all the other cart functions.

WooCommerce POS Customer Cart Screen is an add-on to WooCommerce POS. Therefore, you must have installed the WooCommerce POS Plugin in the first place. The installed WooCommerce POS version must be 4.1* and above.

Check the Workflow at POS Terminal:

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

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.

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.

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.

Once you continue to console it will redirect you to another page where you can see all the details listed as given in above attached screenshot. If you want, you can also navigate to project overview>project setting>general as shown in the below-attached screenshot.

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.

Afterward, the admin needs to click on the Save 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.