SOLVED: Checkout looks different in the preview and builder than in the live version

[tobiashaas]

Browser: Chrome latest
OS: macOS latest
URL: https://copyshop.tobiashaas.dev/checkout/

I created a checkout template and then noticed that it looks different in the builder and template view than on the live version?!

Noticed in Bricks 1.7.3 and 1.8 Beta 2

Is this a bug or am I doing something wrong here? Will be difficult for me to style the template if the versions are rendered differently.

It also doesn’t matter whether the checkout template is loaded via the shortcode on the page or is rendered by default. So with tag or tag

Template Preview

Live Version

Bricks Builder

[aslotta]

Hey Tobias,

thanks for your report.

Looks like you’re using Frames. Your frame’s CSS collides with the default WooCommerce styles.

Disabling these styles fixes the issue:

The only problem left then is the missing margins which is coming from ACSS’ paragraph spacing fix.

Best,

André

[tobiashaas]

Hey André, thank you for your answer!
but doesn’t answer my other question why the preview looks different than the live version. This frame was created with the Template Preview and now I see that the live version looks different

It looks to me like not all WooCommerce styles are loaded in the preview and builder right?

[aslotta]

Hey Tobias,

there is indeed a small difference in the way the woocommerce form is output in the builder vs. the frontend. We will apply some small adjustments that should fix this inconsistency.

Thanks again for your report.

Best,

André

[tobiashaas]

Payment Box is also different

Bricks Preview

Live Preview

[tobiashaas]

You should definitely check everything again, there are a few more things that are different in the preview than in the live version.

[timmse]

Hi Tobias,
We’ve fixed the issue in Bricks 1.8, now available as a one-click update in your WordPress Dashboard.

Please let us know if you are still experiencing issues.

Best regards,
timmse

[tobiashaas]

Fantastic! I’ll test it and if I notice anything I’ll let you know

[tobiashaas]

Hey @timmse i noticed something again today.
It still looks different than on the frontend.

Frontend View

Template Preview

[timmse]

Hi Tobias,
In my checkout template, everything is identical: in the builder, as well as in the template preview and frontend.

And when I visit your checkout, all the fields are white and not grayed out

[tobiashaas]

Please check the DOM its different.

• https://frames.tobiashaas.dev/template/checkout/
• https://frames.tobiashaas.dev/checkout/

The fields (Select2) are of different heights.
I always work in the preview and that makes it hard to adjust things. If the frontend is rendered differently.

I’ll take more screenshots later when I’m home.

[timmse]

Can you disable the Woo Payments plugin and see if that makes a difference? It is not visible in the template and seems to load styles/js in the front end that affects the input fields.