WooCommerce Terms & Conditions Checkbox Formatting

[tylerstannard]

Hi again,

The Terms & Conditions checkbox at the end of the WooCommerce checkout is showing on top of the text, can it be moved to the left, to match the Subscribe checkbox directly above? Please see screenshot. Thanks!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

I’ll get that fixed for the next update also.

Please add this to Theme Options => Custom CSS:

.wc-terms-and-conditions span {
    padding-left: 20px;
}
.wc-terms-and-conditions .terms input {
    margin: 8px 0 0 0;
}

[tylerstannard]

I changed the padding-left to 30px, that brought the text from under the checkbox. However the checkbox is still not left aligned, I tried some different values for the input margin with no effect. Thanks!

[David Martin – Support]

Do you mind adding a WP login? I’ll take a closer look.

Thanks.

[tylerstannard]

Hi Dave, I’m really sorry I can’t, I’d have to get clearance so I can live with it as is for now. I do have the “WooCommerce MailChimp” plugin creating that first checkbox, if that helps.

[David Martin – Support]

Please test this:

.wc-terms-and-conditions span {
    padding-left: 30px;
}
.wc-terms-and-conditions .terms input {
    margin: 8px 0 0 0 !important;
}

[tylerstannard]

No luck with that either :-/

Here are all the contents of my Custom CSS text area (pretty much everything I’ve gotten from my support topics here):

.browser-safari .woocommerce form .form-row input.input-text {
padding: 7px 15px 7px 7px;
height: 44px;
line-height: 22px;
}

.swiper-wrapper,
.swiper-slide {
width: 100%!important;
}

figure.animated-overlay > a {
z-index: 20;
}

li.cat-item.cat-parent > span.count {
top: 3% !important;
}

.aux-item.aux-search nav.std-menu,
.aux-item.aux-search nav.std-menu > ul ,
.aux-item.aux-search nav.std-menu > li {
height: 120px;
line-height: 120px;
}

.wc-terms-and-conditions span {
padding-left: 30px;
}
.wc-terms-and-conditions .terms input {
margin: 8px 0 0 0 !important;
}

[David Martin – Support]

Thanks, I have the patch submitted so it will be in the next update.

This CSS will do it:

.woocommerce #payment .terms {
    float: left;
}
.woocommerce #payment .terms input {
	margin: 8px 0 0 0;
}
.wc-terms-and-conditions span {
    padding-left: 30px;
}
.woocommerce #payment .terms .woocommerce-form__label-for-checkbox .required {
    padding: 0;
}

[tylerstannard]

That worked! I just changed the padding-left to 17px, so keep all the text on the same line, at 30px the asterisk was on line 2.

Thanks for the help!

[David Martin – Support]

Glad to help you, this is in the next pending 1.0.7 release.

Thanks