Comment créer une boutique en ligne fantastique avec WooCommerce, Divi et Bluehost (May 2019)

Sur 74, des millions de sites dépendent de la plate-forme WordPress pour héberger leurs blogs, vendre leurs produits ou simplement écrire leurs réflexions quotidiennes pour le monde entier. Lorsque vous commencez à construire votre site de commerce électronique, vous avez certainement beaucoup de choix à faire, et WordPress y est lié. Laquelle des plates-formes de commerce électronique exceptionnelles choisirez-vous? Envisagez-vous de saisir un thème pour vendre vos produits ou existe-t-il quelqu'un que vous pouvez payer pour construire le site à partir de zéro? Heck, que comptez-vous même vendre sur votre site de commerce électronique? Il y a des milliers à des millions de thèmes WordPress à choisir lorsque vous recherchez la structure frontend et backend pour commencer à vendre en ligne. Presque pareil avec l'hébergement (mais nous préférons Bluehost).

Les meilleurs thèmes incluent des outils de gestion du commerce électronique rapides et faciles pour que vous puissiez télécharger des produits et gérer des choses telles que des remises, des récompenses, des boutons et des pages de produits. Votre thème est également la première chose que les gens verront lorsqu'ils visiteront votre site. Il les guide tout au long du processus et fait la différence entre une personne satisfaite de l'expérience ou non.

En bref, les thèmes WordPress sont cruciaux, et les Divi Le thème WordPress de Elegant Themes est une option plutôt sympathique à considérer. Il peut être utilisé pour un site Web d'entreprise standard, mais il comprend également des intégrations pour la vente en ligne et des processus de vente rapide. Apprenons à créer une boutique en ligne avec le thème WordPress Divi.

Obtenez votre domaine et votre hébergement en premier

La première étape de tout processus de création de site Web consiste à saisir un compte d'hébergement, un nom de domaine et à installer WordPress sur le site. Divi n'est pas différent. Il existe de nombreuses façons d’obtenir un hébergement et des noms de domaine, mais je pense personnellement que Bluehost est l’une des options les plus sûres et les plus fiables (pour plus de détails, consultez mon site Web). Bluehost review).

Ce qui est vraiment cool c'est que Bluehost propose un plan d'intégration WordPress + WooCommerce Cela vous donne tout ce dont vous avez besoin pour commencer à vendre en ligne.

Nous recommandons également fortement le Plan WooCommerce de SiteGround. Il offre en fait de meilleures fonctionnalités que Bluehost et vous pouvez obtenir des offres fantastiques à tout moment. C'est plus une solution d'hébergement géré avec SiteGround.

Comment obtenez-vous commencé?

Allez à Page Bluehost qui parle de l'intégration, puis cliquez sur le bouton Get Started Now.

Gardez à l'esprit que ce service démarre à $ 11.95 par mois et ressemble beaucoup à l'installation d'un site WordPress classique sur un compte d'hébergement Bluehost.

La principale différence est que WooCommerce est déjà installé. De plus, vous recevez ce qui suit:

  • Sécurité positive du commerce électronique SSL
  • Une ligne de support dédiée
  • Au moins X Go de l'espace de site Web
  • Bande passante non mesurée
  • Comptes de courrier électronique 100
  • Domaines gratuits
  • Une adresse IP dédiée

woocommerce_and_wordpress

En allant de l'avant, vous pouvez choisir le plan que vous souhaitez payer et passer à la page suivante.

choisir_votre_plan

Après cela, vous pouvez essayer de nouveaux noms de domaine pour savoir si ce que vous voulez est toujours disponible. Une fois que vous avez trouvé un nom de domaine disponible qui correspond à votre marque, passez à la page suivante.

Enregistrement de domaine BlueHost

Après cela, saisissez toutes vos informations personnelles, les détails de paiement et décidez du type de plan d’hébergement annuel ou mensuel que vous souhaitez utiliser. Cela coûte moins cher au fur et à mesure que vous vous engagez depuis le début.

information_package

En général, vous pouvez simplement ignorer tous les éléments supplémentaires, à moins que vous ne souhaitiez vraiment payer pour sauvegarder votre site ou payer pour la protection de votre vie privée. Vous n'avez généralement pas besoin de cela ou vous pouvez l'obtenir gratuitement plus tard. Après cela, vous pouvez créer vos informations de connexion pour votre compte Bluehost, qui vous amènera ensuite au CPanel. Une fois connecté au CPanel, accédez à la zone Website Builders, cliquez sur WordPress et parcourez le processus pour obtenir WordPress sur votre site.

Constructeurs de site Web BlueHost

Cela ne prend généralement que cinq minutes, car tout est automatisé et il suffit de créer des identifiants de connexion pour se connecter au backend de votre site. Une fois que tout est configuré, il vous donnera le nom de domaine auquel vous souhaitez accéder si vous souhaitez modifier des éléments sur le backend de votre site.

Créer votre boutique en ligne avec Divi

Étape 1

Commencez par aller à la Page produit des thèmes élégants pour le thème WordPress Divi. Cette page offre l'option pour une démo de thème et un bouton de téléchargement rapide. Elegant Themes vend ses thèmes en utilisant une structure de paiement annuelle ou unique, ce qui est intéressant pour les développeurs ayant plusieurs sites clients ou des personnes qui gèrent de nombreux sites de commerce électronique. Vous ne pouvez pas vraiment acheter un seul thème, mais le Plan personnel pour $ 67 par an est similaire à ce que vous pourriez payer pour un thème régulier, et vous pouvez arrêter les paiements annuels si vous ne voulez plus le support. N'hésitez pas à jouer avec le thème avant de vous engager dans le paiement.

