The cart total shows the order total of cart items with, and without tax and discount applied. Also applied coupons are visible if have been used.

<aside> ℹ️ Usually, styling this element takes from-to: 4-6h

</aside>

Where this element can be seen?

A cart total is a common element on the e-commerce site. It can be found on the following elements:

• Cart overlay
• Cart page
• Checkout page

How should this element be designed?

The cart totals should be displayed accounting for the following:

• Cart items subtotals must be displayed

• An applied discount (coupon code or discount) must be displayed

• Shipping must be displayed

• Final totals must be displayed

• Applied coupon should be displayed

• Taxes (their breakdown) may be displayed in the cart

  

  Cart overlay

Cart page

• If cart totals are expandable on mobile or opened in the popup, in the designs animations, actions, the layout should be properly set

Design example #1

How to develop styles for this element?

The CheckoutOrderSummary component renderTotals method is responsible for rendering the cart totals Checkout and CartPage.

In the scope of this task order total, tax, subtotal, discount, estimated shipping should be styled. Also related animations and layout.

• renderTotals method "scandipwa": 5.0.7

On mobile cart's totals are rendered in the ExpandableContent

Implementation Example #1