Looking at it, the stock WooCommerce Checkout Page isn’t too easy on the eyes and can be hard to customize without adding custom code or spending money on a developer. Luckily, Divi does give us a little bit of latitude here, but not a whole lot, which is why many folks opt for 3rd party plugins like BodyCommerce to get the job done.

Think about it, we’ve done such an awesome job of building the perfect website with hand-crafted product pages and landing pages, it would be a shame to lose them at the finish line. Lucky for you, we are going to discuss some best practices employed by successful checkout pages, and then apply them to our own custom Divi Checkout Page.

Ready? Let’s get into it!

Checkout Page Best Practices

Customizing the WooCommerce Checkout Page in Divi

Build a New Divi Template using the Theme Builder

Edit the WooCommerce Checkout Page that was automatically generated when WooCommerce was installed.

For this tutorial we will edit the generated page, but if you want to get an idea of how to use the Theme Builder, please check out (teehee) our previous tutorial on How to Create a Custom Divi WooCommerce Category Page for guidance.

So let’s take a look at what the stock Divi WooCommerce Checkout Page looks like.

Not to worry, this is why you are here, we are going to show you how to turn this boring checkout page into one that converts.

Fast Forward

Here is a quick sneak peek of what your Divi WooCommerce Checkout Page will look like when you are done with this tutorial.

Divi WooCommerce Checkout Page

Adding and Styling Modules for the Divi WooCommerce Checkout Page

Divi WooCommerce Checkout Page

Part 1: Simplifying the Layout for Our Checkout Page

Section Settings

Since this page was automatically generated, we don’t need to add a new section, we just need to style it to look amazing.

Content Tab

To upgrade the background we are going to scroll down to “Background”, select Gradient as our Background Style, and click the “+” to start adding the colors.

We will set the first color to #F4F4F4, and the second color to #E4E4E4. Yeah, I know, it looks a little weird right now, but we’ll fix that up by tweaking the gradient settings.

For the “Gradient Direction” we will set it at an angle of 135 degrees. To make the gradient form a hard line between the two colors we need to set the “Start Position” and “End Position” to 50%.

Now when we hit save we see a super stylish diagonal line with our selected colors on either side, but something is off, that row containing our WooCommerce Checkout Page shortcode has a transparent background. Let’s head over the setting for that row and make it look a bit better.

Design Tab

We will just adjust our “Top Padding” under Spacing to “0px“.

Row Settings

As we mentioned before, our options for styling this shortcode are very limited because of the options included in Divi and WooCommerce, but we will do our best to make our Divi WooCommerce Checkout Page stand out from the crowd.

We will start by fixing that wonky transparent background so the content doesn’t get lost in that fancy gradient background we created.

Content Tab

Let’s scroll down to “Background” again, then select White as our Background Color.

That already looks much better, but we can see that our content is pushing up on the sides and top of the row, so we will head to the Design Tab to add some padding.

Design Tab

To create some breathing room for our content we will head to “Spacing” and add 50px of “Padding” in each box.

And for a little bit of extra flair, we are going to round the corners of this row, so directly below we will add 15px to the “Rounded Corners” setting under Borders.

Finally, to wrap things up, we will add some shadow to further help the content stand out. Just expand the “Box Shadow” section and select the first shadow option which will add an even shadow along all the edges.

Text Module Settings

Wow, that looks so much better already, but now we can go a little further by actually styling the text of the elements rendered by the WooCommerce Checkout shortcode on our Divi WooCommerce Checkout Page. This is pretty easy because we style it just like we would any other Text Module right on the Design Tab. Let’s go!

Design Tab

First let’s expand the text section and change our “Text Font” to “Open Sans Condensed” and you will immediately see all of the text transform into a more visually pleasing font throughout the body of the module.

We are also going to make the sections on the Checkout Page a little more clear by styling the H3 tags, so expand the Heading Text section on the Design Tab. Click on the H3 settings to set the “Heading 3 Font” to “Open Sans Condensed” and make the “Heading 3 Font Weight” “Bold”. Last thing we will do here is set the “Heading 3 Font Style” to “Capitalized”

If you’ve been keeping up, your page should look something like this.

Ready? Onward!

Removing the Header and Footer

For this, we will quickly head to the “Page Attributes” section located in the right-hand column next to our Divi modules. Once there, all we have to do is set the “Page Template” to “Blank” and hit the “Update” button.

Part 2: Easy Navigation

Now, all we do is check the boxes next to “Home“, “Cart“, and “Checkout” then save our new menu.

Menu Module

We want to add this module right above the Text Module containing the Checkout shortcode, so let’s add it by clicking the gray “+” and select the menu module.

Content Tab

All we need to do here is select the “Checkout Menu” we created in the previous step if it is not already selected, then head over to our Design Tab.

Design Tab

The first thing we will do here is give the menu text a centered layout by expanding “Layout” and then selecting “Centered” for the “Style” setting.

Now let’s set the “Menu Text” “Active Link Color” to Black and the “Menu Font” to “Open Sans Condensed”. For “Font Style” we want this to be “Capitalized” and the “Menu Text Color” set to a more subtle #2a3439. Lastly we will increase the “Menu Text Size” to 18px just so that it is not entirely hidden.

