Accueil » Tutoriels » Comment créer une boutique en ligne ? Utiliser WordPress et WooCommerce

Comment créer une boutique en ligne ? Utiliser WordPress et WooCommerce

Dans ce tutoriel, vous allez apprendre à configurer une boutique en ligne dans laquelle vous pouvez lister et vendre des produits physiques.

Remarque : Si vous envisagez de vendre des services (au lieu des produits), il est recommandé de créer un site Web d’entreprise (et non de boutique en ligne).

Si vous envisagez de vendre plus de 10 produits différents, continuez à lire cet article.

Utilisez WordPress + WooCommerce pour une boutique en ligne (GRATUIT)

En une phrase, WooCommerce est le meilleur moyen de transformer votre site WordPress en une boutique e-commerce entièrement fonctionnel. Voici les détails :

  • Techniquement parlant, WooCommerce est une extension WordPress. Il doit être installé et activé comme toute autre extension pour fonctionner.
  • C’est gratuit et open source, tout comme WordPress, vous n’avez pas besoin de licences, les éléments n’expirent pas et personne ne vient demander de l’argent à tout moment.
  • C’est l’extension e-commerce le plus populaire pour WordPress.
  • C’est (sans doute) l’extension la plus riche en fonctionnalités.
  • Vous pouvez l’installer et la configurer vous-même.
  • La configuration est rapide. Habituellement, ça ne dure que seulement un après-midi.
  • Elle fonctionne avec n’importe quel design/thème que vous avez actuellement sur votre site WordPress. Cela signifie que vous n’avez pas besoin d’abandonner le design actuel de votre site Web.
  • En bref, WooCommerce vous donne simplement tout ce dont vous pourriez avoir besoin pour créer une boutique e-commerce de haute qualité avec WordPress.

Quel produit pouvez-vous vendre avec WordPress + WooCommerce ?

Hmm.. Beaucoup :

  • Les produits numériques (par exemple, logiciels, téléchargements, livres électroniques),
  • Les produits physiques,
  • Les prestations de service,
  • Les réservations (par exemple pour les rendez-vous ou toute autre chose pouvant être réservée),
  • Les abonnements,
  • Les produits des autres personnes/enseignes – en tant qu’affilié,
  • Les personnalisations (par exemple, des personnalisations supplémentaires au-dessus de vos fiches produits),
  • et plus encore.

En d’autres termes, vous pouvez gagner de l’argent avec votre site Web.

On peut même de dire que WooCommerce vous permet de vendre tout ce qui peut avoir une étiquette de prix qui lui est assignée. En plus de cela, n’importe qui peut l’utiliser (si vous avez déjà réussi à gérer le lancement d’un site WordPress, alors vous allez pouvoir gérer WooCommerce).

Comment construire une boutique en ligne avec WordPress et WooCommerce ?

Remarque : Le but de cette partie du guide est de vous montrer la méthode la plus simple pour créer une boutique e-commerce fonctionnelle sur WordPress, afin que vous puissiez mettre votre boutique en ligne dès que possible. C’est pourquoi vous devez vous concentrer sur les choses essentielles et sauter les aspects les plus avancés.

ETAPE 1 : Obtenir un nom de domaine et un hébergement Web

Afin de créer une boutique en ligne, ou tout autre type de site Web, vous aurez besoin de deux choses :

  • Le nom de domaine est l’adresse unique de votre boutique sur le Web. Quelque chose comme VOTREBOUTIQUE.com
  • L’hébergement Web est essentiellement un ordinateur distant qui stocke votre site Web et le sert ensuite à quiconque veut le visiter.

Il y a des centaines de différents fournisseurs d’hébergement/domaine, mais vous pouvez généralement recevoir les deux sur Bluehost.com. Ils offrent un hébergement web abordable, un nom de domaine gratuit et la fiabilité. Ils sont également l’un des rares hébergeurs (officiels) recommandés par WordPress.org. Le coût total est de 2,95 $/mois. Du coté francophone, nous vous recommandons Ex2.com qui possèdes une excellente réputation en ses basant sur les avis des ses clients.

Pour commencer, il vous suffit d’aller sur Bluehost.com, et cliquez sur le bouton « Démarrer ».

