Com o ShopEngine, você pode criar facilmente uma página “Minha conta” onde os clientes podem visualizar seu painel, rastrear seus pedidos e downloads, editar os endereços e detalhes de suas contas. A partir desta mesma página, eles também podem fazer login ou registrar-se em sua conta no seu site. 

Normalmente, uma “página minha conta” apresenta um painel de controle da conta, pedido da conta, detalhes do pedido da conta, downloads da conta, endereços da conta, detalhes da conta e página de login/registro da conta. 

Let’s get to know how to create each of these pages to create a complete “my account page” for your users with a friendly WooCommerce my account page builder.

1. Crie a página do painel da minha conta #

First, you need to create the My Account Dashboard page.

Etapa 1: ativar os widgets necessários #

• Vá para ShopEngine-> Widgets
• Make sure that the Painel de Conta e Navegação da conta widgets são habilitado.
• Click Save Changes

Etapa 2: criar modelo de painel #

• Vá para ShopEngine-> Construtor Modelos
• Clique Adicionar novo

Now, you have to create a Painel da minha conta template –

• Fornecer modelo Nome
• Select Template Type: Painel da minha conta

• Alterne o Template Activation botão
• Select a template or start with a blank template
• Clique em Editar com Elementor

Step 3: Customoze My Account Dashboard #

In the editor you can see the account dashboard template and customize it accordingly.

Para account navigation part, you’ll see these settings.
Navigation List –

• List Item Padding: Here, you can adjust the inner spacing of each nav item.
• List Item Margin: Controls the outer spacing around each nav item, currently left empty/unset.
• Tipo de borda: The style of the border is set to Solid.
• Largura da borda: You can set the border thickness as you wish.
• Cor da borda: The color of the border, currently not set.
• Raio da borda: Controls how rounded the corners of the nav items are, currently not set.
• List Item Background: The background color of each nav item, currently not set.
• List Item Hover Background: The background color shown when hovering over a nav item, currently not set. Show Circle
• Indicator: A small circle marker before/beside each item is turned on.
• List Color: The overall text/icon color of the list, currently set to gray.

Adjust navigation container –

• Cor da borda: Sets the border color of the navigation container, currently not set.
• Container Padding: Sets the inner spacing of the navigation container as you want.

Similarly, you can style the account dashboard part.

Dashboard Style –

• Cor do texto: Sets the color of the general dashboard text, currently set to dark/black.
• Text and Link Font Weight: Adjust the font weight of text and links if you want.
• User color: Sets the color used for the username text, currently set to dark/black.
• User Font Weight: Lets you set the font weight of the username text.
• Link color: Sets the color of links within the dashboard text, currently set to blue.
• Link Hover color: Here, you can change the color of links when hovered, currently set to a lighter blue.
• Link text decoration: Sets the underline style for links, currently set to None.
• Tipografia: Controls the font family, size, and other text styling settings.

Step 4: Preview Dashboard Page #

Once you are done editing your Account Dashboard page, save or publish it.

Agora, vá para o Página Minha conta of your website, click on Painel. Essa é uma prévia de como seus clientes verão o Painel da conta em seus dispositivos.

However, to build the Account Dashboard page from scratch, you’ll need to drag and drop the Navegação da conta e Painel de Conta widgets. And the rest of the customization steps are the same.

2. Create My Account Order Details Page #

Etapa 1: ativar os widgets necessários #

• Vá para ShopEngine-> Widgets
• Habilite o detalhes do pedido widget are
• Click Save Changes

Step 2: Create a My Account Dashboard Template #

Agora, click Add New from ShopEngine’s Builder Templates.

Then, create a Painel da minha conta template –

• Fornecer modelo Nome
• Select Template Type: Detalhes do pedido da minha conta

• Alterne o Template Activation botão
• Selecione a template or start with a blank template
• Clique em Editar com Elementor

Step 3: Customoze My Account Order Details #

Now, you are in the Elementor editor. Here you can customize the template as you wish.

Let’s see, what you can adjust in the order details part.

• Cabeçalho: Controls the styling of the “Order Details” heading, including highlight color, heading color, typography, etc. Also sets the margin below the heading.
• Table and Title: Controls the text color, background, and typography of the order table and title. Also sets horizontal padding (40px) and vertical padding (15px) for the heading.
• Table Body: Controls text color, link color/hover, typography, etc. for the table body content. Also sets border type (Solid), border width (bottom 1px), and row color.
• Download Buttons: Controls padding, margin, border radius, typography, box shadow, color and background (normal/hover) for the download buttons.
• Order Again Button: Controls margin, padding, border radius, typography, box shadow, color and background (normal/hover) for the “Order Again” button.
• Address section: Controls the text color and typography of the address section shown in order details.
• Fonte global: Sets the overall font family (currently Barlow) used across this specific widget.

However, to build the Account Dashboard page from scratch, you’ll need to drag and drop the Navegação da conta e Painel de Conta widgets. And the rest of the customization steps are the same.

Step 4: Preview Order Details Page #

• Agora, vá para o Meu Página da conta of your website –
• Clique em Pedidos
• Clique em Visualizar from the right-end side of any order

That’s a preview of how your customers will see the Order details page from their devices.

3.  Create My Account Downloads Page #

Etapa 1: ativar os widgets necessários #

• Vá para ShopEngine-> Widgets
• Make sure that the Conta Navegação e Downloads de conta widgets são habilitado

