Always Show Order Summary on Mobile (Astra Modern Checkout)

Modern Checkout layout is a premium feature available with the WooCommerce module of Astra Pro that modifies the default checkout page design in a single click. When using Astra’s Modern Checkout layout, the order summary on the checkout page is intentionally collapsed by default on mobile devices. Instead of showing all the order details upfront, users see a “Show order summary” toggle they can tap to expand it.

This is an intentional UI design choice to reduce visual clutter on smaller screens and keep the checkout experience clean and focused – especially helpful when customers are ready to complete their purchase and don’t need to review the full order again.

That said, some store owners prefer to have the order summary always visible on mobile for transparency or branding reasons. If that’s the case for your store, the section below explains how to achieve it with a small CSS customization.

How to Always Show the Order Summary on Mobile

There is no built-in toggle in the Astra Customizer for this, but it can be done easily using a CSS snippet.

The order summary is controlled by the #ast-order-review-content element, which starts with max-height: 0 and overflow: hidden, causing the collapsed behavior on mobile.

Step 1: Go to Appearance → Customize → Additional CSS in your WordPress dashboard. Alternatively, you can use any CSS snippet plugin of your choice.

Step 2: Paste the following CSS:

@media (max-width: 921px) {
    .ast-modern-checkout .woocommerce #ast-order-review-content {
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }
    .ast-modern-checkout .woocommerce .ast-mobile-order-review-wrap #ast-order-review-toggle {
        display: none !important;
    }
}

Step 3: Click Publish to save the changes, then check your checkout page on a mobile device.

What This CSS Does

This snippet targets mobile and tablet screens and makes two changes:

• Expands the order summary so it is always visible without needing to tap the toggle.
• Hides the “Show order summary” toggle button since it is no longer needed once the summary is always open.

Adjusting the Breakpoint

The value 921px in the snippet targets both mobile and tablet screens. If you only want the summary always visible on mobile (leaving tablets with the default toggle behavior), replace 921px with 544px. Also, if the tablet breakpoints for your website are different, you can modify them accordingly.

Troubleshooting

If the snippet does not seem to work after adding it, the most likely cause is existing CSS on your site that conflicts with these rules. Check your theme’s Additional CSS or any active CSS snippet plugins for any rules targeting the same elements. Removing or correcting those conflicting styles should resolve the issue.

Need Help?

If you run into any trouble while following these steps or have further questions, our support team is happy to help. You can reach us anytime through the Astra Support Portal.