Comment personnaliser la page de catégorie WooCommerce (plugins et codage)

Voulez-vous modifier vos pages de catégories ? Dans ce guide, nous vous montrerons différentes méthodes pour personnaliser la page de catégorie WooCommerce avec et sans plugins .

La page de catégorie est généralement l'une des pages les plus négligées et les moins personnalisées d'une boutique de commerce électronique. En effet, il agit normalement comme un pont vers la hiérarchie entre la page produit et la page boutique. Cependant, il existe plusieurs scénarios pratiques dans lesquels les utilisateurs s'appuient sur la page de catégorie pour rechercher des produits, il est donc logique de la modifier et d'en tirer le meilleur parti.

Avant d'examiner les différentes méthodes pour personnaliser la page de catégorie dans WooCommerce, comprenons mieux les avantages de le faire.

Pourquoi modifier la page de catégorie WooCommerce ?

La page de catégorie affiche tous les produits de votre boutique WooCommerce inclus dans cette catégorie . Même si les utilisateurs recherchent normalement des produits à l'aide d'autres pages, il est parfois plus facile pour les clients de rechercher les articles à partir de la page de catégorie. Par exemple, si vous n'êtes pas sûr du nom du produit mais que vous connaissez sa catégorie, vous chercherez probablement le produit en utilisant la page de catégorie.

De plus, vos clients peuvent rester plus longtemps sur votre site Web s'ils sont positivement influencés par la page de catégorie. Comme ces pages sont généralement ignorées, si vous les personnalisez, vous vous démarquerez et améliorerez l'expérience de vos clients.

La bonne nouvelle est que WooCommerce vous permet de personnaliser facilement votre page de catégorie. La mauvaise nouvelle est que les options par défaut fournies par WooCommerce sont assez limitées. Vous ne pouvez modifier que le nom, le slug, la catégorie parent, le texte de description, le type d'affichage et la vignette pour chaque page de catégorie.

Vous pouvez également modifier d'autres éléments avec le personnalisateur de thème, mais si vous avez besoin d'amener votre page de catégorie à un tout autre niveau, vous avez besoin d'autre chose.

C'est pourquoi dans ce guide, nous vous montrerons différentes méthodes pour modifier votre page de catégorie dans WooCommerce et aider vos clients à naviguer plus facilement sur votre site.

Comment personnaliser la page de catégorie WooCommerce

Il existe différentes méthodes pour personnaliser facilement votre page de catégorie WooCommerce dans WordPress :

1. Avec Divi
2. Utiliser un plugin dédié
3. Par programmation (codage)

Dans cette section, nous allons passer en revue chaque méthode étape par étape, afin que vous puissiez choisir celle qui correspond le mieux à vos besoins.

REMARQUE : Avant de commencer, assurez-vous d'avoir correctement configuré WooCommerce et créé toutes les pages nécessaires.

1. Personnalisez la page de catégorie WooCommerce avec Divi

Divi est l'un des thèmes WordPress les plus populaires et pour cause. Il est livré avec de nombreuses fonctionnalités et il est entièrement compatible avec WooCommerce, ce qui le rend idéal pour personnaliser vos pages de catégorie.

Ce thème est livré avec un générateur de glisser-déposer intégré qui vous permet de créer un modèle de page de catégorie personnalisé . De cette façon, vous pouvez créer un modèle pour les pages de catégorie et l'utiliser pour toutes dans votre boutique WooCommerce.

Ce qui rend Divi si facile à utiliser, c'est que vous pouvez voir toutes les modifications que vous apportez avec le constructeur en temps réel grâce à l'aperçu en direct. Divi fournit également divers modules pour ajouter facilement de nombreux éléments à vos pages, vous permettant de gagner beaucoup de temps lors de la création ou de l'édition de vos pages de catégories.

1.1. Installer et activer Divi

Pour commencer à utiliser Divi, vous devez d'abord l'installer et l'activer. Vous pouvez télécharger le fichier zip Divi depuis leur site officiel.

Ensuite, accédez à votre tableau de bord WordPress et dirigez-vous vers Apparence > Thèmes > Ajouter un nouveau .

