COMPLEXITY

Easy

TIME

15 Minutes

ASSUMPTIONS

  • Basic knowledge on Divi and WooCommerce.
  • Divi and WooCommerce is already installed and configured.
  • You have some products with assigned categories in WooCommerce.

VERSIONS

Divi 4.9.2
WooCommerce 5.1.0
WordPress 5.7

One of the most critical steps in any eCommerce transaction is creating as little friction as possible during the checkout process. Creating a custom Divi WooCommerce Checkout Page doesn’t just fortify your credibility with your visitors, it helps convert those visitors into customers if it is done right. 

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!

PRO TIP: If you are already experienced with Divi, expand the SPEEDRUN sections to grab the steps really quickly, so you can fly through this tutorial.

Checkout Page Best Practices

V

Simplified Layout

It should not be cluttered with busy headers and a bunch of images or irrelevant text.
V

Collect Relevant Information

Only collect the information you need, users don’t have a lot of patience, so let’s not get in our own way by demanding too much from our visitors.
V

Easy Navigation

Simple navigation during the checkout process that links to relevant pages. Don’t frustrate your customer or leave them stranded on the checkout page, give them some way to get back to the cart or shop pages in case they wanted to make changes.
V

Convey Security

Reassure your customer about the security of your site and their information as they enter their payment details.
V

Keep it Visual

Humans are visual creatures, so let us appeal to that by making the checkout process more visual. A great way to do that is a Multi-step checkout.
V

Offer Discounts or Upsells

Remind the customer of any last-minute ways to save money. Maybe you offer a shipping discount over a certain amount, this is where you can let them know.
Now let’s see which of these best practices we can implement in our Divi WooCommerce Checkout Page without using any 3rd party plugins or custom code.

Customizing the WooCommerce Checkout Page in Divi

Before getting started, make sure you have installed and activated both Divi Builder and WooCommerce on your WordPress site. It would be great if you already have some products uploaded to your online store with at least one added to your cart. This makes it easy to see how your checkout page is progressing throughout this tutorial by simply browsing to www.youwebsiteurl.com/checkout or localhost/checkout, depending on your setup.
PRO TIP: If you don’t have any products yet, you can easily import some sample products provided by the WooCommerce team. More on that in this quick tutorial.
To customize the WooCommerce Checkout Page in Divi we can take one of two approaches.

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.

Stock Divi Checkout Page for WooCommerce
Uninspiring stuff, right?

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.

Custom Divi Checkout Page for WooCommerce

Adding and Styling Modules for the Divi WooCommerce Checkout Page

Ok, let’s talk about exactly what is going to happen here. We want to meet as many of the Checkout Page best practices we talked about earlier and to do that we will open up the automatically generated WooCommerce Checkout Page that contains the checkout page shortcode. Once there, we will add and style the needed modules that will help make our checkout experience silky smooth.
PRO TIP: The shortcode for the checkout page is [ woocommerce_checkout ] and you will see us reference the shortcode or WooCommerce Checkout shortcode, that is what we are referencing. WooCommerce adds various useful shortcodes that you can use to your WordPress install, for a full list, check out the official WooCommerce Documentation.
To do that, we will start by browsing to Pages, then editing the Checkout Page.
Opening Divi WooCommerce Checkout Page
When it opens, you’ll see a Gutenberg Layout that already contains our WooCommerce Checkout shortcode. Since we will be sticking to the Divi Builder to customize our Checkout Page, go ahead and click on Use The Divi Builder. When presented with the Option Cards, select “Use Existing Content” and boom, we are back in our happy place.
Speedrun
Pages > Checkout > Use The Divi Builder > Use Existing Content
If you click on the “Desktop View” you will see that the shortcode already gives us an idea of what our Divi WooCommerce Checkout Page will look like. While it is functional, it isn’t really meeting our best practices, so let’s fix that right now.

Part 1: Simplifying the Layout for Our Checkout Page

For our Checkout Page top pop and highlight the important details, we are going to add some styling to the plain white background. Let’s open up the Section Settings by clicking the gear icon.

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.

Speedrun

SECTION

CONTENT TAB

Background Type: Gradient
Color 1: #F4F4F4
Color 2: #E4E4E4
Gradient Direction: 135 degrees
Start Position: 50%
End Position: 50%

DESIGN TAB

SPACING
Top-Padding: 0px

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.

Speedrun

