Con ShopEngine, puoi creare facilmente una pagina "Il mio account" da cui i clienti possono visualizzare la propria dashboard, monitorare i propri ordini e download, modificare gli indirizzi e i dettagli del proprio account. Da questa stessa pagina possono anche accedere o registrarsi al proprio account sul tuo sito web. 

Di solito, una "pagina del mio account" presenta una dashboard dell'account, un ordine dell'account, i dettagli dell'ordine dell'account, i download dell'account, gli indirizzi dell'account, i dettagli dell'account e la pagina di accesso/registrazione dell'account. 

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. Crea la pagina dashboard del mio account #

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

Passaggio 1: abilita i widget richiesti #

• Vai a ShopEngine-> Widget
• Make sure that the Pannello di controllo dell'account E Navigazione dell'account i widget sono abilitato.
• Click Save Changes

Passaggio 2: crea un modello di dashboard #

• Vai a ShopEngine-> Costruttore Modelli
• Clic Aggiungere nuova

Now, you have to create a La mia dashboard del conto template –

• Fornire modello Nome
• Select Template Type: La mia dashboard del conto

• Attiva/disattiva il Template Activation pulsante
• Select a template or start with a blank template
• Clicca su Modifica con Elementor

Step 3: Customoze My Account Dashboard #

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

Per 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 di bordo: The style of the border is set to Solid.
• Larghezza del bordo: You can set the border thickness as you wish.
• Colore del bordo: The color of the border, currently not set.
• Raggio del confine: 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 –

• Colore del bordo: 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 –

• Colore del testo: 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.

Ora vai a Pagina Il mio account of your website, click on Pannello di controllo. Questa è un'anteprima di come i tuoi clienti vedranno la dashboard dell'account dai loro dispositivi.

However, to build the Account Dashboard page from scratch, you’ll need to drag and drop the Navigazione dell'account E Pannello di controllo dell'account widgets. And the rest of the customization steps are the same.

2. Create My Account Order Details Page #

Passaggio 1: abilita i widget richiesti #

• Vai a ShopEngine-> Widget
• Abilita il Dettagli dell'ordine widget are
• Click Save Changes

Step 2: Create a My Account Dashboard Template #

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

Then, create a La mia dashboard del conto template –

• Fornire modello Nome
• Select Template Type: Dettagli dell'ordine del mio account

• Attiva/disattiva il Template Activation pulsante
• Selezionare a template or start with a blank template
• Clicca su Modifica con 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.

• Intestazione: 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.
• Carattere globale: 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 Navigazione dell'account E Pannello di controllo dell'account widgets. And the rest of the customization steps are the same.

Step 4: Preview Order Details Page #

• Ora vai su My Pagina del conto of your website –
• Clicca su Ordini
• Clicca su Visualizzazione 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 #

Passaggio 1: abilita i widget richiesti #

• Vai a ShopEngine-> Widget
• Make sure that the Account Navigazione E Download dell'account i widget sono abilitato

Passaggio 2: crea il modello di download del mio account #

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

Then, create a La mia dashboard del conto template –

• Fornire modello Nome
• Select Template Type: Download del mio account

• Attiva/disattiva il Template Activation pulsante
• Selezionare a template or start with a blank template
• Clicca su Modifica con 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 Pubblicare.

Step 4: Preview Account Downloads Page #

• Ora vai a Il mio conto page of your website
• Clicca su Download. Si tratta di un'anteprima di come i tuoi clienti vedranno la pagina dai loro dispositivi.

4. Create My Account Address Page #

Passaggio 1: abilita i widget richiesti #

• Go to ShopEngine Widget
• Make sure that the Account Navigazione E Indirizzo dell'account i widget sono abilitato

Passaggio 2: crea il modello di indirizzo del mio account #

Go to ShopEngine Costruttore Modelli e fare clic Aggiungere nuova –

• Fornire modello Nome
• Selezionare Modello Tipo: Indirizzo del mio account

• Abilitare Modifica con 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.
• Modulo: Immissione: 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.
• Carattere globale: Sets the overall font family used across this specific widget.

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

Step 4: Preview Account Address Page #

• Ora vai a Il mio conto page of your website
• Clicca su Indirizzi. This is the preview of how your customers will see the page from their devices.

5.  Create My Account Details Page #

Passaggio 1: abilita i widget richiesti #

• Vai a ShopEngine-> Widget
• Make sure that the Account Navigazione E Dettagli account i widget sono abilitato.

Passaggio 2: crea il modello dei dettagli del mio account #

Go to ShopEngine Costruttore Modelli e fare clic Aggiungere nuova –

• Fornire modello Nome
• Selezionare Modello Tipo: Dettagli del mio account

• Abilitare Modifica con 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.

• Stile etichetta: Lets you style the field labels with Label Color, Required Color, Typography, Margin etc.
• Stile di input: Here you can customize the input fields, adjusting Typography, Input Padding, Text Color, Background Color, Border Type/Width/Color, Border Radius etc.
• Modulo: This section controls the form’s legend styling with Legend Color, Typography, Form Outline Color.
• Pulsante: Use this to style the submit button, including Button Font Size, Button Color, Background, Border Type/Width/Color/Radius, Padding etc.
• Carattere globale: Simply lets you set the Font Family for this widget.

Step 4: Preview Account Details Page #

• Ora vai a Il mio conto page of your website
• Clicca su Dettagli account. Here’s a preview of how your customers will see this page on their devices

7. Crea la pagina di accesso/registrazione del mio account #

Follow the simple steps.

Passaggio 1: abilita i widget richiesti #

• Go to ShopEngine’s Widget
• Make sure that the Account Navigazione, Registro del modulo di conto, E Accesso al modulo account i widget sono abilitato.

Passaggio 2: crea il modello di accesso/registrazione del mio account #

Go to ShopEngines Costruttore Modelli and ckick Aggiungere nuova. Now follow the steps –

• Fornire modello Nome
• Selezionare Modello Tipo: Il mio account Accedi/Registrati

• Activate the Template
• Clicca su Modifica con 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.

Passaggio 5: anteprima della pagina di accesso/registrazione dell'account #

Ora vai a Il mio conto page of your website

Vai a Pannello di controllo -> Fare clic su Disconnettersi. That shows a preview of how the page will appear to your customers on their devices.