Positioning checkbox for “i’ve read and accept terms and condition”

Try this custom css:

.woocommerce-form__label-for-checkbox span {
  margin-left:20px;
}
.woocommerce-form__label-for-checkbox .required {
  margin-left:0;
}

Custom css can be entered at:
Dashboard > Appearance > Customise > Additional CSS

@lorro
Thank you so much! it worked like a charm…

@lorro
But this has moved all the checkbox in my woocommerce site. Checkbox for remember me in my account/login page is not in position anymore. here is the link the the issue…
https://www.hindola.com/wp-content/uploads/2017/09/Untitled-1.png

@lorro
Can you provide me with a custom css that will only reposition the “i’ve read and acc…” line in checkout page?

Please remove the last snippet and try this:

.woocommerce-checkout .woocommerce-form__label-for-checkbox span {
  margin-left:20px;
}
.woocommerce-checkout .woocommerce-form__label-for-checkbox .required {
  margin-left:0;
}

This one should have effect on the checkout page only.

Thanks lorro, that worked too.
But I’m having another issue. Since I’ve allowed guest checkout, I’ve enabled the option to create an account on checkout which is available as checkbox. Now, in checkout page after adding the last snippet “create an account” is not aligned with the checkbox. Here is the link of the screen shot..
I also want to align the checkbox just under the mobile field. it is out of the area now.. https://www.hindola.com/wp-content/uploads/2017/09/Untitled-3.png

Thanks and regards

Lorro,
Ithere is a common problem in Login page also, Under the login section “remember me” and checkbox are not in order. you can see the screenshot here…
https://www.hindola.com/wp-content/uploads/2017/09/Untitled-4.png
or you can go to https://www.hindola.com/my-account/ to see the issue

[ No bumping please. ]

/* checkout page, create an account checkbox */
.create-account .checkbox input[type="checkbox"] {
  margin-left:0;
}
/* my-account page, remember-me checkbox */
.woocommerce-account input[name="rememberme"] {
  height:19px;
}

I had the same issue with the “I’ve read and accepted the…” line on the checkout page. This worked – thank you!

I have a related issue – I want to make the checkbox and text larger & a different color so it’s more obvious to the customer that they need to check it before they click. How can I do that? I’m not very experienced with css so need specific info on where to put the code in addition to how the code should read.

Thanks!!

@nancygruver
Markup varies between themes. Please post your site url.

newmoongirls.com – Thank you. I’m using the Woo Storefront theme

Try this custom css:

.form-row .wc-terms-and-conditions input[type="checkbox"] {
  display: block;
  float: left;
  margin: 7px 16px !important;
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
}
.form-row .wc-terms-and-conditions span {
  font-size: 22px;
  color: #f44;
}

Custom css can be entered at:
Dashboard > Appearance > Customise > Additional CSS

Thank you so much for your help!!!

I added your css and when I published it I can see that the terms & conditions checkbox in the checkout form is much larger & obvious with the change in color & font size. This is great!

There are two other spots on the checkout form where I want to do the same thing:

1. the checkbox that appears at the top right edge of the right hand column that’s titled “Ship to Another Address?”

2. the checkbox that appears beneath the email address field in the Billing Details (left-hand) column.

How do I describe those locations on the form to make the same changes?

Please remove previous lines and replace with:

#ship-to-different-address .woocommerce-form__input-checkbox,
.woocommerce-checkout input[type="checkbox"],
.form-row .wc-terms-and-conditions input[type="checkbox"] {
  display: block;
  float: left;
  margin: 7px 16px !important;
  -ms-transform: scale(1.5) !important; /* IE */
  -moz-transform: scale(1.5) !important; /* FF */
  -webkit-transform: scale(1.5) !important; /* Safari and Chrome */
  -o-transform: scale(1.5) !important; /* Opera */
}
.form-row .wc-terms-and-conditions span {
  font-size: 22px;
  color: #f44;
}