Cela vous amènera vers une page où vous pouvez sélectionner un plan d’hébergement pour votre boutique. Vous pouvez commencer avec l’option la moins chère, étiquetée « basique »:

La prochaine étape consiste à choisir un nom de domaine pour votre nouveau magasin en ligne.

Cela nécessite un peu de remue-méninges. Mais en général, vous voulez que votre nom de domaine soit unique, facile à retenir et accrocheur. En outre, si vous avez déjà créé une entité commerciale pour votre boutique, vous devriez peut-être utiliser ce nom de domaine.

Une fois votre choix de domaine effectué, vous pouvez finaliser la configuration et payer les frais d’hébergement initiaux.

Félicitation ! Vous venez d’avoir votre propre nom de domaine et un plan d’hébergement pour l’accompagner.

ETAPE 2 : Installer WordPress (GRATUIT)

L’étape suivante marque officiellement le début de votre aventure avec WordPress – vous allez installer WordPress sur votre compte d’hébergement. Cela peut sembler difficile, mais ce n’est pas le cas. Tout ce que vous devez faire c’est d’accéder à votre panneau d’utilisateur Bluehost (Bluehost vous enverra un lien dans l’email de confirmation) – généralement disponible sur my.bluehost.com.

Une fois arrivé là, faites défiler jusqu’à ce que vous voyez une icône intitulée « Installer WordPress » :

Cliquez dessus et suivez les instructions à l’écran. Vous passerez par tout le processus étape par étape, donc il n’y a pas de quoi s’inquiéter.

À ce stade, vous devriez avoir un site Web WordPress vierge installé.

  • Vous pouvez le voir en accédant à votre nom de domaine principal (par exemple, VOTREBOUTIQUE.com)
  • Vous pouvez vous connecter au panneau d’administration en accédant à VOTREBOUTIQUE.com/wp-admin

Maintenant, il est temps de transformer ce site WordPress vide en une boutique e-commerce entièrement fonctionnelle construit avec la superbe extension WooCommerce.

ETAPE 3 : Installer l’extension WooCommerce (GRATUIT)

Comme toutes les extensions WordPress, le plaisir commence en naviguant sur votre Tableau de bord WordPress, puis allez sur Extensions et Ajouter nouveau. Maintenant, tapez « woocommerce » dans le champ de recherche. Vous verrez WooCommerce comme premier résultat de recherche :

Cliquez simplement sur le bouton « Installer maintenant » à côté de l’extension.

Après quelques secondes, le texte sur le bouton changera pour « Activer ». Cliquez dessus.

À ce stade, vous verrez l’assistant de lancement et de configuration de WooCommerce sur l’écran. Cette élément rend le processus plus facile et vous guide à travers tout. Pour commencer, cliquez sur « Lancer ».

Créer les pages essentielles de la boutique

Les boutiques en ligne sont un type de site web particulier, et ils ont besoin de certaines pages particulières pour fonctionner correctement. La première étape de l’assistant WooCommerce consiste à créer ces pages pour vous :

  • « Boutique » – c’est là que vos produits vont être affichés.
  • « Panier » – c’est le panier où vos clients peuvent aller pour ajuster leur commande avant de procéder au paiement.
  • « Paiement » – c’est là que les clients peuvent choisir la méthode d’expédition/livraison et payer pour tout ce qu’ils ont acheté.
  • « Mon compte » – c’est une sorte de page de profil pour les clients enregistrés (ils pourront voir leurs commandes passées et gérer d’autres détails).

A ce stade, tout ce que vous devez faire de l’assistant WooCommerce est de cliquer sur le bouton « Continuer ». WooCommerce va configurer ces pages pour vous.

Configurer les paramètres régionaux

Les paramètres régionaux sont une partie cruciale de la configuration de votre boutique. Ces quelques paramètres définissent l’origine, la devise et les unités préférées de votre établissement :

Une fois que vous avez terminé, cliquez à nouveau sur « Continuer ».

Comprendre la taxe de vente

L’impôt est de loin la partie la moins excitante dans la gestion d’une boutique e-commerce, mais c’est aussi quelque chose que vous ne pouvez pas ignorer, malheureusement. Quoi qu’il en soit, vous allez être content de voir que WooCommerce vous aide aussi avec cette partie.

