Gold Penguin Logo with Text

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.
Updated November 9, 2023
create digital store with easy digital downloads
create digital store with easy digital downloads
Difficulty: Medium. You should know a normal amount about this tool/topic
Time Required: ~20 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:

user account page in Breakdance

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.

easy digital downloads plugin

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.

easy digital downloads setup page

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.

add new product via Easy Digital Downloads

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.

add new product via Easy Digital Downloads

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.

add new product via Easy Digital Downloads

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.

Breakdance design library

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

Breakdance header template

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:

Breakdance header template

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.

add condition based on logged in status

Repeat the process for the ‘Logout’ link, but this time, set the 'User Logged In Status' to 'logged in'.

add condition based on logged in status

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.

create new page on Breakdance

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.

create account page on Breakdance

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.

personalize site welcome message

Next, we’re going to add a condition to the welcome text so that it only shows when the user is logged in.

add condition based on logged in status

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.

add URL placeholder

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.

EDD purchase shortcode

Switch to your Breakdance editor, add a shortcode element, and paste the copied purchase shortcode there.

EDD purchase shortcode

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.

add URL on Breakdance text link

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.

Breakdance register form element

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.

enable site registration in WordPress

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. 

Breakdance login form element

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. 

find WordPress page URL

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.

add redirect URL on Breakdance

For the registration button, link it to the registration page. 

add URL on register button

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. 

add URL on login button

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.

add URL to login text

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.

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.

LoginWP plugin settings

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. 

Breakdance register page

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.

WordPress users table

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

Breakdance login page

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.

Breakdance account 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.

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

log out from Breakdance site

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 monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Christy Cañete
Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business
magnifiercross