Align all checkout forms to center

Shapely
1

Hello,

I would like to need some help with my checkout. I would like to have all forms aligned to the center, and also have it as 1 column. Like the first one, billing details.

Much appreciate the help!

Best

2

Hello there,

I hope you are doing well today.

I tried accessing your website but there is a coming soon page activated on it. Can you please disable that?

Best Regards,
Support

3

I have now disabled it.

Best

4

Hello there,

You can use the following CSS code to move the cart total to the right by going to Appearance > Customize > Additional CSS and pasting it there.


/*Move cart total*/
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
    float: left;
}

Best Regards,
Support

5

Thx, but there are still some elements in the right coloumn…

See attached print screen.

Best

6

Hello there,

Try adding the following CSS:


.woocommerce form .form-row-last, .woocommerce-page form .form-row-last {
    float: left;
}

.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
    float: left;
    padding-left: 23px;
}

Best Regards,
Support

7

Thanks!

Is it possible to have the same lenght of the form as the one above. Now is it half…

Best

8

Hello there,

This should do the trick:


/*Increase checkout 2nd address width*/
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
    width: 100%;
}

Best Regards,
Support

9

Thanks! Looks good. Just 2 minor changes that bugs me…

  1. The last name field - should be as long as the other fields
  2. the email field - should also be as long as the other fields

If possible?

Much appreciated for all the help!

Best

10

hey there

Please add this CSS in appearance - customize - additional CSS


.woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last {
    width: 50%;
    overflow: visible;
}

Thanks!
Colorlib Support Team

11

I forgot about email form, please add this code as well:


.woocommerce-checkout p#billing_email_field {
    width: 100%;
}
12

Thanks Noda! Looks great!

Is it possible to make the text stand next to check-boxes instead of below? Or with more padding?
Now the boxes are overlapping the text, and it looks a bit weird. It’s for the “subscribe to our newsletter”,“create an account” and, “I’ve read and accept the terms & conditions”?

Really appreciate the help!

Best

13

Try this code now:

.woocommerce-checkout .form .form-row label.checkbox span {
position: relative;
left: 20px;
top: -9px;
}

14

Hi again, it didnt work…

15

HI

Cant see :frowning: Please disable coming soon page

16

It’s disabled now.

Best

17

Hello there,

Please try using this CSS instead:


p.form-row.form-row-wide.create-account span {
    position: relative !important;
    padding-left: 17px !important;
    top: -9px !important;
}

Best Regards,
Support

18

Thanks! Looks great.

Is it possible to have the same for the “terms & conditions” row?

19

See screen shot

20

Hello there,

This should help:


label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox span {
    position: relative;
    padding-left: 15px;
    top: -9px;
}

Best Regards,
Support