4 méthodes pour changer le nombre de produits WooCommerce affichés par page


Changer le nombre de produits WooCommerce par page | Bannière LearnWoo

Le nombre de produits par défaut dans une page de boutique WooCommerce est de 16, répartis sur 4Rows * 4Columns. Si vous avez beaucoup de produits dans votre boutique WooCommerce, vous voudrez peut-être personnaliser le nombre de produits à afficher sur la page de la boutique. Cela peut être dû à la taille des images, aux widgets ou à d’autres aspects de la conception de votre site.

Néanmoins, dans cet article, nous allons discuter de 4 méthodes simples pour définir le nombre de produits affichés par page dans WooCommerce.

4 méthodes pour changer le nombre de produits WooCommerce affichés par page

Vous pouvez utiliser l'une des quatre méthodes suivantes:

  1. Paramètres de thème WooCommerce par défaut
  2. Paramètres de thème tiers
  3. Extrait de code
  4. Plugin WordPress gratuit

Laissez-nous comprendre chaque méthode en détail.

1. Paramètres du thème WooCommerce par défaut

Si vous utilisez des thèmes par défaut de WooCommerce tels que Twenty Seventeen, Twenty Nineteen, etc., vous pouvez modifier le nombre de produits dans les paramètres «WooCommerce» du thème.

Pour ce faire, cliquez sur le paramètre «Personnaliser» dans le menu d'en-tête supérieur de WordPress, comme indiqué dans la capture d'écran ci-dessous.

<img class = "wp-image-12827 taille complète » title= »Changer le nombre de produits WooCommerce par page | Personnaliser le thème » src= »https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Customize-Theme.png » alt= »Changer le nombre de produits WooCommerce par page | Personnaliser le thème "width =" 1349 "height =" 658 "srcset =" https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Customize- Theme.png 1349w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Customize-Theme-300×146.png 300w, https: // cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Customize-Theme-768×375.png 768w, https://cdn.learnwoo.com/wp-cont /uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Customize-Theme-1024×499.png 1024w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change- Numéro-WooCommerce-Produits-Par-Page-Customize-Theme-533×261.png 533w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page -Customize-Theme-696×339.png 696w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Customize-Theme-1068×521.png 1068w , https://cdn.learnwoo.com/wp-content/upload s / 2019/07 / Changer-Le-Nombre-WooCommerce-Produits-Par-Page-Customize-Theme-861×420.png 861w "tailles =" (largeur-maximum: 1349px) 100vw, 1349px »/>
Personnaliser le thème

Ce paramètre est également accessible à partir de Apparence> Personnaliser.

Ensuite, cliquez sur les paramètres «WooCommerce» dans la barre latérale gauche et allez à «Catalogue de produits». Vous pouvez ensuite faire défiler la barre latérale gauche pour afficher le paramètre «Produits par ligne» et définir le nombre de produits dans chaque ligne. De plus, vous pouvez spécifier le nombre de lignes sur chaque page avec le paramètre «Lignes par page». Ces paramètres vous aideront à configurer le nombre souhaité de produits sur chaque page.

<img class = "wp-image-12829 taille complète » title= »Changer le nombre de produits WooCommerce par page | Paramètres du catalogue de produits WooCommerce » src= »https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-WC-Default-Settings.png » alt= »Changer le nombre de produits WooCommerce par page | Paramètres du catalogue de produits WooCommerce "width =" 1349 "height =" 659 "srcset =" https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page- WC-Default-Settings.png 1349w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-WC-Default-Settings-300×147.png 300w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-WC-Default-Settings-768×375.png 768w, https: // cdn .learnwoo.com / wp-content / uploads / 2019/07 / Numéro-de-changement-WooCommerce-Produits-Par-Page-WC-Défaut-Paramètres-1024×500.png 1024w, https://cdn.learnwoo.com/wp- content / uploads / 2019/07 / Change-Number-WooCommerce-Products-Par-Page-WC-Default-Settings-533×261.png 533w, https://cdn.learnwoo.com/wp-content/uploads/2019/07 /Change-Number-WooCommerce-Products-Per-Page-WC-Default-Settings-696×340.png 696w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce- Produits-Par-Page-WC-Default-Settings-1068×522.png 1068w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-WC-Default-Settings-860×420.png 860w "tailles =" (max -width: 1349px) 100vw, 1349px »/>
Paramètres du catalogue de produits WooCommerce

2. Paramètres de thème tiers

Si vous installez d'autres thèmes tiers, les paramètres WooCommerce par défaut décrits ci-dessus risquent de ne pas être disponibles pour votre thème. En effet, certains thèmes fournissent leurs propres paramètres pour modifier le nombre de produits par page.

Par exemple, le OceanWP le thème fournit ce paramètre sous WooCommerce> Archives> Articles de boutique par page comme indiqué ci-dessous.

