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

Plus d'un million de sites 74 dépendent de la plate-forme WordPress pour héberger leurs blogs, vendre leurs produits ou simplement rédiger leurs réflexions quotidiennes à la vue du monde. Quand vous commencez à construire votre site de commerce électronique vous avez certainement beaucoup de choix à faire, et WordPress est lié à cela.

Lequel du standout plates-formes de commerce électronique allez-vous choisir? Envisagez-vous de choisir un thème pour vendre vos produits ou y a-t-il une personne que vous pouvez payer pour créer le site à partir de rien? Heck, que comptez-vous même vendre via votre site de commerce électronique?

Note de la rédaction: Ce billet a été publié pour la première fois en janvier, 15 et 2015. Il a été complètement repensé et mis à jour pour plus de précision et d’exhaustivité.

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 SiteGround or 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 Thème WordPress de thèmes élégants est une option plutôt agréable à considérer. Il peut être utilisé pour un site Web professionnel standard, mais il inclut également des intégrations pour la vente en ligne et les processus de vente rapides. Apprenons à créer une boutique en ligne avec le thème Divi WordPress.

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 SiteGround est l'une des options les plus sûres et les plus fiables. (Pour plus de détails, consultez notre guide complet Examen de SiteGround).

Ce qui est vraiment cool, c’est que SiteGround propose une Hébergement WooCommerce géré ensemble de services avec à peu près tout ce dont vous avez besoin pour commencer à vendre en ligne. Dans le package, vous pouvez vous contenter de la Plan de démarrage pour les débutants, Plan de croissance pour les entreprises en croissance, ou GoGeek pour les magasins WooCommerce établis.

Chacune de ces offres offre des fonctionnalités avancées pour optimiser votre site WooCommerce à un prix raisonnable.

Cela dit, un autre service d'hébergement que nous recommandons vivement aux magasins Divi WooCommerce est BlueHost. Bien que les fonctionnalités ici ne correspondent pas à celles de SiteGround, vous bénéficiez toujours d'un hébergement axé sur WooCommerce via son package de commerce électronique WordPress. Les plans peuvent facilement gérer un magasin Divi WooCommerce, mais malheureusement, vous n’obtiendrez pas de services gérés.

👉 Pour plus de clarté, passons à SiteGround…

Comment commencez-vous?

Allez à Hébergement WooCommerce géré par SiteGround page, sélectionnez un plan idéal, puis cliquez sur Obtenez un plan.

A mon avis, le Plan GoGeek semble être l’option la plus appropriée car elle prend en charge un nombre illimité de sites Web WooCommerce dotés de fonctionnalités avancées de commerce électronique. Outre une plus grande puissance de serveur, vous bénéficiez d'une assistance prioritaire, d'une mise en scène WordPress, d'une sauvegarde à la demande et de ressources super-chacher, ainsi que de transferts de site gratuits et de CDN Cloudflare, entre autres fonctionnalités pratiques.

👉 Et en ce qui concerne les allocations de ressources, ce plan prend en compte:

  • Boîte aux lettres 6GB
  • Stockage de base de données 1 GB
  • Stockage SSD
  • Transfert de données non mesuré
  • Espace de stockage 30GB
  • Jusqu'à 100,000 visites mensuelles

Gardez à l'esprit que ce service commence à 11.95 $ par mois, et cela ressemble beaucoup à la manière dont vous installeriez un site WordPress normal sur un compte d’hébergement BlueHost.

Mais rappelez-vous, c'est un prix spécial pour les débutants. Attendez-vous à ce que celui-ci augmente à 34.95 lors des renouvellements futurs, ce qui reste une charge raisonnable si vous tenez compte de toutes les fonctionnalités que vous obtenez sur le long terme.

Maintenant, une fois que vous avez sélectionné votre plan préféré, SiteGround vous dirigera vers sa page d'enregistrement de domaine. Si vous possédez déjà un domaine, choisissez la deuxième option et entrez ses détails. Sinon, procédez à l'enregistrement du nouveau nom de domaine à $ 15.95 par an.

