Comment personnaliser la page de catégorie WooCommerce dans WordPress sans codage

Envisagez-vous de modifier la page de catégorie de produits WooCommerce dans Elementor ?

Eh bien, si c’est le cas, je vous le recommande fortement. La personnalisation de la page WooCommerce Archive et son optimisation peuvent augmenter vos ventes.

Mais la question est de savoir comment personnaliser la page de catégorie de produits WooCommerce dans WordPress ?

Eh bien, vous n'avez certainement pas besoin de faire de codage pour personnaliser la page de catégorie WooCommerce si vous suivez le processus présenté dans ce blog.

Dans cet article, vous apprendrez comment personnaliser la page de catégorie WooCommerce sans aucun codage. De plus, vous apprenez également à connaître comment créer différents modèles d'archives personnalisés pour chaque catégorie individuellement. Et également des moyens d'optimiser votre page d'archives pour augmenter le taux de conversion.

Alors continuez à lire….

Pourquoi personnaliser les pages de catégories WooCommerce

Selon construitAvec, WooCommerce est utilisé par plus de 29% pour cent des 1 millions de sites Web les plus importants. Bien que cette popularité indique la crédibilité de WooCommerce en tant qu'outil de commerce électronique, elle reflète également que des milliers et des milliers de sites Web utilisent la même mise en page par défaut que WooCommerce a à offrir.

Et si vous pensez utiliser la valeur par défaut WooCommerce page ne fera que minimiser les chances de votre site Web de se démarquer dans la foule, alors vous vous trompez. Il existe d’autres raisons que vous devez également prendre en compte. Pour connaître ces autres raisons, jetons un œil à la page de catégorie par défaut de WooCommerce avec le Thème WordPress Twenty Twenty-Two activé.

Si vous voyez, la page de catégorie par défaut de WooCommerce a une apparence basique qui n’est pas très attrayante. À côté n'a pas d'options avancées comme rechercher des produits à l'aide de noms, filtrer les produits en fonction de différents attributs, etc. Tout cela est important pour garantir une bonne expérience utilisateur sur votre boutique en ligne.

D’ailleurs, qui n’aime pas un site beau, apaisant pour les yeux et facile à naviguer ? 

Eh bien, la réponse est tout le monde ! Et passons à la section suivante où vous apprendrez comment personnaliser les modèles de page de catégorie de produits WooCommerce sans aucun codage.

Comment personnaliser la page de catégorie de produits WooCommerce en 6 étapes

Il s'agit d'un didacticiel facile à suivre sur la façon de personnaliser les pages de catégorie WooCommerce dans WordPress sans aucun codage. En suivant ce processus, vous pouvez choisir la mise en page ainsi que le design de votre page d'archive WooCommerce en un rien de temps. Alors, commençons…

Étape #1 : Installer le générateur de pages Elementor et ShopEngine

Pour modifier la page de catégorie de produit de WooCommerce dans Elementor en utilisant le processus présenté dans ce blog, vous aurez besoin de deux plugins WordPress :

• Générateur de pages Elementor
• Moteur de boutique et ShopEngine Pro

ShopEngine est le constructeur ultime de WooCommerce pour le générateur de pages par glisser-déposer - Elementor. Il s'agit d'un module complémentaire pour Elementor qui est livré avec un grand nombre de widgets et de modules pour faciliter la personnalisation de WooCommerce.

Note: Tu peux utiliser le coupon communauté20 pour obtenir 20% OFF sur ShopEngine Pro. Installez d'abord Elementor car ShopEngine dépend de ce générateur de pages. Si vous avez besoin d'aide pour activer ShopEngine Pro, consultez la Documentation.

Étape #2 : Créer un modèle de page de catégorie WooCommerce personnalisé

Une fois que vous avez installé et activé tous les plugins requis, vous devez créer un modèle de catégorie. Pour créer un modèle de page de catégorie personnalisée WooCommerce,

• Aller vers: ShopEngine ⇒ Modèle de constructeur
• Cliquez sur Ajouter un nouveau
• Fournissez un nom de modèle
• Choisissez Type comme archive dans la liste déroulante
• Laissez le champ Catégorie applicable tel quel. est de créer un modèle commun pour toutes les catégories
• Activez l'option Définir par défaut pour remplacer tout modèle de catégorie/page d'archive existant
• Sélectionnez l'option vide sous Sample Design 
• Cliquez sur Modifier avec Elementor pour commencer à créer le modèle

Note: J'ai choisi l'option vide car dans ce blog, je vais montrer comment créez une page de catégorie personnalisée à partir de zéro. ShopEngine propose plusieurs modèle de page de catégorie WooCommerce prédéfini. Si tu veux utiliser un modèle prédéfini, choisissez celui que vous aimez, puis passez à l'étape 5. (les étapes 3 et 4 sont obligatoires si vous souhaitez construire à partir de zéro)

Étape #3 : Choisissez une mise en page/structure pour la page de catégorie WooCommerce

Une fois que vous êtes en mode éditeur, vous devez choisir une structure pour votre page de catégorie WooCommerce.

Je vais utiliser 3 types de mises en page différents pour trois sections différentes afin de créer une page d'archive personnalisée. Vous pouvez faire la même chose que comme indiqué sur le blog ou choisir la mise en page que vous aimez.

Pour choisir une structure, cliquez sur l'icône "+", puis passez la souris sur la mise en page que vous aimez, puis cliquez simplement dessus.

Note: Vous pouvez répéter le même processus pour choisir différentes mises en page.

En rapport: Comment personnaliser la page produit WooCommerce

Étape #4 : glissez et déposez les widgets ShopEngine et personnalisez les paramètres

ShopEngine fournit plus de 8 widgets dédiés pour créer des pages d'archives WooCommerce personnalisées. Ces widgets de page de catégorie sont

• Description des archives
• Produits d'archives
• Titre de l'archive
• Nombre de résultats d'archivage
• Mode d'affichage des archives
• Trier par filtre
• Filtrer les produits par page
• Liste de produits
• Filtres de produits

Je vais en utiliser certains. Vous pouvez choisir de tous les utiliser pour modifier la page de catégorie de produits Elementor WooCommerce. Mais avant cela, vous devez vous assurer que tous les widgets sont activés et disponibles. 

Vous pouvez activer/activer les widgets depuis Moteur de boutique ⇒ Widgets. Ici allume tous les widgets ou ceux que vous allez utiliser et enfin cliquez sur le bouton « Enregistrer les modifications » pour mettre à jour le statut.

je vais choisir un disposition en une seule colonne et faites glisser et déposez les widgets Recherche avancée et Nombre de résultats d'archive.

Vous pouvez sélectionner le widget et personnaliser les paramètres associés. Par exemple, si vous cliquez sur le widget Recherche avancée, dans le panneau de gauche, vous obtenez des options telles que Colonne Produits, Afficher la catégorie dans le résultat de la recherche, Afficher la liste déroulante des catégories, Texte pour toutes les catégories, Icône de recherche, etc.

Maintenant, pour la section suivante, je vais utiliser les étapes décrites à l'étape 3 pour insérer une nouvelle disposition de deux colonnes. Ensuite, faites glisser et déposez les widgets Filtres de produits et Produits d'archive.

Note: Le Le widget de filtre de produits est uniquement disponible avec ShopEngine Pro. Assurez-vous donc d’avoir installé et activé ShopEngine Pro.

Vous pouvez personnaliser les options liées aux filtres telles que le filtre de prix, le filtre de notation, le filtre de couleur, le filtre de catégorie, etc. De plus, vous pouvez personnaliser les options liées à la mise en page telles que le mode d'affichage du filtre, activer le bouton bascule du conteneur, les colonnes (par ligne), etc. Vous pouvez également ajouter une liste d'attributs personnalisés si vous le souhaitez.

Vous pouvez modifier les paramètres de mise en page des produits Archive à partir de l'option de mise en page WooCommerce. Pour plus de détails sur la façon de modifier l'option de mise en page, vous pouvez vérifier ceci doc. De plus, vous pouvez personnaliser les paramètres de contenu tels que le badge de vente flash, afficher les catégories, afficher l'évaluation de la description, etc. Vous pouvez également choisir une icône de pagination personnalisée et un ordre personnalisé du bouton CTA comme Ajouter au panier, Ajouter à la liste de souhaits, Vue rapide, etc. .

En rapport: Comment personnaliser la page Mon compte WooCommerce

Étape #5 : Personnaliser les paramètres de style de la page WooCommerce Archive

Une fois que vous êtes défini avec vos mises en page personnalisées et vos widgets personnalisés, il est temps d'en changer l'apparence en modifiant les paramètres de style de ces widgets. Pour modifier les paramètres de style, vous devez cliquer sur le widget et sur le panneau, accédez à l'onglet Style pour accéder à tous les paramètres de style. Jetons un coup d'œil à l'option de style pour les widgets utilisés dans ce tutoriel :

Recherche Avancée:  Vous pouvez personnaliser diverses options du formulaire de recherche, du style d'icône/texte de recherche, du style de catégorie, du style de produit, du bouton Plus de produits et de la police globale. 

Nombre de résultats d'archivage : Vous pouvez personnaliser les options d'alignement, de couleur et de typographie.

Filtres de produits : Vous pouvez trouver des options pour styliser la section des filtres de produits sous différentes catégories telles que les styles courants, le filtre de prix/curseur de plage, le filtre d'évaluation et le filtre de catégorie.

Produits d'archives : Vous pouvez personnaliser les paramètres de style du produit d'archive en personnalisant les options fournies dans les sections telles que Conteneur de produit, Image du produit, Catégories de produits, Titre du produit, Prix du produit, Étiquette hors, Bouton Ajouter au panier, Évaluation, Vente flash et Pagination.

En rapport: Comment personnaliser la page du panier WooCommerce

Étape #6 : mettre à jour et prévisualiser le modèle de page de catégorie personnalisée WooCommerce

Après avoir terminé la personnalisation du style, cliquez sur le bouton Mettre à jour pour enregistrer. Vous pouvez maintenant soit cliquer sur le bouton d'aperçu pour voir l'aperçu, soit visiter n'importe quelle page de catégorie manuellement et vous devriez voir que le nouveau modèle est activé comme l'aperçu ci-dessous :

Il s’agissait maintenant du processus de création d’une page de catégorie personnalisée pour votre boutique WooCommerce. Mais que diriez-vous de créer un design différent pour chaque catégorie de votre boutique ? Eh bien, vous pouvez également le faire avec ShopEngine. Pour en savoir plus, passez à la section suivante.

Comment créer une page d'archive WooCommerce personnalisée pour chaque catégorie séparément ?

Vous pouvez créer un design totalement différent pour chaque catégorie ou pour une catégorie spécifique uniquement de votre boutique WooCommerce. Pour cela, le processus reste sensiblement le même que montré ci-dessus. Mais en étape 2, Créer un modèle de page de catégorie, toi vous ne pouvez pas laisser le champ Catégorie applicable vide.

Vous devez sélectionnez la catégorie dans le champ Catégorie applicable pour lequel vous souhaitez appliquer le modèle de conception que vous créez. Par exemple, si vous souhaitez créer une conception qui ne devrait être applicable qu'à la catégorie Musique, choisissez Musique dans le champ Catégorie applicable. 

Le reste des étapes sera identique à la création d'une conception de modèle de catégorie générale présentée dans le section ci-dessus.

Note:  Lorsque vous créez un modèle d'archive pour une catégorie spécifique, il sera s'applique uniquement à cette page de catégorie et non au reste des pages de catégorie.
Pour le reste des catégories, vous devez créer un modèle de catégorie différent avec le champ « Catégorie applicable » vide pour toutes les catégories ou un autre pour chacune d'elles. Sinon, le reste des catégories aura le modèle d’archive WooCommerce par défaut ou le modèle proposé par votre thème activé.

Voici un aperçu de différentes pages de catégories WooCommerce avec un design différent construit avec ShopEngine :

Note: L'option permettant de créer différents modèles/conceptions pour différentes catégories de votre site WooCommerce n'est disponible que dans la version Pro de ShopEngine.

Bonus : 5 façons d'optimiser la page de catégorie WooCommerce pour augmenter le taux de conversion 

Voici quelques conseils utiles que vous pouvez suivre pour optimiser votre page d'archive WooCommerce pour augmenter le taux de conversion :

Fournir une option de filtre de produit

Votre page de catégorie affiche par défaut tous les produits de cette catégorie. Mais généralement, les gens recherchent un produit d’une certaine couleur, taille ou tout autre attribut.

Vous devez donc proposer des options pour filtrer et affiner le nombre de produits d’une catégorie en fonction de leur attribut préféré. De cette façon, les gens peuvent facilement trouver leurs produits et cela vous aidera à boostez vos ventes.

Vérifiez également Comment ajouter un sélecteur de devises au site Web WooCommerce en 5 étapes

Ajouter une option de comparaison de produits

Ajout d'un Comparaison de produits L'option de votre WooCommerce aidera les consommateurs à comparer des produits d'un type similaire. Cette option est particulièrement nécessaire si vous proposez des produits numériques comme des mobiles, des montres, etc.

L'option de comparaison de produits aidera les clients à prendre une décision plus rapidement. Et cela vous aidera à atteindre rapidement votre objectif d’augmentation des ventes.

Bouton Liste de souhaits

Liste de souhaits offre la possibilité d'ajouter des produits au panier pour un achat ultérieur. Certaines personnes ne trouvent pas la liste de souhaits aussi efficace en matière de conversion. Mais honnêtement, c'est très efficace.

Parce que les gens ajoutent généralement des produits à leur liste de souhaits lorsqu'ils aiment vraiment le produit mais que, pour une raison quelconque, ils ne peuvent pas l'acheter tout de suite. Mais cela ne veut pas dire que cette personne n’achètera pas les produits plus tard.

Dans la plupart des cas, les gens ont tendance à acheter les produits qu’ils ont ajoutés à leur liste de souhaits. Alors, ajoutez une option de liste de souhaits sur votre page de catégorie WooCommerce.

Option d'affichage rapide

Ajout d'un aperçu rapide Le bouton garantit une expérience utilisateur exceptionnelle, car les utilisateurs n'ont pas besoin de visiter des pages distinctes pour connaître un produit. Grâce à cette option d'affichage rapide, votre client peut rester sur la page de catégorie et connaître les détails des produits en un seul clic.

Si les gens doivent accéder à une page de produit pour la voir, ils peuvent alors quitter votre site sans acheter le produit au cas où ils ne l'aimeraient pas. Cependant, si vous proposez l’option d’affichage rapide afin que les clients puissent consulter plusieurs produits tout en restant sur la même page, cela améliorera l’expérience d’achat. Et par conséquent, cela vous aidera à augmenter les ventes de votre magasin.

Optimisation du référencement sur la page

Les pages de catégorie sont l'indicateur de la hiérarchie des pages sur votre site Web. Donc, optimiser votre page de catégorie pour les moteurs de recherche ne doit jamais être négligé. Parce que, même si vous souhaitez que votre page d'accueil et votre page produit soient classées, votre page de catégorie, si elle est classée, peut également vous apporter beaucoup de trafic.

Plus vous obtenez de trafic sur votre site Web, plus vous aurez de chances d’obtenir plus de conversions. Assurez-vous donc d'ajouter des métadonnées SEO appropriées, d'optimiser les liens internes et externes, d'optimiser l'URL, etc. Vous pouvez demander l'aide de plugins SEO comme Mathématiques de classement, Yoast SEO etc.

Pensez-vous que tous les points semblent valables, mais aurai-je besoin de plusieurs plugins pour ajouter ces options à mon site afin d'augmenter la conversion ?

Eh bien, vous n'avez rien à craindre. Parce que ShopEngine, en plus d'être un fabuleux personnalisateur WooCommerce avec une abondance de Widgets WooCommerce, il fournit également 13+ modules comme la liste de souhaits, le paiement rapide, la comparaison de produits, etc.

De plus, vous pouvez personnaliser votre boutique WooCommerce complète avec ce plugin. en utilisant cet éditeur de catégories, vous pouvez modifier toutes vos pages WooCommerce ; du page de la boutique à page de remerciement. Regardez la vidéo pour découvrir les vastes fonctionnalités que ShopEngine a à offrir.

Autres blogs liés à WooCommerce :

👉 Comment ajouter un champ de paiement personnalisé avancé WooCommerce
👉 Meilleurs plugins de panier d’achat pour WooCoomerce
👉 Comment résoudre l’erreur de panier vide WooCommerce
👉 Comment ajouter un paiement en plusieurs étapes WooCommerce

Derniers mots sur la page de catégorie WooCommerce personnalisée

Une page de catégorie est une page essentielle à la fois pour vos clients et pour les moteurs de recherche. La personnalisation et l'optimisation de vos pages de catégories ne peuvent que vous aider à obtenir plus de succès dans votre activité de commerce électronique. 

La bonne chose est que vous savez maintenant comment personnaliser la page de catégorie WooCommerce dans WordPress et comment optimiser la page pour doubler votre taux de conversion. En plus de cela, vous savez maintenant comment créer des pages de catégories WooCommerce personnalisées pour chaque catégorie séparément.

Vous pouvez tirer parti du générateur WooCommerce le plus complet disponible sur le marché, nommé ShopEngine, pour optimiser la page de catégorie de votre boutique en ligne. Et vous pouvez obtenir son plugin WooCommerce polyvalent sur 20% OFF maintenant !

🔔 🔔 Pour acheter ShopEngine Pro à 20% moins cher utilisez le code promo communauté20.

Alors dépêchons-nous et rejoignons dès maintenant la communauté des amoureux de WooCommerce !