WooCommerce "Terms Of Use" Checkbox on Checkout

[leadgenmedia]

Hi,

I set a “Terms & Conditions” page in WooCommerce’s “Checkout” settings.

As a result, there’s a checkbox in the order review box along with its label. The checkbox seems out of place.

I have also enabled a third party plugin (which calculates EU VAT) which will also, occasionally, show a checkbox above the payment button – that is what you’re seeing in the image I’m attaching.

I don’t understand why the first checkbox is to the left and the other one is to the right (as well as their labels) but both are broken.

What I’d like to is this:

a) align both checkboxes to the left (or to the right – it doesn’t really bother me as long as both are in the same place) and bring them inline with their labels.
b) have both checkboxes appear BELOW the payment button (but this many not be outside the scope of your support – I honestly don’t know! 😀 )

Thank you.

Attachments:

You must be logged in to view attached files.

[leadgenmedia]

This reply has been marked as private.

[Swift Ideas – Ed]

Hi there,

Add this custom css for the terms label:

.woocommerce #payment .terms input {
  margin: 9px 0 0 12px;
}

The one above the button though isn’t down to an issue with our css – you’ll need to check with the plugin developer for that.

– Ed

[Swift Ideas – Ed]

Just had another look and managed to sort some css for you:

.woocommerce #payment .terms.location_confirmation {
margin-bottom: 20px;
}
.woocommerce #payment .terms.location_confirmation input {
  position: relative;
  float: right;
}

– Ed

[leadgenmedia]

Wow Ed!

Both worked perfectly! Thank you very much – you guys are awesome.

Expect a warm review coming your way on ThemeForest! 🙂

Thank you.

[Kyle – SUPPORT]

No problem 🙂

[harukagnd]

Hi Ed,

I tired to use the above code on my own site, but wasnt able to get the check box and terms right.

Pls see the screenshot

I even tried both float right and float left

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi @harukagnd,

Is your theme Atelier?
provide us your site url.

-Rui

[pascalstoessel]

Hi guys,

I also need some help with custom css and my checkbox in the checkout. At the moment it is display as in attachment.
I have to change two things:

1) Checkbox above the following text of general terms and conditions.

2) “Deine Bestellung” should be “Ihre Bestellung”

Thanks for your help.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi @pascalstoessel,

We will need your site url to check the checkout page.

Regarding 2 you should translate, you can use this plugin for that.

Real-Time Find and Replace

-Rui

[pascalstoessel]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

Add the code below to your custom css option.

.woocommerce form .form-row .input-checkbox {
     margin: -10px 8px 0 0!important;
 }

-Rui

[pascalstoessel]

That worked great!
Thanks a lot!

[Rui Guerreiro – SUPPORT]

Great.No problem.

-Rui