ROW

CONTENT TAB

Background: White

DESIGN TAB

Padding: 50px 50px 50px 50px
Rounded Corners: 15px
Box Shadow: Option 1

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!

Speedrun

TEXT MODULE

DESIGN TAB

TEXT
Text Font: Open Sans Condensed

HEADING TEXT
H3
Heading 3 Font: Open Sans Condensed
Heading 3 Font Weight: Bold
Heading 3 Font Style: Capitalized

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

Text Shortcode Design Text
Bam! Now we’re talking! We already have a Custom Divi WooCommerce Checkout Page and we’ve only been at it for 5 minutes. Good work!

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

PRO TIP: Unfortunately, it is not possible to style the buttons for this text module specifically without writing some CSS. You can however style your buttons globally using the Divi Theme Customizer. For more on that, check out “The Ultimate Guide to the Divi Theme Customizer”.
This is starting to look great, but to satisfy some of our Checkout Page best practices, we still need to address a few things like the header and footer which are a bit distracting, as well as create a little more confidence in the security of our Custom Divi Checkout Page.

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.

PRO TIP: Make sure that you are in the “Wireframe View” to easily see the right-hand column containing the “Page Attributes” section.
Speedrun
Right-hand Column > Page Attributes > Page Template > Blank
As you can see, we solved one problem but created another as there is no way to navigate the site as we removed the Navigation Menu at the top of the page. Visitors might now also be a little confused about where they are on your site as there is no title. Let’s fix this by adding a small menu that will contain the relevant links for our visitors, then also add a title letting the visitor where they are in the checkout process.

Part 2: Easy Navigation

Time to browse over to the “Menus” page under “Appearances” in the left column. Once there, we will type a “Menu Name” under “Menu Structure”. We used “Checkout Menu”, but you can name this menu after your cat also if you like.

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

Speedrun
Appearances > Menus > Menu Structure > Menu Name > Type “Checkout Menu” > Create Menu

Add > Home + Cart + Checkout

Save

PRO TIP:  If your site already has menus set up, just click on “Create a new menu” at the top of the page and follow the steps above from there.
Great! Now we can go and add a “Menu Module” to our Checkout Page.

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.

Speedrun
Add Menu Module > Drag above Text Module containing WooCOmmerce Cart Shortcode

Menu Module

Content Tab

Menu: Checkout Menu

Design Tab

LAYOUT
Style: Centered

MENU TEXT
Active Link Color: Black
Menu Font: Open Sans Condensed
Menu Font Style: Capitalized
Menu Text Color: Black
Menu Text Size: 18px

DROPDOWN MENU
Dropdown Menu Line Color: Black

ICONS
Hamburger Menu Icon Color: Black

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.

Much Better!

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.

And that is it! Our visitors are no longer stranded on the Checkout Page and can move freely about the site. With the menu in place, let’s move to add the Page Title of our Divi WooCommerce Checkout Page.

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.

Speedrun
Add One Column Row > Drag above Row containing WooCommerce Cart Shortcode

Text Module

Content Tab

Body: “SECURE CHECKOUT”

Set text to Heading 1

Design Tab

HEADING TEXT
Heading Font: Poiret One
Heading Font Weight: Bold
Heading Text Alignment: Centered
Heading Text Color: Black
Heading Text Size: 48px (Desktop) 38px (Mobile)

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

So we have already made giant strides in making our site more credible by upgrading the overall look of the checkout page. We’ll now go the extra mile by cementing the security of the transaction by adding some information about how our payments and shipments are processed.

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.

PRO TIP: You can find similar payment banners over at favpng.com to reflect your selected payment methods or you can just right-click the image above and save it to your computer.

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”.

Speedrun
Add Image Module below WooCommerce Checkout Shortcode

Image Module

Content Tab

IMAGE
Image: Select/Upload your Image

Design Tab

ALIGNMENT
Image Alignment: Centered

SIZING
Max-Width: 300px

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.

We are almost done here and things are looking great! The last step in conveying how secure our visitors transaction will be is adding a quick reference to payment security and shipping practices.

NOTE: Keep in mind you can add anything or stress any important item here, these are only given as an example.

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.

Speedrun
Add 2 Column Row at the bottom > Add Blurb Module

BLURB 1

CONTENT TAB

Title: “100% Secure Checkout”
Body: “Our payments use 2048-bit encryption”
Use Icon: YES
Icon: Padlock

