Update the cart summary in checkout
CREATED FOR:
- Beginner
- Developer
Learn how to make changes to the order summary of the Adobe Commerce cart drop in for Edge Delivery Services. There are several examples for how to quickly improve the layout or information provided to a customer at checkout.
What you’ll learn
Learn how to use Adobe Commerce cart drop in and adjust the cart experience. There are several ways to enhance the cart by making some minor changes or updates to the code.
Who is this video for?
- Developers who need to learn how to implement these customizations for the order summary.
- Merchandisers to understand what options are available using native features to enhance the customer experience around the order summary.
Video content
- Learn how to display an estimated shipping cost.
- Learn how to include a total amount saved for the cart summary.
- Understand how to merge lines in the cart summary into one collapsible section.

Transcript
When we consider the Adobe Commerce experience, these personas are used and help explain the story. You will hear one or more of them referenced.
Let’s explore how to update the order summary section. In this round of requests, developer Ali and I have a few updates to the order summary. To accomplish this, we’ll be using some enhancements that are available in the order of summary page to allow for improved customization and extensibility. Developer Ali has received the request from the merchandiser Jessica and our customer Acme brand. They want to offer a flat rate of $5 shipping per item for guests. And after looking at the Adobe Commerce documentation for edge delivery, it finds the section that shows that we can do this by changing a config with no changes in the layout. Right now, the estimated shipping is showing as TBD, and this is because this is a guest checkout and the customer has not provided a shipping address. But as said before, we can easily show an estimated shipping cost with a simple configuration change in the order summary section. So let’s go ahead and figure out how to do this. Looking at the code, we can see that the show default estimated shipping cost is now set to be false. We’re gonna change that to true and go back to the front end and take a look. And after we refresh the page, we can see that the estimated shipping has changed and is now $30. And that’s because it’s $5 for each item in the cart and we have six items in our cart.
We can now move on to our next requirement. This is where merchandiser Jessica has asked the developer Ali and I how easy it would be to add a new line to the cart in the order summary, showing the total amount of savings.
Again, developer Ali and I, we recall reading this in the documentation and there is a configuration that allows us to show or hide a line in the total savings applied to an order.
We look here in this area and we see that there are some discounts as well as a coupon code already applied to my current cart. But there’s no line telling us the total savings that Jessica requires.
But we can do this pretty easily with a simple change in the code. So we’re gonna go ahead and show you how that’s done. The first thing we’re gonna do is check out the code and we’re gonna have a property here and this is gonna be called show total save. And we’re gonna set that to true and we’re gonna go back to our browser. And with a refresh, we can see that there’s a new section called total save here, 5452. And that’s the 5060 plus the $3.92 discount for the promo code that was applied before.
It’s nice that our Acme brand, we’ve finished those changes and we’ve completely adjusted the look and feel of the order summary. But now we wanna group together both the subtotal and the taxes into a collapsible field. And we’re gonna put this on top of the order preview summary. So we’re gonna go ahead and show you how to do that. Right now, if you look, the tax and the subtotal are shown as two separate lines. But we’re gonna go ahead and modify this with just a little bit of a code snippet that I’ve already prepared. And this little smart snippet of code does exactly what we needed to do with just a couple of lines of code.
So in here, the order summary, we’re gonna go ahead and copy and paste our little bit of code here. And we’re gonna head back to our browser and we’re gonna check out this new section. And if we open and close it just like that, it is a collapsible section just like we had hoped. And this shows the information that was previously displayed as two separate line items and now in one section. So this is great because we’ve successfully completed all the items in this phase. And now we can prepare for the next round of updates.
Additional Documentation
Commerce
- Commerce Tutorials
- Adobe Commerce Cloud
- Getting Started
- Global Reference Architecture
- Help and support
- Edge Delivery Services
- Webinars and events
- GraphQL and REST
- Adobe Developer App Builder
- Store Administration
- Customer Management
- Catalog Management
- Content Management
- Marketing Tools
- Orders and Fulfillment
- B2B for Adobe Commerce
- Tools and External services
- Commerce Intelligence
- Commerce Upgrades
- Back-end Development
- Native Front-end Luma Development
- Headless Architecture