Woocommerce credit card fields too small

No matter what CSS I try to use, I cannot get it to change. It’s way too small at 13px. Any idea how I can make it bigger? I’m using Woocommerce Payments which I believe is powered by Stripe.

Also, this only happens after I edit the checkout page with Cornerstone. If I delete the checkout page and regenerate the default woo checkout page, the credit card fields look fine, they’re styled with an 18px font size. So why why I edit the page in CS is it making the CC fields so small?

Hi @threeoten,

Thanks for reaching out.
We don’t recommend editing WooCommerce default pages through the Cornerstone. Alternatively, you can create a WooCommerce Single Layout using the Layout Builder and assign it to the Checkout page.

Hope it helps.
Thanks

That doesn’t change anything. Credit card fields are still tiny. I’m using the [woocommerce_checkout] shortcode in a raw content element to populate the fields on the page.

EDIT: It was the use of WooPayments that was causing the issue when using the [woocommerce_checkout] shortcode on a CS page. I disabled WooPayments and switched to the Woocommerce Stripe plugin and it is solved.

1 Like

Hey @threeoten,

The staging area is not accessible, please double check and update them so that we can investigate your issue properly.

Thank you.

As I said in the last message, it was solved. But I’m curious about what @tristup said:

We don’t recommend editing WooCommerce default pages through the Cornerstone . Alternatively, you can create a WooCommerce Single Layout using the Layout Builder and assign it to the Checkout page.

Why is it that you recommend checkout pages being made using the layout builder as opposed to editing the woocommerce default checkout page? In my experimenting, it functions the same on the front end. But in Cornerstone, the page that I make using the layout builder looks all messed up and does not represent what it looks like on the front end.

1 Like

Hey @threeoten,

It is best that you check out these videos instead:




Thanks.

I’ve seen all those videos already. So now I’m just confused. First, Tristup says:

“We don’t recommend editing WooCommerce default pages through the Cornerstone . Alternatively, you can create a WooCommerce Single Layout using the Layout Builder and assign it to the Checkout page.”

Then Ruenel sends one of Josh’s videos where he is directly editing the default Checkout page instead of using the woocommerce single layout in the layout builder. So which is it? And I’m asking what the difference is? Is there a difference? The only difference that I can see is that the layout is messed up looking when using the layout builder:

Woocommerce layout viewed in Cornerstone (messed up, squished to the left, and does NOT look like this when you directly edit the Checkout page as Josh is doing in the video you sent me):

Woocommerce layout viewed on front end (how it’s supposed to look):

1 Like

Hello @threeoten,

It is best that you follow Josh’s tutorials. It is more simple and straight forward.

Thanks.

Josh doesn’t actually say in the video which way to setup the page and he doesn’t say what the difference is, therefor Josh’s video doesn’t answer my questions. I can only see that his CS tab says “Page” instead of “Woocommerce single layout”.

So what is the difference between editing the woocommerce checkout page directly in CS and setting it up as a woocommerce single layout?

Hi @threeoten,

While editing the checkout page directly through the Cornerstone, the page will be modified. Whereas applying the layout does not change the actual page, If you de-associate the layout, you will get the original page back.

Hope it helps.
Thanks

Ok, that makes sense, thank you.

When I setup a woocommerce single layout for the checkout page, in Cornerstone it doesn’t look like it does on the front end (smashed to the left and not showing the columns):

How the same page looks on the front end:

I used the same CSS that Josh did in the video. Except in his video he doesn’t use the woocommerce single layout, he appears to be editing the checkout page itself, you can see “page” on the CS tab in his vid. What is causing the layout to render incorrectly in CS when using a woocommerce single layout? (see live examples of both in secure note)

Hello @threeoten,

Yes, it is more advisable that if you are editing a page, edit the page directly in Cornerstone. Single Layouts are best for posts, products, or other custom post types.

Best Regards.

Do you see why I am confused?

Hello There,

Yes, I see where you got confused. If I am gonna be editing the page, I would edit it like how Josh has done it in his video.

Thanks.

Well, as I already pointed out, Josh’s video doesn’t actually show us how he set up the page. I gave up on trying to get the answers here and instead went to the facebook group and talked to Josh himself, as well as others.

For anyone else who may come upon this thread, The way Josh sets up this page is not using a single layout, or even directly editing the default woo checkout page. He is actually creating a completely new page and then assigning the endpoint for checkout to this new page (which is in the advanced woocommerce settings).

Hey @threeoten,

We’re glad that Josh was able to help you fix your issue.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.