D’abord, vous pouvez choisir si vous allez expédier des biens physiques ou non. Si vous cochez la case, WooCommerce préréglera les détails d’expédition restants dans les paramètres.

Ensuite, l’impôt. WooCommerce a un module de taxes très soigné, et la meilleure chose à ce sujet est qu’il vous aide à calculer les taux d’imposition en fonction de l’emplacement de votre boutique (c’est ce que vous avez défini à l’étape précédente).

Donc, si vous allez facturer la taxe de vente (dans la plupart des cas), il suffit de cocher la case principale de taxe. Dès que vous faites cela, un nouvel ensemble de boîtes apparaîtra et vous informe de ce qui va se passer ensuite.

Remarque : Même si WooCommerce pré-remplit les paramètres de taxe pour vous, vous devez toujours vérifier les règles fiscales actuelles auprès de vos autorités locales, surtout si vous n’êtes pas aux États-Unis. Pour en savoir plus sur la façon dont WooCommerce gère les taxes de vente, lisez ceci. Vous pouvez tout changer plus tard, donc ne vous inquiétez pas si vous n’êtes pas sûr des règles en ce moment.

Cliquez sur « Continuer ».

Choisissez une Méthode de Paiement (PayPal est recommandé)

Être en mesure d’accepter les paiements en ligne est au cœur de toute boutique e-commerce, et WooCommerce offre vraiment beaucoup en termes de solutions disponibles.

Voici ce que vous allez choisir lors de l’installation :

Deux des options de paiement les plus populaires sont au sommet – PayPal et Stripe – et il est fortement recommandé d’intégrer les deux sur votre site. Cliquez simplement sur les cases à cocher correspondantes.

Vous pouvez également choisir d’autres méthodes de paiement qui semblent avoir du sens, et il y aura encore plus d’options disponibles plus tard dans votre panneau de paramètres WooCommerce.

Remarque : Pour que les paiements en ligne fonctionnent, vous devez vous inscrire avec PayPal ou Stripe séparément. Les paramètres dans WooCommerce sont uniquement pour intégrer vos comptes PayPal et Stripe existants avec votre nouveau site e-commerce.

Encore une fois, cliquez sur « Continuer » lorsque vous avez terminé.

La prochaine étape est juste un écran de confirmation que tout s’est bien passé. A ce stade, la configuration de base de votre site est terminée – ainsi, vous venez de construire une boutique e-commerce vierge avec WooCommerce !

L’étape suivante consiste à ajouter des produits. Voici comment faire :

ETAPE 4 : Ajoutez votre premier produit

Pour vraiment être en mesure de dire que votre boutique est opérationnelle, vous avez besoin de certains produits dans la base de données (ou services, ou téléchargements, ou quoi que ce soit que vous voulez vendre).

Pour commencer à travailler sur les produits, accédez à votre tableau de bord, puis allez sur Produits et Ajouter un produit :

Ce que vous allez voir est un écran d’édition de contenu WordPress classique. Voici ce que vous voyez :

  1. Le nom du produit
  2. La description principale du produit. Ce grand champ vous permet d’entrer autant d’informations sur le produit que vous le souhaitez. Et puisque c’est WordPress, vous pouvez y mettre non seulement du texte simple mais aussi des images, des colonnes, des en-têtes, même des vidéos et d’autres médias. Principalement, tout ce qui peut vous convenir.
  3. La section des données du produit central. Celui-ci vous permet de définir le type de produit que vous voulez ajouter, s’il s’agit d’un produit téléchargeable ou virtuel (les services sont également considérés comme des produits virtuels). Dans le cadre de cette section centrale, vous obtenez également des onglets pour différents paramètres du produit :
  • Général. C’est ici que vous fixez les prix et les taxes.
  • Inventaire. WooCommerce vous permet de gérer les niveaux de stock.
  • Livraison. Définissez le poids, les dimensions et le coût d’expédition.
  • Produits liés. Idéal pour mettre des choses comme les ventes incitatives et les ventes croisées. (Pensez au fait que, « Les clients qui ont acheté ceci ont également acheté cela. »)
  • Les attributs. Définissez les attributs de produit personnalisés ici. Par exemple, si vous vendez des chemises, vous pouvez définir des couleurs alternatives ici.
  • Avancée. Paramètres additionnels. Non essentiel.
  1. Brève description. C’est le texte qui s’affiche sur la page du produit sous le nom. Elle fonctionne juste comme un bref résumé de la nature du produit.
  2. Catégories de produits. Elles définissent les groupes de produits similaires. Par exemple, « chapeaux ». Elles fonctionnent comme les catégories WordPress standard.
  3. Étiquettes de produit. Un moyen supplémentaire pour vous aider à organiser votre base de données de produits. Elles fonctionnent comme les étiquettes WordPress standard.
  4. Image du produit. L’image principale du produit.
  5. Galerie de produits. Des images de produits supplémentaires pour mettre en valeur ses impressionnants caractères.

