Comment créer un site e-commerce WordPress pas à pas

À la fin de ce tutoriel, vous serez en mesure de créer un site e-commerce WordPress.

Si vous êtes un webmaster débutant, vous apprendrez étape par étape comment installer WordPress et réaliser une boutique en ligne, vous serez en mesure de satisfaire vos futurs clients.

Et si vous êtes un entrepreneur et que vous désirez lancer votre boutique en ligne, grâce à ce tutoriel vous économiserez des euros en réalisant vous-même votre site e-commerce si votre emploi du temps vous le permet.

Dans ce tutoriel tout est simplifié et scindé en plusieurs étapes pour vous permettre de créer un site e-commerce WordPress.

LA SUITE APRÈS CETTE PUBLICITÉ

Les éléments requis pour débuter la réalisation d’un site e-commerce WordPress

Pour réaliser un site e-commerce, vous avez besoin d’un nom de domaine et d’un espace d’hébergement où héberger votre boutique en ligne.

Le nom de domaine est l’adresse (l’URL) via laquelle votre site sera accessible.

Vous devez choisir un nom de domaine qui reflète au maximum votre activité, exemple : pieces-detachees.com.

L’espace d’hébergement et le nom de domaine s’acquièrent auprès d’un hébergeur, pour garantir la sécurité des données de votre site e-commerce, et éviter des désagréments tels qu’un site qui tombe souvent en panne, veillez à choisir un hébergeur qualifié avec plusieurs années d’expérience.

Dans ce tutoriel je vous présenterai l’hébergeur Lws, le numéro un des hébergeurs français simple et facile à utiliser. Il a un rapport qualité/prix intéressant, offre une bonne performance et propose d’excellents avantages tels que la gratuité du nom de domaine la première année.

Installation de WordPress sur un espace d’hébergement LWS

WordPress est un logiciel de gestion de site facile à prendre en main. Il est le plus populaire des logiciels de conception de site web, la preuve plus de 40% des sites sur internet sont réalisés avec WordPress.

Découvrez comment l’installer à partir de l’espace d’administration de l’hébergeur lws.

Lws existe depuis 1999, il a fait et il continue de faire ses preuves dans le domaine de l’hébergement, il reste dans le top 3 des hébergeurs français.

Avec lws, vous pouvez héberger votre site à partir de 1,79€ par mois avec des avantages que vous n’aurez pas auprès d’autres hébergeurs avec des coûts plus élevés.

Lws propose plusieurs plans, le plan LWS STARTER mutualisé est idéal pour débuter avec un site e-commerce.

Une fois que vous avez souscris auprès de lws, un espace de gestion cPanel vous ai dédié.

Dès que vous accédez à votre cPanel, cliquez sur le bouton Gérer qui se trouve devant votre nom de domaine.

Vous serez redirigé sur l’interface où lws met à votre disposition plusieurs outils scindés dans de différentes sections.

Dans la section Logiciels, cliquez sur WordPress, après le clic vous aurez le choix entre l’installation unique de wordpress, WordPress et WooCommerce ou WordPress avec d’autres outils comme sur la capture ci-dessous.

Cliquez sur WordPress et ensuite vous aurez à valider le choix de l’emplacement de l’installation et la base de destination puis le tour est joué.

Les informations d’accès à l’administration de votre site WordPress vous seront envoyées dans votre boîte mail par lws.

NB:

Nous sommes affiliés et nous percevons une commission si vous vous inscrivez en passant par notre lien de recommandation, transparence oblige.

Nous ne recommandons que les produits que nous utilisons et dont nous sommes sûr qu’ils apportent de la valeur ajoutée à nos lecteurs. Pour découvrir tous les plans d’hébergement de LWS, cliquer sur le bouton ci-dessous. 

LES PLANS D’HEBERGEMENT DE LWS

Paramétrage de WordPress

Tout outil une fois mis en place, nécessite quelques réglages primordiaux avant la mise en marche.

C’est pareil pour WordPress.

Une fois connecté à l’espace d’administration à l’aide de votre identifiant et mot de passe, vous irez sur la page Générale de l’administration de WordPress accessible via le sous-menu Général de l’onglet Réglage.

Sur cette page, vous définirez le titre du site, un petit texte descriptif dans le champ slogan, l’adresse du site, l’adresse mail où les informations concernant le site seront envoyées.

Une fois ces paramètres réalisés, vous pourrez vous occuper de la mise en place de l’élément essentiel pour un site e-commerce WordPress.

Installation et Paramétrage de WooCommerce

Qu’est-ce que WooCommerce ?

C’est une extension WordPress, la meilleure qui vous permet de créer une boutique de vente de tous types de produits en ligne.

Pour l’installer il faut se rendre sur la page d’ajout des extensions et taper WooCommerce dans le champ de recherche.

Elle sortira parmi les résultats proposés, cliquez sur le bouton Installer maintenant et une fois l’installation faite, cliquez sur Activer.

