Creating a Simpler Checkout Page in WooCommerce

When building Starfish Reviews plugin, we initially started with a WooCommerce-based solution for selling and licensing the plugin. I really didn’t like WooCommerce’s over-complicated checkout page. I wanted something simpler and more straightforward. So here’s how I got from complicated, to simple with some nice icons to help visually. While I did it with the Divi theme, most of this should work for any theme. Here is the end result:

Woocommerce checkout page simplified css

Changing the Checkout Fields

Add-on WooCommerce MailPoet 3

I wanted to help people signup for our email updates and newsletter as part of purchasing the plugin, so they could get info about new versions and such. So I installed and configured this plugin. It’s fairly straightforward. Just select the lists you want to offer and a few things and it’ll inject the signup checkbox(es) into the checkout form. You may want to use a different plugin based on the newsletter solution you’re using.

Woo Checkout Field Editor Pro

Woo checkout field editor plugin settings turn off fields

For a digital product, it’s not necessary to capture address, phone number, etc, etc. So I used this plugin to simplify the checkout fields that are available. I used it to turn off the Shipping Fields entirely, as well as the one additional field. Then I turned off the Billing address fields, the city, state, and phone number. So it looks like this:

For the remaining fields, I clicked the “Edit” button and added “form-row-first” or “form-row-last” classes to each field, so they would be 2-column, instead of one. Disabling fields and making the remaining ones 2-column, significantly shortens the billing section. So even after adding in the newsletter checkboxes and password field, this column ends up being shorter than the right column with the cart and payment info.

Making the Whole Page Look Great with CSS

Here’s the CSS I used. I just loaded this in Divi’s “Custom CSS” field under the Page Settings. That way it only loads on the checkout page. I’ve put comments to explain what each section does, that follows the comment. So you can hopefully modify it to fit your needs. One note is that we were already using the Divi Icon King plugin to load Google’s Material icons elsewhere on the site. So you’ll see several references to that font family and then things like “content: ‘\E88F’;” to display the icon from the font. If you’re using Font Awesome or Divi’s built-in font, you’ll need to adjust those accordingly.

/* Add Icons to Headers & Notifications */
.woocommerce-billing-fields h3:before, h3#order_review_heading:before, h3#phoen_order_review_heading:before {
 font-family: "Material Icons";
 font-size: 27px;
 content: '\E88F'; /* sets default icon to a circled "i" */
 color: #7ed026;
 padding-right: 10px;
 vertical-align: bottom;

h3#order_review_heading:before { content: '\E8CC'; } /* changes the icon set above to a shopping cart for the order */

