Adjusting CSS on One Page Checkout

[alexbwang]

We would like to adjust the One Page Checkout in the following way – please advise:

1) Disable the “ship to different address” by default. It’s currently enabled and makes the page quite long.

2) Adjust the styling for the add-on fields so that it appears inline the the shipping/billing fields and is part of the theme. FYI, we are using the WooCommerce Checkout Add Ons plugin which seems to work well. Could you please provide the CSS / php edits to make this compatible? The URL is http://azhdd.com/checkout after adding some products to cart

Thanks so much! 🙂

[Rui Guerreiro – SUPPORT]

Hi,

1) You should be able to disable this in your Woocommerce settings. Woocommerce > Settings > Shipping there’s a checkbox to enforce shipping to billing address only.

2) can you provide us a mockup image of how you would like it to be, so we can see if it’s possible to figure out some css to achieve it.

Thanks

-Rui

[alexbwang]

Hi Rui

Thanks for getting back to us… our comments:

1) Sorry if we’re unclear. We are asking how to disable the “ship to a different address?” checkbox by default – see attached. This is to shorten the length of the form. Please advise

2) We’d like the fields “Recipient’s Name (required) *” “Recipient’s WeChat ID (optional)” and “Recipient’s WeChat ID (optional)” to be displayed underneath the existing form fields – see markups attached. Naturally, the “Your Order” summary box will hover on the right hand side as per normal.

We look forward to hearing from you, thanks! 🙂

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) Do so here “Force shipping to the customer billing address“:

Woocommerce > Settings > Shipping > Shipping Options > Shipping Destination

2) You would need to implement your own CSS. Here is a good starting point.

#wc_checkout_add_ons {
    width: 58.33333333%;
}
.woocommerce form .form-row input.input-text {
    width: 75%!important;
}
.woocommerce-page form .form-row label {
    width: 25%!important;
    float: left;
}
#wc_checkout_add_ons .input-file-plupload {
    width: 70%;
    float: right;
    margin-top: -50px;
}