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.