Thème WordPress Divi

Étape 2

Une fois inscrit, cliquez sur le bouton de téléchargement du thème. Cela place le thème sous forme de fichier zip sur votre ordinateur. Accédez à l'onglet Apparence dans le backend de votre site WordPress, puis cliquez sur l'option Thèmes.

Nouveau thème Wordpress

Étape 3

Cliquez sur le bouton Ajouter un nouveau.

Wordpress ajoute un nouveau thème

Cliquez sur le bouton Télécharger le thème. Recherchez et téléchargez le fichier zip du thème. Passez par le processus pour activer complètement le thème et vous devriez pouvoir voir le thème sur le front-end de votre site.

Téléchargement du thème Wordpress

Étape 4

Si vous allez à la Page de documentation Divi Theme vous trouverez à peu près tous les outils et fonctionnalités que vous pouvez utiliser sur le thème, mais nous allons nous concentrer principalement sur la mise en place d'un site de commerce électronique. Le thème Divi est entièrement compatible avec WooCommerce pour que vous puissiez afficher tous vos produits.

Ce qui est génial, c'est que l'inscription initiale Bluehost a déjà installé WooCommerce sur votre site WordPress, vous n'avez donc pas à vous soucier de l'installation ou de la configuration. Il devrait déjà être disponible dans votre tableau de bord.

Étape 5

Techniquement, vous avez déjà configuré le site de commerce électronique, mais nous souhaitons ajouter quelques produits pour le faire ressembler à un site de commerce électronique en façade. Allez sur votre tableau de bord WordPress, cliquez sur l'onglet Produits sous WooCommerce et cliquez sur l'élément Ajouter un produit.

WooCommerce ajouter un nouveau produit

Étape 6

Cela ouvre une nouvelle page de produit à remplir. Il ressemble beaucoup à n'importe quel éditeur de page WordPress, sauf que vous pouvez ajouter un nom de produit, une description et une image en vedette pour que les utilisateurs puissent voir à quoi ressemble le produit sur votre site Web.

Le commerce électronique ajoute un nouveau champs de produits

Étape 7

Si vous faites défiler la liste en dessous de la zone de description, vous trouverez toutes les fonctionnalités possibles de WooCommerce. N'hésitez pas à modifier des éléments tels que les numéros de référence, l'inventaire, la tarification, l'expédition et les attributs. Les fonctionnalités sont beaucoup trop vastes pour que je les décrive toutes ici, mais vous pouvez aller au Page de documentation WooCommerce pour comprendre tout ce que vous pouvez configurer sur votre site de commerce électronique.

Fonctionnalités WooCommerce

Étape 8

Le but de tout cela est de créer une page d'accueil ou une page régulière contenant tous vos produits lorsque des personnes se présentent sur votre site. Par conséquent, vous devez aller à Pages> Ajouter nouveau sur le côté gauche de votre tableau de bord WordPress.

Wordpress nouvelle page

Étape 9

Créez un titre pour votre page. Cliquez sur le bouton Utiliser le générateur de pages en haut, puis sur la zone Insérer les modules pour inclure un en-tête de largeur complète. Vous n'avez pas à choisir un en-tête de largeur complète, mais nous allons pour ce tutoriel.

Générateur de mots wordpress

Étape 10

Cliquez sur le bouton Full Width Header.

Ajouter un en-tête

Étape 11

Remplissez les détails pour le titre de votre site, le texte du sous-titre et la couleur du texte. Vous pouvez même changer le Label Admin, qui est principalement pour votre propre référence. Appuyez sur le bouton Enregistrer lorsque vous avez terminé.

Personnalisation d'en-tête

Étape 12

Appuyez sur les trois barres situées à gauche du module d'en-tête Full Width pour modifier d'autres paramètres.

WordPress configuration woocommerce

Étape 13

Ici, vous pouvez donner à l'en-tête une belle couleur de fond et même inclure une vidéo pour votre entreprise.

Tweak ces boutons autour

Étape 14

Maintenant que l'en-tête est complet, nous pouvons inclure le module de commerce électronique en cliquant sur la zone Insérer les colonnes.

Configuration du commerce électronique Wordpress

Étape 15

Choisissez le nombre de colonnes souhaité, puis cliquez sur l'option Insérer les modules qui apparaît. Sélectionnez le bouton Boutique en bas.

Configuration du commerce électronique Wordpress

Étape 16

N'hésitez pas à modifier la manière dont vous souhaitez afficher vos produits. Vous souhaiterez peut-être afficher vos produits récents, ainsi que les éléments 12 sur la page, quelques colonnes et comment vous souhaitez les commander. Cliquez sur le bouton Enregistrer.

Configuration du commerce électronique Wordpress

Étape 17

Une fois cette opération terminée, vous pouvez appuyer sur le bouton Aperçu ou Publier pour afficher les modifications sur le frontend. Comme vous pouvez le voir, les produits apparaissent bien, et vous pouvez toujours revenir pour modifier vos produits ou vos paramètres de vitrine sur le backend WordPress. Toutes nos félicitations!

Si vous avez des questions sur la configuration du Thème WordPress Divi, s'il vous plaît laissez-nous savoir dans la section des commentaires ci-dessous.

Divi Évaluation: 5.0 - Révision par

Catalin Zorzini

Je suis un blogueur en conception de sites Web et j'ai lancé ce projet après quelques semaines de difficultés à trouver la meilleure plateforme de commerce électronique pour moi-même. Découvrez mon courant top Constructeurs de sites de commerce électronique 10.