DESIGN TAB

IMAGE & ICON
Icon Color: Black

TITLE TEXT (H4)
Title Font: Open Sans Condensed
Title Font Weight: Bold
Title Text Alignment: Centered

BODY TEXT
Body Font: Open Sans Condensed
Body Text Alignment: Centered

Save & Clone Blurb > Drag Blurb to Second Column

BLURB 2

CONTENT TAB

Title: “Reliable Deliveries”
Body: “Our Shipments go out Mon-Fri via a secure courier.”
Use Icon: YES
Icon: House

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“.

Boom! That is our first blurb done. Now let’s just duplicate that module and make the necessary changes.
All we need to do now is quickly change our “Title” text to “Reliable Deliveries”, the “Body” to “Our Shipments go out Mon-Fri via a secure courier.”, and replace our padlock “Icon” with the “House” icon.
That took all of 10 seconds and looks great!

Part 4: Offer Discounts or Upsells

Because we love our customers and we love upsells/cross-sells more, we want to remind them of any last-minute savings they might qualify for. To do this we are going to add a subtle promo bar at the top of our page.

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.

PRO TIP: To learn more about the native WooCommerce tools for Coupon Management, take a look at their Coupon Documentation.

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.

Speedrun

ROW SETTINGS

CONTENT TAB

Background: Black

DESIGN TAB

SIZING
Width: 100%
Max-Width: 2560px

SPACING
Padding Top: 5px
Padding Bottom: 5px

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 BottomPadding” to “5px” which will make the bar nice and thin.

We are at the final step already, can you believe it? All we need to do is style the text in the Promo Bar and take a look at how we did with those Best Practices for our Divi WooCommerce Checkout Page.

Text Module

Speedrun

Text Module

CONTENT TAB

Body: “Don’t forget to add Coupon Code: FREESHIPPING for orders over $35!”

DESIGN TAB

TEXT
Text Font: Open Sans Condensed
Text Color: White
Text Alignment: Centered

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“.

You are a champ! That was it…kaput…finished. When you reload your Divi WooCommerce Checkout Page now you will see pure awesomeness. Great work! But now for the final test, how did we do on those best practices we talked about.

Let’s see how we did…

Z

Simplified Layout

V

Collect Relevant Information

Z

Easy Navigation

Z

Convey Security

V

Keep it Visual

Z

Offer Discounts or Upsells

4 out of 6 is not horrible, it for sure is better than a round donut (well, maybe), but it does show us where we start bumping into the limitation in Divi and what you can do to Customize your WooCommerce Checkout Page. Now if only there was a way to dig in a little more to see if we can go the extra mile for our customers and hit the 6 out of 6 mark…

BODYCOMMERCE

We felt like our visitors deserve better, which is why we built BodyCommerce, our answer to the limits imposed within a stock Divi and WooCommerce website. With BodyCommerce we can fill in and improve upon the gaps we are left with with to build the best possible Divi WooCommerce Checkout Page.

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

Divi WooCommerce Loop Elements

Custom Checkout Fields

With BodyCommerce you can easily add custom checkout fields which could further enhance the custom experience and help you gather import details regarding new orders.

Checkout Funnel

A great opportunity to increasing the value of your client is to make great recommendations for them as they get ready to finish their transaction This way you can present offers like items that go well with the items in their cart right from the checkout page.

Divi WooCommerce Loop Elements
Divi WooCommerce Loop Elements

Hand Crafted Checkout Presets

We know it is important to make the checkout process smooth as silk. For that reason we create some familiar checkout pages that we know converts. The best part of all is that each of these presets can be even further customized leaving you with endless possibilities.

One-Page Preset

This preset is fantastic because it allows the visitor to modify the cart right from the checkout page minimizing friction.

Shopify Preset

Talk about familiar and awesome, this preset is by far our favorite because it is painfully simple and beautiful.

Multi-Step Preset

Our customers love this because it breaks down more daunting checkout pages into smaller steps that visitors can easily digest.

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…

Z

Simplified Layout

Z

Collect Relevant Information

Z

Keep it Visual

Z

Easy Navigation

Z

Convey Security

Z

Offer Discounts or Upsells

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!

For more information on BodyCommerce and its awesome features, take a look at our feature page and start dreaming of how you will use BodyCommerce to build amazing websites with Divi and WooCommerce.