Comment créer une vue de liste de produits WooCommerce

Mais avant de passer

Pourquoi créer une vue de liste de produits

Mais

Le défaut vue grille des produits sur le site est représenté comme suit :

Cependant, vous ne pouvez pas passer directement à la vue de liste du site Web. Mais si vous voulez voir plus de produits, les produits seront affichés

On voit bien que plus de détails sur le produit sont affichés

En fait, si vous gérez une boutique en ligne avec produits en gros, catalogues de produits ou système de commande de restaurant, la vue en liste est plus pratique pour vos clients. Tous les détails nécessaires peuvent être fournis à vos clients sur une seule page.

Comment créer une vue de liste de produits WooCommerce ?

Le moyen le plus simple de créer une vue de liste de produits WooCommerce consiste à à l’aide d’un plug-in. Les plugins WordPress permettent à votre site Web d’augmenter ses fonctionnalités et d’augmenter sa flexibilité. De même, ils peuvent également être utilisés pour afficher les produits

Bien qu’il existe de nombreux plugins qui vous permettent de créer une vue de liste de produits, voici quelques-uns des meilleurs :

Vue Grille/Liste pour WooCommerce

Vue Grille/Liste pour WooCommerce est l’un des meilleurs plugins gratuits pour créer une vue de liste de produits. Il est très simple à utiliser et ajoute simplement une bascule pour activer la vue en liste ou en grille sur votre page de boutique WooCommerce.

Le plugin vous fournit également diverses options de personnalisation de style de produit de liste et de grille. Il vous offre des options avancées pour modifier le bouton du sélecteur de grille/liste à travers lequel vous pouvez même changer sa position. De même, les produits

Caractéristiques principales :

• Bouton de changement de liste et de grille
• Personnalisation avancée du bouton du sélecteur
• Options de produits
• Compatible avec les codes courts
• Compatibilité avec les principaux plugins WooCommerce

Prix :

Grid/List View pour WooCommerce est un plugin gratuit. Il est disponible sur le référentiel officiel des plugins WordPress.

Tableau des produits WooCommerce

Tableau des produits WooCommerce est un plugin premium qui peut vous aider à créer une vue de liste de produits. Au départ, c’est l’un des plugins WooCommerce pour concevoir un tableau sur votre site web. Mais il peut être facilement affiché pour vos produits

Le plugin est très facile à configurer et permet aux utilisateurs de commander plusieurs produits à la fois. Il fournit également une option de recherche et de tri intégrée pour la vue de liste. Cela peut être une fonctionnalité très pratique pour vos utilisateurs car ils peuvent trouver très facilement les produits souhaités.

Caractéristiques principales :

• Option d’affichage de liste tabulaire pour les produits
• Recherche instantanée de produits et options de tri
• Commande rapide d’une page
• Interface facile à utiliser
• Boutons rapides « Ajouter au panier »

Prix :

WooCommerce Product Table est un plugin premium qui commence à 499 USD

Maintenant que nous avons examiné quelques plugins, voyons également comment les utiliser. Mais avant de commencer, assurez-vous d’avoir correctement configuré WooCommerce sans manquer aucune étape et d’utiliser l’un des thèmes compatibles WooCommerce.

Créer une vue de liste de produits WooCommerce à l’aide d’un plugin

Pour créer la vue de la liste des produits WooCommerce, nous utiliserons la Vue Grille/Liste pour WooCommerce

Mais pour commencer à utiliser n’importe quel plugin, vous devezd’abord l’installer et l’activer.

1. Installez et activez le plugin

Pour installer le plugin, rendez-vous sur Plugins> Ajouter un nouveau depuis votre tableau de bord WordPress. Ensuite, recherchez les mots-clés du plugin et cliquez sur Installer maintenant après l’avoir trouvé.

L’installation sera terminée après un certain temps. finalement Activer le plugin après son installation.

Si vous souhaitez utiliser un plugin premium, vous devrez le télécharger et l’installer manuellement. Veuillez consulter notre guide détaillé pour installer un plugin WordPress manuellement pour plus d’informations.

2. Configurez les paramètres du plug-in

Une fois que vous avez activé le plugin, vous pouvez configurer ses paramètres pour créer une vue de liste de produits WooCommerce. Ouvrir BeRocket > Vue Grille/Liste depuis votre tableau de bord WordPress. Vous pourrez accéder à toutes les options de personnalisation de la vue de votre liste de produits ici.

Les trois principales personnalisations incluent les boutons, le nombre de produits et le CSS personnalisé.

2.1. Options des boutons

Le plugin vous offre une tonne de personnalisations pour vos boutons pour basculer entre la grille ou la liste pour les produits.

Les options générales incluent les styles de bouton

Parallèlement à ces options, vous pouvez également modifier la largeur mobile maximale, la classe personnalisée et les rembourrages du bouton.

De plus, il existe d’autres préréglages de boutons et styles disponibles avec le plugin. Vous pouvez sélectionner un bouton présent et le modifier davantage avec les options de préréglages détaillées. En plus de cela, vous pouvez également modifier les styles de bouton avec la largeur, la hauteur, la taille du texte, la hauteur de ligne, etc.

De plus, vous pouvez également personnaliser le bouton normal, le bouton de la souris et les styles de bouton sélectionnés. Chacun comprend les ajustements pour la couleur d’arrière-plan, la largeur et la couleur de la bordure et les options d’ombre.

Effectuez toutes les modifications nécessaires dont vous avez besoin et cliquez sur Sauvegarder les modifications.

2.2. Options de nombre de produits

Vous pouvez également ajuster les options de nombre de produits en utilisant le plug-in Grid/List View for WooCommerce lorsque vous créez une vue de liste de produits. Tout d’abord, vous pouvez activer ou désactiver l’utilisation du nombre de produits.

