How to create a customer dashboard for free using WordPress page builders

Are you looking for an easier way for customers to manage their personal information and orders in your eCommerce store? Is your default customer dashboard difficult to use or uninspiring? Does the thought of manually creating a customer dashboard seem daunting and time consuming?

If so, then you’re in luck!

In this guide, you’ll learn how to make a custom dashboard for free using popular WordPress page builders.

Not only will this make it easy to keep track of customer information and purchases, it will also help ensure that they have a consistent user experience on your website.

Before we dive in, let’s see why eCommerce store owners need an organized dashboard for customers.

Why use a customer dashboard?

The customer dashboard is one of the key elements of an eCommerce website. A well designed dashboard helps customers to manage their orders, subscriptions, digital downloads and essential information in one place.

It allows customers to update their billing information and account details. It also helps manage payment methods and other account related tasks.

A better dashboard helps customers feel comfortable and safe to share their personal information.

It also improves customer satisfaction and could ultimately boost sales.

While creating a new dashboard may seem like unnecessary work, the more you do to improve the customer experience, the more likely that customer is to return.

That makes everything worthwhile.

Prerequisites for creating a better customer dashboard

Before creating a customer dashboard, check out the following prerequisites.

If you’re reading this, chances are you already have a website and an online store. Feel free to skip to the relevant parts if you like.

We’ll provide links to setup resources in case you don’t.

WordPress website

WordPress is the most used content management system (CMS) in the world. It allows people to create websites without coding knowledge, which is just one of its benefits.

“43% of the web is built on WordPress.”

Source: WordPress.com

If you’re still at the research stage, read our complete guide on how to set up a WordPress website from scratch.

SureCart

SureCart is a powerful, user-friendly eCommerce solution for WordPress. This amazing tool allows you to set up your store and make the checkout process easier.

If you’re already using WooCommerce or SureCart, skip to the next section. If you’re not, check out this handy guide on how to install a WordPress plugin.

For more information, you can explore this video tutorial to learn how to set up an eCommerce website using SureCart.

How to create a customer dashboard with popular WordPress page builders

It’s time to show you how to make a custom dashboard for customers to manage their orders, subscriptions, payment methods and more.

We’ll show you how to design your customer dashboard using popular WordPress page builders.

• Method 1: Design a customer dashboard with Spectra
• Method 2: Design a customer dashboard with Elementor
• Method 3: Design a customer dashboard with Divi

Let’s get started!

Method 1: Design a customer dashboard with Spectra

Spectra is a popular page builder plugin specially designed for building super fast websites using WordPress blocks.

Let’s see how you can design a custom dashboard using Spectra.

Install and activate the Spectra plugin on your website.

Go to Pages > All Pages.

Here, you see a page named Dashboard. This page was added by default when you installed and activated SureCart.

Click the Edit link to open the page to the WordPress editor panel.

You’ll see the default customer dashboard page.

Remove all the content as we will design it from scratch.

We want to use the Spectra Tabs block to design our dashboard so drag and drop a Tab block into a suitable place on the page.

Add the Shortcode block for each individual tab.

Visit the official customer dashboard documentation page of SureCart.

Copy the following shortcode.

[sc_customer_dashboard_page]
[sc_customer_orders title=”My Orders”]
[sc_customer_subscriptions title=”My Subscriptions”]
[sc_customer_downloads title=”My Downloads”]
[sc_customer_payment_methods title=”My Payment Methods”]
[sc_customer_billing_details title=”My Billing Details”]
[sc_customer_wordpress_account title=”My Account Details”]
[/sc_customer_dashboard_page]

Then paste the code into the Shortcode block.

If you want, you can change the Title of the tab.

We split the dashboard content into multiple tabs and pasted the code according to our design needs.

My Orders

We paste the following code to show order details in the first tab.

[sc_customer_orders title="My Orders"]

My subscription and downloads

We want to display subscriptions and downloads in the second tab using the following code snippet.

[sc_customer_subscriptions title="My Subscriptions"]

[sc_customer_downloads title="My Downloads"]

Payment and billing details

Paste the following code and display the payment and billing details in the third tab.

[sc_customer_payment_methods title="My Payment Methods"]

[sc_customer_billing_details title="My Billing Details"]

Account Details

Finally, we paste the below code to show the account details in the fourth tab.

[sc_customer_wordpress_account title="My Account Details"]

Check the following video to see the design layout.

Finally, hit the Update button to save the page.

Let’s see how the new customer dashboard looks after completing the design.

That’s all there is to creating a customer dashboard with Spectra!

Method 2: Design a customer dashboard with Elementor

Elementor is another renowned page builder that allows us to design websites from scratch with no coding skills required.

Now it’s time to show you how to design a customer dashboard using Elementor.

First, open the Dashboard page in the Elementor editor panel.

Here we’ve removed all the default page content and added a heading.

We’ve added two columns and inserted an image to the right side column.

Drag and drop the Toggle widget into the left side column.

Go to the SureCart customer dashboard documentation and copy the code we shared earlier.

Then paste the code into the Toggle > Text area from the left side Elementor menu.

You can customize the Title as you like.

We want to separate the dashboard content, so we’ve added more toggle menus and pasted the required shortcodes to display the dashboard information.

Finally, click the Update button to save the page.

Check the final design of the new customer dashboard with the Elementor page builder.

See how easy it is?

Method 3: Design a customer dashboard with Divi

Now we’ll show you how to create your customer dashboard using the Divi page builder.

Open the Dashboard page in the Divi visual editor.

We’ve added a pair of two column layouts for our customer dashboard page.

Next, we insert the Code block into a column.

Then we paste the SureCart dashboard shortcodes.

We’ve broken down the dashboard content and pasted the required shortcode into the relevant column as before.

Let’s see the current design of our customer dashboard.

Check out this amazing video tutorial to learn more about the SureCart customer dashboard.

Wrapping up

Making a customer dashboard using a page builder is easy if you have the right tools.

With SureCart, creating a customer dashboard using popular page builders is fun. You just need to use the shortcode offered by SureCart then use it in your preferred page builder to make a better dashboard for customers.

You can apply the same process and customize the dashboard page with other page builders too.

If you’re using Bricks Builder, check out this documentation to learn how to integrate the SureCart customer dashboard.

Have you created a custom dashboard? Used a different page builder or create one from scratch? Share your stories below!