Dès que vous l’activez, vous serez redirigé sur la page de paramétrage de votre boutique en ligne et vous devrez entrer les informations relatives à votre commerce, votre secteur d’activité et les types de produits à vendre, ignorez la sélection du thème et passer à l’étape suivante.

Un site e-commerce sous-entend vendre des produits et encaisser des paiements, WooCommerce propose différents moyens de paiement à intégrer sur votre boutique via l’onglet Paiements des Réglages de WooCommerce.

Par le biais du bouton Configuration, vous pouvez entrer les paramètres du moyen de paiement que vous activerez sur votre site e-commerce.

Parler de l’intégration des moyens de paiements sur une boutique en ligne sans mentionner le moyen de paiement le plus populaire PayPal laisserait un goût d’inachevé.

WooCommerce propose une documentation détaillée de l’intégration de PayPal sur un site-ecommerce WordPress et je vous invite à la découvrir ici.

Les bases sont posées, il faut maintenant travailler l’aspect visuel de votre boutique en ligne.

Choisir un modèle visuel pour sa boutique et l’installer

Il existe une multitude de modèles de thèmes e-commerce, mais nous allons choisir le thème eStore pour notre tutoriel.

Vous allez le télécharger et ensuite le charger sur WordPress à partir de la page des thèmes en procédant comme suit :

• En premier lieu cliquez sur le bouton Ajouter présent sur la page des thèmes

• Ensuite choisissez le bouton Téléverser un thème, uploadez le thème téléchargé et l’installer en cliquant sur Installer maintenant

• Maintenant il ne vous reste plus qu’à activer le thème en cliquant sur le lien Activer

Une fois toutes ces étapes franchies, un bouton Commencer avec eStore s’affichera, cliquez sur ce bouton, pour installer et activer l’extension d’importation des contenus du modèle d’eStore.

Placez le curseur sur l’image de notre thème, un bouton Import apparaîtra sur l’image, cliquez sur le bouton et ensuite confirmez sur le popup qui s’affiche.

Après l’importation, vous remarquerez que votre site a exactement le même visuel que le modèle de eStore, mais vous ne pouvez pas le garder ainsi car ce ne sont pas les produits que vous désirez mettre en vente qui sont proposés, ni notre logo dans la barre de menu.

Vous allez donc personnaliser le modèle à votre goût et intégrer vos propres éléments.

Réalisation du site e-commerce WordPress

LA SUITE APRÈS CETTE PUBLICITÉ

Création des produits et de leurs catégories

Les produits sont la raison d’être d’un site e-commerce.

Vous avez certainement différents types de produits à proposer à vos clients, par exemples des pantalons, des chaussures, des blousons ou un ensemble complet.

Vous allez créer en premier lieu les Catégories des produits, et ensuite vous créerez les produits et les ajouterez aux catégories correspondantes.

Rendez-vous sur l’onglet Produit et cliquez sur le sous-menu Catégories. Sur la page qui s’affiche, entrez les informations de la catégorie et cliquez sur le bouton Ajouter une catégorie.

Créez toutes les catégories dont vous avez besoin.

Maintenant que toutes les catégories sont créées, vous pouvez créer vos produits et les classer dans leur catégorie.

Toujours sous l’onglet Produits, cliquez sur le sous-menu Ajouter, la page d’entrée des informations de votre produit s’affichera.

Entrez le nom de votre produit, ajoutez un petit texte descriptif de votre produit, à partir des widgets Catégories des produits et Image produit présentes à droite de la page, classez le produit dans sa catégorie et insérez l’image du produit.

Définissez le prix du produit via le champ Tarif régulier puis cliquez sur le bouton Publier.

N’oubliez pas de proposer un beau visuel pour l’image du produit afin de capter l’attention des visiteurs.

Les produits créés, vous pouvez maintenant personnaliser la page d’accueil de votre boutique.

Mise en place de la page d’accueil

Avant de débuter la personnalisation de la page d’accueil, il faut premièrement choisir sa page d’accueil parmi les nombreuses pages du thème et la spécifier à WordPress.

Pour ce faire, vous allez vous rendre dans les Réglages de WordPress et aller sur la page d’administration Lecture, choisir Une page statique pour la page d’accueil à afficher, et choisir la page à prendre en compte pour la Page d’accueil, puis appuyer sur le bouton Enregistrer les modifications présent en bas de la page.

Maintenant vous pouvez vous occuper du visuel de votre page d’accueil, mais voici une petite clarification.

Chaque thème WordPress intègre ses propres outils de personnalisation. Il faut lire la documentation du thème pour voir comment et où apporter les modifications souhaitées.

Pour apporter vos modifications à ce modèle, vous allez cliquer sur le sous-menu Personnaliser présent dans l’onglet Apparence de l’administration ou dans la barre WordPress qui s’affiche en haut si vous êtes sur la partie front-end du site.

