Gutenberg checkout preview matches theme, published page does not

Hello,

I am using Gutenberg for the WooCommerce checkout page.

The problem is that in preview, the checkout looks correct and follows the WoodMart theme styling, including colors and button style.

But once the page is published and viewed on the real frontend, Gutenberg no longer takes the theme colors and the design is different from the preview.

So the issue is:

preview looks correct
published checkout page does not use the same WoodMart styling
theme colors are not applied correctly on the live page

I am using the WooCommerce Checkout Block with Gutenberg.

Is there a specific setting, option, or compatibility requirement so that the published Gutenberg checkout uses the WoodMart theme colors and styling exactly like in preview?

Thank you.

Hello,

At the moment, the blocks you are using are not fully compatible with the new WooCommerce Blocks-based checkout.

We recommend using the theme’s custom checkout layout instead, as it ensures proper styling and compatibility with the theme design.

Best Regards

Hello,

Thank you for your fast reply.

I do not think this is only a general WooCommerce Blocks compatibility issue.

I have another site using the same WoodMart theme where the styling works correctly, and I also see on my custom register page that some blocks are supposed to follow the theme style. On this site, it feels more like the theme is not overriding the block styles properly on the published page, even though the preview looks correct.

So I am wondering if I may have changed something that prevents the WoodMart prebuilt styles from taking priority, and what I should check to make the theme styling apply normally on the frontend.

Thanks again,

Best regards.

Hello,

To assist you further, I have created a new layout named “Paiement mise en page” on your site for testing purposes.

In this layout, the styles are loading correctly and the design is properly inheriting the WoodMart styling on the frontend. It may be caused by layout configuration or block-related overrides rather than a general theme problem.

Best Regards

Hello again !

Thank you for your update.

I do not have access to a computer right now, so I cannot check the new layout immediately. I will review it later.

However, the issue is not only related to the checkout layout.

For example, on the registration page (/inscription), the button is also supposed to follow the theme styling, but it seems to be taking styles from a root/global source instead. That is what feels unusual to me, because I do not have this issue on my other site using WoodMart.

The same thing happens when I create a checkout layout with Gutenberg blocks. It looks like the WoodMart theme styling is not being applied properly, and something else is overriding it.

That is why I am not sure this is only a layout configuration issue, since I am seeing similar behavior outside the checkout as well.

Thanks again for your help.

Hello,

What you are experiencing is related to how WooCommerce Blocks handle styling. These blocks (such as the checkout and registration buttons) use their own CSS classes like .wc-block-components-button, which are loaded separately and often override the theme styles on the frontend.

Additionally, if the class woocommerce-block-theme-has-button-styles is not present on the , the theme will not override the default block styles, resulting in the default WooCommerce appearance.

You can use the following CSS to make the buttons visually consistent with WoodMart:

/* WooCommerce Blocks button styling override */
.wc-block-components-button:not(.is-link) {
    background-color: var(--wd-primary-color) !important;
    color: #fff !important;
    border-radius: 5px !important;
    padding: 12px 25px !important;
    font-weight: 600;
    border: none !important;
    transition: all 0.3s ease;
}

.wc-block-components-button:not(.is-link):hover {
    background-color: #333 !important;
    color: #fff !important;
}

.wc-block-components-button:not(.is-link).is-style-outline {
    background-color: transparent !important;
    color: var(--wd-primary-color) !important;
    border: 2px solid var(--wd-primary-color) !important;
}

.wc-block-components-button:not(.is-link).is-style-outline:hover {
    background-color: var(--wd-primary-color) !important;
    color: #fff !important;
}

Best Regards

[Author]

Posts