Thank you for providing the detailed screenshots and explanation. I understand that you are seeing two order summaries on the checkout page on mobile devices, one above the place order button (which is expected) and another one sticky summary at the top that shouldn’t be there. Moreover, you mentioned that this second summary is not visible or editable in the Gutenberg editor.
Thank you for sharing your update and the staging site link. I was able to reproduce the issue you described. I noticed that the CSS class wp-block-woocommerce-checkout-order-summary-block appears twice on the checkout page for mobile view, which results in the duplicate order summary appearing.
It’s good to hear that you managed to remove the extra summary with custom CSS as a workaround. Here are some suggested troubleshooting steps:
Temporarily switch to a default theme like Storefront and disable all non-WooCommerce plugins except for WooCommerce and any WooCommerce blocks plugin. Then test if the duplicate summary still appears.
Check for custom code in your theme’s functions.php file or custom plugins that might be adding checkout elements. If you or a developer have added custom snippets or filters related to checkout block rendering or styling, review them to make sure they’re not duplicating the order summary block.
I see your site is on LiteSpeed. Clear any caching plugins or server-side caches as they might cause outdated styles or blocks to persist.
I set the diagnose mode: I disabled all plugins except for Woocommerce. Enabled 2024 theme. And i still can see the additional summary on the new block checkout.
Could you please share the system status report from the staging site, as well as a screenshot or screen recording showing what you see on your end? You can share the report from woocommerce > status > get report > copy for support and share it using pastebin.com.
Thank you for the update. I’ve checked this and I’m also able to replicate the issue on my end. I’m discussing this internally with my team and will get back to you once I have confirmation.
In the meantime, could you please try replacing the block-based checkout with the classic checkout, or use the checkout shortcode[woocommerce_checkout] and see if you still face the same issue?
but i cannot use the shortcode now, because the 2025 theme looks very very bad with the shortcode.
It messes up the whole checkout form. It has a second column on the right almost completely blank, that should be at the bottom. And the summary should be on the right.
Thank you for sharing this detailed update and the screenshots. We’ve thoroughly checked your staging site and are able to reproduce the duplicate order summary issue on mobile as well. Here is a screen recording for reference: https://streamable.com/ph1hgq. We’ve also confirmed seeing this behavior with the 2025 theme, so it’s not isolated to your setup.
It’s great to hear you were able to hide the duplicate summary with CSS on your main site for now.
In the meantime, could you open a topic with the theme support so they can determine whether it’s a bug or an intended behavior related to the block-based checkout? https://wordpress.org/support/theme/twentytwentyfive/.
By default, block is added automatically to improve the checkout experience and it’s not possible to change its location via block editor. Maybe in feature they will add that option.
For now, you need custom code if you want to change the location of this block or display it elsewhere.
OPTIONAL You can change the location of the “duplicated” block using following code. Add it to your custom JS file and and it will display the block before the Payment section. It’s recommended to enqueue the JS only on the checkout page.
document.addEventListener('DOMContentLoaded', () => { const moveOrderSummary = () => { // Run only on mobile screens if (window.innerWidth > 767) return;
// Get the Order Summary block const orderSummary = document.querySelector( '.checkout-order-summary-block-fill-wrapper' );
// Get the Payment step block (change the block ID to target another step) const paymentBlock = document.querySelector( '#payment-method' );
// Exit if required elements are not yet available if (!orderSummary || !paymentBlock) return;
// Prevent moving the block multiple times if (paymentBlock.previousElementSibling === orderSummary) return;
// Move the Order Summary before the Payment step paymentBlock.parentNode.insertBefore(orderSummary, paymentBlock); };
// Initial execution after DOM is loaded moveOrderSummary();
// WooCommerce Blocks render asynchronously, // Observe DOM changes and re-run when needed const observer = new MutationObserver(moveOrderSummary); observer.observe(document.body, { childList: true, subtree: true });
// Re-run logic when screen size changes window.addEventListener('resize', moveOrderSummary); });
Then you can remove the top sidebar block on mobile.
Thank you for your contribution, @enteroz. It’s greatly appreciated.
@avagp, you can try Enteroz’s suggestion to see if it works for your situation. Regarding support in the new thread, you will receive assistance there, as each plugin and theme has a dedicated support team. You can be confident that your issue will be addressed.
I made a change that i would like to share with you.
I removed the bottom summary, and made the top summary float fixed. This is more comfortable on mobile and i don’t duplicate info making the checkout a longer experience.
