Hi @ljwonline,
Thanks for the detailed explanation!
Looking at your checkout, you’re actually using the WooCommerce block-based checkout, which renders independently of Visual Composer. VC can control your headers, footers, and general page layouts, but the WooCommerce checkout block has its own rendering pipeline that VC doesn’t influence — which is why it looks polished inside the VC editor preview but different on the live frontend.
This isn’t strictly a Storefront issue either, the block checkout will look the same regardless of theme, as it uses its own built-in styles.
A few things worth trying:
- Go to Pages → Checkout → Edit (with the standard WordPress editor, not VC). If you see a
woocommerce/checkout block, that’s what’s rendering on the frontend. The styling you see in VC’s preview is VC’s own wrapper, not what customers see.
- The block checkout has its own styling options. In the WordPress editor on the checkout page, you can adjust colours, spacing, and layout directly on the checkout block itself without needing VC.
- Try testing for conflict following this instructions: https://woocommerce.com/document/how-to-test-for-conflicts/. That would tell us if a plugin is responsible for stripping off the CSS layouts.
Let us know your findings.
Hi
Thanks for the reply.
I went to Pages > Checkout > Edit and there is nothing to see in the main content area.
If I click into the “html” section there is a bunch of code for the checkout process starting with the code below. Although I can not see an end tag within this sections for the initial <div below. is loading>
<!-- wp:woocommerce/checkout -->
<div class="wp-block-woocommerce-checkout alignwide wc-block-checkout is-loading">
<!-- wp:woocommerce/checkout-fields-block -->
<div class="wp-block-woocommerce-checkout-fields-block"><!-- wp:woocommerce/checkout-express-payment-block -->
<div class="wp-block-woocommerce-checkout-express-payment-block"> </div>
<!-- /wp:woocommerce/checkout-express-payment-block -->
I can not see anywhere currently to edit the layout.
thanks
Lee
Hi there!
Thanks for your detailed explanation that helps a lot.
What you’re seeing is expected when using the block-based checkout in WooCommerce.
The code you shared (e.g. <!-- wp:woocommerce/checkout -->) is the block markup, and in some cases the editor may only show a minimal structure or appear empty in the visual view. This doesn’t mean anything is broken the checkout layout is often rendered dynamically, which is why you may not see a full structure or closing tags in the HTML view.
The fact that you’re not seeing anything in the main content area suggests the editor may not be rendering the block properly.
Regarding the layout issue, could you please try temporarily deactivating the Visual Composer plugin and then check the Checkout page again?
If the layout appears correctly after doing this, it would indicate that Visual Composer is affecting the checkout page layout. In that case, you may either disable Visual Composer on the Checkout page or consult a developer to adjust the layout so it works properly with the plugin.
You can also reach out to the Visual Composer support team again and inform them that the plugin is breaking the checkout page layout, so they can further investigate and assist you accordingly.
Hi
Thanks for the reply.
I did what you suggested and disabled the VC plug in.
It messes up the main site templates as expected the layout for the checkout process is fixed and this is how I want it to look when the VC plugin is enabled.
I did hire a “so called” expert to integrate the VC footers before but he messed it up so I’m a bit cautious now when trying to find someone to do this.
When I first contacted VC about this issue they said it wasn’t there problem and a storefront issue but clearly its an issue with the way it works with VC plugin.
I will contact them again and see if they can offer any further help with this.
thanks
Lee
Hi there!
Thanks for the update.
Since disabling the Visual Composer (VC) plugin fixes the checkout layout, this clearly indicates that the plugin is affecting or breaking the checkout structure
In this case, the issue is not with Storefront theme, but with how the VC plugin is interacting with the checkout templates.
I understand your concern regarding previous custom work, but since the layout issue only occurs when VC is enabled, the plugin development/support team will need to investigate this further and provide a proper fix or compatibility adjustment.
I would recommend reaching out to the VC support team again and clearly informing them that:
- The checkout layout breaks when VC is active
- The issue disappears immediately when VC is deactivated
- This confirms a compatibility conflict with their plugin
They should be able to guide you or provide a fix for proper integration with the checkout page.
Many thanks for the replies. Much appreciated.
I have contacted VC support and informed them of this so hopefully they will look into this now.
Regards
Lee
Hi @ljwonline,
You’re very welcome, and it’s great to hear the direction helped clarify things. I’m glad we could point you toward the root cause here with Visual Composer affecting the checkout layout.
If anything else comes up while you continue working with their support or testing further, feel free to reach out, happy to take another look with you.