De plus, la première fois que vous visiterez ce panneau, WooCommerce affichera quelques infobulles très pratiques pour expliquer le but de chaque champ :

Une fois que vous avez terminé tout ce qui précède, cliquez simplement sur le gros bouton Publier, et votre premier produit vient d’être ajouté !

Après avoir ajouté une poignée de produits à votre base de données, la section des produits dans le tableau de bord devrait ressembler à ceci :

ETAPE 5 : Choisissez un thème pour votre boutique en ligne (GRATUIT)

Il y a une très bonne raison pour laquelle il fallait d’abord maîtriser la façon d’ajouter les produits sur votre boutique, avant de discuter de l’aspect visuel de tous les éléments. Très franchement, sans aucun produit dans la base de données, vous ne seriez pas en mesure de voir les pages individuelles de la boutique sous une forme représentative. Dans ce cas, vous ne seriez pas en mesure de vous assurer que tout semble correct.

Mais maintenant que vous avez ajouté la plupart de vos produits, vous pouvez vous assurer que les choses sont en ordre d’un point de vue purement visuel.

WooCommerce vs votre thème actuel

Par défaut, WooCommerce fonctionne avec n’importe quel thème WordPress. C’est une excellente nouvelle, surtout si vous avez déjà choisi votre design et que vous voulez rester fidèle à ce dernier. Alternativement, vous pouvez y aller avec des thèmes spéciaux optimisés WooCommerce. Ces thèmes sont livrés avec des styles prédéfinis qui font que tous les éléments WooCommerce ont fière allure.

Voici une recommandation :

Le thème officiel de WooCommerce – et celui qui est le plus susceptible de fonctionner correctement – s’appelle Storefront. La version par défaut est gratuite, et cela devrait suffire pour vous lancer.

Alternativement, vous pouvez visiter la section e-commerce sur ThemeForest – le plus grand répertoire de thèmes WordPress premium sur le web.

Peu importe si vous avez décidé de vous en tenir à votre thème actuel ou si vous avez opté pour quelque chose de nouveau et d’optimisé pour WooCommerce, vous devez vous assurer que les pages individuelles de la boutique sont correctement mises en valeur. Faites-le maintenant :

Les règles de design d’une boutique e-commerce

Découvrez d’abord les quelques points importants, avant d’entrer dans le vif du sujet.

Principalement, Comment faire un bon (lire : rentable) design pour une boutique e-commerce ? Voici les paramètres les plus cruciaux :

  • Le design doit être claire et en aucune façon confondue. Un visiteur qui est confus n’achètera rien.
  • Le bloc de contenu central doit attirer l’attention du visiteur juste après son arrivée sur le site. Ce bloc central est l’endroit où les produits seront affichés.
  • Des barres latérales réglables. Vous devez être en mesure de sélectionner le nombre de barres latérales dont vous avez besoin, et également désactiver la barre latérale pour certaines pages (plus de détails sur cela plus tard).
  • Responsive et optimisé pour les mobiles. La recherche indique qu’environ 80% des personnes sur Internet possèdent un smartphone. Et selon une autre étude, 61% de vos visiteurs mobiles partiront immédiatement et iront chez vos concurrents s’ils ont une expérience frustrante de navigation sur mobile. En d’autres termes, il est crucial de s’assurer que votre site est optimisé pour le mobile.
  • Une bonne structure de navigation. Vous devez avoir des menus clairs et faciles à comprendre, pour que vos visiteurs puissent trouver la page qu’ils recherchent.

