Broken checkout page

Resolved Tradedog
(@tradedog)

10 years, 6 months ago

The fields in my checkout page are jumbled (styling issue I imagine) and very unattractive. You should be able to see it here http://cocoallegro.co.za/checkout/ or navigate there with a dummy purchase from cocoallegro.co.za

I would really appreciate some advice on how to make it look good again. Also would like to get rid of the “ship to different address” function.

My thanks in advance.

https://wordpress.org/plugins/woocommerce/

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

Plugin Contributor Mike Jolley
(@mikejolley)

10 years, 6 months ago

WooCommerce > Settings > Shipping “Only ship to the customer’s billing address”

Display issue is due to the clear in your theme css https://dl.dropboxusercontent.com/s/x3cgze9rwzqw4rp/2015-09-15%20at%2011.14.png?dl=0

Thread Starter Tradedog
(@tradedog)

10 years, 6 months ago

Thanks Mike

What should I change there?

Plugin Contributor Mike Jolley
(@mikejolley)

10 years, 6 months ago

Remove the clear.

Thread Starter Tradedog
(@tradedog)

10 years, 6 months ago

And now this issue.

Where do I edit this, in Woocommerce?

Thread Starter Tradedog
(@tradedog)

10 years, 6 months ago

Oops sorry. Theme CSS

Plugin Contributor Mike Jolley
(@mikejolley)

10 years, 6 months ago

Yep, theme 🙂

Thread Starter Tradedog
(@tradedog)

10 years, 6 months ago

Oops sorry. Theme CSS

Thread Starter Tradedog
(@tradedog)

10 years, 6 months ago

Sorry repeat!

Is there any way of fixing this with custom css?

The theme has a custom css box.
Plugin Contributor Mike Jolley
(@mikejolley)

10 years, 6 months ago
```
.woocommerce form .form-row {
clear:none !important;
}
```
Thread Starter Tradedog
(@tradedog)

10 years, 6 months ago

Brilliant! Wish I could do this stuff.

I know I am a pain in the …… but when you have some time some css to get rid of all that stuff on the right (ship to diff address) would be much appreciated.

Thanks again
Jon9679
(@jon9679)

10 years, 6 months ago
I assume you mean get rid of Additional information and make it a little nicer?

This will make it fill 100% of the container.
```
.col-1 {
  width: 100% !important;
}
```
This will get rid of the “Additional information”
```
.col-2 {
  display: none;
}
```
Any good? As you’ve done before add these 2 to the CSS.
Thread Starter Tradedog
(@tradedog)

10 years, 6 months ago

Brilliant!

Thanks so much

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

The topic ‘Broken checkout page’ is closed to new replies.

Tags