How To Design A Cleaner Woocommerce Checkout Page

Written by Mario Flawless

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.

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

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?

The default woocommerce checkout page is cool and all, but having a custom checkout funnel that converts more than the standard woocommerce layout should be considered.

Related Articles

10 Comments

10 Comments

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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