Comment créer un site Web de commerce électronique avec WordPress et Elementor 2020

Dans ce didacticiel, je vous apprends à créer un site Web de commerce électronique à l'aide de WordPress et Elementor 2020 que vous pouvez entièrement personnaliser.

WordPress est la plate-forme CMS la plus utilisée pour créer tous les types de sites Web, y compris les sites Web de commerce électronique. En outre, vous apprendrez à utiliser le constructeur de pages Elementor pour créer des pages Web étonnantes, qui est actuellement le constructeur de pages n ° 1 et le plus populaire pour WordPress. WordPress contrôle plus d'1/3 d'Internet. La majorité des grandes entreprises de commerce électronique comme Sony, Bata, eBay et bien d'autres l'utilisent pour le développement et la maintenance de leur site Web Et la meilleure partie de l'utilisation d'un WordPress est que vous n'avez pas besoin d'apprendre un type de langage de codage ou tout autre jargon technique pour faire votre site web. Il s'agit d'une simple plate-forme de glisser-déposer qui propose de nombreux modèles et mises en page intégrés, ce qui permet de créer un site Web attrayant et convivial. De plus, je fournirai des modèles prédéfinis que vous pourrez facilement importer et rendre votre site Web de commerce électronique opérationnel en quelques minutes.

Le simple fait de suivre l'intégralité de ce didacticiel vous préparera à créer votre propre site Web et à le faire fonctionner sans aucune aide extérieure. Ce didacticiel a aidé de nombreuses personnes à créer leur site Web et à donner à leurs entreprises un avantage sur leurs concurrents dans cette industrie brutale du commerce électronique. Alors parcourez ce didacticiel simple et explicite et acquérez une compétence qui vous aidera tout au long de votre vie. L'ensemble du processus a été enseigné dans une approche étape par étape et toutes les représentations infographiques et picturales sont données pour le rendre aussi facile à comprendre que possible.

Alors commençons à créer un site Web de commerce électronique en utilisant WordPress et Elementor 2020

Introduction à un site Web de commerce électronique

L'image ci-dessus est un exemple de page d'accueil ou de page de destination d'un site Web de commerce électronique typique. Les pages de destination sont très importantes pour les conversions et les ventes sur le site de commerce électronique. La page de destination doit donc être attrayante et contenir des bannières et des notifications de soldes et de prix réduits ou de nouveaux arrivages, en particulier pour les sites de commerce électronique. Pour obtenir une conversion, vous devez mettre l'accent sur vos produits les plus vendables sur la page de destination et fournir un lien facile vers ces produits. Vous pouvez afficher vos catégories de produits sur la page de destination et leur fournir un lien.

En haut, nous avons un en-tête qui contient notre emplacement, notre numéro de téléphone, nos numéros de contact à gauche et à droite, nous avons nos icônes de pages de médias sociaux de Facebook, Twitter, YouTube, etc. En dessous, nous avons une boutique bouton qui renvoie à la page d'achat de produits de notre site Web. De plus, nous avons un bouton Compte, en cliquant sur lequel les utilisateurs peuvent accéder à leur propre tableau de bord personnel pour accéder et gérer leurs informations et leurs achats. Nous avons également le logo de notre entreprise sur l'en-tête lui-même. Au milieu, nous avons notre lien vers nos pages à savoir. Accueil, À propos de nous, Boutique, Mon compte et Contactez-nous.

Après cela, vous avez tous vos produits et bannières, que vous apprendrez à créer dans ce didacticiel, présentés de manière très attrayante . Après cela, nous avons également une section Newsletter, où les utilisateurs peuvent s'abonner à votre site Web et non aux notifications et e-mails sur les produits, offres, coupons, etc. En dessous, nous avons notre pied de page, fournissant des informations sur nous et un bouton d'abonnement par e-mail.

Comme vous pouvez le voir sur l'image, la page de la boutique répertorie tous les produits disponibles sur notre site Web, où les utilisateurs peuvent vérifier n'importe quel produit en cliquant dessus. Sur la barre latérale, nous avons un filtre de prix, une liste de catégories, des critiques et des publicités vidéo de nos produits. Sous chaque produit, il y a aussi un formulaire d'évaluation et des produits connexes. Ensuite, nous avons la page À propos de nous affichant la description de votre entreprise et des informations sur votre équipe. Et puis nous avons une page de contact où les utilisateurs peuvent nous contacter en utilisant un formulaire de contact. Ensuite, nous avons un tableau de bord Mon compte qui aura un tableau de bord personnel pour chaque client qui contient ses informations personnelles, d'achat et de paiement.

Vous pouvez voir la page du panier après avoir acheté quelque chose, comme vous pouvez le voir sur l'image, où vous pouvez modifier les détails de votre achat, vérifier le montant total et procéder au paiement. Ensuite, les visiteurs peuvent vérifier en remplissant les détails d'expédition et en payant l'achat. Nous allons apprendre à créer toutes ces pages étape par étape dans ce didacticiel afin que votre site Web soit complètement prêt à démarrer.

Obtenez l'hébergement et installez WordPress et Elementor

• Achat de domaine NameHero

La première chose que nous devrons faire pour créer un site Web est d'obtenir un nom de domaine et un hébergement pour votre site Web. Vous devez sélectionner un bon hébergement car l'ensemble de votre site Web sera basé et pris en charge sur votre site d'hébergement. Vous devez donc vérifier et comparer différents hébergements sur la base de critères tels que la fiabilité, le support technique, l'espace, les sécurités, la conception, les opportunités de référencement, etc.

Il existe plusieurs fournisseurs d'hébergement sur le marché et la plupart d'entre eux proposent des offres différentes. J'en ai essayé plusieurs et j'ai finalement opté pour NameHero pour tous mes sites Web. Je l'utilise personnellement et je l'ai comparé à 22 autres hébergements et je les ai trouvés les meilleurs. Comme vous pouvez le voir sur l'image, ils ont 4 options différentes et je recommande l'option Plus Cloud pour un site Web de commerce électronique. Vous pouvez utiliser mon lien pour obtenir un rabais. www.namehero.com/darrelwilson

Après avoir commandé votre plan, vous pourrez choisir votre nom de domaine, c'est-à-dire le nom de votre site Web. Vous pouvez choisir le nom que vous voulez. Vous pouvez sélectionner votre domaine selon votre besoin d'aimer .net, .biz, etc. La prochaine et dernière étape consiste à remplir vos informations sur les détails du compte et du paiement. Il est fortement recommandé d'obtenir la protection de l'ID dans la case à cocher complémentaire car elle vous protège des spammeurs. Terminez l'achat en cliquant sur les pages suivantes et en passant par le processus de paiement.

• Installer WordPress

Pour installer WordPress sur votre hébergement, rendez-vous dans votre 'Espace Client' sur votre page d'hébergement, cliquez sur 'Hébergement Web Cloud'. Ensuite, vous avez Mes produits et services, où vous verrez le package Plus Cloud avec votre nom de domaine, cliquez sur le bouton Actif à côté comme vous pouvez le voir sur l'image. Ensuite sur la gauche, vous verrez le bouton "Aller au cpanel" et cliquez dessus. Sur la page suivante, comme vous pouvez le voir sur l'image, faites défiler jusqu'à la catégorie des logiciels et cliquez sur "WordPress Manager by Softaculous".