Si vous l’activez, vous pouvez en outre ajouter des entrées pour les produits

2.3. CSS/JavaScript personnalisé

Le plugin vous permet également de ajouter du CSS ou du JavaScript personnalisé lorsque vous créez votre vue de liste de produits WooCommerce. Il existe des zones de script désignées pour ajouter votre CSS et JavaScript personnalisés. Le JavaScript peut être ajouté

Vous pouvez également désactiver les fichiers CSS de Font Awesome à partir d’ici ou sélectionner une version de Font Awesome.

Après avoir ajouté le CSS ou JavaScript personnalisé requis, n’oubliez pas de enregistrer les modifications.

Une fois que vous aurez prévisualisé la page de votre boutique, vous pourrez voir la bascule pour basculer entre la vue grille et la vue liste. Le nombre de produits est également indiqué ici et la description du produit est également incluse avec les produits.

Et comme le montre la démonstration ci-dessous, vous pouvez passer à la vue de la liste des produits en cliquant sur le bouton d’affichage de la liste.

Vos clients peuvent même revenir à la vue de grille s’ils le doivent. Ils n’ont qu’à cliquer sur le bouton d’affichage de la grille.

C’est ça ! C’est ainsi que vous pouvez créer une vue de liste de produits WooCommerce et permettre à vos clients de basculer entre la grille et la vue de liste.

Bonus  : Activer le mode catalogue

Nous vous avons déjà présenté l’un des moyens les plus simples de créer une vue de liste de produits WooCommerce. Ils sont très utiles pour mettre en valeur vos produits sur un site catalogue. Cependant, pour vous aider à activer le mode catalogue

Pour ce faire, vous devrez ajouter quelques extraits de code au fichier function.php de votre site Web qui est l’un des fichiers de base de votre thème. Veuillez donc créer un thème enfant pour les prochaines étapes et sauvegarder votre site Web afin que vos modifications soient enregistrées lorsque vous mettez à jour votre thème WordPress. Si vous avez besoin d’aide, vous pouvez également utiliser l’un des plugins de thème enfant pour WordPress pour créer un thème enfant.

Après avoir activé votre thème enfant, accédez à Apparence > Éditeur de fichier de thème et ouvrez le fonctions.php fichier de votre thème. Ensuite, vous pouvez commencer à ajouter les extraits de code à la fin de l’éditeur et Mettre à jour le fichier.

Les fichiers de thème dépendent du thème actif de votre site Web. Nous avons utilisé le thème Divi ici afin que votre éditeur puisse être un peu différent.

Tout d’abord, vous devez supprimer le bouton Ajouter au panier, puis masquer les prix des produits.

1. Supprimer le bouton Ajouter au panier

Vous pouvez utiliser le script suivant pour masquer le bouton ajouter aupanier pour la page boutique et la page produit. Il suffit donc de le coller

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

Cette fonction supprimea la page d’ajout au panier pour la page du produit WooCommerce ainsi que la page de la boutique.

Si vous souhaitez rendre les produits invendablesvous pouvez également ajouter l’extrait de code suivant.

add_filter( 'woocommerce_is_purchasable', '__return_false');

Il remplacera également le bouton Ajouter au panier

2. Cachez les prix des produits

Vous pouvez masquer les prix des produits de différentes manières

Si tu veux masquer les prix des produits pour tous les utilisateursutiliser le script suivant :

add_filter( 'woocommerce_get_price_', 'QuadLayers_remove_price');fonction QuadLayers_remove_price($price){     retour ;}

Alternativement, si vous voulez cacher les prix pour tout le monde sauf l’adminpuis utilisez l’extrait de code suivant :

add_filter( 'woocommerce_get_price_', 'QuadLayers_remove_price');fonction QuadLayers_remove_price($price){ if ( is_admin() ) renvoie $price ;   retour ;}

De plus, vous pouvez également masquer les produits uniquement

add_filter( 'woocommerce_after_shop_loop_item_title', 'remove_woocommerce_loop_price', 2 );fonction remove_woocommerce_loop_price() { if( ! is_shop() ) return; // Masquer les prix uniquement sur la page de la boutiqueremove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );}

Bon travail ! Vous pouvez créer maintenant une vue de liste de produits WooCommerce et activer correctement le mode catalogue sur votre site Web. Si vous souhaitez des méthodes alternatives afficher pour le mode catalogue, nous avons un guide détaillé pour activer le mode catalogue

Conclusion

Nous espérons que vous êtes en mesure de créer maintenant une liste de produits WooCommerce pour votre boutique en ligne. Vous pouvez facilement utiliser un plugin dédié pour permettre à vos clients de passer à une vue de liste de produits. Les plugins leur permettent même de revenir à la vue de la grille si nécessaire avec de nombreuses autres options de personnalisation.

Nous vous avons également fourni quelques étapes de base pour personnaliser la page de la boutique activer le mode catalogue sur votre site Web où vous pouvez également afficher la vue de la liste des produits. Si vous souhaitez apporter des modifications à d’autres pages WooCommerce, vous pouvez également personnaliser la page du panier, la page de catégorie ou même la page de paiement avec des plugins comme WooCommerce Checkout Manager.

Alors, pouvez-vous ajouter une vue de liste de produits sur votre boutique en ligne sans aucun problème ? L’avez-vousdéjà essayé ? S’il vous plaît laissez-nous savoir

En attendant, voici quelques autres de nos articles qui pourraient vous intéresser :

• Comment personnaliser la galerie de produits WooCommerce
• Modifier Aucun produit
• Comment ajouter une image de produit à WooCommerce Checkout