WooCommerce Checkout Page Cut in Half by ShopEngine? Fix Layout Conflict with Shortcode or CSS (2025)

WooCommerce Checkout Page Cut in Half? ShopEngine Plugin Layout Conflict

You built your WooCommerce store, installed the ShopEngine plugin to customize the default checkout page, and everything looked fine in the editor. But on the front end, the checkout page is literally cut in half — the left column (billing/shipping) appears on one side, and the right column (order review/ payment) slides down or disappears. The cart page may also show minor design glitches like misaligned text. This happens because ShopEngine overrides WooCommerce's default checkout template with its own, but the template's CSS layout conflicts with your theme (e.g., Vault or another theme). The fix is to revert the checkout page to WooCommerce's native shortcode, or apply a simple CSS clear fix to restore the two-column layout.

Step-by-Step Solution

• 1Backup your site before making changes.
• 2Go to Pages → All Pages and edit the Checkout page.
• 3Remove any ShopEngine block, Elementor widget, or custom content inside the checkout page.
• 4Paste the WooCommerce shortcode: [woocommerce_checkout]
• 5Save and test the frontend.
• 6If the layout is still broken, add the provided CSS via Appearance → Customize → Additional CSS.
• 7Clear all caches (browser, plugin, CDN) and test again.

/* Force the checkout page to use a two-column layout and clear floats */
.woocommerce-checkout .woocommerce {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.woocommerce-checkout #customer_details {
    width: 48%;
    float: left;
}
.woocommerce-checkout #order_review {
    width: 48%;
    float: right;
}
.woocommerce-checkout .woocommerce-checkout-review-order {
    clear: both;
}

Final Recommendation