<img class = "wp-image-12828 taille complète » title= »Changer le nombre de produits WooCommerce par page | Paramètres du catalogue de produits OceanWP » src= »https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-OceanWP-Settings.png » alt= »Changer le nombre de produits WooCommerce par page | Paramètres du catalogue de produits OceanWP "width =" 1349 "height =" 659 "srcset =" https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page- OceanWP-Settings.png 1349w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-OceanWP-Settings-300×147.png 300w, https: //cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-OceanWP-Settings-768×375.png 768w, https://cdn.learnwoo.com/wp -content / uploads / 2019/07 / Change-Number-WooCommerce-Products-Par-Page-OceanWP-Settings-1024×500.png 1024w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/ Numéro-de-changement-WooCommerce-Produits-Par page-OceanWP-Settings-533×261.png 533w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per -Page-OceanWP-Settings-696×340.png 696w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-OceanWP-Settings-1068×522. png 1068w, https: //cdn.learnw oo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-OceanWP-Settings-860×420.png 860w "values ​​=" (largeur maximale: 1349px) 100vw, 1349px »/>
Paramètres du catalogue de produits OceanWP

En plus de cela, ces thèmes tiers fournissent des paramètres supplémentaires pour une personnalisation plus poussée.

3. Extrait de code

Si votre thème n'affiche ni le paramètre WooCommerce par défaut ni un paramètre personnalisé permettant de modifier le nombre de produits, vous pouvez utiliser un extrait de code simple et l'ajouter au fichier Fonctions de thème (functions.php) du thème de votre site Web activé.

Si vous ne savez pas comment mettre à jour les extraits de code dans ce fichier, consultez notre article pour aider.

Copiez l’extrait de code ci-dessous et collez-le à la fin du functions.php fichier.

//  Modifier le nombre de produits WooCommerce affichés par page
add_filter ('loop_shop_per_page', 'lw_loop_shop_per_page', 30);

fonction lw_loop_shop_per_page ($ products) {
  $ produits = 12;
  retourner les produits $;
}

Dans l'extrait de code ci-dessus, remplacez la valeur 12 avec la valeur de votre choix.

Si l'extrait ci-dessus ne fonctionne pas pour vous, vous pouvez utiliser l'extrait de code suivant.

// Modifier le nombre de produits WooCommerce affichés par page
add_filter ('loop_shop_per_page', create_function ('$ products', 'return 12;'), 30);

Dans l'extrait de code ci-dessus, remplacez la valeur 12 avec le nombre souhaité de produits.

Changer le nombre de colonnes par page

Bien que les extraits de code décrits dans les sections ci-dessus changent le nombre de produits, ils s'afficheront dans le nombre de colonnes par défaut (3) de la page de la boutique. Si vous souhaitez modifier cela, vous pouvez ajouter l’extrait de code ci-dessous dans functions.php fichier.

// Modifier le nombre de colonnes affichées par page
add_filter ('loop_shop_columns', 'lw_loop_shop_columns');

fonction lw_loop_shop_columns ($ colonnes) {
  $ colonnes = 5;
  retourne $ colonnes;
}

Dans l'extrait de code ci-dessus, remplacez la valeur 5 avec le nombre de colonnes souhaité.

Pour démonstration, si nous utilisons un extrait de code pour modifier le nombre de produits (12) décrits dans les sections ci-dessus et l'extrait de code ci-dessus pour modifier le nombre de colonnes (5) par page, nous obtenons une page de magasin, comme indiqué. dans la capture d'écran ci-dessous.

<img class = "wp-image-12826 taille complète » title= »Changer le nombre de produits WooCommerce par page | Extrait de code appliqué au catalogue de produits » src= »https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Code-Snippet-Applied.png » alt= »Changer le nombre de produits WooCommerce par page | Extrait de code appliqué au catalogue de produits "width =" 1020 "height =" 1584 "srcset =" https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per- Page-Code-Snippet-Applied.png 1020w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Code-Snippet-Applied193x300 .png 193w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Code-Snippet-Applied-768×1193.png 768w, https: / /cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Code-Snippet-Applied-659×1024.png 659w, https://cdn.learnwoo.com/ wp-content / uploads / 2019/07 / Changer-Le-nombre-WooCommerce-Produits-Par-Page-Code-Snippet-Applied-696×1081.png 696w, https://cdn.learnwoo.com/wp-content/uploads/2019 /07/Change-Number-WooCommerce-Products-Per-Page-Code-Snippet- Applied-270×420.png 270w "tailles =" (largeur maximale: 1020px) 100vw, 1020px »/>
Extrait de code appliqué au catalogue de produits

4. Plugin WordPress gratuit

Un tel plugin utilisé pour la personnalisation de WooCommerce est le Woo Shortcodes Kit.

<img class = "wp-image-12830 taille complète » title= »Changer le nombre de produits WooCommerce par page | Woo Shortcodes Kit plugin » src= »https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit-Plugin.png » alt= »Changer le nombre de produits WooCommerce par page | Woo Shortcodes Kit plugin "width =" 991 "height =" 464 "srcset =" https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page- Woo-Shortcodes-Kit-Plugin.png 991w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit-Plugin -300×140.png 300w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit-Plugin-768×360.png 768w , https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit-Plugin-696×326.png 696w, https: cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit-Plugin-897×420.png 897w "formats =" (largeur maximale: 991px ) 100vw, 991px »/>
Woo Shortcodes Kit plugin