Cela ouvrira un programme d'installation WordPress, cliquez sur le bouton Installer maintenant. Une page de configuration s'ouvrira contenant la version, votre nom de domaine et votre répertoire comme vous pouvez le voir sur l'image. VEUILLEZ SUPPRIMER TOUT CE QUI EST ÉCRIT DANS LE RÉPERTOIRE. AUSSI SUR LE PROTOCOLE CHOISISSEZ 'https:/'. Dans les paramètres du site, vous pouvez modifier le nom et la description de votre site. Nous pouvons le faire plus tard aussi. Mettez vos informations d'administrateur telles que le nom d'utilisateur, le mot de passe et l'e-mail, qui seront vos informations de connexion WordPress. Sur la page suivante, faites défiler les modèles car nous ne les utilisons pas et cliquez sur "Installer". Cliquez sur le lien URL d'administration indiqué sur la page suivante et votre nouveau WordPress est créé et mis en ligne sur Internet. Vous êtes maintenant sur votre tableau de bord WordPress comme dans l'image où vous pouvez modifier votre site Web.

• Paramètres généraux WordPress

Avant de concevoir votre site Web, laissez-nous apprendre à modifier vos paramètres sur le tableau de bord WordPress. Sur votre tableau de bord WordPress, vous verrez plusieurs onglets à gauche de la page, comme vous pouvez le voir sur l'image. L'un des plus importants est l'onglet "Paramètres" où vous trouverez les paramètres généraux de WordPress. Vous devez changer votre permalien de « Jour et nom » en « Nom de publication » pour rendre l'adresse de votre site Web plus facile à comprendre. Ceci est également très important pour votre référencement. Un autre onglet de votre tableau de bord WordPress est les "Utilisateurs" où vous personnalisez votre profil et l'apparence de votre tableau de bord WordPress. Cliquez sur "Enregistrer les modifications" pour le mettre à jour.

Pour vous reconnecter à WordPress après vous être déconnecté, vous devez taper votre URL dans la barre d'adresse suivie de '/wp-admin' qui vous amènera à la page de connexion de WordPress où vous pourrez mettre votre nom d'utilisateur et votre mot de passe pour vous connecter.

Création de pages et Menu

Vous avez créé un site Web fonctionnel maintenant, il n'est pas encore complet. Vous devez maintenant ajouter des pages à votre site Web. Sur votre tableau de bord WordPress, cliquez sur l'onglet "Pages" et sélectionnez l'option "Ajouter un nouveau". Vous pouvez également le faire en cliquant sur le bouton "Ajouter un nouveau" en haut de la page. Lorsque vous faites cela, le tableau de bord ouvre un éditeur de page, comme indiqué dans l'image ci-dessous, où vous pouvez créer votre nouvelle page. Ici, vous pouvez mettre le nom de la page et concevoir la mise en page de la page. Cliquez sur le bouton 'Publier' et votre page Web est créée. Ici, dans ce didacticiel, nous allons créer des pages de base telles que Accueil, À propos de nous et Contact qui sont requises par chaque site Web. Pour l'instant, nous n'entrons pas dans le contenu des pages que nous ferons plus tard. Vous pouvez afficher ces pages en cliquant sur Afficher sous le nom de la page dans le tableau de bord WordPress.

Après avoir créé des pages distinctes, vous devez créer un menu pour pouvoir naviguer dans ces pages. Créer un menu est très simple avec WordPress. Accédez simplement à votre tableau de bord, recherchez l'onglet "Apparence" et cliquez sur "Menus". Cela ouvrira un éditeur de menu, où vous pourrez créer et nommer vos menus comme vous pouvez le voir dans l'image ci-dessous. Une fois que vous avez créé un menu, vous pouvez attribuer différentes pages de votre site Web au menu. Vous pouvez toujours réaffecter la chronologie des éléments du menu et vous pouvez créer un menu déroulant en plaçant un élément sous l'autre par glisser-déposer.

Maintenant, ce que vous devez faire est de cliquer sur 'Personnaliser' en haut à gauche comme indiqué dans l'image et d'aller dans les 'Paramètres de la page d'accueil' et de changer votre page d'accueil en 'Une page statique' et de choisir votre page d'accueil comme page statique, que vous devez sélectionner dans la liste déroulante. Vous faites cela pour que chaque fois que quelqu'un visite votre site Web, il soit toujours dirigé vers votre page d'accueil. Accéder directement à une autre page comme votre page À propos de nous, votre page de contact ou vos derniers messages n'aura aucun sens pour les téléspectateurs.

Télécharger Elementor

Nous devons maintenant acheter notre constructeur de pages Elementor pro que nous utiliserons pour créer les pages Web de notre site Web de commerce électronique. Vous pouvez l'acheter en utilisant mon lien.www.darrelwilson.com/elementor.Depuis leur page, vous pouvez consulter les différents forfaits disponibles. Nous ne pouvons pas utiliser la version gratuite car nous avons besoin des services de création de thèmes et de création de Woocommerce. Une fois que vous avez acheté votre package, il s'ouvre sur votre compte comme indiqué dans l'image à partir de laquelle vous devez cliquer sur "Télécharger le plugin" et un zip sera téléchargé.

Ensuite, vous devez le télécharger sur votre site Web WordPress. Accédez à votre tableau de bord sur votre WordPress, cliquez sur "Plugins" dans la barre d'outils à gauche, cliquez sur "Ajouter un nouveau" et votre plugin d'ajout s'ouvrira comme indiqué dans l'image. Cliquez sur 'Télécharger le plugin' et sélectionnez votre fichier zip Elementor et installez-le. Cliquez sur 'Activer le plugin' et un nouveau bouton 'Elementor' sera créé sur votre barre d'outils WordPress. Allez-y et cliquez sur 'Se connecter et activer'.

Installer des thèmes WordPress

Installons maintenant un thème WordPress sur notre site Web. WordPress propose des tonnes de thèmes préconçus parmi lesquels choisir, pour l'apparence de votre site Web. Dans l'onglet « Apparence » du tableau de bord WordPress, vous trouverez le bouton « Thème » à partir duquel vous pouvez installer un thème. Vous pouvez sélectionner n'importe quel thème parmi les choix disponibles. Pour les besoins de ce tutoriel, nous allons utiliser le thème Astra que vous pouvez trouver dans le menu populaire. Cliquez sur "Activer" sous le nom du thème. 'La meilleure partie de l'utilisation de ce thème est qu'il inclut toute la configuration et les fonctionnalités de base nécessaires au fonctionnement d'un site Web et qu'il est très compatible avec le constructeur de pages Elementor.

Modifier des pages avec Elementor

Apprenons maintenant à éditer nos pages avec Elementor. Accédez à la page d'accueil de votre site Web WordPress et cliquez sur "Modifier la page" dans la rangée noire supérieure, ce qui ouvrira l'éditeur de page. Modifions d'abord les paramètres de la page sur le côté droit, comme indiqué dans l'image. Changez la mise en page du contenu en "Étirement pleine largeur" ​​et sélectionnez "Désactiver le titre" car nous voulons ce paramètre pour notre page d'accueil.

Cliquez maintenant sur "Modifier avec Elementor" pour ouvrir l'éditeur Elementor comme indiqué dans l'image. Ayons un rapide tutoriel de l'éditeur Elementor ici. Pour ajouter une nouvelle section à la page, cliquez sur le bouton Plus et sélectionnez le modèle de colonne souhaité. Pour ajouter les éléments, cliquez sur les 9 points de la barre d'outils sur le côté gauche qui vous donnera une liste d'éléments comme dans l'image. Vous pouvez faire glisser et déposer n'importe lequel de ces éléments sur la page et les modifier.

Une fois que vous avez cliqué sur n'importe quel module de la page, sa barre d'outils d'édition apparaîtra sur la gauche. Ici, dans l'image, nous modifions le titre, donc "Modifier le titre" est apparu et contient 3 onglets. Le 1 ^er est Contenu qui donne diverses options pour le contenu de l'élément. 2 ^ème est Style où vous pouvez concevoir le style tel que la couleur, la taille, la police, etc. de l'élément. Et le 3ème est ^Avancé où vous pouvez mettre des animations et d'autres choses. De même, vous pouvez ajouter, modifier et styliser une zone de texte de la même manière sous votre en-tête.