Appuyez sur Télécharger le thème et choisissez le fichier Divi .zip récemment téléchargé à télécharger sur votre site. Une fois téléchargé, cliquez sur Installer maintenant pour installer le thème et l' activer une fois l'installation terminée.

L'activation du thème Divi installera également automatiquement le constructeur Divi qui est le constructeur de page intégré que nous utiliserons pour personnaliser les pages de catégorie.

1.2. Créer un modèle de page de catégorie personnalisé

Pour commencer à créer un modèle de page de catégorie personnalisé, vous devez vous rendre dans Divi > Theme Builder et appuyer sur Add New Template .

Ensuite, cochez la case Toutes les pages de catégories de produits sous Pages d' archivage et cliquez sur Créer un modèle .

Après cela, sélectionnez Ajouter un corps personnalisé sur le nouveau modèle que vous venez d'ajouter. Puisque nous créons un tout nouveau modèle avec Divi, sélectionnez également l'option Build Custom Body .

Vous y verrez 3 options différentes :

• Créez votre modèle à partir de rien
• Utilisez l'un des modèles de la bibliothèque Divi et utilisez-le davantage pour personnaliser votre page de catégorie WooCommerce
• Cloner une page existante et l'utiliser comme modèle pour toutes vos pages de catégories de produits

Vous pouvez choisir l'une des options qui vous convient le mieux. Pour ce didacticiel, nous sélectionnerons Build from Scratch, nous cliquons donc sur le bouton Start building .

Vous serez redirigé vers la mise en page de la page Catégorie à partir de laquelle vous utiliserez le Divi Builder pour créer votre modèle.

Pour commencer à créer votre modèle, vous devez sélectionner la structure. Sous Nouvelle ligne , sélectionnez le type de ligne que vous souhaitez pour vos pages de catégorie. Vous pouvez ajouter plusieurs lignes et colonnes. Vous aurez besoin d'au moins 2 lignes pour l'en-tête et le corps de la page de catégorie, mais vous pouvez également avoir plus de colonnes si vous souhaitez ajouter une barre latérale sur le corps de votre page de catégorie.

Après avoir sélectionné le nombre de lignes et de colonnes, vous devrez ajouter les modules Divi pour personnaliser davantage la mise en page de la catégorie.

1.3. En-tête de page de catégorie

Pour l'en-tête de page de catégorie, vous devez ajouter le titre de la page et le fil d'Ariane pour vos pages de catégorie.

Pour ajouter le titre du message, cliquez sur l'icône « + » dans la ligne, recherchez le titre du message dans la barre de recherche et sélectionnez-le.

Vous verrez les différentes options de titre de publication. Vous pouvez ajouter la méta et l'image en vedette, mais nous ne les utiliserons pas pour ce didacticiel, nous allons donc désactiver les options Afficher la méta et Afficher l'image en vedette dans la section Éléments .

Il convient de noter que vous n'avez pas besoin d'ajouter de titre ici car il affichera automatiquement le titre de publication dynamique lorsque vous prévisualiserez le site Web. De plus, à partir de l'onglet Conception , vous pouvez modifier la couleur d'arrière-plan et les polices de l'en-tête.

Il existe également des options avancées pour ajouter un ID CSS, des classes, un CSS personnalisé, des effets de défilement, etc. Après avoir effectué toutes les modifications nécessaires, cliquez sur l'icône « coche » pour enregistrer les modifications.

1.3.1 – Ajouter un module fil d'Ariane

Vous aurez également besoin d'un module fil d'Ariane pour une navigation supplémentaire dans les pages de catégories, alors cliquez à nouveau sur l'icône ' + ' pour ajouter un nouveau module et recherchez « Woo Breadcrumb ».

Ensuite, sélectionnez l'option Ce produit dans la section Produit sous l'onglet Contenu . Cela ajoutera le titre dynamique de la catégorie de produits que vos clients souhaitent voir.