En gardant ce qui à été mentionné ci-dessus à l’esprit, voici ce que vous pouvez faire avec les pages individuelles de votre boutique :

La page de votre boutique

C’est ici que se trouve la liste principale de vos produits. Si vous avez suivi l’assistant de configuration de WooCommerce, cette page peut être trouvée sur VOTREDOMAINE.com/boutique

C’est une page WordPress classique – vous pouvez le modifier via le tableau de bord WordPress puis Pages.

Les choses qui valent la peine d’être faites :

  • Ajoutez une copie qui encouragera vos visiteurs à acheter avec vous.
  • Décidez si vous voulez avoir la barre latérale sur la page. Ceci peut être effectué via les propres modèles de pages de votre thème. Par exemple, Storefront vous permet de passer en pleine largeur :

Le trait principal de la page Boutique est que juste en dessous du contenu standard, elle comporte une partie personnalisée où elle affiche vos listes de produits :

Comme vous pourrez le constater, de belles images de produits sont la clé, et c’est la première chose que vous devriez obtenir. En d’autres termes, vous devriez probablement travailler sur vos images de produits plus que sur toute autre chose.

WooCommerce vous permet également d’afficher vos produits de différentes façons sur cette page.  Pour ce faire, connectez-vous sur votre tableau de bord WordPress, allez sur WooCommerce puis Réglages et Produits, ensuite dans la section Affichage :

… vous pouvez choisir d’afficher des produits individuels ou des catégories de produits sur la page Boutique. Sélectionnez ce qui vous convient le mieux et enregistrez les paramètres.

Pages individuelles de produits

Pour les voir, il vous suffit de cliquer sur une fiche produit de la page Boutique.

Si vous utilisez un thème de qualité, vous ne devriez rencontrer aucune difficulté sur cette page en particulier. Principalement, la seule chose que vous pouvez faire est d’ajuster la quantité de texte que vous utilisez pour les descriptions de produits individuels, juste pour vous assurer que tout correspond visuellement et qu’il n’y a pas de places vides qui pourraient dérouter l’acheteur.

Voici mon exemple avec le thème Storefront (aucune personnalisation supplémentaire effectuée) :

Panier d’achat

Une autre page cruciale peut être ajustée via Tableau de bord, puis Pages.

La seule chose recommandée ici est d’opter pour la mise en page pleine largeur. Vous ne devez pas donner à l’acheteur trop d’options sur cette page, en dehors de procéder au paiement.

Paiement

Paiement est peut-être la page la plus importante de tous. C’est là que vos acheteurs finalisent leurs commandes et effectuent les paiements. Il n’est pas vraiment recommandé de faire des modifications dans cette page à part une : La page de paiement doit absolument être pleine largeur. La seule façon acceptable de modifier cette page pour l’acheteur devrait lui permet de finaliser sa commande, et de ne pas le laisser distrait par les éléments disponibles dans la barre latérale.

Encore une fois, vous pouvez le faire via Tableau de bord, puis allez sur Pages (il suffit de répéter le processus que vous avez suivi avec la page Boutique).

En dehors de cela, l’apparence par défaut de la page Paiement est excellente :

À ce stade, vous avez essentiellement terminé d’ajuster la conception de votre boutique, examinez maintenant les possibilités d’étendre les fonctionnalités de la boutique.

ETAPE 6 : Extension de WooCommerce – comment faire ?

Un autre élément qui fait que WooCommerce soit une solution e-commerce aussi impressionnante est qu’il y a des dizaines ou même des centaines d’extensions et de modules disponibles pour cela.

Voici une liste de quelques-uns des plus utiles :

Les extensions WooCommerce

A commencer par les extensions – les extensions officielles qui ont été approuvés par l’équipe de WooCommerce.

Pour voir tout ce qui est disponible, vous pouvez aller sur cette page.

Ce catalogue est vraiment vaste et impressionnant. Mais il ne faut pas que vous vous sentiez intimidé par cela. Vous n’avez certainement pas besoin de toutes ces extensions. Vous devez simplement traiter cette liste comme un buffet de toutes sortes – choisissez tout ce qui vous semble bon.

