How to Style a User Account Page in Breakdance
Easy Digital Downloads and Breakdance are powerful tools that help anyone set up a digital store without coding knowledge. Follow this guide to learn how to create a personalized account page and enhance your user’s shopping experience.
Christy Cañete
Updated October 1, 2023
create digital store with easy digital downloads
Reading Time: 10 minutes
If you’re setting up an e-commerce site, then an account page is a must.
An account page provides a personalized shopping experience for your users. For instance, it helps them keep track of their purchases, access their downloaded content, or receive tailored recommendations.
In this guide, we’re going to set up a simple digital store using Easy Digital Downloads and Breakdance.
I’ll show you how easy it is to add new products, create a personalized account page, and display text links based on the user’s login status.
By the end, you’ll have a simple store where users can register, log in, and view their account page, just like this:
Styling A User Account Page With Breakdance
1) Install Easy Digital Downloads
To bring e-commerce capabilities to our site, especially for selling digital products, we'll use the Easy Digital Downloads (EDD) plugin. EDD is my top pick for selling a variety of digital items, from PDFs and webinars to apps, audiobooks, and photos.
For this guide, we'll stick to the free version of EDD. However, if you're looking for a broader range of features, consider upgrading to EDD Pro.
In your WordPress admin area, navigate to Plugins > Add New. In the search bar, type 'Easy Digital Downloads' and hit enter. Find the plugin in the search results and click Install and activate.
After activation, you'll notice a new 'Downloads' tab on the left menu. This will also lead you to the setup page. Simply click on the Get Started button.
Fill in the necessary details to configure your digital store. When you reach the final step, you'll be prompted to input details of the product you wish to sell. This includes the product name, image, pricing options, and the set price.
If you wish to add more products later, just go to Downloads and select Add New. Fill in the product details and the file for download, then hit save and publish.
When you revisit the downloads section, all your added products will be displayed. Remember, you can also categorize and tag your products for better organization.
2) Create a Header Template
For this guide, I’ve chosen the ‘Travel Trip’ template from the Breakdance Design Library. However, you're free to pick any template that resonates with your project.
Now, let’s customize our header template.
From your WordPress dashboard, go to Breakdance > Headers. Open the main header in the Breakdance editor. If you're feeling creative, you can also design your own header by clicking ‘Add Header.’
Now, it's time to personalize. Modify the menu links, upload your logo, and tweak the background color to match your brand. Here's a glimpse of how my header appears in the editor:
You'll see I've incorporated both ‘Login’ and ‘Logout’ text links. The idea is to display one of these links based on a user's login status, and we'll achieve this by setting conditions.
Let's start with the ‘Login’ link. Click on its text element and head over to the settings tab on the left. Choose Conditions > Edit Conditions. In the pop-up that appears, set the 'User Logged In Status' to 'logged out'. This ensures the ‘Login’ link is visible only when a user is not logged in.
Repeat the process for the ‘Logout’ link, but this time, set the 'User Logged In Status' to 'logged in'.
3) Create an Account Page
Let's create an account page that feels personal to the user. Ideally, it should greet them with a warm 'Welcome back, [User Name]!' and a few options to view their purchase history, suggested products, account settings, and more.
Here’s how to set it up.
From your WordPress dashboard, navigate to Pages > Add New. Name your page, save it, and then publish it.
Now, let's style this page using Breakdance.
In my version, I've designed the account page with a ‘Manage Your Account’ menu on the left and ebook recommendations on the right.
To make the greeting dynamic, I've incorporated the user's name. Click on the dynamic icon adjacent to the text label. In the pop-up, select 'user name' from the 'Current User' category.
Then, prepend and append a few texts to make the text display ‘Welcome back, user name!’ as shown below.
Next, we’re going to add a condition to the welcome text so that it only shows when the user is logged in.
Under the 'Manage My Account' section, I've temporarily used placeholder links. These will guide the user to another page upon clicking. Since we haven't set up the specific pages for these sections yet, these placeholders will do. Remember to replace them with the correct links once those pages are ready.
4) Create a Product Page
With Easy Digital Downloads, every product you add is automatically given its own page. Let's enhance this page to make it more engaging for your users.
Here's how I've tailored the product page
To add a purchase button, I've used EDD’s shortcode. To find and use it, go to the Downloads section in your WordPress dashboard. Open the desired product page. On the left navigation panel, locate the purchase shortcode and copy it.
Switch to your Breakdance editor, add a shortcode element, and paste the copied purchase shortcode there.
With this setup, whenever a user clicks the purchase button, they'll be taken to the checkout page, which, conveniently, is auto-generated by EDD.
Once you're content with the design and layout of your product page, click save.
Now, let's go back to the account page to integrate the product links.
In my design, I've linked the product page to the 'Start Reading' button. This way, if a user is interested in the ebook, they're led straight to the product page to explore the ebook further.
After ensuring all links and elements are in place, save your progress.
5) Create a Registration Page
Next, we’re going to create a registration page for new users to sign up and create their accounts.
From your WordPress dashboard, head over to Pages > Add New. Add a name to your page. Then, hit save and publish.
Open the newly created page in your Breakdance editor. Here, you'll want to add essential elements like a heading and a registration form.
Feel free to get creative! Adjust the style, change the field labels, or resize the form to your liking.
Next, enable your site to accept registrations. From your WordPress admin area, go to Settings > General Settings. On the 'Membership' section, check the box labeled ‘Anyone can register.’ Then, choose a 'New User Default Role' from the dropdown.
Once you're satisfied with the look and functionality of the registration page, don't forget to save your changes.
6) Create a Login Page
Having set up the registration page, it's time to create a space for users to log in.
Start by creating a new page, just as you did with the registration page.
Once you're in the Breakdance editor, add the necessary elements. This includes a heading and a login form.
Adjust the style to match your site's aesthetics or to create a unique user experience.
After finalizing the design and ensuring everything functions smoothly, click save.
7) Add the URLs
Now, we’re done creating the pages for the registration, login, product, and user account. The remaining step is to add the links.
Tip: To find the links of a page, open the desired page from your WordPress dashboard. The URL can be copied from the settings on the right. For product pages, navigate to Downloads, open the product page, and copy the link from the URL section.
Now, let’s add links to our login and registration forms.
On the login page, users should have two options: logging in with an existing account or registering for a new one.
Add a redirect URL for the login form. In my setup, I've linked it to the account page. This ensures users are directed to their account page post-login.
For the registration button, link it to the registration page.
On the registration page, I've chosen not to use a redirect URL. Instead, after registration, users see a success message and remain on the same page. However, I've linked the login button to the login page.
Depending on your preference, you can set a redirect URL post-registration, like directing users to their account page or home page.
Lastly, let’s link the login and logout from the headers to their designated pages.
Link the login text in the header to the login page. This way, users are directed to the login page upon clicking.
Linking the logout can be slightly complex. To effectively log users out, you might need custom codes or a plugin.
For simplicity, let’s use the LoginWP plugin.
After installing the plugin, configure the logout URL to redirect users to a specific page post-logout. I've chosen the login page for this purpose. The plugin also lets you control the redirect URLs based on the user’s role.
Now, go back to your header template on the Breakdance editor. Click the logout text. On the left, paste the following WordPress logout link on the ‘Link’ field:
http://your-domain.com/?customer-logout=true
Then, save your work. And you’re done!
8) Test Your Site on the Front-End
Let’s test our site on the front-end to make sure that everything functions as intended.
First, open your site in an incognito window (or a different browser). By doing so, you can view the site as a new visitor.
a) Registration Test
Now, go to the login page and click register.
Enter the required details on the registration form and click on register.
b) Verify the New User on the Backend
To confirm the registration was successful, access your site as an administrator in a separate window. Go to Users > All Users. This section displays all registered users and their roles. You should see the newly registered account here.
c) Login Test
Now, back to the incognito browser, let’s try to log in using the account we’ve just registered.
Upon successful login, you should be directed to the account page. The header should now display your name, and the 'Log In' link should have changed to 'Log Out'.
d) Product Page Navigation
Under the product recommendations, click the 'Start Reading' button on one of the products. This action should lead you to the product page.
e) Purchase Flow
On the product page, click the purchase button. If everything's set up correctly, you'll be redirected to the checkout page.
Once a purchase has been made, you can check it on the Downloads > Orders section.
f) Logout Test
On the account page, click the logout button. You should now be signed out from the site and taken back to the login page.
And That’s It!
With Easy Digital Downloads and Breakdance, you can now craft a user-friendly account page, giving your users a personalized experience.
We’ve also created another tutorial about how to set up an Easy Digital Downloads store in Breakdance. Here, we’ve provided more details on how to use this plugin to create a digital store. So make sure to check it out.
If you have thoughts or questions about the setup process, please drop a comment below.
Want to Learn Even More?
If you enjoyed this article, subscribe to our free newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.