Encore une fois, apportez les modifications nécessaires à l'aide des onglets Conception et Avancé, et enfin, cliquez sur l'icône « coche » pour enregistrer les modifications.

1.4. Corps de la page de catégorie

Une fois que vous avez terminé de modifier l'en-tête, vous pouvez passer au corps de la page de catégorie. Si vous n'avez pas encore inclus de ligne, cliquez sur l' icône verte « + » et sélectionnez le type de ligne que vous souhaitez ajouter. Après cela, vous devrez ajouter le module boutique ici car il contient tous les produits de votre boutique.

Appuyez sur l'icône « + » dans la ligne et recherchez le module Boutique .

Une fois que vous aurez cliqué dessus, vous pourrez configurer les options de vos produits sur la page de catégorie.

Dans l'onglet Contenu , vous pouvez modifier tous les éléments de votre page de catégorie. Assurez-vous d'activer la page Utiliser la page actuelle pour afficher les produits de la catégorie de produits spécifique que vos clients sélectionnent sur votre boutique en ligne.

Il ne vous reste plus qu'à éditer les autres éléments d'affichage de la page. Par exemple, vous pouvez ajouter le nombre de colonnes ou de produits à afficher par page et la pagination à partir d'ici. De plus, vous pouvez également modifier les polices des textes de produit et de prix et bien plus encore à partir des onglets Conception et Avancé . Une fois que vous avez effectué toutes les modifications nécessaires, appuyez sur l'icône « coche » pour enregistrer les modifications.

Vous pouvez ajouter plus de lignes ou personnaliser les zones de pied de page avec le Divi Builder, n'oubliez pas de sauvegarder le corps du modèle de page en bas à droite de votre écran une fois que vous avez tout fait.

Après avoir enregistré vos modifications, fermez le Divi Builder et vous serez redirigé vers le tableau de bord Theme Builder. Cliquez ici également sur Enregistrer les modifications pour enregistrer les modifications apportées à votre modèle.

Désormais, lorsque vous prévisualisez la page de catégorie de n'importe quelle catégorie de produits, vous pourrez voir toutes vos modifications.

2. Personnalisez la page de catégorie WooCommerce à l'aide d'un plugin

Si vous n'utilisez pas Divi et que vous ne souhaitez pas remplacer votre thème actuel, la meilleure option pour éditer la page de catégorie WooCommerce serait d'utiliser un plugin WordPress dédié.

Pour ce tutoriel, nous utiliserons le plugin Category Editor car il est gratuit, facile à utiliser et vous permet de personnaliser les pages de catégories en quelques clics. Cet outil se concentre principalement sur la zone de description des pages de catégorie et vous fournit un éditeur pour celle-ci. De cette façon, vous pouvez modifier la description des catégories de produits pour les afficher sur les pages de catégories.

Pour commencer à utiliser ce plugin, dans votre tableau de bord WordPress, accédez à Plugins > Ajouter un nouveau . Ensuite, recherchez Éditeur de catégories , cliquez sur Installer maintenant, puis activez le plug-in.

Vous pouvez également l'installer manuellement en téléchargeant le plugin directement depuis le référentiel WordPress. Si vous souhaitez en savoir plus sur ce processus, vous pouvez consulter notre guide sur la façon d'installer un plugin manuellement.

Après avoir activé l'éditeur de catégories, accédez à Produits > Catégories et appuyez sur Modifier sur la catégorie dont vous souhaitez personnaliser la description.

Ici, vous verrez qu'un éditeur de texte a été ajouté à la zone de description où vous pouvez modifier la police du texte, les en-têtes, les listes et l'alignement. De plus, vous pouvez ajouter des images de catégorie et utiliser l'onglet Texte pour personnaliser la description de la catégorie avec un peu de code.

Une fois que vous avez effectué toutes les modifications nécessaires, appuyez sur Mettre à jour et prévisualisez les modifications sur vos pages de catégorie.

C'est ainsi que vous pouvez personnaliser vos pages de catégorie WooCommerce avec un plugin. Cependant, si vous souhaitez plus d'options de personnalisation et que vous avez des compétences en matière de codage, vous pouvez coder votre propre solution. Voyons comment procéder.

3. Personnalisez la page de catégorie WooCommerce par programme

Si vous n'utilisez pas Divi et que vous ne souhaitez pas installer d'outils tiers, coder votre propre solution est une excellente option. Le principal avantage de la modification de la page de catégorie par programmation est qu'elle vous offre plus de flexibilité.

Même si vous n'êtes pas un développeur expérimenté, WooCommerce vous fournit plusieurs codes courts et attributs de code court pour vous aider dans le processus. Si vous n'êtes pas familier avec les shortcodes, consultez ce guide pour mieux comprendre comment les utiliser.

Avec ces shortcodes, vous pouvez afficher les catégories de produits sur n'importe quelle page :

• [ product_category ] – affiche une catégorie de produit spécifique
• [ product_categories ] – affiche toutes les catégories de produits de votre boutique

Vous pouvez les utiliser avec les attributs de catégorie de produits pour modifier la façon dont ils affichent les catégories de produits. Par exemple, si vous souhaitez afficher les catégories de produits de niveau supérieur et masquer les sous-catégories, vous pouvez utiliser le shortcode suivant :

[ product_categories number="0" parent="0" ]

Vous pourrez voir les catégories de niveau supérieur une fois que vous aurez prévisualisé votre page.

De plus, vous pouvez également utiliser divers extraits de code pour modifier votre page de catégorie dans WooCommerce. L'un des exemples les plus courants consiste à créer une catégorie personnalisée.

Avant de vous montrer comment procéder, assurez-vous de sauvegarder votre site Web WordPress et d'utiliser un thème enfant. Nous allons modifier certains fichiers de thème de base, donc si quelque chose ne va pas, vous risquez de casser votre site. C'est pourquoi il est toujours recommandé d'avoir une version de sauvegarde que vous pouvez restaurer pour éviter tout problème.

Créer un titre de page de catégorie personnalisé

Pour créer un titre de page de catégorie personnalisé à l'aide d'un extrait de code, vous devez accéder à Apparence > Éditeur de thème et ajouter l'extrait de code suivant au fichier functions.php de votre thème enfant.

 add_filter( 'woocommerce_page_title', 'QL_customize_woocommerce_page_title', 10, 1 );
function QL_customize_woocommerce_page_title( $page_title) {
 // Custom title for the product category 't-shirts'
 if ( is_product_category('t-shirts') ) { $page_title = 'Something';
 }
 // Custom title for the product category 'hoodies'
 elseif ( is_product_category('hoodies') ) {
 $page_title = 'Something else'; }
 return $page_title;
}

Pour plus d'informations sur l'extrait, consultez ce site.

De cette façon, vous pouvez afficher un titre personnalisé au lieu du titre de catégorie par défaut sur la page de catégorie.

Modifier l'arrière-plan de la page de catégorie de produits

De même, vous pouvez également modifier l'arrière-plan de votre page de catégorie de produits à l'aide d'extraits de code. Collez simplement l'extrait de code suivant une fois de plus dans le fichier funtions.php .

 if (is_product_category()){ add_action( 'wp_head' , function () { ?> <style> .woocommerce.post-type-archive-product { background-image:none !important; } .woocommerce.single-product { background-image:none !important; } </style> <?php }); }

Le code vérifie si l'élément est une catégorie de produits et modifie la couleur de l'arrière-plan. Pour plus d'informations, consultez ce site.

Ce ne sont que quelques exemples, mais vous pouvez faire beaucoup plus. N'hésitez pas à prendre cet extrait comme base et à ajouter votre propre code personnalisé pour personnaliser la page de catégorie dans votre boutique.

Bonus : ajoutez une vue rapide aux pages de catégorie

Une autre option intéressante pour personnaliser votre page de catégorie WooCommerce consiste à ajouter également une fonction d'affichage rapide. Une vue rapide permettra à vos clients de voir les détails du produit sur la page de catégorie respective sans avoir à ouvrir la page de produit réelle. Cela offrira aux acheteurs une meilleure expérience utilisateur lorsqu'ils naviguent sur votre boutique en ligne.

Pour ajouter une fonction d'affichage rapide à la page de catégorie, nous utiliserons le plugin WooCommerce Direct Checkout . C'est l'un des meilleurs plugins de paiement pour WooCommerce qui comprend de nombreuses fonctionnalités pour vous aider à augmenter vos taux de conversion et vos ventes.

Même s'il s'agit d'un plugin freemium, pour ajouter une vue rapide aux pages de catégorie, vous devez installer à la fois la version gratuite et l'un des plans premium. Alors d'abord, rendez-vous sur cette page pour installer et activer WooCommerce Direct Checkout.

Après avoir installé et activé le plugin, rendez-vous sur WooCommerce > Direct Checkout > Archives dans votre tableau de bord WordPress. Activez l'option Ajouter un bouton de vue rapide en sélectionnant Oui dans la liste déroulante, puis enregistrez les modifications.

Si vous vérifiez votre site depuis le front-end, vous verrez qu'il y a un nouveau bouton qui apparaît juste à côté du bouton " Acheter maintenant/Ajouter au panier ". Par exemple, pour ceux qui utilisent le thème Storefront, le bouton ressemble à ceci.

Lorsque vous cliquez sur le bouton de vue rapide, une fenêtre contextuelle s'ouvre avec toutes les informations les plus importantes sur le produit telles que le titre, le prix, la description, etc. De cette façon, les clients peuvent directement ajouter des produits à leur panier sans avoir à ouvrir la page du produit.

Vous pouvez personnaliser davantage le bouton d'affichage rapide et la fenêtre contextuelle. Pour plus d'informations sur la façon de procéder, consultez notre guide sur la façon d'ajouter une vue rapide dans WooCommerce.

Recommandations pour réorganiser votre page de catégorie

Comme mentionné précédemment, la conception globale et l'interface de vos pages de catégorie sont très importantes pour développer votre boutique en ligne. C'est une page très utile où vous pouvez comparer différents produits d'une même catégorie avant de les acheter.

Une page de catégorie bien conçue peut vous aider à garder vos clients plus longtemps dans votre boutique en ligne. Meilleure est leur expérience dans votre magasin, plus ils sont susceptibles d'acheter et de devenir des clients fidèles.

Pour vous assurer de tirer le meilleur parti de vos pages de catégories et de vous démarquer de vos concurrents, voici quelques recommandations pour les faire passer au niveau supérieur.

1. Ajouter de grandes images de produits

Lorsqu'il s'agit d'achats en ligne, une image vaut mille mots. Les acheteurs veulent voir des images grandes et claires des produits qui les intéressent avant de devoir accéder à la page du produit.

Cependant, cela ne signifie pas que vous devez utiliser des images de produits extrêmement grandes pour la page de catégorie. Les très grandes images ont tendance à être plus lourdes et à ralentir votre site, alors trouvez un bon équilibre entre les grandes images et la vitesse du site.

Par exemple, vous pouvez utiliser une page de catégorie à 3 colonnes avec une taille d'image de 300 à 400 pixels . Cela devrait être suffisant pour afficher les détails du produit requis sur un moniteur ou un appareil mobile de taille moyenne.

Vous pouvez voir un bon exemple sur les pages de catégories de Nike, qui est l'une des marques de vêtements de sport les plus célèbres. Nike utilise des images claires et grandes qui conviennent à une image miniature de produit.

N'oubliez pas non plus que les achats en ligne sont largement effectués sur des appareils mobiles de nos jours. Assurez-vous de tester vos pages de catégorie sur ordinateur et sur mobile, afin que la taille et la conception soient adaptées à chaque taille d'écran.

2. Utilisez des images d'en-tête attrayantes

Nous savons tous que la première impression compte et encore plus lorsqu'il s'agit d'achats en ligne. Lorsqu'un client ouvre une page de catégorie, la première chose qu'il remarque est l'en-tête de la page. C'est pourquoi vous devez vous assurer d'utiliser des en-têtes attrayants pour chaque catégorie.

L'une des meilleures façons de créer un en-tête attrayant consiste à ajouter une image d'en-tête. Gardez à l'esprit la conception globale de votre site et faites correspondre l'image d'en-tête avec la palette de couleurs globale de votre boutique en ligne.

Par exemple, vous pouvez trouver des images d'en-tête dans de nombreux magasins en ligne axés sur la mode tels que MAC Cosmetics.

Comme vous pouvez le voir, MAC utilise une manière très créative d'afficher l'image d'en-tête. L'image d'en-tête de catégorie se compose de son image et correspond également au jeu de couleurs sombres avec les menus d'en-tête.

3. Gardez toujours la chapelure visible

Le fil d'Ariane est l'un des éléments les plus utiles pour s'assurer que les visiteurs de votre site Web sont au bon endroit. Les fils d'Ariane aident également les utilisateurs à naviguer sur votre site, ce qui les aide à trouver plus rapidement ce qu'ils recherchent et améliore leur expérience d'achat.

En parcourant les produits, les clients cliquent parfois sur différentes choses et peuvent se perdre dans votre magasin. En ayant le fil d'Ariane toujours visible, les utilisateurs peuvent immédiatement voir où ils se trouvent et revenir facilement à la catégorie souhaitée.

Certains sites préfèrent afficher les catégories dans la barre latérale, mais la plupart des boutiques en ligne utilisent le chemin de navigation car il est plus facile pour les clients de revenir là où ils se trouvaient auparavant.

L'affichage du fil d'Ariane ne sera pas un problème si vous avez suivi le tutoriel ci-dessus avec Divi. Si vous utilisez un thème différent, consultez ce guide pour savoir comment ajouter et afficher des fils d'Ariane sur chaque page.

4. Vérifiez si les produits sont dans les bonnes catégories

Même si cela semble évident, des erreurs peuvent se produire lors de l'ajout manuel de produits. Ce point est donc plus un rappel qu'une recommandation.

Effectuez des vérifications de routine pour vous assurer que tous les produits sont affectés aux bonnes catégories et ne sont pas mélangés. Vous n'avez pas besoin de vérifier cela tous les jours, mais il est important de le faire de temps en temps. Vous pouvez également vérifier les fautes d'orthographe sur les produits, les catégories et les descriptions.

Toute erreur sur les produits ou leurs catégories peut affecter l'impression que les visiteurs ont de votre site Web. Que penseriez-vous si vous parcouriez une boutique en ligne et que vous trouviez des jeans dans la catégorie des ordinateurs portables ? Faire des vérifications de temps en temps ne prend pas beaucoup de temps et vous aidera à garder tout organisé.

Si vous souhaitez améliorer encore plus votre boutique eCommerce, consultez nos conseils WooCommerce pour optimiser votre boutique en ligne.

Conclusion

Dans l'ensemble, votre page de catégorie joue un rôle important dans votre boutique. Pour vous démarquer de vos concurrents, vous devez personnaliser votre page de catégorie WooCommerce et en tirer le meilleur parti. De même, vous pouvez également modifier votre boutique, votre produit, mon compte et votre page de paiement pour réorganiser l'ensemble de votre boutique pendant que vous y êtes.

Pour conclure, nous avons discuté de différentes méthodes pour modifier votre page de catégorie :

• Avec Divi
• Utiliser un plugin dédié
• Par programmation

Nous espérons que ce guide vous a été utile et que vous pourrez facilement modifier vos pages de catégories. De plus, nous vous avons également fourni une astuce bonus pour ajouter une vue rapide du produit sur votre page de catégorie.

Enfin, nous avons également vu quelques recommandations pour améliorer votre page de catégorie et augmenter vos taux de conversion en utilisant de meilleures images et en rendant le fil d'Ariane toujours visible.

Si ce tutoriel vous a été utile, nous vous recommandons également de consulter les tutoriels suivants :

• Comment masquer et supprimer le bouton Ajouter au panier dans WooCommerce
• Personnaliser la page du panier WooCommerce
• Comment ajouter des frais à la caisse WooCommerce