Ugly Checkout page for woocommerce

[Saulis]

www.procidat.lv
Problem is that checkout page looks awful. I can download plugin that lets me edit some fields in checkout page, but the whole page either way looks ugly and stretched, I am afraid that it will scare away customers. Is there anything I can do about it? I have seen that for other uses woocommerce checkout page looks different, more compact and by design.
Please see checkout page image: (I made font smaller so You could see whole checkout content.)

[ruenel]

Hello There,

Thanks for writing in! You checkout page has a blank sidebar. You may need to insert widgets for the sidebar or totally remove the blank sidebar by change the page template to Layout - Fullwidth. To know more about the page template and how you can change it, please check this out: https://theme.co/apex/forum/t/features-page-templates/50/1

Your form is not showing any border for the fields because you may have added this code:

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background: #fff;
    padding: 20px 10px;
    border: none;
}

If you could remove this code, you will be having something like this: https://image.prntscr.com/image/RJSUyNdVTJyNguzcU1-QMg.png

And if you want to have two columns in your check out page, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(min-width: 980px){
  .col2-set .col-1,
  .col2-set .col-2 {
    float: left;
    width: 48%;
    margin-right: 4%;
  }

  .col2-set .col-2 {
    margin-right: 0;
  }
}

And the final display would look like this:

Hope this helps.

[Saulis]

@RueNel

@media(min-width: 980px){
.col2-set .col-1,
.col2-set .col-2 {
float: left;
width: 48%;
margin-right: 4%;
}

.col2-set .col-2 {
margin-right: 0;
}
}

That helped, thanks a lot. A minor porblem is that if customer will not choose Different shipping adrres, then title JOUR ORDER will appear in wrong place. How can I get it below input fields?

[paul.r]

Hi,

To achieve that, you can add the code below in Theme Options > CSS

.woocommerce-checkout #order_review_heading {
    clear:both;
}

Hope that helps.

[Saulis]

@paul.r

.woocommerce-checkout #order_review_heading {
clear:both;
}

Yes it does, thank You. Thats all.

[Alaa]

You are welcome