AeroCheckout- Custom WooCommerce Checkout Pages

  1. Home
  2. Docs
  3. AeroCheckout- Custom WooCommerce Checkout Pages
  4. Fields
  5. How to Make the Order Summary Collapsible on Mobile?

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:

 

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.

Making 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” & “Expanded View Title” according to requirement or language.

Step 3: Click on the “Publish” button.

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