Ce plugin fournit plus de 60 fonctions et codes courts permettant de personnaliser divers aspects de votre site WooCommerce, tels que le menu, la page de magasin, la page de compte, les comptes d’utilisateur, les accès, les restrictions, l’expérience de paiement, etc.

Pour modifier le nombre de produits par page avec ce plug-in, téléchargez et installez-le, puis accédez au tableau de bord «Paramètres» pour commencer, comme indiqué dans la capture d'écran ci-dessous.

<img class = "wp-image-12832 taille complète » title= »Changer le nombre de produits WooCommerce par page | Paramètres du kit Woo Shortcodes » src= »https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit-Settings.png » alt= »Changer le nombre de produits WooCommerce par page | Paramètres du kit Woo Shortcodes "width =" 1351 "height =" 641 "srcset =" https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page- Woo-Shortcodes-Kit-Settings.png 1351w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit-Settings -300×142.png 300w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit-Settings-768×364.png 768w , https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit-Settings-1024×486.png 1024w, https: // cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit-Settings-696×330.png 696w, https://cdn.learnwoo.com /wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit-Settings-1068×507.png 1068w, https://cdn.learnwoo.com/wp-content uploads / 2019/07 / Changer-Le-Nombre-WooCommerce-Produits-P er-Page-Woo-Shortcodes-Kit-Settings-885×420.png 885w "tailles =" (largeur maximale: 1351px) 100vw, 1351px »/>
Paramètres du kit Woo Shortcodes
  • Faites défiler vers le bas pour trouver les paramètres «PERSONNALISER OU CONSTRUIRE VOTRE PAGE MAGASIN». Cliquez dessus pour révéler d'autres sous-paramètres.
  • Basculez le paramètre «Activer le gestionnaire de produits par page».
  • Cliquez ensuite sur «Afficher les options avancées» dans le coin inférieur droit du paramètre correspondant pour afficher d'autres paramètres.
  • Définissez le nombre de produits par page dans le champ de texte donné.

Une capture d'écran des exemples de paramètres est présentée ci-dessous.

<img class = "wp-image-12831 taille complète » title= »Changer le nombre de produits WooCommerce par page | Changer le nombre de produits par page » src= »https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit-Product-Settings.png » alt= »Changer le nombre de produits WooCommerce par page | Modification du nombre de produits par page "width =" 1204 "height =" 1087 "srcset =" https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per- Page-Woo-Shortcodes-Kit-Product-Settings.png 1204w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes -Kit-Product-Settings-300×271.png 300w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit- Product-Settings-768×693.png 768w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit-Product-Settings -1024×924.png 1024w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit-Product-Settings-696×628. png 696w, https://cdn.learnwoo.com/wp-content/uploads/2019/07/Change-Number-WooCommerce-Products-Per-Page-Woo-Shortcodes-Kit-Product-Settings-1068×964.png 1068w, https://cdn.learnwoo.com/wp-co ntent / uploads / 2019/07 / Changer-Le-Nombre-WooCommerce-Produits-Par-Page-Woo-Shortcodes-Kit-Produit-Paramètres-465×420.png 465w "tailles =" (largeur maximale: 1204px) 100vw, 1204px »/>
Changer le nombre de produits par page avec le plugin Woo Shortcodes Kit

Dans la capture d'écran ci-dessus, le nombre de produits par page est défini sur 12. Vous pouvez modifier la valeur souhaitée. Si vous définissez la valeur comme -1, tous les produits seront affichés sur la même page en supprimant la pagination.

Conclusion

Si vous ne voulez pas toucher vos fichiers ou n'êtes pas à l'aise avec les extraits de code, vous pouvez utiliser un plugin pour effectuer le travail. Bien que le plugin puisse vous aider avec la personnalisation, ce n'est pas une option appropriée si vous avez déjà des plugins longue liste activés sur votre site. Par conséquent, vous ne devez utiliser des plugins que si vous souhaitez davantage de personnalisation que la simple modification du nombre de produits WooCommerce affichés par page. Dans le premier cas, je vous conseille de choisir la méthode d'extrait de code.

Si vous avez trouvé une autre solution, un extrait de code ou un plug-in qui vous convient le mieux, partagez-les dans le commentaire. Bien que j'ai testé toutes les méthodes discutées, je suis curieux de savoir si cela a fonctionné pour vous. Faites-moi savoir dans la section commentaire.

Lecture suggérée:


Vous pouvez consulter des articles de blog sur Les bases de WordPress, WordPress Sécurité & Performance, ou Personnalisations WooCommerce pour en apprendre davantage sur les différents aspects de WordPress et WooCommerce.

Ou continuer à explorer LearnWoo pour des articles plus étonnants.

Partagez cet article

Newsletter

Inscrivez-vous à notre newsletter pour profiter de toutes nos astuces !

Laissez une réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *