How To Make A Tabbed SureCart Customer Dashboard With Divi Tutorial By Pee Aye Creative

How To Make A Tabbed SureCart Customer Dashboard With Divi

Nelson Miller Pee Aye Creative
In this tutorial I will show you how to make a tabbed SureCart customer dashboard account area using Divi.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Enable The Visual Builder On The Customer Dashboard Page

SureCart automatically creates a page called “Customer Dashboard” which is the equivalent to the “My Account” in Woo. You can find this page easily from your WordPress pages. Once you are on the page, click to enable the Divi Visual Builder.

You may encounter the infamous “Your Save Has Failed” when working on this page. If you do, just ignore it – because the save works, it just shows a false positive. I usually just clear the URL to get out of the builder.

2. Add A Tabs Module

In order to make a tabbed customer dashboard, we first need a tabs module. You can use the native Divi Tabs module if you want, but keep in mind it will be limited in design and styling. However, it should function perfectly fine, so if you are handy with custom CSS coding to style the default tabs, go for it.

If you find the default Divi Tabs too limiting and want an easier method, you can use our own Divi Tabs Maker plugin. I will use this in the video and tutorial here, but the concept will be the same either way. I’ll also share my tabs design as a Divi layout, which you can download and use if you want.

Divi Tabs Maker Plugin by Pee Aye Creative

3. Design Your Tabs

You can choose to design your tabs now, or wait until after step #4 – that is up to you. But I thought I would mention it now as step #3 since our tabs will already be styled in the screenshots.

Here is a look at how the customer dashboard area looks on our SurelyWP website:

SurelyWP tabbed SureCart customer dashboard

The design is very simple, actually. We simply have a border on the tabs, an icon on the left side of the text, and that’s it. You can get as fancy here as you want, especially if you are using the Divi Tabs Maker module, which has hundreds of design settings.

You can download this layout as a Divi Library module. Go to Divi>Divi Library to import, and then add as a module to the page.

4. Add The SureCart Shortcodes To The Individual Tabs

The next step is to add the SureCart shortcodes into the content area of each individual tab. You can copy the shortcodes from documentation in the SureCart help center.

NOTE: SureCart originally had a tabbed Customer Dashboard, but that was deprecated. However, they provide us with shortcodes to handle it manually, which we will use in our tabs.

Open up the tabs module and then open up the first individual tab settings. Go to the content area, which is where we will paste our shortcode.

All The Shortcodes

Here are all the shortcodes available that we will be using.

[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"]

Add The Customer Dashboard Wrapper Shortcode Around Each Individual Tab Shortcode

It may seem odd, but in order for this to work, we need to add the SureCart customer dashboard shortcode wrapper around each of the individual shortcodes for each specific tab.

Here are the shortcodes that wrap around each of the others listed above:

[sc_customer_dashboard_page]
[/sc_customer_dashboard_page]

The placement of these are highlighted in the screenshot below:

adding the SureCart dashboard shortcode for each individual tab

You can see in the screenshot above, the individual tab is the “Orders” and we are using the orders shortcode, but it also has the opening customer dashboard shortcode above it and the closing customer dashboard shortcode below it.

adding the SureCart dashboard endpoint shortcode for each individual tab

Here is how the content displays on the frontend in the tab content area:

SurelyWP tabbed SureCart customer dashboard Orders tab

Repeat For Each Tab

You should have a tab set up in the tabs module for each of the shortcodes – Orders, Subscriptions, Downloads, Payment Details, Billing Details, and Account Details. Now you can repeat step #4 for each of those tabs.

I show all of these steps in the video embedded above, so if you have any questions on this process, it may be helpful to watch that.

SurelyWP from Pee Aye Creative And Nelson Miller_1

#1 Addons For SureCart Ecommerce Platform

SurelyWP is the first and only company creating addons for the popular SureCart ecommerce platform. Our goal is to create products that enable users to effectively run and market their online stores. Visit our website to learn more!
www.surelywp.com

Categories: Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart