Back to contents

JetWooBuilder: How to Create My Account Page Template

From this tutorial, you will learn how to create and customize a template for My Account page and then assign it by means of the JetWooBuilder plugin.

Tutorial requirements:

  • JetWooBuilder — develop a best-selling WooCommerce store from the ground up;
  • Elementor free — add the necessary widgets into the editor, style them up, and publish the page right away;
  • WooCommerce — get secure payments, configurable shipping options, and more;
  • JetThemeCore at least 2.0.1 version (not required, only if you want to create a page with header and footer).

How to Create a My Account Page Template with the JetWooBuilder Plugin

1 Step — Enable the My Account widgets

Navigate to the WordPress dashboard > Crocoblock > JetPlugins Settings and unfold the JetWooBuilder tab.

create a new page template

Scroll down to the My Account Page Widgets section and ensure all the widget toggles are enabled.

my account page widgets

2 Step — Create a My Account template

Proceed to the Crocoblock > JetPlugins > Woo Page Builder submenu and click the “Create New Template” button.

Choose the “My Account” option in the This template for drop-down list of the pop-up window and give it a title. Afterward, click the “Create Template” button.

my account template in elementor

3 Step — Fill the My Account Page with widgets

Using Elementor sections and widgets, you can build any layout for this page. For example, if you have the JetTabs plugin, you can create a convenient tabs menu on the My Account page.

The JetWooBuilder plugin offers you the widgets created especially for the My Account page. Let’s take a closer look at them.

jetwoobuilder my account widgets

My Account Dashboard

When opening an account page, the first thing a user sees should be the block added with this widget. It contains a greeting message, the “Log Out” button, and links to recent orders, addresses, and account details editing windows.

my account dashboard widget

My Account Details

This widget adds a form, which can be used to collect users’ names and email addresses. Besides that, it contains a section where the client can change the password.

At the bottom of the table, there is a “Save Changes” button. In the Style menu tab, you will find tools to customize the look of the table in general and all its parts.

my account details widget

My Account Addresses

If the customer had saved the billing and shipping address in the account, it would have been much more convenient to automatically add these details at the checkout. This widget adds a block that allows the client to add a billing and shipping address for future purchases.

addresses widget

My Account Downloads

If your online store offers downloadable electronic products, such as apps or movies, this block will show the pIf your online store offers downloadable electronic products, such as apps or movies, this block will show the products that the client has already downloaded. This widget is at some point similar to My Account Order but shows the other type of products.

downloads widget

My Account Login Form

Before entering the account page, the user must complete the identification process. This widget adds a login form. The client fills in the username and password and then clicks the “Log In” button to open the account page. As in all the other widgets, the design of the login form can be customized in the Style menu tab.

login form widget

My Account Logout

Thus, My Account Dashboard contains a logout button, but you may want to place another one somewhere at the top or bottom of the page. This widget simply puts a logout button on the account page, and you can use any Style tab tools to change the look of that button.

account logout widget

My Account Order

When the logged-in user makes an order, it falls into a block created with this widget. A convenient table contains not only the recently created order but all orders made by this client. That can be useful both for the customer and you to track purchases.

my account orders widget

My Account Registration Form

If a nonregistered user wants to go to the account page, they must fill out a registration form. This widget adds a form consisting of a field where users have to insert their email and a confirmation button. It also has a notification message that leads the user to the company’s privacy policy page. Once again, you can customize the form’s look in the Style menu tab.

registration form

Add the necessary widgets to the template, style them, and hit the “Publish” button at the bottom of the page.

4 Step — Assign the template to the page

The template you created is not attached to the website’s page. To assign it, go to WooCommerce > Settings > JetWooBuilder and scroll the page down to the My Account section.

Tick the Custom My Account checkbox and choose the templates you’ve just created in the Checkout Template and Checkout Top Template drop-down menus. After that, click the “Save Changes” button.

Besides that, you can create an additional custom template for the account login page and assign it to the page in the My Account Login Page Template drop-down list.

woocommerce settings

Proceed to the front end, click on the My Account link, and you will be redirected to the My Account page with the template you created before.

my account page on the front end

How to Build a My Account Page Template with the JetThemeCore Plugin

1 Step — Create a My Account template

With the recent update of the JetThemeCore plugin, you can create page templates and assign the needed elements like body, header, and footer in a couple of clicks.

Before you move on to creating a template, navigate to the Crocoblock > JetPlugins Settings > JetWooBuilder directory and make sure that you have all My Account Page Widgets enabled.

my account page widgets

Proceed to Crocoblock > Theme Builder and click on “Create new page template.”

create a new page template

There will be a new pop-up window where you can set one or multiple conditions, according to which the given template will be either shown on specific pages or not.

conditions for a thank you page template

Hit the “Add Condition” button. Firstly, make sure that it’s set to “Include.”  

In the following drop-down list, select “WooCommerce.”

create a template for the thank you page

Proceed to the last drop-down menu and choose the “Account Page” option.

account page conditions

Once you hit the “Create” button, you will see a new template in the JetThemeCore dashboard. Give it a name.

my account page in the theme builder

Firstly, click on the “Add body” button. Here you can create a template from scratch with the JetThemeCore plugin adding the widgets described in the first part of this tutorial.

add body to my account template

Or, you can simply click on “Add from library” and choose a template you already have, e.g., built with the JetWooBuilder plugin.

The color of the first icon under the Properties will indicate which plugin was used to create the chosen template.

add my account template

Hit the “Use” button. The template is attached to the body now.

my account added body

2 Step — Add a custom header and footer to the My Account template

JetThemeCore plugin allows adding custom headers and footers to the templates right from the JetThemeCore dashboard.

To add an element to the My Account template, head back to the Theme Builder.

Click on the “Add header” button and create a new header or choose one from the library.

add a custom header to the cart template

Repeat the same steps and add a custom footer if needed.

theme builder my account page template

3 Step — Check the JetWooBuilder settings

Now, when you are done with the template layout and design, it is time to check the JetWooBuilder settings. 

Go to WooCommerce > Settings and open the JetWooBuilder tab. Scroll down to the My Account Page section and ensure that the Custom My Account Page checkbox is disabled.

my account woocommerce

There is no need to choose the template in the My Account Template drop-down menu as we have already assigned the template to the My Account page in the Theme Builder dashboard. 

Scroll the page down and click the “Save Changes” button.

Proceed to the front end, click on the My Account link, and you will be redirected to the My Account page with the template you created before.

my account page on the front end

Now you know how to use My Account widgets and build a My Account Page template from scratch with the help of the JetWooBuilder and JetThemeCore plugins.