Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Créer un site e-commerce avec WordPress

Par Allassane Kader KAMARA Publié le 12/07/2018 à 23:48:31 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

L’objectif de ce cours est d’expliquer comment créer un site e-commerce avec WordPress

Introduction

Si vous êtes un adepte des sites e-commerces, et que vous avez déjà pensé à créer votre propre site e-commerce, dans ce cas vous entendrez beaucoup parler des CMS (Content management System) de e-commerce comme PrestaShop, Magento, OsCommerce… Mais si vous utilisez WordPress et que vous avez l’habitude de créer des sites avec, alors je vous souhaite la bienvenue sur cet article. Je me chargerai ici d’expliquer comment créer un site e-commerce avec WordPress et comment transformer votre site basique WordPress en un site de vente en ligne.

CMS

Tout d'abord CMS signifie Content Management System, ou système de gestion de contenu en français est un programme informatique qui rend encore plus facile la création de site internet en vous proposant des modèles de site que vous pourrez par la suite modifier comme bon vous semble. Il permet de gagner beaucoup plus de temps et aussi pratique pour les personnes qui n’ont pas une grande connaissance technique en développement web. Même si vous n’êtes pas développeur web, vous pouvez dès maintenant vous orienter vers les CMS et créer votre propre site afin d’obtenir le résultat que vous souhaitez.

WordPress

Tout d’abord, il faut savoir que Wordpress est un système de gestion de contenu libre et gratuit (open-source) écrit dans l’ensemble en PHP et qui repose évidemment sur une base de données MySQL. Ses fonctionnalités lui permettent de créer et gérer des sites web, c’est-à-dire les blogs, les sites e-commerces.

Selon un sondage, en avril 2018 il est utilisé par 30.6 % des sites dans le monde contre ses conquérants directes Joomla (3.1 %) et Drupal (2.1 %).

Avantage : pourquoi utilisé worpress

Wordpress est reconnu comme l’un des outils les plus efficaces pour le référencement dans les moteurs de recherches. Il possède de en effet des solides capacités dans ce domaine. Il a un code source optimisé à chaque mise à jour et la gestion des permaliens, des catégories et des tags est facile.

Wordpress utilise une interface Responsive, l’on constate aujourd’hui l’accroissement des téléphones portables et des tablettes paour la navigation internet, donc cela permet de s’adapter à tous types de récepteurs : ordinateurs, smartphone et tablettes. Le responsive design permet en réalité un affichage différent selon la taille de l’écran que l’on utilise.

Inconveneant

Wordpress est certainement le meilleur CMS aujourd’hui et est celui qui offre le plus d’extensions, il peut aussi présenter un certain inconvénient : la lourdeur et la lenteur du chargement et pourtant un site qui se charge lentement décourage les internautes. C’est pour ça que la meilleure solution est d’investir sur un bon hébergeur, c’est-à-dire un hébergeur puissant, au minimum 1 Go de RAM, 1 Go d’espace disque et aussi la possibilité d’installer une version récente de PHP/MySQL.

WooCommerce

C’est une extension open source permettant de créer une boutique en ligne avec

Wordpress. Vous avez la possibilité avec WooCommerce de créer des catégories pour les produits, d’ajouter des produits, de faire des inventaires automatiquement, propose aussi différents processeurs de paiement pour les différents pays, affiches les informations légales de la boutique. Il représente aujourd’hui 24 % des sites de vente en ligne. Cette extension de WordPress est si riche que vous pourrez y trouver toutes les fonctionnalités qu’un site de bonne qualité doit avoir.

Prérequis

La création de site e-commerce avec wordpress se fait en plusieurs étapes et dans notre pratique, nous allons éssayer de relever chacune d'entre elles. Dans notre cas nous n’allons pas utiliser d’hébergeur mais nous allons faire tout le processus de notre travail en local. Donc je vous conseille d’installer wamp serveur ou XAMP. Pour ma part j’utilise Laragon.

Installation Wordpress

Pour installer WordPress, veillez vous rendre sur le site officiel de téléchargement de WordPress sur ce lien : « https://fr.wordpress.org/telechargement » afin de télécharger la dernière version de Wordpress.

