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.
Before
Woocommerce Checkout Page
After
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

Search Engine Optimization: Expectations vs. Reality

Search Engine Optimization: Expectations vs. Reality

How quickly should you expect results from good Search engine optimization? Great "search engine optimization" will put your website right at the top of Google's results, but how quickly should you expect to start seeing results from your SEO campaigns? The truth is...

read more
18 Comments

18 Comments

  1. Avatar

    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

    Reply
    • Avatar

      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?

      Reply
      • Avatar

        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.

        Reply
        • Avatar

          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.

          Reply
        • Avatar

          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?

          Reply
  2. Avatar

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

    Reply
    • Avatar

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

      Reply
  3. Avatar

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

    Reply
  4. Avatar

    Can I customised the field space of the billing details?

    Reply
    • Avatar

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

      Reply
  5. Avatar

    nicer WooCommerce checkout page, with everything fitting nicely into 2-columns (on desktop) and the billing section being much shorter.

    Reply
    • Avatar

      Thanks, Corpely! Glad you found it helpful.

      Reply
  6. Avatar

    Hi, can u also costomize this Checkout page?Thanks

    Reply
    • Avatar

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

      Reply
  7. Avatar

    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

    Reply
    • Avatar

      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.

      Reply
  8. Avatar

    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

    Reply

Submit a Comment

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

Pin It on Pinterest