Checkout: Shopping Cart

Customer Experience > Checkout > Shopping Cart

The image below shows the shopping cart on the front-end (customer side) of a site. The shopping cart is specific to each potential customer and it shows them the items that they have added to their cart/basket and so on. If a customer is not happy with the items in the cart, they can remove/change/add items at will. When they are ready they will complete their order, this pushes all the items they have added in their shopping cart and begins the checkout procedure.

1. Product Image and Title

As you can see from the image, the Shopping Cart section has a table which has a basic overview of the product(s) that have been added to the cart. The first column is the Product Image and the Product Title. Each product will have it’s own row in that table, obviously the more products in the cart, the longer the table will be.

2. Product Variations and Fields (Options)

Some products that you have available on your site will be configurable because you have added Product Variation and Options to them. For example, instead of having a different product to offer the same shirt in 3 different colours, you’ll create the one product with the variation, “Colour,” and then 3 or so options such as, “red, blue, green, yellow,” and so on. The seond column in the table shows the selected variations and options of each product that has been added to the cart.

3. Price Per Unit

The 3rd column is quite simply. It just shows the price per unit of each product added to the cart.

4. Quantity

This column shows the quantity of the products that have been added to the cart. There is a quantity field avalible to customers when they are viewing a specific product, they can simply change it to any value they want. The same field (text box can be seen in the image) is shown in the Shopping Cart view. This allows customers to either take a few quantity away or add a few more for each product individually. To change the value seen there, the customer must simply click the box and then change the number there to whatever number they want.

5. Total Price for Product (All Units)

This column shows the single price of the product which is then multiplied by the qauntity.

6. Delete

You can see from the image that each product in the table has a checkbox in the last column. If the customer wants to remove an item from his/her Shopping Cart then they can check that little box for the product and click ‘Update Cart’ button that we will get to at #13 on this list. Alternatively, they can set the quantity to ‘0’ zero and then update the cart.

7. Sub Total

Essentially, a Shopping Cart with all its Products in it becomes an Order when the checkout procedure is completed. So the Sub Total in this case means the Sub Total for the potentially completed Order. This obviously means the Products and their Qauntities are calculated to give the Sub Total value seen here.

8. Shipping and Handling

The admin of the site and technically the owner of the shop has to set up atleast one Shipping Method. If a Shipping API is used then the Shipping fee will be calculated on weight and/or dimensions after the Shipping Step (step 1 of the checkout procedure) has been completed. If a custom shipping method is used with a static value then it is displayed here and added onto the total.

9. Discount (If Applicable)

This ties in with #15 on the list here. There are many oppourtunities for a customer to submit a Coupon Code if the admin has allowed for this feature and has provided the customer with the code some how, then after the coupon code is applied, the value of the discount is shown here and taken off the total.

10. Tax/VAT

This amount can be added per Country and State/Province if needed. You can also call the value anything, in this case it was called, “VAT.” So depending on what country is chosen and how the plugin has been configured, and value can be displayed there and will be added to the order total. Many people like to include VAT in the price of their products but some countries VAT or other taxes change from state to state.

11. Total

This is the final Total for the Shopping Cart. With all qauntities, discounts, shipping and taxes taken into account, the value displayed there is only changed if a Shipping API has been used the “Checkout>>” button seen at #14 must be clicked by the customer who is then navigated to the first part of the checkout procedure “Step 1: Shipping” where the shipping will be calculated according to dimension and/or weight of the products in the cart.

12. Calculated Weight

This just shows the weight of the all the products in the current cart. This little line of text is only be shown if the admin specifies weight in the back-end of the site when creating the product.

13. Update Cart

Clicking this button will execute any changes made to the cart. For examnple changing the quantity or having the delete box checked will need to have the ‘Update Cart’ button clicked for the changes to actually be made.

14. Checkout

Clicking the Checkout button will begin the checkout procedure. This goes through the 4 steps of checking out: Shipping, Billing, Payment, Finished (respectively). The Shipping step is skipped if there are no tangible/physical products in the cart, this is because digital products don’t need to be shipped.

15. Discount Coupon

This is where the customer can aply a coupon code (if applicable on your site). They must simply input the code and click the ‘Apply Code’ button in order to get a discount.

16. Links

There are a few links available here and around the coupon code field: Continue Shopping, Empty Shopping Cart, Downloads Management and Orders History. Continue Shopping will take you back to the Products loop page. Empty Shopping Cart essentially deletes all the products in the current cart. Downloads Management navigates to the downloads section if you have any digital products available for download. Orders History takes the customer to their account where they can see and review their previous orders.