To wrap things up we want to control how all of this will display on mobile screens, so let’s expand the “Dropdown Menu” section and set our “Dropdown Menu Line Color” to Black.

Lastly, to create a cohesive design we will change the hamburger icon on mobile to black, so it matches our color scheme. Just expand the “Icons” section and set your “Hamburger Menu Icon Color” to Black.

Adding a Checkout Page Title

Let’s get going by adding a new 1 Column Row above the row that contains the WooCommerce Checkout shortcode and add a Text module.

Text Module Settings

We just want to add a simple title here to just help orientate the user which in turn simplifies the navigation.

Content Tab

Go ahead and type in our Page Title “SECURE CHECKOUT” in the “Body” and set it to be Heading 1.

Design Tab

To make our Divi WooCommerce Checkout Page title pop a bit we will add a bit of style to the Heading Text. Let’s set our “Heading Font” to “Poiret One” and the “Heading Font Weight” to “Bold“. “Heading Text Alignment” will be “Centered” with a “Heading Text Color” set to Black.

The last thing we need to do to round things off is set the “Heading Text Size” to “48px” on Desktop and “38px” for Mobile.

Part 3: Convey Transaction Security

Display Accepted Payment Methods

We want to let our visitors know which card providers we support for their peace of mind. To do this we are going to add a small banner image (shown below) at the bottom or our checkout page that contains all the cards we accept.

Image Module Settings

The image module will go right below our text module containing the WooCommerce Checkout shortcode, so let’s hit that grey “+” and select “Image”.

Content Tab

Now click on the placeholder image and upload the image for your card processors.

Design Tab

Here we just want to make sure that our image aligns to the center of the column, so go ahead and select “Centered” for “Image Alignment”. Lastly we want to make sure that the image isn’t too large which could make our layout look strange, so let’s create a “Max Width” of 300px under Sizing.

Taking it Further

We go above and beyond to give our visitors peace of mind, so we will communicate a reminder that our payments are encrypted and that our shipments go out weekly. To do this we will use a couple of blurbs in a new row below our row containing the shortcode.

Blurb Module Settings

To save time here, we will build and style one blurb, then copy it and change the relevant content.

Let’s get going by adding a new 2 Column Row under the row that contains the shortcode and add our first Blurb module.

Content Tab

Under text we set the “Title” to “100% Secure Checkout” and the “Body” to “Our payments use 2048-bit encryption.”.

Now we just need to update the “Icon” to be in line with our message, so let’s toggle the “Use Icon” switch on and change the default icon to a “Padlock” before we head over to the design tab to make it look great.

Design Tab

The first step here is to change the “Icon Color” to Black under “Image & Icon”.

On to the “Title Font” for the H4 tag to “Open Sans Condensed” and the “Title Font Weight” to “Bold”. Before moving on, let’s make sure that we set the “Title Text Alignment” to “Centered” so it displays nicely under our icon.

For the “Body” text we will simply repeat the process with the exception that we will not be bolding the text. As a review, let’s set the “Body Font” to “Open Sans Condensed” and the “Body Text Alignment” to “Centered“.

Part 4: Offer Discounts or Upsells

Adding a Promo Bar

This is a great spot to advertise things such as tiered coupons for free shipping or bundled items. Your imagination can go wild here, but try and not make it too intrusive and distracting to the checkout process.

We will start by adding a new 1 Column Row right at the top of our page and add a Text module.

Row Settings

To make this visible but not distracting from the task at hand, we will make this bar nice and thin, but still looking great.

Content Tab

All we need to do here is set the “Background” to Black before heading over to the design tab.

Design Tab

This doesn’t look too great at the moment but some small tweaks here will make a world of difference. 

First, let’s make this Promo Bar full-width by changing the “Width” to 100% and pull that “Max-Width” slider all the way to the right which for me is 2560px.

Next under Spacing, we want to set our Top and Bottom “Padding” to “5px” which will make the bar nice and thin.

Text Module

Content Tab

Let’s add a catchy promo that might help our customers spend a little more money to get free shipping in return. We’ve crunched the numbers and decided that anything over $35 is the sweet spot.

Update the “Body” text to “Don’t forget to add Coupon Code: FREESHIPPING for orders over $35!” and remember to bold the coupon code and the $35 for emphasis.

Design Tab

Go ahead and set the “Text Font” to “Open Sans Condensed” and the “Text Color” to White.

Lastly, we want this nice and centered at the top of the page, so let’s set the “Alignment” to “Centered“.

Let’s see how we did…

BODYCOMMERCE

Let’s take a look at a few features in BodyCommerce that can elevate our WooCommerce Checkout Page game.

These are only a few of the great enhancements that you can implement on any Divi WooCommerce Checkout Page using  BodyCommerce. So, with that in mind, let’s see how we are doing with our best practices now.

Time to check that report card again…

6 out of 6, not bad team!

As we can see, BodyCommerce is a really powerful tool that can be used to elevate any WooCommerce Page that Divi does not allow us to customize natively in hundreds of ways. And it does not even stop there. With functional enhancements like Floating Carts, Enhanced Variation Swatches, and Ajax Filtering, you almost can’t afford not to give BodyCommerce a try!