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

After

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
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']);

Need some customization to your website?

Our approach to design is unique. See how we help companies like yours.

Pin It on Pinterest