Sur l’interface de personnalisation, vous avez la possibilité de modifier directement les éléments de la page à partir de l’icône présente à leur côté ou à partir des outils présents à gauche de l’interface, parmi ces derniers, c’est dans l’outil Widgets que vous vous rendrez pour personnaliser les contenus de la page d’accueil.

Mais avant, il vous faut comprendre la structure de la page.

Les contenus de la page d’accueil de notre modèle sont scindés en 2 parties : la première est la zone de diaporama et la seconde est le reste des contenus de la page.

Vous vous occuperez après de l’entête, du menu, du bandeau d’alerte et du pied de page.

La zone de diaporama présente un slider et juste à côté certaines collections mises en avant.

Pour le diaporama, c’est une Catégorie de produit intégrée dans cette zone qui présente les produits.

Du coup pour choisir les produits à présenter dans le diaporama, il faut :

• Les classer dans une même catégorie de produits
• Se rendre dans la zone Page d’accueil : Zone de diaporama présent dans l’outil Widgets

• Dans le widget qui s’affiche, il faut choisir la catégorie de produits que l’on veut diffuser dans le diaporama (ici sur la capture, j’ai choisi Shoe Collection)

Et appuyer sur le bouton Publier, il faut le faire à chaque personnalisation pour qu’elle soit prise en compte.

Pour la personnalisation de zone de collection présente à côté du diaporama, cliquez sur l’icône de personnalisation présente à côté de l’image de la zone de collection.  Cela vous mènera à l’endroit approprié pour personnaliser, et vous pouvez choisir les catégories à afficher pour la zone de collection.

Pour ce tutoriel, je vais ajouter la catégorie Slider à la catégorie Teen Collection déjà présente.

Vous venez de faire la mise en place de la première partie des contenus de la page d’accueil, passez maintenant à la seconde partie des contenus.

La seconde partie des contenus est un ensemble de sections, pour ce tutoriel j’ai organisé les sections dans l’ordre suivant : la section de collection des hommes, la section de collection des femmes, la section des produits tendances et enfin la section qui présente les articles récents.

La zone Barre de page d’accueil vous permettra de choisir vos sections.

Avec la démo importée, voici les contenus que proposent la Zone Barre d’accueil.

Pour choisir une section, il faut cliquer sur le bouton Ajouter un widget, la liste des éléments vous sera présentée et vous cliquerez sur votre choix qui va s’ajouter automatiquement. À l’intérieur de l’élément, vous pouvez définir le titre de notre section, une petite description, l’image à la une et choisir la catégorie des produits à afficher.

Vous pouvez aussi agencer les éléments dans l’ordre voulu en les déplaçant à l’aide du curseur, et pour le supprimer, vous avez un petit lien Retirer en rouge à l’intérieur de l’élément

Une fois toutes les sections mises en place et agencées comme vous le souhaitez, vous pouvez cliquer sur le bouton Publier.

Il ne reste plus qu’à personnaliser les éléments permettant de naviguer aux différents endroits du site pour que le visuel de votre page d’accueil ait la configuration souhaitée.

Personnalisation du menu, du footer et de l’alerte

Le modèle d’eStore permet de proposer un bandeau d’alerte sur la page d’accueil.

C’est très utile pour les promotions ou encore pour présenter une information importante aux visiteurs.

Pour la modifier, cliquez sur l’icône qui s’affiche à sa gauche, et importez l’image de votre bandeau d’alerte, vous avez aussi la possibilité d’ajouter un titre à votre alerte.

Juste après votre bandeau d’alerte se trouve le menu du site, il est certain que le menu du modèle eStore n’est pas forcément celui que vous voulez pour votre boutique en ligne.

Vous allez créer votre propre menu en cliquant sur le sous-menu Menus de l’onglet Apparence.

Vous allez cliquer sur le lien créez un nouveau menu, donner un nom au menu, le créer à partir du bouton bleu Créer le menu.

Ensuite vous ajouterez à votre menu les pages à présenter, cochez la case Menu principal et cliquez sur le bouton Enregistrer le menu.

C’est ok, votre site a son propre menu, mais pas encore son propre pied de page (Footer).

Le pied de page est personnalisable en cliquant directement sur les icônes présentes à côté des éléments du pied de la page dans l’outil de personnalisation. Vous pouvez intégrer les éléments que vous désirez voir dans votre pied de page et ensuite l’enregistrer en cliquant sur Publier.

Conclusion

Rien ne vaut la pratique, passer à l’action après la lecture de ce tutoriel, vous permettra de bien maîtriser ce qui est enseigné dans ce tutoriel.

Si vous débutez avec WordPress, il est judicieux de choisir le thème enseigné dans ce tutoriel pour la pratique, faites les personnalisations comme bon vous semble, créer d’autres pages et modéliser les. Après vous pourrez choisir d’autres thèmes à tester pour continuer votre progression dans la maîtrise de WordPress.

Si vous avez aimé ce tutoriel, merci de le partager sur les réseaux sociaux. Ça pourrait aider vos amis.

Vos commentaires pour apporter des suggestions ou poser toutes sortes de questions sont les bienvenus.