Vous pouvez ajouter un bouton et donner un lien vers n'importe quel autre site Web qui s'ouvrira en cliquant dessus. Vous pouvez modifier le paramètre sur "Ouvrir une nouvelle fenêtre", afin que les utilisateurs ne quittent pas notre site. Vous pouvez également sélectionner une icône pour votre bouton dans la galerie d'icônes. Tout cela se trouvera dans la barre d'outils "Modifier le bouton" à gauche, comme indiqué dans l'image.

Maintenant, au lieu de concevoir chaque élément séparément, nous pouvons utiliser les modèles prédéfinis et bloquer en cliquant sur l'icône de dossier sur Elementor. Dans la bibliothèque, vous pouvez sélectionner une page entière ou des sections ou des blocs spécifiques. Toutes les catégories de blocs sont disponibles selon vos besoins. Pour la page de destination, sélectionnez n'importe quel bloc de la catégorie Héros. J'ai sélectionné le son du futur dans l'exemple.

Construire la page d'accueil

Créons maintenant une page similaire à la page d'accueil, nous l'avons vu dans la section d'introduction, en utilisant ce bloc. Changeons d'abord l'arrière-plan de toute la section. Pour modifier la section entière, cliquez sur les six points en haut de la section, comme indiqué dans l'image. Vous verrez maintenant la barre d'outils "Modifier la section" à partir de laquelle vous pouvez utiliser Style pour tabuler pour changer l'arrière-plan. Voici un LIEN VERS LES IMAGES DE DÉMO GRATUITES que vous pouvez utiliser sur votre site Web de commerce électronique. Téléchargez ensuite ces images dans Elementor et sélectionnez l'image pour l'arrière-plan. Vous pouvez modifier la superposition d'arrière-plan si elle semble sombre.

Vous pouvez maintenant modifier les éléments du bloc comme nous l'avons fait précédemment. Changez le texte, la couleur, la police, la topographie, etc. Vous pouvez utiliser le doublon en cliquant sur le bouton bleu en haut à droite d'un élément. Modifiez maintenant le bouton selon notre conception, comme ajouter ou réduire le rembourrage pour modifier l'espace qui l'entoure. Nous lierons ce bouton à notre page Boutique plus tard, vous pouvez également y ajouter une icône. Vous pouvez modifier le style et l'animation lorsque vous survolez le tout sous la barre d'outils "Modifier le bouton", comme indiqué dans l'image.

Ensuite, placez le titre animé des sections Pro Elements en faisant défiler la barre d'outils de l'élément. Vous pouvez modifier le style, la forme, la couleur, la topographie, etc. du titre, à l'aide de la barre d'outils "Modifier le titre animé", comme indiqué dans l'image. Vous pouvez vérifier tous les éléments et styles et concevoir les choses comme vous le souhaitez. Il y a beaucoup d'essais et d'erreurs pour trouver votre design parfait. Cliquez sur le bouton « Mettre à jour » pour appliquer ces modifications à votre site Web.

Ensuite, sur la page de destination, nous devons créer des sections liées à diverses catégories telles que la section Femme, la section Homme et les nouveautés. Ajoutez une nouvelle section à 3 colonnes, ajoutez-y un titre, du texte et un bouton. Vous pouvez en créer un et le dupliquer deux fois pour gagner du temps et des efforts. Encore une fois, vous devrez modifier le texte, les styles, l'arrière-plan, etc. de cette section, comme nous l'avons fait pour la section ci-dessus. Vous pouvez utiliser les images que j'ai fournies pour l'arrière-plan des 3 catégories. Lorsque vous utilisez l'éditeur de texte, pour terminer la ligne et passer à la ligne suivante, comme ici nous le faisons avec la section des femmes, utilisez <br> comme indiqué dans l'image.

Ici, nous n'avons pas de modèle ou de blocs dans cette section, vous devrez donc créer et styliser chaque section à partir de zéro, ce qui peut sembler une longue tâche pour la ^première fois, mais vous pouvez utiliser tous les glisser-déposer et astuces comme la duplication tels comme copiez le bouton "Acheter maintenant" créé dans la section ci-dessus et changez simplement le style du bouton ou survolez au lieu de créer à partir de zéro. Vous devrez voir toutes les options de la barre d'outils d'édition pour chaque élément afin de déterminer celle qui correspond le mieux à vos goûts. Ce sera un excellent exercice pour votre sens artistique. Pour modifier l'espacement du contenu à l'intérieur d'une colonne, cliquez sur l'icône Modifier la colonne en haut à gauche de la colonne pour ouvrir la barre d'outils « Modifier la colonne » où vous pouvez modifier le rembourrage dans le section avancée comme vous pouvez le voir dans l'image ci-dessous.

Vous pouvez dupliquer les colonnes de ligne, puis modifier le texte et l'arrière-plan des deux autres catégories de la section Hommes et des nouveautés afin de ne pas avoir à les styliser à nouveau. Vous devez styliser l'image d'arrière-plan et la couleur du texte de chaque section différemment afin que chaque catégorie soit visible distinctement. Si le premier a une image de fond sombre avec une couleur de texte claire, le suivant doit être en face. Toutes ces techniques, vous les apprendrez lorsque vous commencerez à concevoir et constaterez ces effets vous-même. Utilisez l'arrière-plan pour mettre l'accent sur le texte au-dessus de l'image, ajustez également la position du texte à l'aide du glisser-déposer ou de l'option d'alignement afin qu'il ne recouvre pas les faces de l'image d'arrière-plan. Vous pouvez également modifier la position de l'image d'arrière-plan en utilisant "Modifier la colonne" comme précédemment. Cliquez sur le bouton bleu en haut de la section pour ouvrir "Modifier la section" et vous pouvez étirer la largeur de la section à 100 %.

Ensuite, en dessous, nous ajouterons des icônes. Pour cela, ajoutez d'abord une nouvelle section et insérez une zone d'image à partir de la barre d'outils Elementor. Choisissez l'image d'icône pour les images que j'ai fournies comme indiqué dans l'image. Ces boîtes à icônes sont destinées à encourager l'achat pour donner des titres attrayants comme "Livraison gratuite" et écrivez la description et la condition dans le texte ci-dessous. Donnez du style à la zone d'image comme vous le souhaitez en modifiant la position de l'image, la taille, la couleur du titre et de la description et du texte, etc. à partir de la barre d'outils "Modifier l'image". Dupliquez-le après la conception afin de ne pas avoir à reconcevoir toutes les icônes. Après cela, vous pouvez modifier le texte de chaque case dans le but que vous souhaitez. Dans la section avancée, vous pouvez ajouter des marges à l'aide du rembourrage afin que la page n'ait pas l'air trop encombrée.

Vous pouvez ajouter des bordures aux colonnes, pour le rendre accrocheur. Cliquez sur le bouton "Modifier la colonne" et sous la catégorie "Style", vous pouvez ajouter une bordure et concevoir les bordures. Vous pouvez sélectionner le type de bordure, la largeur, l'emplacement, le rayon, etc. Vous pouvez sélectionner la bordure uniquement sur un ou plusieurs côtés spécifiques comme ici nous avons fait la bordure droite. Vérifiez tous les outils de conception disponibles dans la barre d'outils et sélectionnez-vous. Plus vous le ferez vous-même, plus vous vous habituerez à tous les outils et fonctions et cela deviendra plus rapide et plus facile pour vous.

Ensuite, nous ajouterons la section 'Nouvelle arrivée'. Mais avant, nous ajouterons un séparateur entre ces lignes pour qu'elles soient claires et distinctes. Ajoutez à nouveau une nouvelle section, ajoutez 'Divider' dans la barre d'outils Elementor et concevez-la à l'aide de la barre d'outils 'Edit Divider', comme indiqué dans l'image. Ajoutez un texte "Nouvelle arrivée" dans le séparateur qui servira d'en-tête pour la section suivante, alors changez la taille, la police, etc. comme indiqué dans l'image pour la rendre attrayante.

