Utiliser le Fashion Layout Pack de Divi pour créer une boutique en ligne avec WooCommerce

Le nouveau Fashion Layout Pack de Divi a une excellente configuration pour n'importe quelle boutique en ligne. L'intégration du module boutique et l'organisation des mises en page vous donnent une longueur d'avance non négligeable. Mais pour que cette mise en page soit opérationnelle en tant que boutique en ligne fonctionnelle, nous avons besoin du plugin WooCommerce. Et vous serez peut-être surpris de voir à quel point Divi et WooCommerce fonctionnent ensemble.

Dans ce tutoriel, je vais vous montrer comment créer une boutique en ligne à l'aide du pack de mise en page Fashion de Divi à l'aide de Woocommerce. Je vais vous expliquer comment configurer correctement vos mises en page à personnaliser, comment donner vie à la page de la boutique avec l'intégration de Woocommerce et quelques conseils sur la façon d'utiliser les éléments de votre mise en page et le personnalisateur de thème pour styliser les pages Woocommerce.

La mise en place

Pour gagner du temps, je vais commencer ce tutoriel avec certaines étapes déjà terminées.

1. Installer et activer le thème Divi
2. Installer et activer WooCommerce
3. Téléchargez le Fashion Layout Pack et importez le fichier Fashion_All.json dans votre bibliothèque de thèmes Divi.
4. Créez de nouvelles pages pour chaque mise en page.
5. Créez votre menu principal.

Si vous êtes confus par la configuration répertoriée ci-dessus, vous pouvez trouver des instructions plus détaillées sur la façon de configurer correctement votre mise en page en consultant ces 10 étapes pour utiliser un pack de mise en page pour votre nouveau projet.

Une fois que vous avez terminé les 5 étapes ci-dessus, vous êtes prêt à commencer.

L'aperçu

Voici un aperçu de certaines des pages WooCommerce que vous allez créer.

Utiliser le Fashion Layout Pack de Divi pour créer une boutique en ligne avec WooCommerce

Abonnez-vous à notre chaîne Youtube

Changez votre couleur d'accent globale

Pour commencer, nous allons changer la couleur d'accent globale du thème Divi. Changer la couleur d'accentuation globale pour qu'elle corresponde à votre mise en page est toujours une bonne idée, mais c'est aussi le moyen le plus simple de faire correspondre vos pages WooCommerce avec votre jeu de couleurs sans avoir à utiliser de CSS personnalisé. Vous remarquerez que cette couleur d'accent est utilisée pour styliser des éléments sur chacune de vos pages WooCommerce comme la page de produit unique, la page de panier, etc.

Pour modifier la couleur d'accentuation globale, accédez au personnalisateur de thème et accédez à Paramètres généraux > Paramètres de mise en page et recherchez l'option Couleur d'accentuation du thème en bas.

J'utilise cette couleur rose de la mise en page : #fc7086

Ensuite, une fois que vous l'avez modifié, enregistrez et publiez vos paramètres et actualisez votre page pour permettre à la couleur d'accentuation de mettre à jour d'autres paramètres dans le personnalisateur.

Mettre à jour les paramètres de typographie dans le personnalisateur de thème

Étant donné que WooCommerce utilise vos paramètres de personnalisation de thème par défaut pour styliser le texte de chacune de ses pages, vous voudrez vous assurer de faire correspondre la typographie utilisée sur vos mises en page avec les paramètres de typographie dans le personnalisateur de thème.

Pour mettre à jour votre typographie, accédez à Divi > Personnalisateur de thème > Paramètres généraux > Typographie et mettez à jour les éléments suivants :