Vient ensuite l’étape finale, au cours de laquelle vous choisissez vos options d’hébergement préférées et saisissez vos informations de paiement et vos informations personnelles avant de créer le compte.

Bien sûr, il s’agit là de choses de base que vous avez déjà maintes fois manipulées. Donc, vous ne devriez pas avoir de difficulté à entrer votre numéro de téléphone, pays, nom, email, mot de passe du compte, etc.

La partie paiement nécessite la saisie des détails de votre carte de crédit. Vous pouvez procéder soit Découvrez, MasterCard or Visa

Cependant, et assez intéressant, SiteGround n'énumère pas PayPal, malgré sa popularité croissante parmi les marchands WooCommerce. Mais heureusement, il s'avère qu'ils peuvent accepter les paiements PayPal, bien qu'indirectement.

Si tel est votre mode préféré, laissez simplement les champs vides et contactez les agents commerciaux de SiteGround via l'outil de chat en direct. Ils vous aideront à mener à bien le processus via PayPal.

La dernière section contient plusieurs options pour votre service d'hébergement, y compris l'emplacement de votre centre de données préféré, ainsi que la période d'abonnement.

Désormais, pour réduire la distance de transfert de données entre les serveurs de Siteground et les visiteurs de votre site WooCommerce, choisissez l'emplacement du centre de données le plus proche de votre marché cible.

Ensuite, choisissez les services supplémentaires que vous souhaitez inclure dans votre forfait, et le tour est joué! C'est tout ce qu'il faut pour créer un compte Siteground.

Une fois que vous avez terminé, connectez-vous à votre compte et accédez directement à votre zone cPanel. Vous trouverez un programme d'installation automatique WordPress par défaut. Alors, sélectionnez-le, entrez vos informations de connexion WordPress et cliquez sur le bouton d'installation.

Vous remarquerez que le processus d’installation de WordPress prend quelques secondes car tout est automatisé. Et une fois que tout est configuré, SiteGround vous fournira le nom de domaine auquel vous pourrez accéder si vous souhaitez modifier des éléments sur le backend de votre site.

Créer votre boutique en ligne avec Divi

Qu'est-ce que Divi?

Ok, si vous ne l'avez pas essayé, je parie que vous en avez déjà entendu parler. Divi n’est pas un thème ordinaire de WooCommerce. En fait, c'est l'un des thèmes WordPress les plus populaires sur les thèmes élégants. Et, chose intéressante, Divi est Thème élégantproduit phare de.

Alors, quelle est la particularité de ce thème? Et y a-t-il quelque chose d'exceptionnel dans WooCommerce de Divi?

Contrairement aux thèmes WordPress classiques, Divi est plutôt un pack complet. Cela signifie qu'il associe des fonctionnalités de thème standard à des fonctionnalités supplémentaires utiles pour les magasins Divi WooCommerce.

ce qui est divi

Ne vous méprenez pas cependant. Bien que le soutien de Divi au WooCommerce soit l'objectif principal ici, le thème est capable de beaucoup plus que cela. Essentiellement, Divi peut être intégré de manière transparente à n’importe quel type de site, grâce à sa vaste gamme de présentations de sites Web. Pas seulement le commerce électronique.

Pour couronner le tout, Divi possède son propre plug-in intuitif de constructeur de pages WordPress. Vous pouvez l’utiliser pour personnaliser librement votre boutique Divi WooCommerce sans aucun codage.

En fait, Divi a été développé pour les débutants. Donc, vous pouvez vous attendre à trouver un panneau de commande soigné avec presque aucune courbe d'apprentissage. Il ne faut que quelques minutes pour comprendre l'ensemble de l'écosystème Divi, le configurer et personnaliser les présentations WooCommerce de Divi.