Création de produits

Nous devons créer des produits à vendre sur notre site de commerce électronique maintenant. Les produits peuvent être simples ou variables, les produits simples n'ont pas de choix de sélection tels que la taille, la couleur ou le style, tandis que les produits variables proposent différents choix tels que la taille ou la couleur des vêtements. Nous allons apprendre à créer les deux.

Woocommerce

Pour créer des produits, nous devrons ajouter un nouveau plugin. Allons donc dans votre tableau de bord WordPress, cliquez sur les "Plugins" dans la barre d'outils, puis cliquez sur "Ajouter un nouveau" comme nous l'avons fait précédemment. Dans la bibliothèque de plugins, recherchez "Woocommerce". Woocommerce est le meilleur plugin de commerce électronique selon mon expérience personnelle. Cliquez sur 'Installer' et cliquez sur Activer. Maintenant, le plugin Woocommerce s'ouvrira comme indiqué dans l'image. Remplissez le formulaire et cliquez sur 'Continuer'. Sélectionnez ensuite votre secteur d'activité. Dans ce didacticiel, nous créons un site Web de mode et de vêtements. Ensuite, nous avons le type de produits où 2 options - Physique et téléchargements sont données, sélectionnez les deux et cliquez sur "continuer". Ensuite, vous aurez quelques questions, répondez-y et cliquez à nouveau sur "Continuer".

Ensuite, vous devrez sélectionner un thème pour votre plugin, sélectionnez le thème 'Astra'. Ensuite, il vous donnera la possibilité d'activer les services Jetpack, ce qui nous sera utile, alors sélectionnez "Oui, s'il vous plaît", ce qui vous amènera à la page de votre compte Jetpack, remplissez vos coordonnées et créez un compte. Vous serez redirigé vers votre tableau de bord WordPress mais un nouveau 'Woocommerce' serait disponible sur votre barre d'outils comme le montre l'image. Toutes ces configurations fiscales, nous les ferons plus tard.

Commençons maintenant à créer des produits. Nous allons d'abord créer un produit simple de chemise verte pour femme, comme indiqué dans l'image.

Cliquez sur "Produits" dans votre barre d'outils, ce qui ouvrira la page "Ajouter un nouveau produit", comme indiqué dans l'image ci-dessous. Remplissez le nom et la description du produit. Ci-dessous, dans les données du produit, sélectionnez "Produit simple" car nous allons d'abord créer un produit simple. Mettez le prix régulier et le prix de vente, que vous pouvez programmer ci-dessous, comme indiqué dans l'image suivante ci-dessous. A ces dates, le prix de vente sera applicable automatiquement.

Cliquez ensuite sur les paramètres "Inventaire" sous le Général où vous pouvez mettre la disponibilité du stock. Vous pouvez également autoriser ou interdire les commandes en attente ici, si vous mettez 'Ne pas autoriser', aucune commande ne sera prise si le produit est en rupture de stock. Mettez le 'Seuil de stock bas' pour être averti lorsque le stock est bas.

Ensuite, dans la catégorie "Expédition", indiquez le poids et les dimensions du produit à des fins d'expédition. Dans les produits "liés", vous pouvez "ventes incitatives" qui afficheront les produits connexes et les ventes croisées qui afficheront les produits connexes dans le panier une fois que l'utilisateur aura acheté le produit d'origine. Ajoutez les produits associés que vous souhaitez montrer aux acheteurs lorsqu'ils achètent ce produit particulier. Dans la catégorie "Avancé", vous pouvez donner une note aux acheteurs et activer les avis.

En dessous de ces paramètres, si vous faites défiler vers le bas, vous avez 'Description courte du produit' comme dans l'image. Ici, écrivez la description complète selon notre exemple de produit. Vous pouvez également concevoir la police et le style de la description ici. Sur le côté droit si vous voyez l'image, il y a une option 'Product Image'. Cliquez sur "Définir l'image du produit" pour ouvrir la page "Image du produit" où vous pourrez sélectionner et télécharger l'image de votre produit. Sous « l'image du produit », se trouve la « galerie de produits » où vous pouvez placer d'autres images de votre produit sous différents angles pour une meilleure compréhension des téléspectateurs, comme indiqué dans l'image.

Ci-dessus, vous avez "Catégories de produits" dans la barre d'outils de droite, comme indiqué dans l'image. Ici, vous pouvez catégoriser vos produits. Alors créons une nouvelle catégorie en cliquant sur 'Ajouter une nouvelle catégorie'. Tapez le nom "Femmes" et cliquez sur Publier. Vous pouvez maintenant voir votre produit en cliquant sur le bouton "Afficher le produit". Il montrera comment le produit sera affiché aux téléspectateurs lorsqu'ils cliqueront dessus. Une nouvelle fenêtre contextuelle de produit s'ouvrira où vous pourrez voir le produit et même agrandir les images pour obtenir une meilleure vue. Vous pouvez à nouveau modifier tout ce que vous voulez.

Si vous n'aimez pas le style et le thème de la page d'affichage, vous pouvez le modifier avec "Paramètres Astra" dans la barre d'outils de droite, comme indiqué dans l'image . Par exemple, si vous souhaitez supprimer la barre latérale, cliquez sur "Barre latérale" et sélectionnez "Pas de barre latérale". Cliquez sur « Mettre à jour » pour enregistrer les modifications et vous pouvez à nouveau cliquer sur Afficher le produit pour voir les modifications. C'était donc un exemple de comment créer un produit simple. Vous pouvez ajouter autant de produits et de catégories que vous le souhaitez en utilisant cette même procédure. Si vous cliquez sur le bouton Catégorie sur la page Produit, cela ouvrira une nouvelle page de la catégorie où tous les produits de cette catégorie seront affichés. À ce stade, ce sera très fade, mais plus tard, nous concevrons également cette page.

Ensuite, apprenons à créer un produit variable. Encore une fois, nous devons aller à la page "Ajouter un nouveau produit" comme précédemment. Cette fois, créons un produit variable pour hommes. Donnez le titre et la description du produit comme nous l'avons fait précédemment. N'oubliez pas qu'il ne s'agit pas de la description principale mais de la petite description supplémentaire qui est présentée ci-dessous, la description principale doit être écrite dans la « description courte du produit ». Ici, nous allons changer les 'Données du produit' en 'Produit variable'. Tous les autres paramètres tels que l'inventaire, l'expédition, les produits liés, etc. sont similaires au produit simple que nous avons créé précédemment, vous pouvez donc compléter ces détails par vous-même.

Cliquez maintenant sur "Attributs" où nous ajouterons de nouveaux attributs ou caractéristiques à notre produit. Cliquez sur 'Ajouter' pour le faire. Ensuite, comme indiqué dans l'image, nous allons créer de nouveaux attributs du produit tels que la taille, la couleur, etc. Tout d'abord, mettons Taille dans la case "Nom". Dans la case 'Valeurs', écrivez Petit en premier, suivi du symbole '|' (sans les crochets). Appuyez sur la touche 'Shift' + la touche au-dessus du bouton Enter pour écrire ce symbole comme indiqué sur l'image, puis écrivez Medium et à nouveau le même symbole, puis Large. Vous pouvez ajouter autant de variables que vous le souhaitez telles que S, M, L, XL etc. en utilisant ce symbole. Cochez la case "Utilisé pour toutes les variantes" et cliquez sur "Enregistrer l'attribut".

Ensuite, nous ajouterons un autre attribut. Cliquez à nouveau sur le bouton "Ajouter", écrivez "Couleur" dans la case Nom et dans la case Valeur, ajoutez les noms des couleurs que vous souhaitez séparer par le symbole que nous avons utilisé dans l'attribut Taille. Ici, nous écrivons "Blanc|Bleu" comme les deux options disponibles. Cochez à nouveau la case Utilisé pour les variantes et cliquez sur "Enregistrer les attributs".