Quelques extensions méritant vos appréciations :

  • Passerelles de paiement. Ces extensions vous permettent d’accepter plus de méthodes de paiement en plus de PayPal standard. En général, plus vous avez de moyens de paiement (ces passerelles sont souvent payantes), mieux c’est.
  • Extensions d’expédition. Ceux-ci seront utiles si vous souhaitez intégrer automatiquement des tarifs d’expédition officiels d’entreprises comme UPS ou FedEx à votre boutique.
  • Extensions de comptabilité. Intégrez l’outil de comptabilité de votre choix sur votre boutique WooCommerce.
  • Réservations WooCommerce. Permettent aux clients de réserver des rendez-vous pour des services sans quitter votre site.
  • Abonnements WooCommerce. Laissez les clients s’abonner à vos produits ou services et payer des frais hebdomadaires, mensuels ou annuels.
  • Numéro de TVA UE. Pour ceux qui opèrent dans l’UE.
  • TaxJar. Mettez votre taxe de vente sur le pilote automatique.

Alternativement, si vous ne voulez pas dépenser de l’argent sur de nouvelles extensions, vous pouvez naviguer dans la catégorie gratuite. Il y a plus d’élément qu’il n’en faut pour vous occuper.

Les extensions qui suralimentent votre boutique e-commerce

En mettant de côté les extensions WooCommerce, vous pouvez également utiliser d’autres extensions WordPress pour renforcer votre boutique. Voici ce que vous devriez obtenir :

Créer une Boutique en Ligne en bref

Comme vous pouvez le constater, le degré de difficulté à créer votre propre boutique en ligne avec WordPress n’est pas trop élevé, mais il vous faudra encore un certain temps pour passer à travers toutes les étapes ci-dessus … probablement un après-midi ou deux.

Mais c’est tout de même incroyable étant donné que, il y a cinq ans, il fallait embaucher un développeur et payer environ 5 000 $ pour que quelque chose de semblable soit créé. Maintenant, vous pouvez tout faire vous-même.

Quoi qu’il en soit, pour vous aider à accomplir toutes les tâches requises, voici une liste de contrôle détaillée :

Avant de commencer

  • Obtenez un nom de domaine, inscrivez-vous pour un hébergement Web, obtenez une installation de WordPress en cours d’exécution.
  • Assurez-vous que votre nouveau site WordPress vide fonctionne correctement (pas d’erreurs évidentes apparaissant, etc.).

Installer WooCommerce

  • Installez et activez l’extension principale WooCommerce.
  • Passez par l’assistant de configuration de WooCommerce, en portant une attention particulière à :
  • L’obtention des quatre pages requises créées (Boutique, Panier, Paiement, Mon compte).
  • La configuration des paramètres régionaux de la boutique
  • La mise en place de la taxe de vente et de l’expédition.
  • Au choix des méthodes de paiement initiales

Les produits

  • Ajoutez la plupart (ou la totalité) de vos produits ou catégories de produits dans la boutique.

Le design

  • Sélectionnez le bon thème WordPress pour votre boutique e-commerce. Soit vous y allez avec votre thème existant, soit vous parcourez les autres possibilités. Passez en revue les règles de conception de boutique e-commerce en faisant cela.
  • Ajustez votre page de boutique.
  • Ajustez les pages de produit individuelles.
  • Ajustez la page du panier.
  • Ajustez la page de paiement.

Les Extensions WooCommerce

  • Installez les passerelles de paiement que vous souhaitez utiliser.
  • Considérez certaines des extensions d’expédition.
  • Envisagez une extension de comptabilité.
  • Parcourez d’autres extensions, ainsi que la catégorie gratuite.

Les Extensions WordPress

  • Envisagez d’installer toutes les extensions qui vont surcharger votre boutique e-commerce :
  • Yoast SEO
  • YoastWooCommerce SEO
  • WooCommerce Multilingual
  • Contact Form 7
  • UpdraftPlus
  • Social Share Buttons par GetSocial
  • MonsterInsights
  • iThemes Security
  • W3 Total Cache

Check Also

Comment construire des applications Vue.js complexes à grande échelle avec Vuex

Il est si facile d’apprendre et d’utiliser Vue.js que n’importe qui peut créer une application …