The default WooCommerce Checkout Page is usually something we customize here because, well, the default design is just too long and unnecessary.

I mean, c’mon, the purchase button is right down the bottom of the page where people have to scroll to make payment.

By following this post, you’ll convert your checkout page to a two column WooCommerce Checkout Page, subsequently reducing the length of the page and moving the purchase button higher up to where people can see and click it and earn you money.

NOTE: This article should work with themes other than the Beaver Builder theme, however, some theme’s CSS will override the CSS we add here and will produce different results. We cannot ensure this will work with all themes but it definitely works with the Beaver Builder Theme and should work with some other themes.

The default layout of the WooCommerce Checkout Page

Below is what the default WooCommerce Checkout Page looks like with WooCommerce and the Beaver Builder theme.

checkout-page-one-column

Step 1: Add the below CSS to make a two column WooCommerce Checkout Page

Literally, all you need to do is add the below CSS and you’ll have a two column WooCommerce checkout page. How easy is that!

https://gist.github.com/d1bff123dd494e3049afe55dc3e51263

What the above CSS is doing:

  1. @media (min-width: 993px) {} is a CSS media query that we use so that the two column layout only applies to medium devices and larger. We want this because two columns would not fit on mobile devices. On mobile devices, the WooCommerce Checkout Page reverts back to one column.
  2. The last few lines make the two columns.

Step 2: There is no step two

That’s all there is. Now you have a two column WooCommerce Checkout Page. Best of all, it works responsively on mobile devices, as per below.

Two column WooCommerce Checkout Page
Two column WooCommerce Checkout Page that works responsively on mobile devices and only requires a little bit of CSS to implement.

Please comment below

Please leave a comment below if you liked this post. Also, let us know if you’d like some other WooCommerce specific tutorials written. You ask and we provide the answers!

Hey! I'm Grant Ambrose,

My WordPress website generates millions of dollars in sales each year and I put together this website to help you do the same

I believe that a lot of the time, we aren't doing things that will help our business NOT because we don't know how to do it, but rather we don't even know it is possible. My website aims to change this. My website is here to help show YOU what is possible - what YOU could set up in your business with WordPress to increase sales, automate tasks and (ultimately) turn your ideas into working WordPress solutions.

2 thoughts on “Create a two column WooCommerce Checkout Page in 30 seconds”

Leave a Comment

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

row-general-opt-in
row-general-opt-in
Grow your WordPress business by getting...
My best tips to your inbox!

I'll send you emails when I publish content I think will help you and your business. You can opt-out at any time and change the topics of emails you get.

This site is not a part of the Facebook website or Facebook Inc. Additionally, this site NOT endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.

Scroll to Top