Maintenant, nous allons appliquer ces attributs à nos produits. Cliquez sur 'Variations' sous 'Attributs' et sélectionnez 'Créer des variations à partir de tous les attributs' et cliquez sur 'Aller'. Cliquez sur "Oui" dans la fenêtre contextuelle pour vérifier cette option. Ce qui ouvrira les options comme indiqué dans l'image. Vous pouvez voir que 6 variantes ont été ajoutées en combinant 3 tailles avec 2 couleurs, à savoir Small White, Small Blue, Medium White, Medium Blue, Large White et Large Blue.

Cliquez sur le premier pour ouvrir ses paramètres d'édition, comme indiqué dans l'image. Tout d'abord, nous devons télécharger l'image de cette variation. Cliquez sur "Télécharger l'image" et sélectionnez l'image dans la galerie. Ensuite, vous devez mettre le prix régulier de cette variation. C'est un champ obligatoire donc même si les prix sont les mêmes, vous devez les écrire ici. Encore une fois, vous pouvez ajouter le prix de vente et le programmer comme nous l'avons fait dans le produit simple. Vous pouvez remplir les détails du stock et les détails d'expédition comme nous l'avons fait dans le produit simple.

Encore une fois, vous devrez faire le même processus pour les autres variantes. Cliquez donc sur le nom de la variante, téléchargez l'image et mettez le prix Small Blue et ainsi de suite. Ici, nous ne mettons que l'image et le prix de toutes les variantes requises, mais vous pouvez mettre tous les autres détails sur votre site Web selon vos propres conditions. Au-dessus du nom des variantes, vous pouvez voir l'option de mettre "Valeur de formulaire par défaut" où vous pouvez sélectionner la variante qui sera affichée par défaut dans la boîte de produit lorsque les utilisateurs visualisent le produit.

D'autres paramètres tels que la description courte du produit seront similaires au produit simple que nous avons fait précédemment, alors remplissez les détails selon votre produit. Idem pour l'image du produit, où vous devez mettre l'image pour la variation par défaut car elle sera d'abord montrée aux spectateurs lorsqu'ils verront le produit. Vous devez mettre votre variation la plus vendable comme produit par défaut. Vous n'avez pas besoin de mettre une galerie de produits pour les produits variables car les vues pourront voir différentes images de la variation. Créez une nouvelle catégorie "Hommes" et cochez sa case comme nous l'avons fait pour le produit simple. Cliquez sur Publier pour appliquer ces modifications sur le site Web.

Vous pouvez maintenant cliquer sur Afficher le produit pour voir comment les téléspectateurs le verront. Comme vous pouvez le voir sur l'image, le produit s'ouvrira. Ici, comme il s'agit d'un produit variable, vous aurez une liste d'attributs et leurs valeurs dans leur liste déroulante. Vous pouvez cliquer sur ces cases pour voir les différentes variantes de ce produit. Vous verrez l'image et les prix que vous avez définis pour la variation lorsque vous cliquez dessus. Encore une fois, vous pouvez également modifier le thème de la page Produit si vous ne l'aimez pas en utilisant les paramètres Astra. Modifions les paramètres et supprimons la barre latérale et changeons la mise en page du contenu en pleine largeur comme nous l'avons fait avec un seul produit pour plus de cohérence. Vous pouvez créer autant de produits variables avec autant de déclinaisons que vous le souhaitez mais vous devrez remplir les détails de chaque déclinaison comme nous l'avons fait ici. Ainsi, avec plus d'attributs et plus de valeurs, vous aurez beaucoup plus de variations. Une chose à noter est que le prix du produit est affiché sous forme de fourchette, car il affiche les prix de la variation la moins chère et la variation la plus coûteuse sous forme de fourchette. Nous avons donc appris à créer à la fois des produits simples et des produits variables.

Ajoutons maintenant ces produits à notre page d'accueil. Allez sur votre page d'accueil et cliquez sur "Modifier avec Elementor". Faites défiler jusqu'à la fin où nous avons créé le séparateur des nouveautés. Dans la barre d'outils Elementor à droite, cliquez sur la barre "Rechercher des widgets" et tapez produit. Sélectionnez l'élément Produit et faites-le glisser et déposez-le dans la zone de votre page sous le séparateur des nouveautés et vous y verrez les produits.

Dans la barre d'outils "Modifier les produits", comme vous pouvez le voir sur l'image, vous avez le nombre de colonnes et de lignes de produits que vous souhaitez afficher ici afin que tous vos produits ne soient pas affichés sur cette page. Vous pouvez également utiliser la catégorie de style pour modifier l'espace de colonne et l'espace de ligne, les alignements, la bordure de l'image. Vous pouvez également styliser le titre du nom du produit ici comme sa couleur, sa police, son espacement, sa topographie, etc. Même chose pour les étoiles de notation, à la fois remplies et vides. De même pour le prix, vous pouvez modifier la police, la couleur, la topographie, etc. pour le prix normal et le prix de vente. Vient ensuite le bouton, vous pouvez concevoir le bouton comme vous le souhaitez, comme la couleur d'arrière-plan, la couleur du texte, la couleur de la bordure, etc. L'utilisation d'Elementor rend toute cette édition si facile. Il vous suffit d'utiliser tous les outils d'édition disponibles et de jouer avec et tous les résultats seront sous vos yeux.

Vous avez également l'option "Sales flash" que vous pouvez concevoir pour qu'elle s'affiche lorsque vous avez une vente, qui affichera une bannière flash au-dessus de votre produit lorsqu'il y a une vente sur le produit. Utilisez-le pour attirer les clients sur vos produits lorsqu'ils visitent votre page d'accueil. Toutes les options de conception sont similaires à ce que nous avons appris jusqu'à présent afin que vous puissiez évoluer à travers chacune d'entre elles et sélectionner la conception qui vous convient le mieux.

Dans l'option Requête, vous pouvez sélectionner les produits que vous souhaitez afficher dans cette section. Par exemple, si vous souhaitez que seul le produit pour femmes soit affiché dans cette section, dans la zone Source, sélectionnez « Derniers produits », car il s'agit d'une section des nouveaux arrivages dans la liste déroulante et cliquez sur « Inclure ». Ensuite, dans la case 'inclure par', écrivez terme et sélectionnez l'option Terme qui sera ainsi la case du terme. Dans la zone de terme, écrivez « Femme » et sélectionnez « Catégorie de produit : Femme » comme indiqué dans l'image. Cliquez sur Mettre à jour pour donner effet à votre site Web. De cette façon, vous pouvez créer des sections d'affichage de produits dans n'importe quelle partie de votre site Web.

Modèle de commerce électronique Elementor

Je vous ai donné le modèle du site Web de commerce électronique que nous avons préparé à l'instant. Mise en page préparée par nous ici gratuitement sur mon site Web sur ce lien https://darrelwilson.com/product/elementor-ecommerce-template-package. Download the template zip file from there and now let us learn how to import and export templates in Elementor. First, extract all the .json flies from the zip file. These are the templates for specific pages. Go back to your Elementor editor page and click on the folder icon next to the Add section icon on the page. This will open up the Template library and go to 'My templates' as shown in the image and click on Add templates. Here you can drag and drop those template files. Select the Homepage template and click on insert and your template will be loaded. You can edit the template according your taste but using the template, you won't have to create everything from scratch. Just remove the unwanted elements or sections and add new ones you like such as countdown, form etc. and style them the way you want.

Now let us create the other pages using our template. First, create a Menu for the rest of the pages. Woocommerce automatically adds the Shop, My Account, Cart and Checkout pages. Go the Appearance in WordPress and add these to the menu. Go to the About Us page, click on 'Edit Page, first disable the title and select Full Width in content layout. Now similar to Homepage template, insert the About Us template and edit the page as you want. You can add other pages too. Complete the website design using this process.