Etapa 2: criar o modelo de downloads da minha conta #

Próximo, click Add New from ShopEngine’s Builder Templates.

Then, create a Painel da minha conta template –

• Fornecer modelo Nome
• Select Template Type: Downloads da minha conta

• Alterne o Template Activation botão
• Selecione a template or start with a blank template
• Clique em Editar com Elementor

Step 3: Customoze Account Doenloads Template #

Your account downloads template is ready to personalize from the Elementor editor.

Let’s see, what you can change in the account downloads part.

• Table Heading: Controls the styling of the “Product, Downloads remaining, Expires, Download” header row. Includes text color, background, and typography.
• Table Body: Controls the styling of the table content rows (product name, link, etc.). Includes body background, text/link colors, border type/width, and row stripe settings.
• Download Buttons: Controls the styling of the individual download buttons (like the “Sunglasses” button). Includes padding, border radius, typography, box shadow, and color/background (normal/hover).

Once you are done editing your Account Downloads page, save it by clicking on Publicar.

Step 4: Preview Account Downloads Page #

• Agora, vá para o Minha conta page of your website
• Clique em Transferências. Essa é uma prévia de como seus clientes verão a página em seus dispositivos.

4. Create My Account Address Page #

Etapa 1: ativar os widgets necessários #

• Go to ShopEngine Widgets
• Make sure that the Conta Navegação e Endereço da conta widgets são habilitado

Etapa 2: criar o modelo de endereço da minha conta #

Go to ShopEngine Construtor Modelos e clique Adicionar novo –

• Fornecer modelo Nome
• Selecione Modelo Tipo: Endereço da minha conta

• Habilitar Editar com Elementor

Step 3: Customize Account Address Template #

You can customize account address template in the Elementor editor.

You can utilize these controls to customize account address template.

• Account Address: Lets you choose which type of address form to preview/style – Default, Billing Address Form, or Shipping Address Form.
• Billing & Shipping Address: Controls the styling of the message, title, and address text shown for billing/shipping. Includes color, font size, line height, spacing, and margin for each element.
• Form: Title: Controls the form title shown above the address fields. Includes toggle to enable/disable, color, font size, and margin.
• Form: Label: Controls the styling of field labels (like “First Name”, “Address”). Includes label color, required (*) color, font size, and margin.
• Formulário: Entrada: Controls the styling of input fields in normal/focus states. Includes font size, padding, color, background, border type/width/color.
• Form: Submit Button: Controls the styling of the form’s submit button in normal/hover states. Includes typography, padding, color, and background.
• Fonte global: Sets the overall font family used across this specific widget.

Once you are done editing your Account Address page, save it by clicking on Publicar.

Step 4: Preview Account Address Page #

• Agora, vá para o Minha conta page of your website
• Clique em Endereços. This is the preview of how your customers will see the page from their devices.

5.  Create My Account Details Page #

Etapa 1: ativar os widgets necessários #

• Vá para ShopEngine-> Widgets
• Make sure that the Conta Navegação e Detalhes da conta widgets são habilitado.

Etapa 2: Criar modelo de detalhes da minha conta #

Go to ShopEngine Construtor Modelos e clique Adicionar novo –

• Fornecer modelo Nome
• Selecione Modelo Tipo: Detalhes da minha conta

• Habilitar Editar com Elementor

Step 3: Customize Account Details Page #

You are now in the Elementor editor. From here, you can customize the account details template to suit your needs.

Use these controls to customize the account address template.

• Estilo da etiqueta: Lets you style the field labels with Label Color, Required Color, Typography, Margin etc.
• Estilo de entrada: Here you can customize the input fields, adjusting Typography, Input Padding, Text Color, Background Color, Border Type/Width/Color, Border Radius etc.
• Forma: This section controls the form’s legend styling with Legend Color, Typography, Form Outline Color.
• Botão: Use this to style the submit button, including Button Font Size, Button Color, Background, Border Type/Width/Color/Radius, Padding etc.
• Fonte global: Simply lets you set the Font Family for this widget.

Step 4: Preview Account Details Page #

• Agora, vá para o Minha conta page of your website
• Clique em Detalhes da conta. Here’s a preview of how your customers will see this page on their devices

7. Crie a página de login/registro da minha conta #

Follow the simple steps.

Etapa 1: ativar os widgets necessários #

• Go to ShopEngine’s Widgets
• Make sure that the Conta Navegação, Cadastro de Formulário de Conta, e Login no formulário de conta widgets são habilitado.

Etapa 2: Criar modelo de login/registro para minha conta #

Go to ShopEngines Construtor Modelos and ckick Adicionar novo. Now follow the steps –

• Fornecer modelo Nome
• Selecione Modelo Tipo: Minha conta Login/Registro

• Activate the Template
• Clique em Editar com Elementor

Step 3: Customize My Account Login/Register Template #

You can now customize the account login/register template right from the Elementor editor.

• Account form login: Style the login form’s Label (Color, Required Indicator Color, Font Size, Margin), Input, Button, and Lost Password link.
• Account register form: Style the register form’s Label (Color, Required Indicator Color, Font Size), Input, Message, and Button.

Etapa 5: visualizar a página de login/registro da conta #

Agora, vá para o Minha conta page of your website

Vá para Painel -> Clique em Sair. That shows a preview of how the page will appear to your customers on their devices.