FunnelKit Documentation
Get unstuck with our helpful reference material

Checkout Pages

How to Make the Order Summary Collapsible on Mobile?

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:

Collapsible order summary

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.

Order Summary Collapsible preview

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.

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.

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

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

Enable collapsible order summary

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.

Increase your sales, starting today.

Grab Our Exclusive Bundle