[Resolved] WooCommerce Checkout Page formatting

[Tim]

Hello

I’m not sure if this is the GP theme or WC issue – sorry in advance if it turns out to be the latter.

There are three issues I have with the current layout of my WC checkout page.

Area of site for products is (we only have one):

https://sea.school/product/shakedown-postcard/

Screenshot of checkout can be viewed here:

https://sea.school/wp-content/uploads/2021/07/Screenshot-2021-07-06-at-22.08.04.png

issues are:

Most importantly – there are no boxes for inputting card details via stripe. Boxes do appear if you persevere with it and press ‘place order’ without entering them though.

The card symbols (Mastercard, Visa etc) for the Stripe payment options are massive.

There is a product summary at the bottom that lists the product but it’s all squashed up (due to column settings) – I’d like to get rid of this altogether.

Basically all looks a bit dodgy. I were a customer I would hesitate before inputting my details.

Any suggestions for how I can get the boxes to show and tidy it up would be much appreciated.

Cheers, Tim

[Ying]

Hi Tim,

Could you check if the WooCommerce Stripe Gateway plugin is installed and activated?

Let me know 🙂

[Tim]

Hi Ying,

Thanks for getting back to me so quickly.

Yes I have got that plugin and it all works – I’ve sent a trial payment to Stripe.

Basically it looks fine – the card icons shrink and the card boxes appear – but only once you press ‘place order’

Cheers, Tim

[Tim]

This is how it looks after pressing ‘place order’

https://sea.school/wp-content/uploads/2021/07/Screenshot-2021-07-06-at-23.01.34-e1625611964158.png

once here it works normally and you can put a payment through no problem.

I have tried disabling various plugins to see if they are creating this issue, but so far this hasn’t made any difference.

Cheers, Tim

[Ying]

Could you try to disable all plugins except GP Premium, Woocommerce, and stripe?

If it still doesn’t work, disable GP Premium as well.

Let me know what the test result is 🙂

[Tim]

Hi Ying, I disabled all the plugins above, including GP premium

The problem still appears – could this be the theme?

Here it what it looked like with all the above off:

https://sea.school/wp-content/uploads/2021/07/Screenshot-2021-07-07-at-11.36.56-e1625654558408.png

Cheers, Tim

[David]

Hi there,

its not theme related, the code that is being output is missing certain styles, for example; add this CSS to set the width of the card images:

#add_payment_method #payment ul.payment_methods li img,
.woocommerce-cart #payment ul.payment_methods li img,
.woocommerce-checkout #payment ul.payment_methods li img {
    max-width: 30px;
}

Might also benefit from increasing the container size to larger then 700px as its squeezing the table fields which is messing up the layout.

And the Missing Input fields is generally because the Stripe plugin API has not been setup.

[Tim]

Thanks for this David – I’ll look at this now.

[David]

You’re welcome

[Tim]

Hi David,

The only control I have for the checkout are via the theme.

May I ask where to add the CSS?

I do have a child-theme.

Also how do I increase the container size.

I’ll look into the API – but payments are working

It’s odd that it looks all fine once the place-order button has been clicked.

Any help with this would be much appreciated. I’m so close to having this sorted it’s tantalising!

Cheers, Tim

[David]

That CSS can go into your Child Themes styles.css or you can just add it to the Customizer > Additional CSS.

The Container Size is set in Customizer > Layout > Container. This will change the rest of the site where you’re not using Full Width pages.

[Tim]

Thanks for this. This has resolved the size of the cards – and the container size increase has made it look a lot better.

I notice though that there are still no card boxes and there both address fields (for if you are sending to a different address to billing) are visible when you first go into the checkout

The second address field disappears and the card payment box appears once you press the ‘place order’ button.

I get a notification from Stripe that a failed order has occurred when I do this though.

Thanks for your help so far.

I’m wondering – should I be using the stripe extension (which requires a WordPress.com account) or should I be using the WC stripe plugin?

Thanks, Tim

[Tim]

Hello,

I’m still trying to resolve this. Do you think I should contact WooCommerce? Or is this something that can be sorted at this end?

It’s odd that it all looks fine and works as it should once the ‘place order’ button has been pressed, but no-one is going to get that far I suspect.

Cheers, Tim

[David]

It is really a woocommerce issue – and there support may be be better able to advise.

But there is something peculiar with the template the checkout is using. In Dashboard > Pages, do you have a Checkout Page ?

[Tim]

Hello

I do, but when I try and open it with Elementor I get the following message:

https://sea.school/wp-content/uploads/2021/07/Screenshot-2021-07-08-at-09.52.29.png

I’ve contacted WC also as you suggested.

Cheers, Tim

[Author]

Posts