/* MailPoet Subscribe Fixes */
 .mailpoet-subscription-section {xzz
  padding-top: 50px;
 .mailpoet-subscription-section h3:before { content: '\E0E1'; }

/* Fancy Subscribe Now Btn */
#place_order {
  background-image: linear-gradient(25deg,#00aeef 0%,#7ed026 100%)!important;
  border: transparent;
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.28) 0px 2px 8px 0px;

#place_order:hover { background-image: linear-gradient(25deg,#7ed026 0%,#00aeef 100%)!important; }

/* 2 column layout */
@media (min-width: 981px) {
  .woocommerce-checkout .woocommerce { overflow: hidden;}
  .woocommerce-checkout .woocommerce:after { clear: both; }
  .woocommerce-checkout .woocommerce .col2-set .col-1, .woocommerce-checkout .col2-set .col-1 { width: 100%; }
  .woocommerce-checkout .woocommerce .col2-set .col-2, .woocommerce-checkout 
 .woocommerce-page .col2-set .col-2 { display: none; }
 .woocommerce-checkout .woocommerce .col2-set, .woocommerce-checkout .woocommerce-page .col2-set { float:left; width: 48%; }
  .woocommerce-checkout #order_review_heading, .woocommerce-checkout .woocommerce #order_review, .woocommerce-checkout .woocommerce-page #order_review { 
    float: left; 
    margin-left: 4%; 

/* Rounded corners on the WooCommerce "alert" messages */
.woocommerce-error, .woocommerce-info, .woocommerce-message { border-radius: 3px; }

/* Style form fields to look like Divi */
input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {
  border: none;
  background-color: #eee;
.select2-container .select2-selection--single { height: 49px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { 
  line-height: 49px;
  color: #4e4e4e;
  font-weight: bold;
.select2-container--default .select2-selection--single .select2-selection__arrow b { margin-top: 8px; }
.select2-container--default .select2-selection--single { 
  background-color: #eee; 
  border: none; 

/* some tweaks to simplify the payment method area */
.woocommerce-checkout #payment { background: none!important; }
.woocommerce-checkout #payment ul.payment_methods { border: none; }

Bonus: Skip the Cart Page

If you really want to simplify things, and especially if you only have 1 product, like we did, you can use the following code snippet to take people directly to the Checkout page. Add it to a child theme’s functions.php, or to a custom plugin, or (my favorite) use the excellent Code Snippets plugin. With Code Snippets plugin, you can select the “Only run on site front-end” option so this code isn’t being run in the admin, when it has no impact there.

add_filter(‘woocommerce_add_to_cart_redirect’, ‘gh_add_to_cart_redirect’);
 function gh_add_to_cart_redirect() {
 global $woocommerce;
 $checkout_url = wc_get_checkout_url();
 return $checkout_url;

In the end, all these cool hacks make for a way nicer WooCommerce checkout page, with everything fitting nicely into 2-columns (on desktop) and the billing section being much shorter. Let me know if you found this helpful, or how you adapted it to your theme or design, in the comments!

If you liked this, you might like my guide to creating a cleaner nicer WooCommerce My Account navigation.

Need Some Help?

Is this too technical? Or maybe you’re just too busy? Sign up for our Boxcar WordPress management plan or higher, and we’ll do enhancements like this for you.


  1. Will on 7 September 2018 at 9:08 AM

    Hey, Tevya. I’ve tried quite a few different code pieces to do something similar to this, but none of them worked as beautifully as yours did. However, though it made the checkout page so much better, for some reason, it made it impossible to scroll on the actual product pages. Weird! Any idea what could be causing that? I didn’t see anything int he code that seems like it would make that an issue.

    • Tevya on 7 September 2018 at 11:01 AM

      So glad it worked beautifully for you, Will!

      I had it setup so it would only load the CSS on the checkout page. So I don’t know how it might have affected product pages. Did you use the plugins I recommended? If so, could you try removing the CSS And make sure it’s just a CSS problem, and not a plugin conflict?

      Once you’ve tried that, my guess would be something in the “2 column layout” section? Maybe something about that is impacting products as well, since it’s not specific to the checkout page. One way to test quickly would be to check on mobile (or narrow your browser window), since that part only applies to resolutions 980px or wider. If the products work fine at narrower widths, then that’s most likely the issue.

      If it is that section, you could make those styles more specific by including a reference to the checkout page such as “body.woocommerce-checkout” (I think that’s inserted by WooCommmerce) at the beginning of each style there.

    • Will on 7 September 2018 at 12:35 PM

      I’m using Divi, so I was able to resolve the issue by adding the CSS to the custom CSS section just on the checkout page. That way it doesn’t even load anywhere else. Thanks for getting back with me though.

    • Tevya on 7 September 2018 at 1:15 PM

      Awesome! That’s just how I had it setup. I’ll try to update the CSS to work more generally next time I have a chance to work with it.

    • Will on 7 September 2018 at 1:32 PM

      No problem. It could just be a conflict with another plugin I have running or something else. No big deal. I literally have tried dozens of options to get what I’m looking for, and your solution is the only thing that worked well and looked great. I really appreciate you making it available!

  2. Samuel on 23 October 2018 at 8:22 AM

    Thanks a lot for your post ! And thanks for your previous comments (I had the same issue).
    If we skip the cart page, is it possible to have the possibility to change the quantity on checkout? What do you think?

    • Tevya on 25 October 2018 at 11:44 AM

      Thanks for your kind words Samuel. Unfortunately, there’s no way of changing the quantity unless they go “back” to the cart page. Or back to the product page and add it again. There are some nice 1-page checkout plugins for WooCommerce that kinda combine the cart and checkout pages into one. You might look into those, if you need quantity adjustment on the checkout page.

  3. Daniel on 31 October 2018 at 3:30 PM

    Hi, it looks beautiful. ?
    For some reason, I can’t seem to get the columns to sit next to each other. The right column is below and to the right. Any help would be much appreciated!

    • Tevya on 31 October 2018 at 8:47 PM

      Hi Daniel, with just a quick look, it looks like there’s something “clearing” the spaces to the sides of the columns. So something like this should fix your simplified WooCommerce checkout page:

      @media (min-width: 981px) {
      .woocommerce .col2-set, .woocommerce-page .col2-set {
      float: left;
      #order_review_heading, .woocommerce #order_review, .woocommerce-page #order_review {
      clear: none;

    • Daniel on 1 November 2018 at 10:39 AM

      Wow, that did it. Thank u! I’ll share you on Twitter and Facebook :-). I don’t have a big following, but anything to say thx!

    • Tevya on 1 November 2018 at 10:48 AM

      Thanks Daniel! Glad it worked. We’d love a review on Facebook.

  4. Diogo Ribeiro on 29 March 2019 at 8:20 PM

    Hi Tevya,

    I just installed the divi plug-in but seems it does not work in my website :/
    Here it is:


    • Tevya on 30 March 2019 at 12:14 PM

      Hi Diogo, do you have the CSS provided, loading on this page? I’m not seeing it with dev tools on your WooCommerce Checkout page. You’ll need to put it in your theme’s custom CSS box or the Divi custom CSS for this page.

  5. Mo'men on 10 April 2019 at 3:25 PM


    Thanks Tevya, Great article.
    But about Skip the Cart Page function “get_checkout_url” and “add_to_cart_redirect” is deprecated the new function must be like this

    add_filter(‘woocommerce_add_to_cart_redirect’, ‘gh_add_to_cart_redirect’);
    function gh_add_to_cart_redirect() {
    global $woocommerce;
    $checkout_url = wc_get_checkout_url();
    return $checkout_url;

    • Tevya on 11 April 2019 at 8:47 PM

      Thanks Mo’men! I’ve updated the post to reflect your updated code.

  6. Webdesigner Oto on 10 September 2019 at 11:09 AM

    Excellent work. I really love the look. But it appears you disabled the shipping address and all other fields.

    • Tevya on 10 September 2019 at 3:42 PM

      Yes, if you read, we were selling software on that site. So we didn’t need those fields. Just the basic fields required for charging their card and logging their info in our licensing system.

  7. Charina on 29 January 2020 at 1:38 AM

    Hi , when I added the code on custom css my Shop Page stop to scroll down when in maximize mode of browser

    • Tevya on 12 February 2020 at 4:57 PM

      See my reply to Michael’s comment below. I’ve updated the CSS so it should not affect other WooCommerce pages. Thanks for pointing this out!

  8. Michael on 5 February 2020 at 8:06 PM


    If you add this code to your general custom CSS, it will break your product page!! Took me a long time to figure this out. Tt makes it so users cannot scroll down on your product page.

    The culprit is this line:

    .woocommerce { overflow: hidden;}

    I just deleted that and it worked. Hopefully that didnt break anything on the checkout page.

    I recommend fixing this bug before posting publicly!

    • Tevya on 12 February 2020 at 4:54 PM

      Hi Michael, you’re right, that probably shouldn’t be used if you’re applying this to your entire site. We were adding it only on the checkout page and so I didn’t think about bigger implications. I’ve added .woocommerce-checkout to that particular style you mentioned, and a number of others in the CSS above. That will make it only apply to the Checkout page. So if you remove what you had before and apply the updated CSS above, it should not break other WooCommerce pages anymore. Thanks for pointing this bug out!

  9. Gus on 15 March 2020 at 11:16 AM

    Hi there !

    For some reason, if i input the CSS you provided, nothing happens on the checkout page… That’s weird. (I tested with a few css lines and update is taken into account…) WOuld you know what’s happening here ?

  10. Gus on 16 March 2020 at 2:43 AM

    Issue fixed. regarding my last question, i found the issue. There is a CSS error displayed. I just removed the block and everything went ok.

    • Tevya on 23 March 2020 at 9:49 PM

      Excellent Gus! Glad you got it sorted out.

  11. Esref on 1 May 2020 at 5:30 PM

    Hello, I use the xStore theme, and i don’t have the custom css in page settings.. Can you help me please? 😀
    I find your checkout beautiful.. !

    • Tevya on 1 May 2020 at 9:32 PM

      If you go to Appearance > Customize > Additional CSS (usually at the bottom of the sidebar of the Customizer, you should be able to add custom CSS there. This works for most themes now days.

    • Esref on 3 May 2020 at 2:28 PM

      It doesn’t work for me 🙁

    • Tevya on 5 May 2020 at 12:34 PM

      Are you interested in our WP support plans at all? If so, our Boxcar plan includes fixes and enhancements like applying this to work with your theme. Just contact us for more details or signup.

      If you’re not interested, we recommend finding a developer on Codeable who can take care of it for you.

  12. Ashit Goyal on 23 March 2021 at 6:01 AM

    Thanks, It works very well. However, the code hides the Shipping Address checkbox.

    • wpXPRESS Support on 23 March 2021 at 10:59 AM

      You probably need to adjust some CSS a bit. Try inspecting in the dev console the shipping address checkbox and adding a margin around it. You may need the dreaded “!important”.

  13. Muralidhar on 20 November 2021 at 2:32 PM

    Thank you very much for your great CSS. Helped me a lot

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.