Créez une page de catégorie de produit WooCommerce avec le générateur de thème de Divi

Les pages de catégorie sont une partie importante de tout site de commerce électronique. Les clients parcourent les catégories de produits pour trouver ce dont ils ont besoin. C'est pourquoi vos pages de catégories doivent être aussi belles que vos pages de produits. Avec Theme Builder de Divi, créer des modèles de page de catégorie est plus facile que jamais. Dans ce tutoriel, nous allons vous montrer comment créer un modèle de page de catégorie étape par étape et le styler à l'aide des options intégrées de Divi. De plus, nous vous montrerons comment le rendre filtrable à l'aide du plugin Themify WooCommerce Product Filters.

Ouvrez deux onglets de navigateur côte à côte. Utilisez le premier onglet pour le générateur de thème et le deuxième onglet pour l'aperçu en direct d'une page de catégorie. Travaillez de cette façon pour voir les progrès que vous avancez. Pour votre commodité, nous avons également ajouté le modèle en téléchargement gratuit.

Allons-y !

Aperçu

Avant de commencer à recréer le modèle, examinons à quoi ressemble le modèle de page de catégorie sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez le modèle de page de catégorie Woo GRATUITEMENT

Pour mettre la main sur le modèle de page de catégorie Woo gratuit, vous devez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

1. Mettez à jour vos produits et catégories

Avant de créer le modèle, assurez-vous que vos produits sont organisés dans les bonnes catégories. Vérifiez également s'ils sont correctement étiquetés. Ceux-ci seront importants lors de la configuration du plug-in de filtre de produit.

2. Plugin de configuration

Télécharger et installer

Téléchargez les filtres de produits WooCommerce. Accédez au tableau de bord de votre plugin et téléchargez le fichier .zip du plugin pour l'installer. Vous pouvez également rechercher le plugin dans le répertoire. Le plugin ajoutera un nouvel onglet dans le menu de votre tableau de bord. Assurez-vous également d'activer le plugin.

Ajouter un nouveau formulaire de filtre

Cliquez sur l'onglet plugin dans votre tableau de bord. Dans les paramètres du plugin, cliquez sur le bouton pour ajouter un nouveau formulaire de filtre.

Configurer le formulaire de filtre

Pour que votre barre latérale filtrable ressemble exactement à celle de l'aperçu de cet article, utilisez les paramètres mentionnés ci-dessous. Vous pouvez toujours ajuster ces paramètres par la suite.

• Disposition : verticale
• Champs vides : ne pas afficher le champ s'il est vide
• Tri des produits : masquer le tri des produits
• Option de pagination : défilement infini
• Bouton de réinitialisation : pas de bouton de réinitialisation
• Relation logique entre les taxonomies : ET
• Modèle de page de résultats : afficher les résultats sur la même page

Créer un champ de catégorie

Dans la barre de menu sous la zone principale, vous verrez une sélection d'onglets. Faites glisser et déposez l'onglet « Catégorie » dans le générateur en dessous. Réglez ensuite les paramètres comme suit :

• Titre du champ : Catégories
• Inclure les enfants : Oui
• Afficher en tant que : case à cocher
• Logique : OU
• Ordre : Nom, Décroissant
• Disposition : horizontale, 2 colonnes

Créer un champ de balise

Maintenant, faites glisser et déposez l'onglet "Tag" dans le générateur. Assurez-vous qu'il est placé sous l'onglet « Catégorie ». Ajustez les paramètres comme suit :

• Titre du champ : Type
• Afficher en tant que : case à cocher
• Ordre : Nom, Décroissant
• Disposition : horizontale, 2 colonnes
• Icônes de couleur
  • Arrière-plan : Transparent
  • Couleur du texte : brun foncé #44000d

Cliquez sur Enregistrer pour générer un shortcode

Enregistrez votre travail et fermez le générateur. Vous verrez le shortcode dans le menu principal du plugin. Copiez-le, vous en aurez besoin plus tard.

3. Recréez le modèle de page de catégorie de produit dans le générateur de thème

Ouvrir le générateur de thème / Ajouter un nouveau modèle

Il est temps de commencer à recréer le modèle ! Ouvrez votre générateur de thème et ajoutez un nouveau modèle.

Définir les paramètres du modèle

Dans les paramètres du modèle, sélectionnez « Pages de catégories de produits spécifiques ». Cliquez sur les catégories auxquelles vous souhaitez attribuer ce modèle. Nous sélectionnerons des articles de maroquinerie faits à la main.

Ajouter un corps personnalisé

Ensuite, cliquez sur « Ajouter un corps personnalisé ».

Sélectionnez Construire un corps personnalisé

Nous allons recréer ce modèle à partir de zéro, alors allez-y et choisissez « Créer un corps personnalisé ».

Construire à partir de zéro

Une fois à l'intérieur du constructeur visuel, sélectionnez l'option pour créer à partir de zéro une fois de plus.

Section 1 Paramètres

Fond

Une fois dans l'éditeur de modèles, vous remarquerez une section. Ouvrez cette section et ajoutez une couleur d'arrière-plan.

• Couleur de fond : gris bleuâtre transparent - rgba (68,66,109,0,02)

Ajouter une rangée

Structure des colonnes

Ajoutez maintenant une nouvelle ligne avec la structure de colonnes suivante :

Dimensionnement

Ajustez les paramètres de dimensionnement de la ligne suivante.

