Column layout and styling ignored on front end of checkout page?

[Jont]

Hi!

Before the last PRO update, I had a custom WooCommerce checkout page with three columns to create space left and right. The update screwed up the layout, so I recreated it with the “new” rows. As seen below.

However, this layout and some of the styling gets completely ignored on the front end. As you can see below, the column layout is ignored, the margin spacing between the elements (bottom is set to 1.5em on all the elements), and the styling around the second text bar as well.

I have no custom CSS concerning rows. I have tried gaps, they don’t seem to work and I have cleared my cache.
What can I do? It’s rather important as this is my check out page and should look clean

Thanks in advance!

Jont

[albrecht]

Hi Jont,

Thanks for writing in.

To achieve that in the new row. Try adding just 1 Column, then set the layout to custom and enter 70% or any percentage you like, then set Align Horizontal to Center, then lastly uncheck Grow. Here’e a screenshot below for reference.

Hope it helps.

[Jont]

Hi! On the backend, it works flawlessly. Thanks for that! Front end: exactly the same as in my previous post
It seems like some bug or conflict, also because some of the styling is being ignored. Any other ideas?

Update: if I create a new page and try to create this layout, the same problem occurs. So WooCommerce probably has nothing to do with it…

Update: I turned the page back into a “classic” layout, using classic rows & columns. This did the trick concerning the space on the left and right, but styling is still ignored. As you can see, the second text element is supposed to have a greenish background color and a border. Also, the margins (1.5em on the bottom of every row) are ignored. See current front end in screenshot:

[ruenel]

Hello @Jont,

You may have inserted a broken css code or something. In my initial inspection, I found this:

.entry-wrap .entry-content{color:#000;

The code needs to be closed like this: `.entry-wrap .entry-content{color:#000;} so that it will not affect other code block. Please provide us access to your site so that we can check your settings and investigate further. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you in advance.

[Jont]

Hi!

Thanks, I’ve added a secure note to the post above.
I fixed the broken CSS, didn’t to anything. Also: in the backend (pro editor) everything is showing fine, only on the front end it’s not.

The page i’m referring to has no page specific custom css. I was fooling around in “Aanmelden111 - Concept” to recreate the page I want, same problem occurs there… You can use that one to test some stuff out if you want

Thanks!

Jont

[rad]

Hi Jont,

So far, I can re-create this on my installation without issue with the new v2 class and rows, and even columns. Though, since you already forced it with classic structure, I’m afraid it will result to the same. Perhaps we can go to v2 structures and we test it on your test page?

The problem with the background on that text element is, it’s because it’s a v2 element but still rendered as classic element without v2 styling. Hence to solve this, let’s do this on v2 structure, please let me know if I should go ahead.

Thanks!

[Jont]

Hi!

Gladly test it out on the test page Aanmelden111 (concept). See if you can get it to work!
I set default row to classic, by the way, because I had to redo the page in classic rows… just so u know.

You can just lorum ipsum the text and use some random colors, I can adjust that later…
The WooCommerce shortcode is [woocommerce_checkout] and I put it between

Thanks in advance!!

[lely]

Hi Jont,

Please check it now.

I added a new section and set the settings to use v2 Row.

See how, I have set the ROWS. Check it under Layout, the largest 3 breakpoints, I have set the column with to 60%. Then 100% for the 2 smallest breakpoints. Added a headline, a text and content are for the woocommerce checkout. All of what I did on the backend works on the frontend. There’s spacing between element using margin.

Please let us know if you still have questions.

[Jont]

Cool, almost there! Everything is in place now, except the WooCommerce checkout form gets scrambled.
It’s now one long list of text bars, while most of these (like first name / last name, etc.) should be inline?

[ruenel]

Hello @Jont,

I have checked your site and I am seeing this:

The fields were displayed in the expected format. Are you seeing it differently? Please send us a screenshot then.

Thanks.

[Jont]

Hmm, strange. This is what I get (on back- as well as frontend):

However on the original page (the live checkout page: “Aanmelden”), the fields are displayed correctly. I cleared cache, no results.

UPDATE: ok, so I changed the name of the test page from Aanmelden111 to Aanmelden and I set that one as the checkoutpage for WooCommerce, to see if maybe it has to be the live checkout page for the WooCommerce styling to be apllied. That seems to be the case, cuz the fields are displayed correctly now.

However! Back to square one on the whole layout issue. As you can see below (this is the page created based on the work you did with the rows and stuff, only now it’s set as the checkout page). So for the time being I’m gonna go back to the “classic” setup for the live checkout page. Chronologically:

• I filled the page you made with the right content
• It worked, except the checkout fields display block where they should display inline
• I set that page as live checkout page. Styling fails again.
• I set the page with the classic rows as checkout page again (and named it Aanmelden)
• I set the page with the new rows as concept again and renamed it Aanmelden111

[lely]

Hi Jont,

When you set a page as checkout page on Woocommerce settings, its content will be overriden by a template. With or without content, checkout page template will override th content of the page you have chosen. This is the same when you set other woocommerce pages. Those woocommerce template has predefined design set either by woocommerce and with our theme the stacks woocommerce design.

Woocommerce checkout shortcode are use when you do have customize store setup and process.

Now I am confuse why we have to use woocommerce shortcode if you intend to set it as Woocommerce checkout page on settings. I am asking this to see your end goal here. Woocommerce checkout page have different page structure than checkout page created using the builder. Can you clarify which one you intend to use?