In this post, we will learn how to design front-end account pages, generated mostly by third-party plugins, using the Divi builder. This post is inspired by this official blog post by Elegant themes.
If you have ever built an e-commerce site or membership site with Divi, you have probably run into the challenge of matching the design or your Divi site with the account pages generated by your plugin to handle membership or e-commerce functionality.
These Account pages (also called front-end pages or reserved pages) handle things like…
- a member’s account information
- purchase history
- and more…
Most of the account pages for third-party plugins like WooCommerce use shortcodes (or have shortcodes available) to generate this kind of plugin-specific information.
In this tutorial, I’m going to share some tips on how you can use the Divi Builder to design those front-end account pages by taking advantage of those shortcodes.
Here are a few examples of custom account pages you can create with Divi.
General Tips for Designing Account Pages
Theme Customizer Settings
Use Shortcodes to Display Account Pages Whenever Possible
Normally, plugins will supply the user with an option to deploy account information using a shortcode rather than use the designated account page generated by the plugin. This allows users more flexibility with organizing page content throughout their site and also allows this content to work on page builders like Divi.
For example, if you are building a site with WooCommerce, you will have designated WooCommerce Pages to handle account information. One of these pages is called the My Account page.The page contents are deployed using the shortcode [woocommerce_my_account].
Depending on the plugin, your front-end account pages may not be able to deploy the Divi Builder like with WooCommerce. But, that doesn’t necessarily mean there aren’t shortcodes available that will help build a custom page on your own. For example, when using MemberPress, every time you create a new membership, the plugin automatically creates a registration page for that membership.
These auto-generated registration pages cannot deploy the Divi Builder. But you can, however, use a shortcode to generate a registration form for that membership.
So, all you would need to do is create a new page, add the registration form shortcode to a text module using the Divi builder, and finish creating your custom registration page. At times, you may have to look a little deeper for a Divi friendly solution for designing these pages.
But in most cases, there is a shortcode to help you. This is the basic strategy for designing these type of pages with Divi.
Use Shortcodes within Text Modules for More Design Options
Normally, I would suggest adding shortcodes to a code module in Divi, but not in this case. Shortcodes that generate account information contain headers, body text, and links that can all be further customized using the Design option of the text module.
The best way to check if this content can be designed by the text module is to test it. In some cases, you may not be able to see the design changes in real time using the visual builder like normal. You may have to save the settings first and view them on the live page to see the effects.
If you are familiar with HTML, you can even do a quick inspection of the shortcode output using your browser developer tools to see if your text has any headers (H1, H2, etc.) that you can target with the design.
Customize a Page Layout to Hold Your Shortcode
Now that you have the ability to use a shortcode within a text module, you can design the rest of the account page content with any custom layout you want with the Divi Builder. If you need help with this, check out these steps to using a Divi Layout for your website.
Depending on the layout pack you are using you will need to find the page layout that best fits your needs for the shortcode content. In general, I would look for a blog page, a contact page, or an about page layout. These page layouts usually have a standard header that can be easily adjusted and a full-width content section that can easily hold a shortcode.
Preferably, you will want to use an existing text module so that the shortcode content will inherit the design of the existing module.
For example, here’s how you would use the Coffee Shop Layout Pack to create an account page for WooCommerce.
Copy the existing shortcode within the WooCommerce My Account Page.
Deploy the Divi Builder and then the Visual Builder to edit the My Account Page.
Open the Settings menu and select Load from Library and select the Coffee Shop – About layout from the list of premade layouts.
Update the Design tab settings as follows:
Text Orientation: Left under unordered list text tab
Unordered List Font: Oswald Unordered
List Font Weight: Light
Unordered List Font Style: Uppercase (TT), Underline (U) Unordered List
Underline Style: Solid Unordered List
Text Size: 32px
Unordered List Letter Spacing: 2px
Unordered List Line Height: 1.8em
Unordered List Style Type: None
Sizing: 100% (default)
There Are Limitations
Unfortunately, there will be times when certain pages cannot be designed with Divi at all. Normally, this is because the plugin is using custom post type archives. A good example of this is the WooCommerce product page.
Designing Memberpress Account Pages with Divi
MemberPress Login Page
You can designate any page you want to be your login page from within MemberPress Options. Once you select the page to be your MemberPress Login Page, a shortcode will become visible whenever you edit the page.
MemberPress Account Page
Just like the login page, you can designate any page as your MemberPress Account Page. However, the shortcode needed for the account page info is not easily found within the MemberPress Options. I had to find it within their list of available shortcodes.
MemberPress Thank You Page
The MemberPress Thank You Page you designate can be any page with any content. So no design restrictions here. You can use the Divi Builder like normal. Setting the page as your MemberPress Thank You Page simply tells MemberPress that this is the page you want to redirect users to after registration.
Designing WooCommerce Pages with Divi
WooCommerce generates its own set of WooCommerce pages automatically when you install the plugin. These include the following:
Shop – which is a placeholder for a post type archive for your products.
Cart – which uses the shortcode [woocommerce_cart] to generate the cart contents Checkout – which uses the shortcode [woocommerce_checkout] to show the information. My Account – which uses the shortcode [woocommerce_my_account] to show specific customer information related to their account.
Since I already covered how to build a custom My Account Page earlier, I’m going to leave you with some useful design tips for each of these WooCommerce Pages.
Let’s take a look at the Cart page first.
Here is what it looks like before we do anything to it. If you update your global accent color, the links and buttons on the Cart page will match the color scheme for your layout. And, if you update the typography settings in the Theme Customizer, the headers and body text should also match as well. But we can do a little better than this with just a few clicks.
Now go edit your cart page. Copy the shortcode [woocommerce_cart]. Import a layout from the Divi Library and add the shortcode to one of the text modules inside the layout. Make sure it is a one-column row so the content of the cart has room to display. Then delete all of the sections, rows, and modules you don’t need. Here is an example of what this cart page looks like using the Fashion layout pack.
Shop Page and Archive Pages
You can create a custom shop page for your WooCommerce sight by using Divi’s Shop Module. However, since this page won’t share the custom post type archive of the default shop page, you will be forced to use the post type archive page template if you want to search products by category for example.
The Product Pages aren’t able to be designed with Divi but should inherit the Theme Customizer settings at least. You can also add some Custom CSS to the Theme Customizer to target elements on this page.
How to Design Easy Digital Downloads Account Pages using Divi
Here is where you set the default front-end pages EDD uses to manage your store. The following pages will be auto-created for you and will be accessible on your wordpress pages.
Checkout Page – has the title “Checkout”
Success Page – has the title “Purchase Confirmation” Failed
Transaction Page – has the title “Transaction Failed” Purchase
History Page – has the title “Purchase History”
Note: These pages all use shortcodes to deploy the information for the page. So you will be able to use the Divi Builder to customize each of these pages and insert the shortcode anywhere you want within a Divi Module. This will allow you to keep your design consistent throughout your site.
You can use the checkout page shortcode [download_checkout] to design your custom checkout page using the Divi Builder.
Here is an example of a checkout page using the blog page layout from the Digital Pricing Layout pack.
Because of the dark background, I had to give a white background to the row containing the text module with the shortcode.
Failed Transaction Page
Any page can be designated as the Failed Transaction page. EDD will simply redirect the user to this page if ever a transaction fails upon checkout. Just create any page with any content you want using the Divi Builder.
Here is an example using the same blog page layout from the Digital Pricing Layout Pack:
Purchase History Page
You can use the [purchase_history] shortcode to create the Purchase History page with the Divi Builder. Here is an example of what this page would look like using the Blog page layout from the Digital Pricing Layout pack:
The Login Page
The Login Page isn’t auto-created for you since it uses the WordPress default login. But you can create your own login page using the [edd_login] shortcode.. Here is an example of login page created using the Blog page layout of the Digital Payments Layout pack:
Even with Divi, sometimes you need plugins. That is why it is important to know how to merge the power of Divi (as a design tool) with the power of third-party plugins. So if you are building an e-commerce site with WooCommerce, a Membership site with MemberPress, or if you are having a challenge integrating account pages with the Divi Builder, keep an eye out for those shortcodes.
My goal in this article is to help you maximize the Divi Builder as a design tool when working with third-party plugins. But for those CSS lovers out there, you may opt for a complete child theme approach to these account pages. In most cases, this is the only way to control all aspects of design.
Let me know if you have had similar experiences with using Divi with other plugins. I’d love to hear them. Let me know in the comments below.
This article was inspired by this post of Elegant themes on their official blog.