How To Design A Cleaner Woocommerce Checkout Page
Author:
Mario Flawless
Jan 7
First, make sure your theme has a section to place custom CSS. You can place the custom CSS on either the checkout page, the custom CSS section for your theme, or a child theme stylesheet.
For this website, we choose to run with the Divi Theme by Elegant Themes. When editing the page with Divi, simply click the Visual Builder button to modify the page. Click the gear and settings wheel, then advanced tab where you can add your custom Woocommerce checkout CSS.
Let’s begin by adjusting the PayPal text margin to fit a little better for after we change the layout. I know this adjustment seems subtle but it makes a major difference when all is said and done.
body #add_payment_method #payment ul.payment_methods li input,
body.woocommerce-cart #payment ul.payment_methods li input,
body.woocommerce-checkout #payment ul.payment_methods li input { width: auto; margin: -2px .5em 0 0; }
body .woocommerce form .form-row .input-checkbox { width: auto; margin: -2px 5px 0 0; }
body.woocommerce-checkout .cart-collaterals .cart_totals tr td,
body.woocommerce-checkout .cart-collaterals .cart_totals tr th,
body .woocommerce table.shop_table th {
border-top: none;
border-bottom: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
text-align: right;
padding: 10px 20px;
}
body .woocommerce table.shop_table td { padding: 15px; }
body .woocommerce-checkout table.shop_table td { width:50%;
text-align: right;
border-right: 1px solid #e6e6e6; border-top: 0; }
body .woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
width: 100%;
display: block;
text-align: center;
margin-bottom: 0;
font-size: 1.25em;
padding: 1em;
border-radius: 50px;
margin-top: .5em;
}
body .woocommerce form .form-row-first,
body .woocommerce form .form-row-last,
body .woocommerce-page form .form-row-first,
body .woocommerce-page form .form-row-last { width: 49%; }
.woocommerce-checkout .woocommerce .col2-set { width: 47%; float: left; margin-right: 4%; }
.woocommerce-checkout .woocommerce .col2-set .col-1,
.woocommerce-checkout .woocommerce .col2-set .col-2 { margin-bottom: 2em; width: 100%; float: none; }
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review { background: #fff; width: 47%; float: right; margin-right: 0; }
@media only screen and (max-width: 650px) {
.woocommerce-checkout .woocommerce .col2-set { width: 100%; float: none; margin-right: 0; }
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review { width: 100%; float: none; }
}
Optional woocommerce checkout page fields (obsolete)
Since writing this article, the developers over at Elegant Themes have added new functionality to make this part easier. They have added Woocommerce checkout customizations in the Theme Appearance customization options. Thus, the following text is no longer valid but still here for educational purposes; in case you are trying to code something yourself.
For this example, we’re customizing the checkout field for a clothing company and my client does not collect some of the information prompted on the checkout fields. (I.e., Company Name). You can simply add this code to your child theme’s functions.php file to remove the Company Name field.
add_filter( 'woocommerce_checkout_fields' , 'custom_mod_checkout_fields' );
function custom_mod_checkout_fields( $fields ) {
unset($fields['billing']['billing_company']);
return $fields;
}
Optional (cont.)
Here are the fields that you can remove. Just add any line of code you need above the “return $fields;” line to the code above.
unset($fields['billing']['billing_first_name']);
unset($fields['billing']['billing_last_name']);
unset($fields['billing']['billing_company']);
unset($fields['billing']['billing_address_1']);
unset($fields['billing']['billing_address_2']);
unset($fields['billing']['billing_city']);
unset($fields['billing']['billing_postcode']);
unset($fields['billing']['billing_country']);
unset($fields['billing']['billing_state']);
unset($fields['billing']['billing_phone']);
unset($fields['order']['order_comments']);
unset($fields['billing']['billing_email']);
unset($fields['account']['account_username']);
unset($fields['account']['account_password']);
unset($fields['account']['account_password-2']);
Do you need your woocommerce checkout page customized with css?
The default woocommerce checkout page is cool and all, but having a custom checkout page that converts more than the standard woocommerce layout should be considered.
If your theme is unable to add custom CSS to your woocommerce checkout page, we highly recommend using the Divi Theme. Their theme makes it easy to customize any page, from your woocommerce checkout pages or your landing pages. I am a proud affiliate of Elegant Themes. We even trust our own website with the Divi Theme.
Related Articles
Website Design UI/UX Specialist
We are seeking a talented Website Design UI/UX Specialist to join our creative and innovative team. The ideal candidate will have a passion for designing beautiful and user-friendly websites that provide a seamless user experience. You will be responsible for creating intuitive and engaging designs that meet the needs of our clients and their customers.
FlutterFlow App Developer Career
We are seeking a highly skilled and motivated FlutterFlow Mobile App Developer to join our dynamic and fast-paced development team. The ideal candidate will have a passion for building beautiful and functional mobile applications using the FlutterFlow framework. This is a unique opportunity to make a real impact on our company by designing and developing innovative solutions for our clients.
How to Create the Kind of Business Employees Want to Work For
There are few things that are as difficult for businesses nowadays than hiring. The labor market has never been so lopsided, and its effects are being felt across industries as employers are in a pinch for employees. But getting new employees at your business that are...
Thanks so much for this Mario! My “Ship to a Different Address?” fields moved correctly below the billing fields, but are all showing (rather than being collapsed), even though the box is unchecked. Any idea why? How can I collapse them until the customer checks the box?
Never mind! Once I exited the visual builder they collapsed!
I’m glad it all worked for you! Hope the page looks amazing.
Hi Mario, Great Article.. I don’t suppose you have a similar tutorial for creating this layout with Avada? I am pulling my hair out with it. The order details div seems to have a full width style built in and Thank you
It’s very possible to do the same thing with the Avada theme. I’m sure that it’s only a few tweaks of CSS. Would you be able to provide a link to your checkout page so that I can see it?
Hi Mario,
The checkout page is **hidden**
Avada seem to place a lot of styles inline and therefore even trying to make changes in the customizer CSS with !important doesn’t seem to make a difference. I would really appreciate your advice.
I’m getting a 404/”Page not found” for the checkout page. You may need to publish the page for me to view it, and I would need to be able to add 1 product to the cart so ensure that you link me to 1 product… And also make sure that your cart and checkout page are published and accessible.
I’m able to see your checkout page with a product now. I think you’ve done a wonderful job implementing the CSS that we’ve provided.
What do you need help specifically with?
Thanks for this! I am trying to do the same with Avada theme on my site. @Victoria, would it be possible to share the CSS and/or a link to the checkout page mentioned above?
Wow, thank you so much for this article. I really appropriate that you took the time to do this. The woo-commerce plugin as successful as they are you’d think they would invest a bit of time in to making the checkout look better or at least giving us the means style it but they don’t. And custom solutions are very pricey so really thank you for this.
And those additional notes on how to remove fields are great. Even though my theme now gives me some options to remove some of the things it wont let me choose all that i want. For instance the [‘order_comments’] was useful one for me.
Thank you!!!
I’m glad that the article has helped you out! I appreciate your feedback.
Excellent information – thanks a lot! Works like a charm … 😉
Can I customised the field space of the billing details?
Yes, you just need to use a little custom CSS. Adjust the padding and font size to customize the field spaces.
Example:
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {padding: 15px;
border-radius: 3px;
font-size: 14px;
}
nicer WooCommerce checkout page, with everything fitting nicely into 2-columns (on desktop) and the billing section being much shorter.
Thanks, Corpely! Glad you found it helpful.
Hi, can u also costomize this Checkout page?Thanks
Yes, that would be a breeze. Shoot us a message on how you’d like it customized!
Hi,
This post has been extremely useful.
I was wondering if you would be able to tell me how to edit your code so the “Ship to a different address” section remains top right but above the new “Your Order column” – i would very much appreciate it!
Marcel
Great question Marcel. Unfortunately, can’t do this with just CSS… Keeping that section up top and moving the “your order” column up would require moving things around in the template. I would recommend creating a child theme for this and using the template that woocommerce provides in the template folder.
I’m not quite sure without actually diving in to test, but I’m pretty sure that all you would have to do is move this line of code:
Move that line of code just outside of the ‘div class=”col2-set id=”customer_details”‘ brackets.
Hi
It s great – need to stop clear:both on .woocommerce-checkout #order_review_heading as it a heading [usually h3 or h4] To get it on the top right position
That’ll usually do the trick!