Taille du corps du texte : 16px
Hauteur de la ligne du corps : 1,9
Taille du texte de l'en-tête : 42
Style de police d'en-tête : B
Police d'en-tête : Affichage Playfair
Police de caractère : Poppins
Couleur du lien du corps : [si vous avez mis à jour votre couleur d'accent globale, cette couleur devrait apparaître ici]

Définir la page de la boutique WooCommerce

WooCommerce vous permet de définir quelle page vous voulez être votre page de magasin de base. Cette page doit inclure toutes les catégories de produits afin que les utilisateurs sachent tout ce que votre boutique a à offrir. Puisque notre mise en page a une page de magasin, allons-y et faisons-en notre page de magasin de base.

Depuis votre tableau de bord WordPress, accédez à WooCommerce > Paramètres et cliquez sur l'onglet Produits en haut de la page. Dans le menu situé juste en dessous de l'onglet, sélectionnez Affichage . Sélectionnez ensuite la page de la boutique sur la page « boutique » que vous avez créée avec la nouvelle mise en page de la boutique du pack de mise en page de la mode.

Ensuite, enregistrez les modifications.

Ajouter des produits à votre magasin

Vous avez peut-être remarqué que votre page de boutique, malgré ses deux modules de boutique, n'affiche aucun produit. Bien évidemment, vous devez d'abord ajouter des produits. Pour ajouter un nouveau produit à votre boutique, accédez à votre tableau de bord WordPress et suivez ces étapes :

1. Accédez à Produits > Ajouter un nouveau
2. Entrez le nom du produit
3. Entrez la description du produit
4. Entrez le prix du produit
5. Saisissez une brève description du produit
6. Ajoutez trois nouvelles catégories (été, en vedette et en vente)
7. Sélectionnez la catégorie pour votre produit (dans ce cas, ce serait l'été)
8. Ajouter l'image du produit
9. Publier/mettre à jour le produit

Attribuez des catégories à vos produits

Au fur et à mesure que vous répétez les étapes ci-dessus pour créer plus de nouveaux produits, assurez-vous d'attribuer une catégorie à chacun (#7 dans les étapes répertoriées ci-dessus). Pour ce tutoriel, j'ai ajouté 6 produits dans la catégorie « Été », 6 produits dans la catégorie « En vedette », et 1 produit dans la catégorie « En solde ».

Mettre à jour les modules de la boutique sur la page de la boutique

Maintenant que vous avez créé vos produits, vous pouvez ajouter ces produits à votre page de boutique. Comme je l'ai mentionné précédemment, la mise en page de la boutique comporte déjà des modules de boutique intégrés à la mise en page. Il y en a un dans la section Été et un dans la section En vedette.

Accédez à la page de la boutique et déployez le constructeur visuel. Passez ensuite la souris sur le module de la boutique (qui n'affiche actuellement aucun produit) sous la ligne contenant le titre Summer Fashion et cliquez sur les paramètres du module.

Mettez à jour les paramètres pour inclure uniquement la catégorie « Été ».

Vous devriez maintenant voir tous les produits ajoutés avec la catégorie été.

Ensuite, recherchez le module de la boutique sous le titre des produits en vedette et mettez à jour les paramètres pour inclure uniquement la catégorie en vedette.

Ajouter un module de boutique pour afficher les articles « en vente » sur la page de la boutique

Étant donné que nous avons deux catégories (Produits en vedette et Mode estivale) sur la page de la boutique, il serait facile de créer des catégories et des produits supplémentaires à l'aide des modules déjà fournis dans la mise en page.

Créons une autre section pour afficher nos produits « En vente ».

Pour ce faire, déployez le générateur visuel et utilisez les options du clic droit pour copier toute la section affichant les produits de mode d'été et collez-la directement sous la section Produits en vedette.

Il ne vous reste plus qu'à effectuer quelques mises à jour.

Dans la ligne affichant le titre, continuez un clic sur le texte dans le module de texte et changez le titre pour dire « En solde » au lieu de « Summer Fashion ».

Ensuite, changez l'image dans la colonne de gauche pour quelque chose de plus cohérent avec vos produits de vente.

Enfin, mettez à jour le module de la boutique pour n'inclure que la catégorie « En vente ».

Stylisez vos pages WooCommerce avec la mise en page de la mode

WooCommerce génère automatiquement son propre ensemble de pages WooCommerce lorsque vous installez le plugin. Il s'agit notamment des éléments suivants :

Boutique - qui est un espace réservé pour une archive de type post pour vos produits.
Panier – qui utilise le shortcode [woocommerce_cart] pour générer le contenu du panier
Checkout – qui utilise le shortcode [woocommerce_checkout] pour afficher les informations.
Mon compte – qui utilise le shortcode [woocommerce_my_account] pour afficher des informations client spécifiques liées à leur compte.

Étant donné que nous avons déjà sélectionné notre page Boutique, aucune autre conception n'est nécessaire. Mais pour les 3 autres pages WooCommerce, nous devons les styliser pour qu'elles correspondent à la conception de nos autres mises en page.

Ajout d'un en-tête de section au panier et aux pages de paiement

Jetons d'abord un coup d'œil à la page Panier. Voici à quoi cela ressemble avant de faire quoi que ce soit.

Notez que parce que nous avons mis à jour notre couleur d'accent globale, nos liens et boutons correspondent déjà au schéma de couleurs. Et, puisque nous avons mis à jour nos paramètres de typographie dans le personnalisateur de thème, les en-têtes et le corps du texte correspondent également à notre thème.

Mais nous pouvons faire un peu mieux que cela en quelques clics. Accédez d'abord à la page de la boutique, déployez le générateur visuel et enregistrez la section supérieure contenant l'en-tête de page dans la bibliothèque. Vous pouvez donner le nom « section d'en-tête de page ».

Faites ensuite défiler vers le bas de la page et recherchez la dernière section contenant l'option de courrier électronique et les coordonnées et enregistrez-la dans votre bibliothèque avec le nom « section de pied de page ».

Allez maintenant modifier votre page de panier. Depuis l'éditeur de page par défaut, choisissez d'utiliser le Divi Builder, puis « Utiliser Visual Builder ». Le constructeur devrait avoir automatiquement mis le shortcode [woocommerce_cart] dans un module de texte dans une ligne de colonne d'une section régulière. Sinon, vous devrez le créer vous-même. Ensuite, cliquez sur l'icône bleue plus pour ajouter une nouvelle section sous la section actuelle, sélectionnez l'onglet « Ajouter à partir de la bibliothèque ». Sélectionnez ensuite la nouvelle section que vous venez de créer appelée « Section d'en-tête de page ».

Faites ensuite glisser cette section vers le haut de votre page et remplacez le texte du titre par « Votre panier ». C'est ça!

Vous pouvez également répéter ce processus pour la page de paiement.

Concevoir la page Mon compte à l'aide du Divi Builder

Maintenant que vous savez comment ajouter un en-tête à ces pages WooCommerce, allez-y et faites de même pour la page Mon compte. Cette fois, vous pouvez ajouter la section de pied de page que vous avez enregistrée dans la bibliothèque au bas de cette page.

Vous voudrez peut-être donner à cette page un design distinct pour qu'il soit plus évident qu'il s'agit d'une page qui gère votre compte. Ainsi, au lieu de l'arrière-plan dégradé rose pour les sections d'en-tête et de pied de page, accédez aux paramètres de section pour chacune et modifiez les couleurs de dégradé d'arrière-plan en #9599e2 et #8bc6ec.

Utilisez les paramètres du module de texte pour styliser le contenu du shortcode WooCommerce

Étant donné que le shortcode WooCommerce réside désormais dans un module de texte, vous pouvez l'utiliser à votre avantage pour styliser certains de ces éléments dans les paramètres du module.

Faisons-le pour notre page Mon compte. À partir du générateur visuel, mettez à jour les paramètres du module de texte qui contient le contenu du shortcode comme suit :

Sous l'onglet conception…

Taille du texte du texte : 20px
Hauteur de la ligne de texte : 1,6 em

Cliquez maintenant sur l'onglet Lien sous la section Texte pour styliser les liens comme suit :

Police du lien : Poppins
Poids de la police du lien : semi-gras
Taille du texte du lien : 27px
Hauteur de la ligne de liaison : 1,5 em

Enregistrer les paramètres

Consultez maintenant votre page Mon compte.

Utiliser des CSS personnalisés pour styliser les pages d'archives WooCommerce ?

Certaines des pages d'archives utilisées par WooCommerce ne sont pas générées avec un shortcode comme les autres pages, elles ne peuvent donc pas être modifiées à l'aide du Divi Builder. Donc, pour ces pages, vous devrez créer du CSS personnalisé.

Regardons la page Catégorie en vedette à titre d'exemple.

Ouvrons maintenant le personnalisateur de thème et cliquez sur CSS supplémentaire et ajoutons ce qui suit :

.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;

}

.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
    font-size: 16px !important;
    color: #fd7792 !important;
    letter-spacing: 2px;
}

Cela stylisera la liste déroulante de tri, le fil d'Ariane et la police de prix. Le reste du texte peut être modifié à l'aide des paramètres de typographie du personnalisateur de thème.

Dernières pensées

La création d'une boutique en ligne pour votre site Web est beaucoup plus facile à l'aide de cet incroyable pack de mise en page, WooCommerce et Divi Builder. De toute évidence, il reste certaines nécessités à faire qui dépassent le cadre de cet article. Par exemple, vous devrez toujours décider quelle passerelle de paiement utiliser, comment vous souhaitez gérer l'expédition et d'autres éléments d'action plus spécifiques à l'entreprise. Mais WooCommerce devrait être capable de gérer la plupart de vos besoins.

Si quoi que ce soit, j'espère que ce post vous a inspiré pour créer quelque chose d'incroyable par vous-même.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!