Theme Customizer

Theme customizer is where we design the structure and theme of the website and not the actual webpages. For opening the theme customizer, click on the 'Customize' button next you website button and it will open the Theme Customizer dashboard. We have used the Astra theme in this tutorial. Let us create a logo for your website, go to Header, then Site Identity and select Logo and upload your Logo. You can get a logo from www.fiverr.com. In the same way you can edit your site icon. You can design your Primary Header here too as shown in the image. You can select the layout, width, colour, etc. of the Header. Also you can design and style your menu from here.

Same way, you can design the footer. You can add upto 4 footer widgets here and customize as you want as shown in the image. Select 'Widgets' on your WordPress toolbar and you will get 4 Widgets to add to your footer. When you click on it and then click on 'Add a widget', you will get a list of widgets. You will get a widget toolbar where you can edit the contents of widget such as title, description, image and also your social media links. Once you click publish, it will appear on the footer of your webpage.

From the Woocommerce option on the toolbar, we can customize the Checkout page as in the image. You can assign 'Terms and conditions' page and 'Privacy Policy' page from the toolbar for the customers but first you'll have to first create these pages and write the details as the legal requirements. Next select the page from the drop down below their respective box. You can add new fields in the Checkout form and make them 'Required' or Optional.

Next in the Woocommerce toolbar, you can customize your Product catalog as shown in the image.You can customize, how products are shown in the catalog, their design an also you can hide some of the components that you don't want show like for example Ratings by clicking on the eye icon next to its name. This will control how your products are shown on your Shop page and also on the products section anywhere on the website.

Here we are using the free version of Astra Theme customizer, but you can buy the pro version where you will get tons of different option and templates for your website. You can import entire customized websites from this service.

Plugins

Plugins are small apps for your website which helps creating and upgrading your website. You have to add plugins to your WordPress to help you create your website in way more efficient manner.To add a new plugin to your WordPress, go to your WordPress homepage and then click on plug-in from the Option list on the left side. It will open an 'Add plugin' page as shown in the image where different type of plugins are available to choose from. You can search for the type of plug-in that you need in the search box and you will find so many plugins to use for that specific purpose. It is like an app store on your mobile and just like your app store, you can check the usage, reviews and success of these plugins before installing. And all these plug-ins are available for free. And if you need any plugin later, you can always come back and install it here. You can add plugins for social media sites, translator and so many things. Just search for the plugin use you want, select the one you want, click on 'Install' and 'Activate'. For every plugin, a new option will be created on the toolbar from where you can add and edit elements.

Elementor Theme Builder

The Elementor theme builder allows you to create a custom Shop Page and Product Page using the page builder instead of the themes, so that these pages match the design of other pages of your website. Using Elementor page builder, you can edit any part of any page of your website unlike the themes which are preset and normally can't be edited. So now we are going to edit the Shop Page and Product Page that we created using the Woocommerce theme using Elementor theme builder and design it to match our demo website's design we saw in the beginning.

Go to your WordPress dashboard, click on 'Templates' and then select 'Theme Builder' from the list which will open the Theme Builder as shown in the image. Elementor allows us to build the theme of different parts of the site. So if want to have a different header, click on '+' icon on header. And you can select any header theme from the library and click 'Insert'. Your Header will be created and now you can edit anything in using the Edit Toolbar as we did earlier. You can the change the style of the Logo or the Menu or anything, just click on the part you want to edit and the edit toolbar will appear.

• Custom Header

Now you can add other elements on this header one by one as we did earlier, or you can insert another one or more blocks which contains similar elements and delete the common ones. For example, here as you can see in the image, we inserted a Header Block which has a bar for contact no, info and social icons. We can delete the rest of the elements of the block as we don't need them. Again you may not find the exact design of each element in the block templates, so you can now edit and style as you want to instead of creating and editing each element from scratch. This way you can create different part of your website very quickly.

Remember we have just created a part of website but it's not applied on our website yet. So when you click 'Publish', it will ask you where you want to display this template on your website. Here we created a header, so we will display it on entire website by click 'Entire Site' on 'Include' box as shown in the image. You can put different conditions by adding Include or Exclude conditions as to where you show this template.

• Custom Footer

Now you can do the same thing for footer as we did for the header and create a footer for your website using templates. You can edit the footer content to your pages by pasting the URL link of the page to its button using the editor as shown in the image. Here we have selected a footer block template with for columns and added link to various parts of our Shop, About, Contact Us and social media pages. You may design it anyway you want.

• Custom Shop Page

Now let us design a custom Shop Page using the Theme Builder. Elementor has very less themes for shop page so we will design from scratch. So we will have to create each element like for the banner we will have 2 text boxes and animated heading over a background image. Edit the elements and style the section as we learned earlier. Use all the styling features such as font, colours, size, shadows, margins, paddings, etc. to make the banner section look eye catchy like here in the example as shown in the image below.

Now we need to design our product section with a filter column in the side. So add a new section, and use the 2 column structure. On the right, add 'Products' from the toolbar and design it as we did on the Homepage or you can save the Homepage Template and insert it here. On the left, insert 'Sidebar' from the Elementor elements bar and select 'Woocommerce sidebar'. Right now, we haven't created a sidebar so we will have to exit to WordPress dashboard. But first click 'Publish' and in the condition include 'Shop page' to apply it to the website.

Go to 'Appearance' on the dashboard where we have all our widgets are shown as shown in the image. On the right, we have our Woocommerce Sidebar where we can place the 'Filter Products by Price' by drag and drop. You can add other filters too. Below it we will add 'Product Category', then 'Products' and the 'Video' on our sidebar. You can edit the title, contents and other stuff like link the URL of the video here. You can add as many widgets that you want from here.

If you want to edit the style of this sidebar, you can't use the Elementor editor as these are prepared by WordPress theme customizer. So in order to customize it, you will need click on 'Customize' button WordPress. Click on 'Global', then 'colours' where you can change the colours as in the image. Here we are customizing the WordPress theme which is the Astra theme that we are using, and not just the sidebar.

• Custom Category Page

Now we will design the category pages for our product. We are going to copy the template of page we created earlier and save to use it for all our Product Category pages. First, click on 'Edit with Elementor' on the top and select 'Product Archive' as shown in Image. Then, on the bottom left click on the button next to Update and select 'Save as a Template' as shown in the next Image. Give a name to the template like 'Main Shop Page Template' and click Save. Next select the given name and click on 'Export' and then 'Save File' to save this file to use this template on other pages or even other websites.

Now, go back to the Elementor theme builder and click on Add New. Here you have the Elementor templates but we will use the template we created, so click on 'My Templates' and click on 'Insert' next to the name of new template you created. Now we have to edit it using the tools which we have learned already. So change the Title text to 'Men's Product'. Next as this is Men's Category, you have to edit it to show only Men's Product. So click on the Product box and on the 'Query' button on the toolbar, write 'term' in the 'Include By' button and put 'Men' in the term box as we did earlier. Click on Publish and put the condition to put it only in 'Men's' in 'Products category' as you can see in the image below. You can go the website and on the Shop page, click on the Men's category on the sidebar and view the effect on the page. You will have to do the exact same process for Women's category page and any other category you want to put on your website too.

• Page produit personnalisée

Nous allons maintenant personnaliser notre page produit en utilisant la même technique. Si vous cliquez sur un produit maintenant, il affichera la page du produit dans le thème par défaut, comme nous l'avons vu lors de la création des produits. Encore une fois, accédez au constructeur Elementortheme et ajoutez un nouveau thème de produit unique en cliquant sur l'icône + à côté de celui-ci. Vous pouvez utiliser les modèles fournis ici, mais nous en créerons un à partir de zéro pour ce didacticiel. Ajoutez donc d'abord une section en 2 parties et cliquez sur l'onglet éléments. Ici, vous pouvez voir tous les éléments spécialement conçus pour les produits, comme indiqué dans l'image, que nous ne voyons pas lors de la création d'une page.

