How To Design A Cleaner Woocommerce Checkout Page

Jan 7

One of the most important components of your website is the checkout page. There are a number of variables that can influence how many sales you get, including your page’s layout. How to design a cleaner Woocommerce checkout page that sells, you simply need to add a little bit of CSS.
Woocommerce Checkout Page
Cleaner Woocommerce Checkout Page

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; }
Next, this CSS snippet will modify the borders, padding, and alignment of the “Your Order” section.

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; }

Modifying the “Place Order” button to be full-width to it’s container.
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;
A slight adjustment to the smaller form fields that don’t quite fit as well as we’d like.
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%; }
Now, we’ll get rid of that big blank space by moving the “Ship to a different address” section below the “Billing” details and shifting the “Your Order” section up to the right side of the page.
.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; }
The last CSS snippet we’re going to add will be making sure that the form is responsive and fits well on mobile devices. Without adding this code, the checkout page will look squished all together on smaller devices. Always make sure that your mobile visitors have a clean checkout experience.
@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

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.

read more
FlutterFlow App Developer Career

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.

read more
How to Create the Kind of Business Employees Want to Work For

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...

read more


  1. Lori

    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?

    • Lori

      Never mind! Once I exited the visual builder they collapsed!

      • Mario Flawless

        I’m glad it all worked for you! Hope the page looks amazing.

  2. Victoria E. Whitehead

    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

    • Mario Flawless

      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?

      • Victoria

        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.

        • Mario Flawless

          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.

        • Mario Flawless

          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?

          • Minam

            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?

  3. Max

    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!!!

    • Mario Flawless

      I’m glad that the article has helped you out! I appreciate your feedback.

  4. Rob

    Excellent information – thanks a lot! Works like a charm … 😉

  5. Favour Orobor

    Can I customised the field space of the billing details?

    • Mario Flawless

      Yes, you just need to use a little custom CSS. Adjust the padding and font size to customize the field spaces.

      .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.

    • Mario Flawless

      Thanks, Corpely! Glad you found it helpful.

  7. Cristinel

    Hi, can u also costomize this Checkout page?Thanks

    • Mario Flawless

      Yes, that would be a breeze. Shoot us a message on how you’d like it customized!

  8. Marcel Cowan

    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!

    • Mario Flawless

      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.

  9. MOMO

    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


Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest