[RaphaelParticipant]

Hi there,

is it possible to make the checkout on two columns? On the left side the billing address and on the right side the shipping address (see attachement, checkout_demo).

My checkout looks like this right now => checkout_situation

Can I also change the size of the font in the checkout area?

Thanks for your help.

Regards,
Raphael

[ThaiModerator]

Hey There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[RaphaelParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Try adding following CSS under Appearance > Customize > Custom > CSS:

#customer_details .col-1 {
    width: 45%;
    float: left;
    margin-right: 5%;
}
#customer_details .col-2 {
    float: right;
    width: 50%
}
#wc_checkout_add_ons {
    clear: both;
}

Hope it helps.

[RaphaelParticipant]

Hi there,

thanks a lot for the CSS. Looks good they are on two columns now.

Is it also possible that the billing address and the shipping address are on the same line? See attachment.

By the way, is it also possible to centering the checkboxes? Right now they are on the top of the line.

Thanks for your support, really much appreciate.

[ThaiModerator]

Hi There,

Please try adding following CSS:

#ship-to-different-address-checkbox {
    margin-top: 22px;
}
#ship-to-different-address {
    margin-top: 0;
    font-size: 32px;
}
.woocommerce-billing-fields h3 {
    font-size: 32px;
}
#wc_checkout_add_ons_2,
#wc_checkout_add_ons_4 {
    margin-top: 12px !important;
}
.input-radio {
    margin-top: 14px !important;
}

Let us know how it goes!

[RaphaelParticipant]

Hi there,

looks again better, thanks! I only have two small things to ask (sorry):

1. I think the font of the shipping address is smaller than the billing address. And maybe as a reason the informatione are slightly not on the same line, see attachment. I’m not sure which px value in the CSS that I have to change.

2. If I wanna order with my iPhone, the checkout page is a bit a mess. Can I change that?

Thanks a lot.

[ThaiModerator]

Hi There,

Please find and update the code to the following code:

#1

#ship-to-different-address {
    margin-top: 0;
    font-size: 32px !important;
}
.woocommerce-billing-fields h3 {
    font-size: 32px !important;
}

#2

@media (min-width: 980px){
#customer_details .col-1 {
    width: 45%;
    float: left;
    margin-right: 5%;
}
#customer_details .col-2 {
    float: right;
    width: 50%
}
}

Let us know how it goes!

[RaphaelParticipant]

Hi there,

thanks a lot for the CSS codes.
Unfortunately I still have a gap (checkout_gap) and a mess on the mobile (checkout_mobile).

Maybe I made a mistake? Or should I delete something?
Here the complete custom CSS code on the page:

.text-white h2,
.text-white p,
.text-white .x-btn {
color: #fff;
}

.text-white .x-btn {
border-color: #fff;
}

.text-white .x-btn:hover {
opacity: 0.75;
}

#customer_details .col-1 {
width: 45%;
float: left;
margin-right: 5%;
}
#customer_details .col-2 {
float: right;
width: 50%
}
#wc_checkout_add_ons {
clear: both;
}#ship-to-different-address-checkbox {
margin-top: 22px;
}
#ship-to-different-address {
margin-top: 0;
font-size: 32px;
}
.woocommerce-billing-fields h3 {
font-size: 32px;
}
#wc_checkout_add_ons_2,
#wc_checkout_add_ons_4 {
margin-top: 12px !important;
}
.input-radio {
margin-top: 14px !important;
}

#ship-to-different-address-checkbox {
margin-top: 22px;
}
#ship-to-different-address {
margin-top: 0;
font-size: 32px;
}
.woocommerce-billing-fields h3 {
font-size: 32px;
}
#wc_checkout_add_ons_2,
#wc_checkout_add_ons_4 {
margin-top: 12px !important;
}
.input-radio {
margin-top: 14px !important;
}

#ship-to-different-address {
margin-top: 0;
font-size: 32px !important;
}
.woocommerce-billing-fields h3 {
font-size: 32px !important;
}

@media (min-width: 980px){
#customer_details .col-1 {
width: 45%;
float: left;
margin-right: 5%;
}
#customer_details .col-2 {
float: right;
width: 50%
}
}

Thanks for your help.

Regards

[NicoModerator]

Hi There,

Change this:

#ship-to-different-address {
margin-top: 0;
font-size: 32px;
}

into this:

#ship-to-different-address {
    margin-top: -6px;
    font-size: 32px !important;
}

Remove the width here:

#customer_details .col-1 {
width: 45%;
float: left;
margin-right: 5%;
}

Add this:

#customer_details .col-1 {
    width: 100%;
}

lastly, change this:

#customer_details .col-2 {
float: right;
width: 50%
}

into this:

#customer_details .col-2{

    float: none;
    width: 100%;
}

Let us know how it goes.

Thanks.

[RaphaelParticipant]

Hi there,

thanks for the changes. I did them but now the checkout is again in one column and not two columns. And I still have a mess on the mobile view.
Maybe I did a mistake in the changes? Could you have a look? Thanks

.text-white h2,
.text-white p,
.text-white .x-btn {
color: #fff;
}

.text-white .x-btn {
border-color: #fff;
}

.text-white .x-btn:hover {
opacity: 0.75;
}

#customer_details .col-1 {
width: 45%;
float: left;
margin-right: 5%;
}
#customer_details .col-2 {
float: right;
width: 50%
}
#wc_checkout_add_ons {
clear: both;
}#ship-to-different-address-checkbox {
margin-top: 22px;
}
#ship-to-different-address {
margin-top: -6px;
font-size: 32px !important;
}
.woocommerce-billing-fields h3 {
font-size: 32px;
}
#wc_checkout_add_ons_2,
#wc_checkout_add_ons_4 {
margin-top: 12px !important;
}
.input-radio {
margin-top: 14px !important;
}

#ship-to-different-address-checkbox {
margin-top: 22px;
}
#ship-to-different-address {
margin-top: 0;
font-size: 32px;
}
.woocommerce-billing-fields h3 {
font-size: 32px;
}
#wc_checkout_add_ons_2,
#wc_checkout_add_ons_4 {
margin-top: 12px !important;
}
.input-radio {
margin-top: 14px !important;
}

#ship-to-different-address {
margin-top: 0;
font-size: 32px !important;
}
.woocommerce-billing-fields h3 {
font-size: 32px !important;
}

@media (min-width: 980px){
#customer_details .col-1 {
width: 100%;
}
#customer_details .col-2{

float: none;
width: 100%;
}
}

[ChristopherModerator]

Hi there,

Find this code and remove it :

@media (min-width: 980px){
#customer_details .col-1 {
width: 100%;
}
#customer_details .col-2{

float: none;
width: 100%;
}
}

Find this code :

#customer_details .col-1 {
width: 45%;
float: left;
margin-right: 5%;
}
#customer_details .col-2 {
float: right;
width: 50%
}

And change it to :

@media (min-width: 980px){
#customer_details .col-1 {
width: 45%;
float: left;
margin-right: 5%;
}
#customer_details .col-2 {
float: right;
width: 50%
}
}

Hope it helps.

[RaphaelParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Please try to add this code in the bottom part of the Customizer:

@media screen and (max-width: 520px) {

	.woocommerce .checkout label,
	#order_review table td,
	#order_review table th  {
		font-size: 13px;
	}

	.woocommerce .checkout input[type="email"],
	.woocommerce .checkout input[type="tel"] {
		width: 100%;
	}

}

Hope this helps.

[Author]

Posts