Ajoutez d'abord un fil d'Ariane qui ressemble à la catégorisation du produit. Vous pouvez maintenant modifier le style du fil d'Ariane comme la couleur, la taille, le rembourrage, etc. à l'aide de la barre d'outils , comme vous pouvez le voir sur l'image. Sur la droite, ajoutez l'élément "Titre du produit" de la barre latérale et concevez également le style de celui-ci à l'aide de la barre d'outils comme précédemment. Ajoutons ensuite l'image du produit de la même manière. Cliquez sur l'élément Image du produit et modifiez-en le style à l'aide de la barre d'outils. Ajoutez ensuite la description courte de la même manière. Vous pouvez ajouter un séparateur entre le titre et la description. Ensuite, nous devons mettre la catégorie de produit. Pour cela, sélectionnez l'élément 'Product Meta' et déposez-le sous la description et stylisez-le également. Ajoutez ensuite l'élément "Prix" en dessous et vous pourrez également en changer le style. Ensuite, placez un bouton "Ajouter au panier" sous le prix. Comme il s'agit d'un produit variable, il donnera automatiquement les options de variation. Ensuite, vous pouvez ajouter des icônes sociales et des formulaires de révision, des informations supplémentaires, etc. les éléments que vous souhaitez. Cliquez sur "Publier" une fois que vous avez terminé d'ajouter et de concevoir les éléments que vous souhaitez sur votre page produit. Dans la condition sur la page d'affichage, incluez "Tous les produits" pour appliquer ce modèle à tous les produits que vous avez créés. Vous pouvez créer différents thèmes pour différentes catégories de produits si vous le souhaitez, il vous suffira de modifier la condition pour l'inclure uniquement dans cette catégorie spécifique. Toutes nos pages de produits seront mises à jour avec ce modèle car nous l'avons appliqué à tous les produits.

• Page de paiement et de panier personnalisée

Nous allons maintenant concevoir les pages de paiement et de panier personnalisées. Les pages de paiement et de panier ne sont pas avec le générateur de thème, nous allons donc les modifier avec Elementor. Accédez à la page Panier et cliquez sur Modifier avec Elementor. Comme toute autre page, vous pouvez la modifier et la styliser comme vous le souhaitez avec les éléments Elementor. Vous pouvez modifier le texte, les icônes, les boutons de coupon, etc. et styliser vous-même la police, la couleur, la topographie, etc. Mais éditer la partie du thème réel comme le titre Cart ici n'est pas possible avec Elementor. Pour modifier cela, vous devrez le modifier dans WordPress lui-même, alors cliquez sur "Modifier la page" et dans le coin inférieur droit, cochez la case "Désactiver le titre" sous la section de désactivation, comme indiqué dans l'image, comme nous l'avons fait précédemment lors de la conception du thème de wordpress.

Vous pouvez modifier et concevoir la page de paiement et l'utiliser de la même manière. De la même manière, vous pouvez concevoir la page "Mon compte" de vos clients car le thème par défaut de cette page n'est pas très beau. Vous pouvez le modifier avec Elementor. Et j'ai également donné un lien plus tôt dans lequel j'ai également mis le fichier zip des modèles de toutes ces pages pour que vous puissiez les concevoir ensuite rapidement.

Paramètres Woocommerce

Vous avez maintenant appris à créer des pages à l'aide d'Elementor et de Theme Builder et la création de votre site Web est terminée. Nous devons maintenant en savoir plus sur les paramètres de Woocommerce pour faire fonctionner ce site Web. Accédez au tableau de bord WordPress, cliquez sur Woocommerce et sélectionnez "Paramètres", ce qui ouvrira l'onglet des paramètres généraux de Woocommerce, comme indiqué dans l'image.

• réglages généraux

Ici, vous pouvez mettre votre adresse et sélectionner les pays dans lesquels vous souhaitez vendre, activer les taxes, activer les codes de réduction. Cochez toutes ces cases pour les activer. En dessous, vous pouvez changer votre devise en fonction de votre pays.

• Onglet produit

L'onglet suivant est l'onglet Produit sur la rangée supérieure des paramètres où vous trouverez de nombreux paramètres dont la plupart sont très spécifiques à ici, nous n'allons pas les utiliser, sauf pour la section de révision où vous pouvez activer les critiques et les notes par étoiles sur les produits, vous pouvez également montrer la balise utilisateur vérifiée à de vrais acheteurs dans les avis, comme indiqué dans l'image. Vous pouvez également mettre les détails d'expédition des produits tels que le poids, la dimension, etc.

• Onglet Taxe

Suivant dans l'onglet Taxe, où vous pouvez activer ou désactiver le calcul de la taxe automatique. Le calcul des taxes peut être très compliqué en fonction de votre pays et de votre entreprise. Le calcul automatique peut donc ne pas fonctionner pour vous. Cependant, vous avez la possibilité de définir des taxes pour différentes adresses de livraison et en fonction de l'article du panier. J'ai donné un lien vers www.taxjar.com où vous pouvez obtenir des services gratuits et payants pour vous aider dans le calcul des impôts. Vous pouvez également choisir d'afficher les prix avec ou sans taxes à différents endroits, comme dans la boutique, vous devez afficher le prix sans taxe et dans le panier et la caisse, il doit généralement inclure les taxes.

• Onglet Livraison

L'onglet suivant est "Expédition". Cliquez d'abord sur "Ajouter une zone d'expédition", ajoutez le nom de la zone, des régions spécifiques de la zone et configurez vos tarifs d'expédition sous différentes méthodes d'expédition, comme indiqué dans l'image. Ici, nous avons utilisé une méthode de tarif forfaitaire où nous mettons 5 $ à tarif fixe et l'autre est la méthode de livraison gratuite. Cliquez sur le bouton Modifier ci-dessous pour ajouter une condition de montant minimum de commande ou d'exigence de coupon. Ici, nous avons sélectionné une exigence de commande minimale de 50 $. Vous pouvez ajouter plusieurs zones et plusieurs modes et tarifs d'expédition pour chacun d'entre eux. Vous avez également une valeur par défaut pour les emplacements non couverts par l'une de vos zones pour lesquelles nous n'avons pas donné de tarifs spécifiques. Nous avons donc mis ici un taux par défaut de 10 $ pour ces zones par défaut.

• Comptes et onglet Confidentialité

Onglet "Comptes et confidentialité" où vous pouvez sélectionner l'option de créer un compte des clients avant d'acheter ou de leur permettre d'acheter d'abord sans compte, puis de créer un compte au moment du paiement, ainsi que diverses autres options de création de compte comme nom d'utilisateur, mots de passe, etc. que vous pouvez vérifier par vous-même car ils sont très explicites. Vous pouvez également ajouter une politique de confidentialité comme l'exige la loi ici. Vous avez également des options sur le moment où les données personnelles des utilisateurs seront supprimées sous Conservation des données personnelles.

• Onglet E-mail

Nous avons également l'onglet "E-mail" où les paramètres de tous les e-mails automatisés que vous recevrez et enverrez aux clients à partir du site Web, par exemple lors d'une nouvelle commande ou d'une commande annulée. Vous pouvez modifier ici le format de l'e-mail que vous recevrez ou enverrez au client dans toutes ces situations. Vous pouvez ajouter un plugin à cet effet pour recevoir des emails de meilleure qualité. Allez dans Plugins et installez 'Kadence Woocommerce Email designers' et. À l'aide de ce plugin, vous pouvez concevoir le contenu de l'e-mail, l'en-tête, le pied de page, le texte, etc. en utilisant leurs styles personnalisés qui sont modifiables ici en accédant au plugin dans la barre latérale Woocommerce, comme indiqué dans l'image.

