Get Started
FunnelKit Documentation
Get unstuck with our helpful reference material

Checkout Pages

How to Make Order Summary Collapsible

You can make the order summary section collapsible for mobile viewing.

This is how you can enable it:

Step 1: Edit the checkout page

Click on the Edit Divi Template button to start customizing it with the Divi page builder.

Edit divi checkout page template

Step 2: Click on the module you wish to edit

Click on the checkout form on the page and select the cogwheel icon to open settings.

Divi module - checkout form settings

Step 3: Choose the ‘Collapsible Order Summary’ option under the ‘Content’

Pro tip: We advise you to only enable this for mobile viewing and not for desktop mode.

Choose the ‘Collapsible Order Summary’ option

Step 4: Select the mobile display option

Choose the mobile icon from the options given.

Select the phone display mode option

Step 5: Click on the toggle to enable order summary to collapse

Clicking on the toggle would enable the order summary to become hidden until clicked on for the mobile devices.

This enhances the viewing experience of the customers.

Enable collapsible order summary

Step 6: Click on the green tick (✓) to save

Once you’re done editing, click on the green-colored tick () icon on the settings window's bottom right to save the changes made.

Press Ok

With the Order Summary now sorted for mobile users, onto the next one!