Collapsing the Order Summary / Notes Table in the Woocommerce Checkout Page

I’m trying to replicate the “order summary” feature on Shopify, where all order details are hidden inside a toggle button/accordion effect to make the checkout process faster and simpler.

Bonus points if we can add a cart symbol and price to the toggle button, like in the images I’ve attached.

I’ve tried using various plugins such as Collapse-O-Matic and CSS, but have been unable to achieve the desired effect on my WooCommerce checkout page.

I’m looking for a solution to create a toggle button or accordion effect for the order summary table on the checkout page in WooCommerce.

Any help or guidance would be greatly appreciated!

Attachments:

How it should look like

Shopify order summary inside checkout

enter image descriptionwhat it looks like right now here

Answer

If you want full control you should create a custom template for the form-checkout.php template (woocommerce/templates/checkout/form-checkout.php)

But you can also add a code snippet that hides all table row of the order review, except the order total. By keeping the order total visible you don’t have to worry about correctly updating your order total when values in your checkout form change. It will automatically be updated by WooCommerce.

The only other thing the snippet does is add a separate line with the cart icon and toggle buttons, some CSS and a little jQuery to hide and show the appropriate elements.

add_action( 'woocommerce_checkout_order_review', function() {
    ?>
    <style>
        #order_review_heading {
            display: none; 
        }
        #order_review_toggle {
            display: inline-block;
            padding: 1em;
            font-size: 18px;
            line-height: 1;
            width: 100%;
        }
        #order_review_toggle .dashicons {
            font-size: 18px;
        }
        #order_review_toggle .dashicons-cart {
            margin-right: 0.5em;
        }
        #order_review_toggle .dashicons-arrow-up-alt2,
        #order_review_toggle .dashicons-arrow-down-alt2 {
            float: right;
            cursor: pointer;
        }
        #order_review_toggle .dashicons-arrow-up-alt2 {
            display: none;
        }
        .woocommerce-checkout-review-order-table tr:not(.order-total) {
            display: none;
        }
    </style>

    <script>
        jQuery( function( $ ) {
            $('#order_review_toggle .dashicons-arrow-down-alt2').on( 'click', function() {
                let $orderReviewTable = $(this).closest('#order_review').find( '.woocommerce-checkout-review-order-table' );
                $orderReviewTable.find('tr').show();
                $(this).siblings('.dashicons-arrow-up-alt2').show();
                $(this).hide();
            });
            $('#order_review_toggle .dashicons-arrow-up-alt2').on( 'click', function() {
                let $orderReviewTable = $(this).closest('#order_review').find( '.woocommerce-checkout-review-order-table' );
                $orderReviewTable.find('tr').not('.order-total').hide();
                $(this).siblings('.dashicons-arrow-down-alt2').show();
                $(this).hide();
            });
        });
    </script>
    <?php
    printf( '<div id="order_review_toggle"><span class="dashicons dashicons-cart"></span><span>%s</span><span class="dashicons dashicons-arrow-up-alt2"></span><span class="dashicons dashicons-arrow-down-alt2"></span></div>', __( 'Your order', 'woocommerce' ) );
}, 1 );

add_action( 'wp_enqueue_scripts', function() {
    if ( is_checkout() ) {
        wp_enqueue_style('dashicons');
    }
} );

This code snippet should be added to the functions.php of your child theme (or via a plugin like Code Snippets).