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:
Shopify order summary inside checkout
enter image descriptionwhat it looks like right now here
CodePudding user response:
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 ></span><span>%s</span><span ></span><span ></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).