Docs

[mat_kinotek]

I can edit those two fields now but the ‘country’ field is out of the layout again (see screenshot attached).
I tried to use the ‘width’ CSS but with no luck.
Can you also tell me how to style the shipping fields like in the screenshot I sent you few days earlier? (couple of messages above).
Thanks

[Rue Nel]

Hello There,

You cannot align the country in the same row as first name and last name because it is located in a different row. To be able to have a 3 column, you need to manipulate the elements. Please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('.woocommerce-checkout #billing_country_field').insertAfter( $('.woocommerce-checkout #billing_last_name_field') );
})(jQuery);

And then you need to remove this block from your css:

#billing_country_field {
    clear: both !important;
}

After removing the block, you also need to update your code and make use of this code instead:

#billing_first_name_field, 
#billing_last_name_field, 
p#billing_company_field, 
p#billing_email_field, 
p#billing_phone_field, 
p#billing_city_field, 
p#billing_state_field, 
p#billing_postcode_field, 
p#billing_country_field {
    width: 30.6% !important;
    float: left !important;
    margin-right: 4%;
}

p#billing_country_field {
    margin-right: 0 !important;
}

Hope this helps.

[mat_kinotek]

ok it’s much better now, i used this code here:
I still need to align to the right the first two and last row ( https://cherrylaser.com/shop/checkout/ – just add a product to the cart and you’ll be able to see the check out), and bring the ‘address’ block 5px higher (there is two much space between the upper half and bottom half of the page):
Thanks!

p#billing_address_1_field {
width: 50%;
float: left;
margin-right: 12px;
}

p#billing_address_2_field {
width: 48%;
margin-top: 3.666%;
float: left;
}

#billing_first_name_field, #billing_last_name_field, p#billing_company_field, p#billing_email_field, p#billing_phone_field, p#billing_country_field, p#billing_city_field, p#billing_state_field, p#billing_postcode_field {
width: 31.66%;
float: left;
margin-right: 12px;
}

[Christopher]

Hi there,

Please add this :

p#billing_country_field {
    margin-bottom: 0;
}

Hope it helps.

[mat_kinotek]

it worked i have the bottom section higher now – thanks!
but i still need to align the right most fields to the ‘address’ one.
If you see now at the fields are not all aligned to the right.
Any hint on how to do it?
Thanks

[Rue Nel]

Hello There,

To align the fields to the right, please find this block of css:

p#billing_address_1_field {
    width: 50%;
    float: left;
    margin-right: 12px;
}

You need to replace it with this code instead:

p#billing_address_1_field {
    width: 48.5%;
    float: left;
    margin-right: 12px;
}

Please let us know if this works out for you.

[mat_kinotek]

thanks it worked!
but I’m still having issues when using iphone and ipad – see screenshot attached:
thanks!

[Rad]

Hi there,

The CSS is applied regardless of the device it’s being viewed. How about wrapping your custom CSS with @media query? For example,

@media ( min-width: 1025px ) {

//your other CSS

p#billing_address_1_field {
    width: 48.5%;
    float: left;
    margin-right: 12px;
}

//your other CSS

//your other CSS

//your other CSS

}

This will only apply the CSS for devices larger than tablet.

Thanks!

[mat_kinotek]

great thank you that looks way better!
one last thing tho:
I still need to align the fields to the right border. Here: https://cherrylaser.com/shop/checkout/ the fields are shorter to the right. I need them to be aligned with the right end of the multistep bar on top, and the ‘NEXT’ button below.
They are like 2030px shorter, how can adjust that?
Thanks!

[Christopher]

Hi there,

Please add this code :

@media (min-width:767px){
p#billing_phone_field,p#billing_postcode_field,p#billing_phone_field {
    margin-right: 0 !important;
}
}

And update this code to :

#billing_first_name_field, #billing_last_name_field, p#billing_company_field, p#billing_email_field, p#billing_phone_field, p#billing_country_field, p#billing_city_field, p#billing_state_field, p#billing_postcode_field {
    width: 32.22%;
    float: left;
    margin-right: 12px;
}

Hope it helps.

[mat_kinotek]

not yet 🙁 it kind of made it worst: see crshot.
If i change it back to width: 31.66% they align to each other, but all the fields are still not aligned to the right..

[Christopher]

Hi there,

Please add this code :

#checkout_timeline.style2 {
        max-width: 738px;

}

Hope it helps.

[mat_kinotek]

nope, that just made the horizontal line of the multipass menu smaller. (see screenshot of how i see it now).
I need to align the right side of the rightmost fields to the end on the ‘next’ button (like 20-30px more)

[Lely]

Hi There,

Please update this custom CSS:

@media (min-width: 1025px){
#billing_first_name_field, #billing_last_name_field, p#billing_company_field, p#billing_email_field, p#billing_phone_field, p#billing_country_field, p#billing_city_field, p#billing_state_field, p#billing_postcode_field {
    width: 31.66%;
    float: left;
    margin-right: 12px;
}
}

To this:

@media (min-width: 1025px){
#billing_first_name_field, #billing_last_name_field, p#billing_company_field, p#billing_email_field, p#billing_phone_field, p#billing_country_field, p#billing_city_field, p#billing_state_field, p#billing_postcode_field {
    width: 31.66%;
    float: left;
    margin-right: 18.5px;
}
p#billing_company_field, p#billing_country_field, p#billing_postcode_field {
    margin-right: 0 !important;
}
}

Then also update this:

@media (min-width: 1025px){
p#billing_address_1_field {
    width: 48.5%;
    float: left;
    margin-right: 12px;
}
}

To this:

@media (min-width: 1025px){
p#billing_address_1_field {
    width: 48.5%;
    float: left;
    margin-right: 25px;
}
}

Hope this helps.

[mat_kinotek]

cool the billing fields works now, Im trying to do the same with shipping but the first address field is still too short (see scrnshot attached).
Thanks.

[Author]

Posts