Listes séparées pour afficher les catégories, sous-catégories et produits WooCommerce

WooCommerce vous propose quelques options concernant ce que vous pouvez afficher sur vos pages d'archives :

• Produits
• Catégorie (sur la page principale du magasin) ou sous-catégorie (sur la page de catégorie)
• Produits et catégories

Lorsque je crée un magasin, je choisis généralement la troisième option : Produits et Catégories/Sous-catégories. Cela signifie que les visiteurs de ma boutique peuvent sélectionner des produits directement depuis la page d'accueil ou affiner leurs recherches en cliquant sur les profils de catégories de produits.

Cependant, cette méthode présente un inconvénient : elle affiche les catégories/sous-catégories ensemble, sans séparation entre les deux. Cela signifie que si l'image de votre produit est d'une taille différente de celle de l'image du produit, la mise en page peut sembler un peu déroutante. Même si vos images ont la même taille, si une ligne de votre page d'archives contient à la fois des catégories et des produits, le fait de manquer le bouton « Ajouter au panier » de la catégorie rendra la ligne désordonnée car tous les éléments n'auront pas les mêmes dimensions.

Dans ce tutoriel, je vais vous montrer comment afficher les catégories dans une liste séparée avant d'afficher les produits.

Pour ce faire, nous suivrons quatre étapes :

1. Déterminez le code que WooCommerce utilise pour afficher les catégories et sous-catégories sur les pages d'archives.
2. Créez un plugin pour notre code.
3. Écrivez une fonction qui place une catégorie ou une sous-catégorie avant la liste des produits.
4. Définissez le style de sortie.

Mais avant de commencer, vous devez installer WooCommerce, ajouter quelques produits et configurer des catégories et sous-catégories de produits.

De quoi as-tu besoin

Pour continuer, vous avez besoin de :

• Installation de développement de WordPress
• Éditeur de code
• WooCommerce installé et activé
• Produits ajoutés – J'ai importé les données de produits factices fournies avec WooCommerce, consultez ce guide pour plus de détails sur la façon de procéder ;
• Thème compatible WooCommerce activé - J'utilise Storefront

Avant de commencer : options par défaut

Voyons ce que WooCommerce nous propose par défaut.

J'ai commencé par ajouter quelques images à mes catégories et sous-catégories de produits car les données factices WooCommerce ne les contiennent pas. Je viens d'utiliser une image d'un produit de chaque catégorie ou sous-catégorie, comme indiqué dans la capture d'écran :

Voyons maintenant comment WooCommerce affiche les catégories de produits et les produits sur la page d'archive.

Si vous n'avez pas encore ouvert le personnalisateur, sélectionnez l'ongletWooCommerceet cliquez surCatalogue de produits.

SousAffichage de la page du magasin, sélectionnezAfficher les catégories et les produits, puis sousAffichage des catégoriessélectionnezAfficher les sous-catégories et les produitsstrong>.

Cliquez surPublierpour enregistrer vos modifications et visiter la page de la boutique de votre site Web. Le mien ressemble à ça :

Comme j'ai quatre catégories et une grille de trois images côte à côte, les deux premiers produits apparaîtront côte à côte avec l'une des catégories.

Je souhaite rendre mes catégories et sous-catégories plus visibles et les afficher simplement séparément de la liste des produits. Alors faisons ça.

Identifie le code que WooCommerce utilise pour afficher les catégories et les produits dans les archives

La première étape consiste à déterminer comment WooCommerce exporte les catégories et sous-catégories. Examinons donc le code source de WooCommerce pour trouver les fonctions pertinentes.

Le fichier utilisé par WooCommerce pour afficher les pages d'archives estarchive-product.php, situé dans le dossier des modèles.

Dans ce fichier, vous pouvez trouver ce code, qui affiche les catégories et les produits :

Il existe donc une fonctionwoocommerce_product_subcategories()qui génère des catégories ou des sous-catégories avant d'exécuter une boucle qui génère des produits.

Cette fonction est enfichable, ce qui signifie que nous pouvons la remplacer dans notre thème. Malheureusement, cela ne fonctionne pas entièrement car WooCommerce dispose d'un style intégré pour effacer les éléments, qui apparaîtra au début de la ligne affichée par défaut.

因此，我们将关闭存档页面上类别和子类别的显示，以便仅显示产品。然后，我们将创建一个输出产品类别或子类别的新函数，并将其挂钩到woocommerce_before_shop_loop操作，确保我们使用高优先级，以便它在已经挂钩到该操作的函数之后触发。

注意：由于 WooCommerce 向每个第三个产品列表添加了清除内容，因此我们无法使用woocommerce_product_subcategories()函数或其编辑版本来显示类别。这是因为即使我们使用此功能单独显示类别，它也会清除列出的第三、第六（等等）类别或产品。我们可以尝试覆盖它，但编写我们自己的函数更简单。

          

           Copier après la connexion
          
         

function tutsplus_product_subcategories( $args = array() ) { } add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50 );

$parentid = get_queried_object_id(); $args = array( 'parent' => $parentid ); $terms = get_terms( 'product_cat', $args ); if ( $terms ) { echo '
'; foreach ( $terms as $term ) { echo '
'; woocommerce_subcategory_thumbnail( $term ); echo '
'; echo ''; echo $term->name; echo ''; echo '
'; echo '
'; } echo '
'; }

function tutsplus_product_cats_css() { /* register the stylesheet */ wp_register_style( 'tutsplus_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) ); /* enqueue the stylesheet */ wp_enqueue_style( 'tutsplus_product_cats_css' ); } add_action( 'wp_enqueue_scripts', 'tutsplus_product_cats_css' );

ul.product-cats { margin-left: 0; } ul.product-cats li { list-style: none; margin-left: 0; margin-bottom: 4.236em; text-align: center; position: relative; } ul.product-cats li img { margin: 0 auto; } @media screen and (min-width:768px) { ul.product-cats li { width: 29.4117647059%; float: left; margin-right: 5.8823529412%; } ul.product-cats li:nth-of-type(3) { margin-right: 0; } }