Avec ShopEngine, vous pouvez facilement créer une page « Mon compte » à partir de laquelle les clients peuvent consulter leur tableau de bord, suivre leurs commandes et téléchargements, modifier les adresses et les détails de leur compte. À partir de cette même page, ils peuvent également se connecter ou s'inscrire à leur compte sur votre site Web. 

Habituellement, une « page mon compte » comprend un tableau de bord du compte, une commande de compte, les détails de la commande de compte, les téléchargements de compte, les adresses de compte, les détails du compte et une page de connexion/inscription au compte. 

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. Créer une page de tableau de bord Mon compte #

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

Étape 1 : Activer les widgets requis #

• Allez sur ShopEngine-> Widgets
• Make sure that the tableau de bord de compte et Navigation dans le compte les widgets sont activé.
• Click Save Changes

Étape 2 : Créer un modèle de tableau de bord #

• Allez sur ShopEngine-> Constructeur Modèles
• Cliquez sur Ajouter un nouveau

Now, you have to create a Tableau de bord de mon compte template –

• Fournir un modèle Nom
• Select Template Type: Tableau de bord de mon compte

• Basculez le Template Activation bouton
• Select a template or start with a blank template
• Cliquer sur Modifier avec Elementor

Step 3: Customoze My Account Dashboard #

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

Pour 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.
• Type de bordure : The style of the border is set to Solid.
• Largeur de la bordure: You can set the border thickness as you wish.
• Couleur de la bordure: The color of the border, currently not set.
• Rayon de bordure : 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 –

• Couleur de la bordure: 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 –

• Couleur du texte : 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.
• Typographie: 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.

Maintenant, allez au Page Mon compte of your website, click on Tableau de bord. Il s'agit d'un aperçu de la façon dont vos clients verront le tableau de bord du compte depuis leurs appareils.

However, to build the Account Dashboard page from scratch, you’ll need to drag and drop the Navigation dans le compte et tableau de bord de compte widgets. And the rest of the customization steps are the same.

2. Create My Account Order Details Page #

Étape 1 : Activer les widgets requis #

• Allez sur ShopEngine-> Widgets
• Activer le détails de la commande widget are
• Click Save Changes

Step 2: Create a My Account Dashboard Template #

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

Then, create a Tableau de bord de mon compte template –

• Fournir un modèle Nom
• Select Template Type: Mon compte Détails de la commande

• Basculez le Template Activation bouton
• Sélectionner a template or start with a blank template
• Cliquer sur Modifier avec 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.

• Titre: 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.
• Police 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 Navigation dans le compte et tableau de bord de compte widgets. And the rest of the customization steps are the same.

Step 4: Preview Order Details Page #

• Maintenant, allez dans Mon Page de compte of your website –
• Cliquer sur Ordres
• Cliquer sur Voir 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 #

Étape 1 : Activer les widgets requis #

• Allez sur ShopEngine-> Widgets
• Make sure that the Compte La navigation et Téléchargements de compte les widgets sont activé

Étape 2 : Créer un modèle de téléchargement de mon compte #

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

Then, create a Tableau de bord de mon compte template –

• Fournir un modèle Nom
• Select Template Type: Téléchargements de mon compte

• Basculez le Template Activation bouton
• Sélectionner a template or start with a blank template
• Cliquer sur Modifier avec 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 Publier.

Step 4: Preview Account Downloads Page #

• Maintenant, allez au Mon compte page of your website
• Cliquer sur Téléchargements. Il s'agit d'un aperçu de la façon dont vos clients verront la page depuis leurs appareils.

4. Create My Account Address Page #

Étape 1 : Activer les widgets requis #

• Go to ShopEngine Widgets
• Make sure that the Compte La navigation et Adresse du compte les widgets sont activé

Étape 2 : Créer un modèle d'adresse de mon compte #

Go to ShopEngine Constructeur Modèles et cliquez Ajouter un nouveau –

• Fournir un modèle Nom
• Sélectionner Modèle Taper: Adresse de mon compte

• Activer Modifier avec 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.
• Formulaire : Entrée : 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.
• Police 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 Publier.

Step 4: Preview Account Address Page #

• Maintenant, allez au Mon compte page of your website
• Cliquer sur Adresses. This is the preview of how your customers will see the page from their devices.

5.  Create My Account Details Page #

Étape 1 : Activer les widgets requis #

• Allez sur ShopEngine-> Widgets
• Make sure that the Compte La navigation et Détails du compte les widgets sont activé.

Étape 2 : Créer un modèle de détails de mon compte #

Go to ShopEngine Constructeur Modèles et cliquez Ajouter un nouveau –

• Fournir un modèle Nom
• Sélectionner Modèle Taper: Détails de mon compte

• Activer Modifier avec 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.

• Style d'étiquette : Lets you style the field labels with Label Color, Required Color, Typography, Margin etc.
• Style de saisie : Here you can customize the input fields, adjusting Typography, Input Padding, Text Color, Background Color, Border Type/Width/Color, Border Radius etc.
• Formulaire: This section controls the form’s legend styling with Legend Color, Typography, Form Outline Color.
• Bouton: Use this to style the submit button, including Button Font Size, Button Color, Background, Border Type/Width/Color/Radius, Padding etc.
• Police globale : Simply lets you set the Font Family for this widget.

Step 4: Preview Account Details Page #

• Maintenant, allez au Mon compte page of your website
• Cliquer sur Détails du compte. Here’s a preview of how your customers will see this page on their devices

7. Créer une page de connexion/inscription à mon compte #

Follow the simple steps.

Étape 1 : Activer les widgets requis #

• Go to ShopEngine’s Widgets
• Make sure that the Compte La navigation, Registre du formulaire de compte, et Connexion au formulaire de compte les widgets sont activé.

Étape 2 : Créer un modèle de connexion/inscription à mon compte #

Go to ShopEngines Constructeur Modèles and ckick Ajouter un nouveau. Now follow the steps –

• Fournir un modèle Nom
• Sélectionner Modèle Taper: Mon compte Connexion/Inscription

• Activate the Template
• Cliquer sur Modifier avec 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.

Étape 5 : Aperçu de la page de connexion/inscription au compte #

Maintenant, allez au Mon compte page of your website

Aller à Tableau de bord -> Cliquez sur Se déconnecter. That shows a preview of how the page will appear to your customers on their devices.