• Paiements

Nous allons maintenant accéder à l'onglet "Paiements" où nous pouvons sélectionner les méthodes de paiement autorisées pour nos clients. Il existe de nombreuses options disponibles à sélectionner, mais nous activerons ici "Stripes" et "PayPal" en cliquant sur le bouton d'activation, comme indiqué dans l'image ci-dessous.

1. Pay Pal

Maintenant, laissez-nous d'abord configurer les paramètres de paiement pour PayPal, alors cliquez sur "Configurer" pour ouvrir la page des paramètres PayPal où vous pouvez mettre le titre, la description de la boîte de paiement et votre compte de messagerie PayPal et cliquez sur "Enregistrer les modifications ' pour intégrer votre site Web à PayPal. Si vous n'avez pas de PayPal, vous pouvez en créer un en vous rendant sur leur site Web et en vous inscrivant gratuitement. Il vous suffira de vous inscrire avec une adresse e-mail que vous mettrez dans la boîte e-mail PayPal comme indiqué dans l'image. C'est l'un des moyens de paiement les plus populaires disponibles.

2. Bande

Ensuite, nous allons configurer les paiements avec des rayures. Cliquez donc sur le bouton "Gérer" à côté. De la même manière que dans les paramètres PayPal, mettez d'abord le titre, la description de la boîte de paiement. Ensuite, vous avez la clé publiable de test et la clé secrète de test. Vous pouvez vous rendre sur www.stripe.com et y créer un compte gratuit, il vous suffit d'avoir un compte bancaire pour créer un compte. Vous pouvez intégrer votre compte Stripe à votre site Web après l'avoir créé, ce qui est un service gratuit. Pour cela, après vous être connecté à votre compte Stripe, cliquez sur 'Developers' et sélectionnez 'API keys' comme indiqué sur l'image. Copiez la clé publiable qui apparaît ici sur votre site Web dans la boîte de clé publiable et la clé secrète dans la boîte de clé secrète. Cliquez sur "Enregistrer les modifications" et votre site Web est maintenant prêt à accepter les paiements par carte de crédit de n'importe où dans le monde avec des frais de transaction très bas. Ici, nous le faisons, nous avons toujours activé le bouton Afficher les données de test sur notre compte Stripe et sur la page des paramètres Woocommerce, nous avons coché la case "Activer le mode test", mais lorsque vous êtes prêt à utiliser votre système de paiement, désactivez-le. .

Vous pouvez maintenant tester votre site Web en passant une commande et en achetant quelque chose et vous pouvez également effectuer un paiement pour vérifier que tout est en ordre. Sur la page Mon compte, les clients auront leur propre tableau de bord personnel où ils pourront vérifier, modifier ou annuler leur commandes, modifier leurs adresses de livraison et de facturation, paramétrer leurs moyens de paiement et leurs coordonnées bancaires. Toutes leurs commandes passées sont également affichées dans leur liste de commandes avec leur statut.

Optimisation pour mobile

L'optimisation mobile consiste à rendre le site Web convivial pour les appareils mobiles. L'optimisation mobile est très importante dans le scénario actuel car a) de nombreuses personnes utilisent des appareils mobiles pour surfer sur Internet et b) selon le nouvel algorithme de Google, si votre site Web n'est pas optimisé pour les mobiles, ils diminueront votre classement, ce qui peut être catastrophique pour votre le trafic du site Web et le référencement.

L'optimisation mobile est assez simple à l'aide de l'éditeur Elementor. Revenons à nouveau au tableau de bord Elementor. Au bas de la barre d'outils, vous trouverez le bouton "Mode réactif", en cliquant dessus, vous ouvrirez une liste déroulante affichant 3 options, à savoir. Ordinateur de bureau, tablette et mobile. Jusqu'à présent, nous concevions notre site Web en nous basant sur son apparence pour les utilisateurs de bureau. Cliquez maintenant sur "Tablette" pour obtenir un aperçu de ce à quoi cela ressemblerait sur un navigateur de tablette. De même, vous pouvez également le vérifier pour le mode "Mobile". Vous pouvez modifier la page Web si quelque chose semble en panne ou si elle n'est pas visuellement attrayante.

Ici comme vous pouvez le voir sur l'image, le premier titre est trop gros pour le mode tablette et le '50% OFF' est trop petit donc il faudra l'ajuster. Vérifiez tous les éléments des pages pour voir si quelque chose doit être repensé. Toutes ces modifications seront applicables sur le mode Tablette lorsque vous cliquerez sur Mettre à jour. La même chose sera applicable pour le mode mobile. Ajustez la taille des textes d'en-tête, l'alignement des boutons, des bannières et des en-têtes.

Vous pouvez désactiver certaines des sections dont vous avez besoin sur la version mobile ou tablette, si vous pensez que ce n'est pas important pour eux. Pour cela, sélectionnez la section que vous souhaitez masquer, accédez à la catégorie avancée de la barre d'outils "Modifier la section", cliquez sur "Adaptatif" et sous Visibilité, vous pouvez choisir de masquer la section sur la version ordinateur, tablette ou mobile, comme indiqué dans l'image. Même chose que vous pouvez faire avec d'autres sections ou éléments. Vous pouvez concevoir tout ce qui est différent pour le mode tablette ou mobile, comme les images d'arrière-plan, la taille de la police ou quoi que ce soit.

Formulaire de contact

Maintenant, allons de l'avant et apprenons à créer une page "Contact" où les visiteurs peuvent remplir leurs informations de contact et cela ira directement à votre e-mail. La conception de base de la page, vous pouvez le faire vous-même en utilisant l'éditeur Elementor ou le personnalisateur de thème. La seule chose importante est le formulaire de contact comme indiqué dans l'image. Ainsi, vous recherchez un formulaire dans la barre d'outils Elementor et faites-le glisser sur la section. Vous pouvez modifier le texte et la conception du formulaire à l'aide de la barre d'outils "Modifier le formulaire", ce que je pense maintenant que vous pourriez faire vous-même. Il existe de nombreux paramètres avancés dans la barre d'outils Modifier le formulaire qui ne passent pas ici, mais le formulaire de base que vous pouvez créer.

Coupons

Pour ajouter des coupons à votre site, cliquez sur '+ Nouveau' dans la barre supérieure à côté du bouton de personnalisation et sélectionnez Coupons. Les coupons de la barre d'outils latérale de WordPress sont situés dans la section "Marketing", comme indiqué dans l'image. Ici, vous pouvez ajouter un nouveau code de coupon, sélectionner le type de remise en pourcentage de remise, remise sur panier fixe ou remise sur produit fixe, indiquer le montant ou le pourcentage de la remise et la date d'expiration du coupon. Sous les "Restrictions d'utilisation", vous pouvez définir des conditions telles que les dépenses minimales, l'utilisation individuelle ou la conjonction avec d'autres coupons, inclure ou exclure des produits ou des catégories de produits du coupon. Sous la limite d'utilisation, vous pouvez sélectionner le nombre de fois que ce coupon peut être utilisé ou le limiter pour un produit spécifique et limiter l'utilisation par un seul client. Cliquez sur Publier pour appliquer ce coupon sur le site Web et testez-le sur la page Panier en appliquant le code de coupon lors de l'achat.

J'espère vraiment que ces tutoriels ont été bénéfiques pour les lecteurs et que vous pouvez maintenant créer vous-même un site Web à partir de zéro. Si vous avez besoin d'aide, vous pouvez visiter mon site Web et ma page Facebook et laisser un commentaire. J'ai des tonnes d'autres ressources sur la création de sites Web et l'utilisation d'Elementor que vous pouvez consulter. Merci d'avoir lu ce tutoriel et vos commentaires et questions sont toujours les bienvenus.