The order summary lists the items in the user's cart with the price of each. Making it collapsible on mobile will help you conserve the small real estate available on a mobile device.
Take a look:
It also includes the shipping charges, handling charges, and taxes- whichever is applicable.
It's essential to show the costs and the breakup to the user on the checkout page.
But since the space available on mobile is less, you can make the order summary collapsible.
Enabling the Order Summary Collapsible using Customizer
By default, the Order Summary is collapsible on mobile devices for all the Customizer templates.
You can modify the text when the widget is collapsed/opened.
Here's how:
Step 1: Select a Customizer template and go to Checkout Form widget
Navigate to Checkout Form > Form Settings
Scroll down to the "Collapse View Title" section.
Step 2: Edit "Collapse View Title" and "Expanded View Title" as per your requirement or language.
Once done, click on the "Publish" button.
Enabling the Order Summary Collapsible using Elementor
Follow the steps below to make the order summary collapsible in Elementor.
Step 1: Go to the 'Design' tab
Here you'll find a bunch of pre-built Elementor templates.
Select the one that suits your requirements and import it.
Step 2: Hit the 'Edit' button
When you do so, the page will open up in Elementor.
Step 3: Click on the pencil icon to edit your checkout form.
Step 4: Go to the 'Sections' tab on the left side panel
Here you'll see the Collapsible Order Summary section.
Click on it and hit the toggle to enable it.
Once you do that, you'll be able to see the Collapsible Order Summary section at the top of your checkout form.
Now, you can also set the text when the section is collapsed/opened.
You can also choose to enable the coupon field in this section and make it collapsible.
Once you're done, hit the 'Update' button.
This is how you can enable the Order Collapsible Summary.