NB : j’utilise la version en français parce-que je parle français. Mais vous êtes libre de choisir la version de WordPress avec la langue de votre choix.

Vous allez télécharger en format compresser ensuite vous la décompresser et vous copier le dossier complet dans le dossier www de votre plateforme de développement web. Par exemple si vous utilisez WAMP serveur, copier le dossier décompresser de WordPress dans C:/wamp/www.

Ensuite créer votre base de données car lorsque nous passeront à la phase d’installation de WordPress il sera impératif pour nous d’indiquer le nom de notre base de données. Pour faire cela lancer votre outil d’administration bases de données phpMyAdmin pour ceux qui utilise WAMP Server où XAMP. Pour ma part j’utilise HeidiSQL.

Notre base de données est ainsi créée. Je l’ai nommé « supinfoshop ».

Après avoir créer notre base de données nous pouvons continuez la phase d’installation de Wordpress.

Lancer votre navigateur web, et indiquez localhost :8080/supshop si vous utilisez skype sinon mettez directement localhost/supshop dans la barre d’adresse de votre navigateur et faites entrée.

Vous devez vous retrouvez normalement sur cette page indiquée sur l'image ci-dessus . Cliquer sur le boutton « C’est parti ! ».

Ensuite sur la page suivante, indiquez le nom de la base de données que vous aviez précédemment créer, et le nom d’utilisateur MySQL ainsi que le mot de passe et laissez l’adresse de la base de données et le préfixe des tables par défaut. Cliquez sur le bouton « Valider ».

Vous devez vous retrouver par la suite sur cette page. Et cliquez sur « Lancer l’installation ».

Sur la page suivante, vous devez renseigner le nom de votre site, cela a un grand intérêt pour la notoriété d’une marque ou pour être sûr d’obtenir une bonne visibilité dans les moteurs de recherches. Il faut que cela corresponde à votre nom de marque, ensuite renseigner votre identifiant et votre mot de passe qui vous permettront de vous connecter à votre page d’administration. Il faut aussi indiquer votre adresse de messagerie qui vous permettra de recevoir une notification par email pour des éléments importants. Cette adresse permettra aussi à vos clients de vous contacter par mail si jamais vous voulez créer un formulaire de contact sur votre site. Décocher la case « demander aux moteurs de recherche de ne pas indexer ce site » afin que les moteurs de recherches indexent votre site et l’affiche dans les résultats de recherche google.

Cliquer enfin sur le bouton "installer WordPress" pour finaliser votre installation.

Félicitation vous avez finis votre installation. Vous pouvez maintenant vous connectez afin d’avoir accès à votre page d’administration.

Vous êtes maintenant sur votre page d’administration. Nous allons maintenant passez à l’installation de notre thème et par la suite l’installation de l’extension WooCommerce pour enfin créer notre site e-commerce.

Installation de thème

Pour installer notre thème, sur votre tableau de bord, dans sous menu de « Apparence », cliquez sur thème et vous verrez la liste de tous les thèmes déjà disponibles. Vous pourrez installer ou ajouter un nouveau. Pour ce faire, vous avez deux possibilités :

  • Soit vous téléchargez votre thème directement à partir de la page d’administration,

  • Ou vous télécharger le thème sur google et vous décrompressez le thème dans le dossier C:\laragon\www\supshop\wp-content\themes de votre serveur web local.

Pour ma part j’ai utilisé la deuxième méthode pour installer le thème puisque je travaille localement. Généralement, la première méthode est utilisée lorsque votre site est hébergé.

Sur l’image ci-dessus vous avez la liste des thème disponibles, pour notre test, nous allons utiliser le thème « i-craft ». Cliquez juste sur « Activer ».

Après activation du thème, votre premier page doit ressembler à l’image ci-dessous :

Vous pouvez changer le logo du site, les images du slider, vous pouvez aussi ajouter le contact de votre compagnie ainsi que votre adresse email sur le site, pour faire cela, cliquez simplement sur « personnaliser » tout en haut à gauche.

Comme vous pouvez le constater sur cette image, vous avez la possibilité de personnaliser l’apparence de votre site comme bon semble. Par exemple, dans le menu à gauche, « identité du Site » permet de changer le logo du site et le slogan du site, « Couleur » permet de modifier la couleur du site, vous avez aussi la possibilité de modifier l’image en arrière-plan.