• Largeur de gouttière : 1
• Largeur
  • Ordinateur de bureau : 90 %
  • Tablette et téléphone : 85 %
• Largeur maximale : 1920px

Espacement

Ensuite, appliquez différentes valeurs d'espacement sur différentes tailles d'écran.

• Marge gauche et droite
  • Bureau : automatique
  • Tablette : 55px
  • Téléphone : 30px
• Rembourrage supérieur : 100 pixels

Ajouter un module de titre de message à la 1ère colonne

Éléments

Il est temps d'ajouter des modules, en commençant par un module de titre de poste dans la colonne 1. Activez le titre uniquement.

• Afficher le titre : Oui

Fond

Ajoutez ensuite une couleur d'arrière-plan.

• Couleur : #e8e8e8

Texte du titre

Passez à l'onglet Conception et stylisez le texte du titre.

• Niveau du titre : H1
• Police : Josefin Sans
• Poids : gras
• Style: TT
• Couleur : #44000d
• Taille
  • Bureau : 32 pixels
  • Tablette : 28px
  • Téléphone : 30px
• Hauteur de ligne : 1,2 em

Espacement

Ajustez également l'espacement.

• Rembourrage supérieur
  • Ordinateur de bureau et tablette : 100 pixels
• Rembourrage inférieur : 80px
• Rembourrage gauche
  • Ordinateur de bureau et tablette : 30 pixels
• Rembourrage droit
  • Ordinateur de bureau et tablette : 30 pixels
  • Téléphone : 10px

Frontière

Donnez au module des coins arrondis.

• Coins arrondis : 15px les quatre

Boîte ombre

Et ajoutez une ombre de boîte subtile.

• Boîte d'ombre : 2e option
• Position horizontale : 12px
• Position verticale : 12px
• Force du flou : 20px
• Force de propagation: -5px
• Couleur de l'ombre : #dddddd

Ajouter un module de texte à la 1ère colonne

Teneur

Ajoutez un module de texte juste en dessous du module précédent. Dans la zone de contenu, ajoutez le shortcode que vous avez copié à partir du plugin.

• Corps : shortcode du plug-in

Fond

Ajoutez ensuite une couleur d'arrière-plan.

• Couleur : #e8e8e8

Texte

Stylisez le texte.

• Police : Josefin Sans
• Couleur : #44000d
• Taille
  • Bureau : 20px
  • Tablette : 18px
  • Téléphone : 16px
• Espacement : 1px

Espacement

Ajustez également les paramètres d'espacement.

• Marge supérieure : 50px
• Rembourrage haut et bas : 40px
• Remplissage gauche et droit : 30px

Frontière

Ensuite, ajoutez des coins arrondis.

• Coins arrondis : 15px les quatre

Boîte ombre

Et complétez les paramètres du module en ajoutant une subtile ombre de boîte.

• Boîte d'ombre : 2e option
• Position horizontale : 12px
• Position verticale : 12px
• Force du flou : 20px
• Force de propagation: -5px
• Couleur de l'ombre : #dddddd

Ajouter un module de boutique à la 2e colonne

Teneur

Passons à la colonne suivante ! Ajoutez un module de boutique et ajustez les paramètres principaux comme suit :

• Type de vue du produit : par défaut
• Utiliser la page actuelle : Oui
• Disposition des colonnes : 3 colonnes

Image

Passez à l'onglet Conception et stylisez l'image en conséquence :

• Coins arrondis de l'image : 15px les quatre
• Ombre de la zone d'image : 2e option
  • Position horizontale : 6px
  • Position verticale : 6px
  • Force du flou : 18px
  • Couleur de l'ombre : #dddddd

Texte du titre

Stylisez ensuite le texte du titre.

• Police : Josefin Sans
• Poids : semi-gras
• Alignement : à droite
• Couleur : #44000d
• Taille
  • Bureau : 26 pixels
  • Tablette : 24px
  • Téléphone : 17px
• Espacement : 2px

Texte du prix

N'oubliez pas de styliser également le texte du prix.

• Police : Josefin Sans
• Alignement : à droite
• Couleur : #44000d
• Taille: 15px
• Espacement des lettres : 2px
• Hauteur de la ligne : 46px

Espacement

Ajustez également les paramètres d'espacement.

• Rembourrage supérieur
  • Tablette et téléphone : 50px
• Rembourrage gauche
  • Bureau : 50px
  • Tablette et téléphone : 0px

CSS personnalisé

Et enfin, ajoutez deux lignes de code CSS personnalisées dans l'onglet avancé pour générer de l'espace entre les différents éléments du module de la boutique. C'est ça!

• Image : rembourrage en bas : 20px
• Prix ​​: padding-bottom : 40px

padding-bottom: 20px;

padding-bottom: 40px;

Aperçu

Nous avons terminé de recréer le modèle de page de catégorie de produits WooCommerce. Jetons à nouveau un coup d'œil au design fini sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Ce modèle de page de catégorie de produits peut être appliqué à toutes les catégories et balises de votre boutique WooCommerce. Avec l'aide du plug-in de filtre de produit, vous pouvez ajouter les paramètres de filtre qui conviennent à votre propre magasin et à vos produits. Vous pouvez utiliser n'importe lequel des modules Divi woo pour personnaliser votre boutique comme vous le souhaitez. Nous espérons que ce modèle vous aidera à ajouter un look personnalisé à vos créations. Faites-nous savoir dans les commentaires si vous avez des questions ou des suggestions!