Woocommerce checkout page problems

pa_esp
(@pa_esp)

7 years, 12 months ago

Hi guys,

Great theme, but there are some major styling issues with the Woocommerce checkout page. There must be some CSS somewhere that is conflicting with the standard Woocommerce styling. Can you have a look at it? The problems occur on your demo website (https://afterimagedesigns.com/wp-bootstrap-starter/woo-commmerce/checkout/) as well as on my website.

I’m going to investigate it myself today and if I find the culprit(s) I will post a solution here for others.

Cheers, Paul

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Theme Author Afterimage Designs
(@afterimagedesigns)

7 years, 11 months ago

Hi @pa_esp,

Thank you for using WP Bootstrap Starter theme, please update to the latest theme version to fix the issue.
Thread Starter pa_esp
(@pa_esp)

7 years, 11 months ago
Hi guys,

Thanks for your reply. Unfortunately the update doesn’t solve the problem. In fact the update removes Bootstrap row classes and uses Woocommerce responsive class instead (which is worse for me).

However, I worked out the problem. The reason that the checkout page looked messy was that there was this CSS style:
```
.form-row {
   display: flex;
}
```
Flexbox was messing up the form so I added the following to my child theme CSS:
```
.woocommerce-billing-fields .form-row, .woocommerce-shipping-fields .form-row {
	display: block;
}
```
This has solved my problem.

Cheers!
- This reply was modified 7 years, 11 months ago by pa_esp.
allense2018
(@allense2018)

7 years, 10 months ago

I have the same problems with you , the shipping fields layout is msessy in display.
Thread Starter pa_esp
(@pa_esp)

7 years, 10 months ago
@allense2018 – Add the code I have shown to a CSS file. Here it is again:
```
.woocommerce-billing-fields .form-row, .woocommerce-shipping-fields .form-row {
	display: block;
}
```
Hopefully this will solve your problem. If it doesn’t, reply to this post and I will have another look at my code. The authors may have changed their code since I last corrected this error.

Cheers, Paul
allense2018
(@allense2018)

7 years, 10 months ago
@pa_esp
Hi Paul
Thanks so much for your help, I’ve add your code to the page builder custom css and it works.

Cheers, steven
- This reply was modified 7 years, 10 months ago by allense2018.
Thread Starter pa_esp
(@pa_esp)

7 years, 10 months ago

Hi Steven,

Brilliant! I’m glad it works okay 🙂 I’m very pleased I could help.

Cheers, Paul