Vous pouvez aussi créer d’autre pages. Pour ma part j’ai créé de nouvelles pages et j’ai supprimé les pages d’exemple créer pendant l’installation WordPress.

Pour créer une page, allez-y dans votre tableau de bord puis cliquez sur « Pages » et sélectionnez « Ajouter ». Lorsque vous finissez de créer votre page cliquer sur « publier » pour enregistrer.

Vous savez maintenant comment créer votre site, comment créer vos page comment personnalisé l'apparence de votre site. Vous avez la possibilté de faire encore beaucoup plus de chose, il vous suffit d'être juste curieux et d'essayer de toucher un peu à tout.

Installation WooCommerce

Pour installer WooCommerce, toujours sur votre tableau de bord allez-y dans "extension" et cliquer sur « ajouter ». Et ensuite dans la barre de recherche, saisissez WooCommerce.

Maintenant cliquez sur le bouton « installer » pour passer à l’installation de l’extension. Ensuite le bouton "Activer" apparaîtra, cliquez dessus pour passer à la configuration de l’extension.

Si tout se passe comme prévu, cette page sur l’image ci-dessous doit être afficher.

Nous allons donc passer à la configuration de WooCommerce. Pour cela, renseignez les champs selon vos besoins. Cette configuration est composée de plusieurs étapes :

  • Store setup (configuration de la boutique) : ici vous allez ajouter le pays dans lequel votre compagnie est basée, votre adresse, votre ville, code postal, votre devise de paiement,

  • Paiement : vous allez ici spécifier le mode de payement de vos clients, soit le paiement à la livraison ou payement par carte bancaire.

  • Expédition : vous allez spécifier ici les unités de mesure de votre boutique.

Laissez les autres étapes par défaut et finalisez votre configuration. Maintenant vous pouvez vous rendre sur tableau de bord pour verifier le resultat.

Après la configuration de l’extension vous pouvez remarquer sur votre tableau de bord que WooCommerce a bien été installé comme indiqué sur la figure ci-dessus. Vous pouvez maintenant ajouter vos produits.

Ajout de produit

Pour ajouter un produit, dans le sous-menu de « Produits », cliquez sur « Ajouter produit ». Vous pouvez ajouter votre produit avec toutes les informations nécessaires qu’il faut, c’est-à-dire le nom du produit, la description, le prix, définir l’image du produit, vous pouvez aussi créer des catégories et classer votre produit dans la catégorie qui lui convient.

Après avoir ajouter votre produit, à partir de votre tableau de bord vous pouvez voir la liste des produits que vous avez ajouté.

Maintenant nous allons afficher nos produits que nous avons créé sur la page d’accueil du site. Pour faire cela, dans le sous menu de « Réglage », cliquez sur « Lecture ». (voir image ci-dessous).

Ensuite sur la page qui s’affiche, cocher « Une page dynamique ». Et comme page d’accueil, sélectionnez « Accueil ». J’ai créé cette page et je l’ai définie comme page d’accueil comme indiqué sur l’image ci-dessous.

Ensuite vous allez modifier la page d’accueil afin qu’elle puisse afficher la liste des produits qui viennent d’être ajouté. Pour faire cela, sur votre tableau de bord, cliquez sur « Pages » et sélectionnez la page qui vous sert de page d’accueil et cliquez sur « modifier ». Ensuite cliquez sur «Text » et saisissez [recent_products] comme indiquez sur l’image ci-dessous. Enfin cliquez sur « mettre à jour » pour enregistrer.

Maintenant vous pouvez voir vos produits que vos avez ajouté sur votre page d’accueil.

Conclusion

En définitive ce qu’il faut retenir c’est que la création de site e-commerce avec wordpress est encore plus simple que vous le pensez. Dans cet article, j'ai éssayer de vous donner un aperçu de ce que que vous pourrez faire. Vous pouvez vous baser sur cet article pour créer votre propre site. Mon objectif était de vous guider.

Pour toutes personnes désirant me contacter pour de l'aide, vous pouvez le faire par mail : allassanekader.kamara@supinfo.com

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels