Comment créer un design de page de catégorie WooCommerce personnalisé
Vous cherchez une alternative au design de page de catégorie WooCommerce par défaut dans votre thème WordPress ? La création d’un design personnalisé pour vos catégories de produits WooCommerce vous permet d’offrir une expérience d’achat optimisée, ce qui peut avoir un effet positif sur les résultats de votre boutique.
Avec le bon plugin, créer votre propre mise en page de page de catégorie WooCommerce personnalisée ne doit pas non plus être difficile. C’est ce que nous allons vous montrer dans ce post. Nous allons couvrir comment créer une mise en page personnalisée basée sur un tableau pour vos catégories WooCommerce. Cela vous permet de contrôler exactement les informations qui s’affichent et la façon dont les acheteurs interagiront avec vos produits.
Voici un exemple de ce que vous construirez dans ce post :
Nous commencerons par présenter certains des avantages de cette approche par tableau. Ensuite, nous entrerons dans un guide étape par étape sur la façon de le faire dans votre propre magasin WooCommerce avec le plugin WooCommerce Product Table.
Les avantages de l’utilisation d’une mise en page en tableau pour vos pages de catégorie
Bien que la conception exacte de la mise en page de la page de catégorie de votre boutique de commerce électronique dépende de votre thème WordPress, la conception de la page de catégorie de la plupart des thèmes ressemble à quelque chose comme ceci :
Cette mise en page convient à certaines situations, mais elle limite le nombre de produits que vous pouvez afficher. Elle restreint également la quantité d’informations que vous pouvez fournir sur chaque produit (bien que l’ajout de boutons de visualisation rapide des produits soit un moyen d’atténuer cela).
Woo Multistore ont écrit sur l’importance de concevoir la page de catégorie WooCommerce de manière à stimuler les conversions. Une mise en page en tableau vous aide à surmonter les lacunes en affichant plus de produits et d’informations dans une mise en page compacte qui finit par utiliser moins d’espace, ainsi qu’en ajoutant des fonctionnalités de navigation supplémentaires telles que la recherche et le filtrage.
Cela signifie que vous pouvez obtenir plus de vos produits/détails de produits devant les yeux des acheteurs, ce qui garantit qu’ils peuvent voir l’ensemble de votre catalogue et augmente vos chances qu’ils fassent un achat.
Vous verrez également des avantages SEO avec les moteurs de recherche car vous pouvez afficher plus de contenu personnalisé sur une page entièrement personnalisée (ou des pages de destination aussi). Cela vous permet de montrer les produits qui sont pertinents, puis d’ajouter du texte contextuel aussi. Tout cela devrait être récompensé par des classements plus élevés.
Bien que ce type de mise en page puisse bénéficier à tous les types de magasin de commerce électronique, il est particulièrement utile pour :
- Magasins de gros
- Fichiers numériques (vidéos, fichiers audio, ebooks, etc.)
- Restaurants
- Catalogues de produits
- …beaucoup plus !
Comment créer un design de page de catégorie WooCommerce personnalisé avec WooCommerce Product Table
Un autre avantage de l’utilisation d’une disposition en tableau pour votre design de page de catégorie WooCommerce est que vous pouvez tout configurer sans avoir besoin de connaissances techniques particulières.
Pour ce faire, vous utiliserez le plugin WooCommerce Product Table. Ce plugin répertorie vos produits WooCommerce dans une mise en page de tableau flexible que vous contrôlez, ainsi que la possibilité d’ajouter des filtres, des boîtes de recherche, la pagination, et plus encore.
Vous pouvez également utiliser le plugin pour afficher uniquement les produits de catégories ou sous-catégories spécifiques. WooCommerce Product Table fournit deux façons de le faire :
- Vous pouvez activer de façon centralisée la disposition de la table de produits sur toutes les pages de catégories de produits. (Idéal si vous voulez personnaliser toutes vos pages de catégories de produits.)
- Alternativement, vous pouvez utiliser un shortcode pour créer manuellement vos propres pages de catégories WooCommerce. (Par exemple, si vous voulez utiliser le tableau pour lister les produits de catégories spécifiques uniquement.)
Ci-après, nous vous montrerons comment configurer le tableau de produits WooCommerce pour réaliser les deux options.
Configurer le tableau de produits WooCommerce
Une fois que vous avez installé et activé le plugin WooCommerce Product Table, vous voudrez configurer ses paramètres par défaut.
Cela vous permet de contrôler les informations affichées dans votre tableau de produits et comment tout fonctionne, comme afficher ou non certains attributs de produits ou comment la fonctionnalité d’ajout au panier fonctionnera.
Pour commencer, allez dans WooCommerce → Paramètres → Produits → Tableaux de produits pour accéder aux paramètres du plugin de catégorie.
Il vaut la peine de parcourir tous les paramètres disponibles et de choisir ceux qui correspondent à votre situation unique. Cependant, nous allons juste couvrir les bases qui sont essentielles pour concevoir votre page de catégorie WooCommerce.
Premièrement, trouvez le paramètre Columns sous la section Table content. C’est ici que vous allez contrôler les informations qui apparaissent dans votre tableau. En plus d’afficher les informations de base sur les produits, vous pouvez également afficher les attributs des produits, les champs personnalisés, et plus encore.
Vous pouvez trouver une liste complète des options de colonnes ici, mais cette configuration est une bonne version de base qui fonctionnera pour la plupart des magasins :
image, name, description, price, buy
Plus bas, vous trouverez la section Colonne d’ajout au panier, qui vous permet de contrôler les boutons d’ajout au panier.
Pour attirer les achats en gros, vous pouvez ajouter des cases à cocher qui permettent aux acheteurs d’ajouter en vrac plusieurs produits à leur panier. Ou, vous pouvez aussi simplement ajouter un bouton d’ajout au panier séparé à chaque produit (ou les deux !):
Une fois que vous avez terminé, assurez-vous d’enregistrer vos modifications.
Une fois que vous avez configuré les paramètres du produit, vous avez deux façons de créer vos catégories WooCommerce réelles. Nous les examinerons ensuite.
2a. Activer les tableaux de produits sur toutes les pages de catégories
WooCommerce Product Table est livré avec une option permettant d’ajouter automatiquement la mise en page du tableau de produits à toutes les pages de catégories. Il s’agit de l’option la plus simple, qui ne prend qu’une seconde à configurer.
Sur la page des paramètres du plugin, il suffit de cocher la case ‘Archives des catégories de produits’ :
Cela activera globalement la disposition en tableau pour toutes les catégories, en remplaçant la disposition par défaut fournie avec votre thème.
En savoir plus sur cette méthode.
2b. Utilisez un shortcode pour créer votre propre design de page de catégorie WooCommerce
Vous pouvez également utiliser un shortcode pour lister les produits WooCommerce par catégorie. Cette option est parfaite si vous ne voulez pas utiliser la mise en page du tableau des produits sur TOUTES vos catégories.
Il suffit d’ajouter le shortcode du plugin à une page WordPress ordinaire, et de spécifier les catégories dont vous voulez lister les produits. Répétez le processus autant de fois que vous le souhaitez – une fois pour chaque catégorie.
Avec cette méthode, vous créez essentiellement une nouvelle page de catégorie de produit WooCommerce pour chaque catégorie de produit que vous souhaitez afficher, plutôt que de redessiner la page de catégorie WooCommerce globalement.
Vous pouvez soit continuer à utiliser vos pages de catégorie existantes en conjonction avec votre nouvelle mise en page de tableau. Ou, vous pouvez simplement remplacer les liens vers chaque page de catégorie de produit existante par vos nouvelles pages de catégorie alimentées par tableau. (Conseil : si vous n’utilisez plus les pages de catégories intégrées, redirigez-les vers les nouvelles où vous utilisez des tableaux de produits.)
Pour commencer, allez dans Pages → Ajouter nouveau pour créer une page WordPress de base. Ensuite, ajoutez le shortcode [product_table] à la page. Vous pouvez également ajouter un titre de catégorie en utilisant le champ de titre régulier.
Par défaut, le shortcode affichera tous vos produits WooCommerce.
Cependant, vous pouvez utiliser le paramètre de shortcode catégorie pour filtrer les produits de catégories et/ou sous-catégories spécifiques. Vous pouvez également combiner plusieurs catégories, ou créer des conditions comme un produit devant être dans plusieurs catégories ou sous-catégories pour être affiché.
Par exemple, pour filtrer les produits de la catégorie « chaise », vous pourriez utiliser le shortcode suivant:
[product_table category="chair"]
Si vous voulez ajouter une image de catégorie ou un nom de catégorie, vous pouvez également le faire au-dessus du shortcode en utilisant l’éditeur WordPress ordinaire.
Une fois que vous publiez la page, vous devriez voir votre nouveau design de page de catégorie WooCommerce :
Pour créer des pages pour des catégories WooCommerce supplémentaires, répétez le processus pour chaque catégorie ou sous-catégorie de produits que vous voulez afficher.
Rendre vos catégories WooCommerce plus consultables avec des filtres
Si vous voulez ajouter plus d’outils de recherche et de filtre à vos catégories WooCommerce, vous avez deux options :
- Vous pouvez ajouter des options de recherche, de tri et de filtre via les paramètres de la table de produits WooCommerce. Celles-ci apparaîtront au-dessus ou en dessous de votre tableau de produits.
- Le tableau de produits WooCommerce comprend des widgets que vous pouvez utiliser pour ajouter des filtres à votre barre latérale.
Vous pouvez choisir votre méthode préférée, ou il est aussi tout à fait correct d’utiliser les deux approches en même temps. Cela permettra à vos acheteurs de choisir leur méthode préférée.
Pour ajouter des options de recherche, de tri et de filtre directement dans la mise en page du tableau, allez dans WooCommerce → Paramètres → Produits → Tableaux de produits. Ensuite, faites défiler vers le bas jusqu’à la section Contrôles de tableau et configurez les options selon vos préférences :
Vous pouvez en savoir plus dans cet article d’aide.
Pour utiliser les widgets de filtre, vous pouvez aller dans Apparence → Widgets. Vous y trouverez quatre nouveaux widgets préfixés par « Tableau des produits : ». Vous pouvez ajouter tous les widgets, ou ne choisir que les filtres spécifiques que vous souhaitez inclure :
Voici un exemple de ce à quoi les deux ensembles de filtres pourraient ressembler :
Comment créer un design de page de catégorie WooCommerce personnalisé avec du code
Si vous vous y connaissez en PHP, HTML et CSS, il est également possible de créer un design de page de catégorie WooCommerce personnalisé en utilisant du code, sans plugin WooCommerce.
Vous voudrez travailler avec le fichier archive-product.php dans votre thème ou thème enfant. Vous pouvez également utiliser cette même approche pour modifier vos pages de produits uniques via le fichier single-product ou d’autres parties de votre vitrine.
Malheureusement, parce que vous devrez modifier directement le code dans les fichiers de modèle de votre thème pour effectuer chaque changement, cette méthode n’est pas accessible aux non-développeurs. Nous recommandons de tendre la main à Codeable si vous avez besoin d’aide ou de vous en tenir à la méthode de mise en page de tableau plus simple ci-dessus.
Créer votre conception de page de catégorie WooCommerce personnalisée aujourd’hui!
Créer une conception de page de catégorie WooCommerce personnalisée vous permet d’utiliser une façon plus conviviale pour les acheteurs d’afficher vos produits.
En utilisant une mise en page de page de catégorie basée sur un tableau, vous êtes en mesure d’afficher plus de produits, ainsi que plus de détails sur chaque produit.
Vous pouvez également ajouter de nombreuses options de recherche et de filtre utiles pour aider vos acheteurs à trouver des produits.
En connectant plus efficacement les acheteurs aux produits qui les intéressent, vous pouvez vendre plus de produits et augmenter les revenus de votre magasin.
Pour utiliser une conception de tableau pour vos catégories WooCommerce, vous pouvez utiliser le plugin WooCommerce Product Table. La configuration est facile, et vous n’aurez pas besoin de connaissances techniques particulières pour être opérationnel comme vous le feriez si vous vouliez modifier directement votre fichier de modèle d’archive.
Démarrez dès aujourd’hui et créez un moyen plus efficace pour les acheteurs de parcourir les catégories de produits sur votre boutique WooCommerce.