WooCommerce Checkout Page formatting

Hi Tim,

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

Let me know :)

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

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

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 :)

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

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.

Thanks for this David - I'll look at this now.

You're welcome

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

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.

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

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

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 ?

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