👉 En fin de compte, vous pourrez capitaliser sur Divi'S:

  • Tableau de dispositions personnalisables pour tout type de site Web WordPress, y compris les magasins en ligne WooCommerce.
  • Page Builder, facile à utiliser, qui fournit une foule d’éléments de site Web et de capacités de conception.
  • Processus de personnalisation flexible sans aucune forme de codage. Même les novices peuvent facilement configurer et modifier des magasins Divi WooCommerce entièrement fonctionnels.
  • Intégration WordPress simple. Divi est l’un des rares thèmes WordPress externes pouvant être installés de manière transparente sans ajustements complexes.
  • Modèles WooCommerce optimisés pour le commerce électronique.

Divi Drag and Drop Page Builder

Comme nous l'avons dit, Divi se décline en deux versions. Lorsque vous payez pour l'adhésion sur Thèmes élégants, vous trouverez le thème standard de Divi sur le tableau de bord, accompagné du plugin Divi WordPress Page Builder.

Toutefois, il convient de noter que ce constructeur n'est pas exclusivement lié au thème Divi. Il s'agit d'un plug-in supplémentaire pour chaque thème acquis à partir de thèmes élégants.

Cela dit, Divi WordPress Page Builder est un éditeur à glisser qui offre des fonctionnalités de personnalisation avancées. Il vous permet de déplacer et de définir des éléments, des colonnes, des lignes et des modules sans aucune expérience de codage. En d’autres termes, c’est le type de constructeur Divi WooCommerce débutant espère obtenir.

paramètres divi

Mais ne vous y trompez pas. Bien que Divi Page Builder cible les débutants, il s'agit d'un éditeur qui facilite également la tâche des développeurs expérimentés. Ils peuvent systématiquement associer leurs fonctionnalités visuelles à des contrôles CSS pour pousser leurs sites Web Divi WooCommerce à un niveau supérieur.

Venez y penser, cependant vous n'avez pas besoin d'un développeur pour concevoir tous les éléments de votre magasin Divi WooCommerce. Vous pouvez compter uniquement sur les fonctionnalités visuelles.

Et tu sais quoi?

Divi tente même de rendre le processus beaucoup plus facile en étiquetant et en codant par couleur ses modules de disposition.

Et en parlant de cela, une autre disposition notable ici est la simplification générale du processus de personnalisation de la présentation de Divi. Si vous souhaitez introduire une nouvelle section, par exemple, un simple clic devrait suffire. Ensuite, dupliquer, supprimer et insérer des modules pour votre boutique Divi WooCommerce ne vous prendra que quelques clics de bouton.

Pendant ce temps, la fenêtre d'édition de Divi affichera les modifications de mise en page de votre site en temps réel. Vous serez en mesure de suivre chaque réglage de manière visuelle et de voir son impact sur la conception globale des perspectives de votre magasin Divi WooCommerce.

Modèles de site Web Divi WooCommerce prédéfinis

Pour vous épargner le processus pénible de créer un site Web à partir de rien, le thème Divi WordPress est fourni avec une foule de modèles de sites prédéfinis. Et comme vous avez peut-être besoin de différentes options de mise en page du même modèle, Divi propose ses conceptions de sites Web sous forme de packs complets. Par conséquent, vous obtenez différentes dispositions et couleurs de modèles.

Eh bien, pour être plus précis, Divi fournit à propos de 7-8 différentes dispositions préconçues sur chaque pack de site Web. Étant donné que chacune d'entre elles est entièrement construite, vous pouvez facilement adopter les dispositions sans retravailler en profondeur leur structure sous-jacente. Vous faites juste quelques ajustements ici et là.

mises en page du site divi

Maintenant, pour trouver celui qui convient le mieux à votre boutique en ligne WooCommerce, il vous suffit de faire défiler les différentes catégories de sites sur le thème Divi. Vous pouvez également utiliser des mots-clés pour parcourir toutes les options en même temps.

Eh bien, dans l’ensemble, il ne faut pas longtemps pour identifier un Divi aménagement de la boutique en ligne. Il vous suffit de l'intégrer à WooCommerce et vous serez sur la bonne voie pour créer un site de commerce électronique WordPress attrayant.

Ensuite, vous remarquerez une chose particulièrement remarquable: Divi ne se concentre pas uniquement sur le look. Les présentations WooCommerce fournies avec le thème Divi ont également été conçues pour offrir des fonctionnalités.

Ainsi, en plus des pages de magasin typiques telles que la caisse, les produits et le panier, Divi inclut les modules de commerce électronique par défaut. Plus précisément, vous obtenez des sections telles que les produits en vedette, les articles en solde et bien plus encore.

Divi convient-il au WooCommerce?

Tout bien considéré, Divi est de plus en plus populaire, car il s'agit fondamentalement d'une solution de thème WordPress tout-en-un.

Ensemble, le constructeur de pages Divi et Thème Divi Cette offre fournit à peu près tout ce dont vous auriez besoin pour configurer n’importe quel type de site WordPress. Et cela inclut une boutique WooCommerce entièrement fonctionnelle avec toutes les fonctionnalités de base du commerce électronique.

👉 En un mot, Divi est une option à considérer pour votre site WooCommerce pour les raisons suivantes:

  • Vous pouvez personnaliser votre site Web WooCommerce via un éditeur visuel par glisser-déposer.
  • Divi vous permet de sauvegarder vos réglages en tant qu'éléments globaux dans toutes les présentations.
  • Il est livré avec plus de 20 bien conçus mises en page prédéfinis de sites Web.
  • Vous pouvez facilement exporter les mises en page et, par la suite, les exploiter sur d'autres sites Web.
  • Vous pouvez concevoir votre boutique WooCommerce avec plusieurs colonnes, lignes et éléments de contenu.
  • Toutes les dispositions de WooCommerce ont été optimisées pour les appareils mobiles.
  • Tout comme MS Word, La modification du contenu du texte est aussi simple que de cliquer puis de taper.
  • L'ensemble du processus de personnalisation du site est suivi en temps réel, offrant ainsi un aperçu en direct de toutes les modifications de conception.
  • Les mises en page WooCommerce comprennent des pages et des modules de magasin en ligne principaux.

Étape 1: Inscrivez-vous avec des thèmes élégants pour accéder à Divi

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: Installez Divi sur votre site WordPress

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: Configurer votre boutique WooCommerce

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 à SiteGround a déjà installé WooCommerce sur votre site Web WordPress, de sorte que vous n'avez pas à vous soucier de son installation ou de sa configuration. Il devrait déjà être disponible dans votre tableau de bord.

Étape 5: Ajoutez vos premiers produits à WooCommerce

Techniquement, le site de commerce électronique est déjà configuré, mais nous souhaitons ajouter quelques produits pour le faire ressembler à un site de commerce électronique en façade. Allez dans 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: explorez les fonctionnalités de WooCommerce

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: Créer la page d'accueil

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

Etape 9: Ajouter un titre à votre page Divi

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: prévisualisation et publication

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.

Conclusion

Et c'est tout ce qu'il faut pour obtenir votre Divi WooCommerce en ligne fonctionne avec un compte d’hébergement SiteGround.

A l'avenir, vous pouvez être assuré que SiteGround gérera toutes les tâches techniques critiques telles que les mises à jour de WordPress et WooCommerce Sécurité. C'est la différence fondamentale entre l'hébergement WooCommerce géré et les solutions d'hébergement partagé standard. Par conséquent, cela vous donne le temps et l'espace nécessaires pour vous concentrer sur la gestion de votre boutique WooCommerce.

Et comme nous l'avons déjà vu, cela devrait être un jeu d'enfant avec le thème Divi. Vous pouvez toujours accéder à votre mise en page Divi WooCommerce à partir de votre backend WordPress pour la personnaliser davantage. Si vous le souhaitez, vous pouvez même changer complètement le design en passant à une mise en page différente qui peut également gérer un magasin WooCommerce. Le choix t'appartient.

Si vous avez des questions sur la configuration du thème Divi WordPress, veuillez nous en informer dans la section 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.