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

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:Woo checkout field editor plugin settings turn off fields

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 the default icon to an "i" in a circle */
 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 { overflow: hidden;}
  .woocommerce:after { clear: both; }
  .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 { width: 100%; }
  .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { display: none; }
  .woocommerce .col2-set, .woocommerce-page .col2-set { float:left; width: 48%; }
  #order_review_heading, .woocommerce #order_review, .woocommerce-page #order_review { 
    float: left; 
    width:48%; 
    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('add_to_cart_redirect', 'themeprefix_add_to_cart_redirect');
function themeprefix_add_to_cart_redirect() {
 global $woocommerce;
 $checkout_url = $woocommerce->cart->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.

Tevya

Hi, I'm Tevya! I wrote this. I am the owner of WordXpress and also created Starfish Plugins. I love helping small businesses and WordPress professionals. My wife Jill, helps with the business and is the amazing CEO of our family (3.5 kids). When I'm not working, I like to play basketball, go boating, shoot targets, swim, serve in my church, play Ultimate, and have outdoor adventures as a family.