Comment afficher les produits WooCommerce par catégorie

Publié: 2020-08-16

WooCommerce Afficher les produits par catégorie Vous gérez une boutique WooCommerce et vous souhaitez afficher les produits par catégorie dans WordPress ? Cet article explique en détail comment afficher les produits WooCommerce par catégorie. Si vous connaissez WooCommerce, vous savez que les catégories de produits jouent un rôle important dans l'organisation de vos produits pour un affichage et un accès appropriés par vos clients.

Afficher les produits WooCommerce par catégorie

Dès la sortie de la boîte, WooCommerce vous offre quelques options quant à ce que vous pouvez afficher sur vos pages d'archives telles que les produits, les catégories ou les sous-catégories ou les produits et les catégories . Cependant, la plupart des utilisateurs de WooCommerce optent pour la troisième option pour afficher à la fois les produits et les catégories/sous-catégories. trier les catégories woocommerce

Cette option permettra à votre visiteur de sélectionner des produits directement à partir de la page d'accueil ou d'affiner sa recherche en cliquant sur une archive de catégorie de produits.

Cependant, le principal inconvénient est qu'il affiche les catégories/sous-catégories ensemble, sans séparation entre les deux. Cela rend la mise en page un peu désordonnée en raison des différentes dimensions de l'image.

D'un point de vue d'expert, même si vos images ont la même taille, si l'une des lignes de la page d'archives comprend à la fois des catégories et des produits, l'absence d'un bouton "Ajouter au panier" pour les catégories rend cette ligne désorganisée, car tous ses éléments n'ont pas les mêmes dimensions.

Dans ce bref didacticiel, vous apprendrez à afficher les catégories dans une liste distincte avant d'afficher les produits.

Identifiez ou distinguez le code dans WooCommerce, qui est utilisé pour générer des catégories et des sous-catégories sur les pages d'archives.
Créez un plugin personnalisé pour le code.
Écrivez une fonction qui placera des catégories ou des sous-catégories avant les listes de produits.
Créez un style personnalisé pour la sortie.

a) Afficher à la fois les produits et les catégories ou sous-catégories

Étapes pour afficher à la fois les produits et les catégories ou sous-catégories.

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Tableau de bord, cliquez sur Menu Apparence > Personnaliser. Cliquez sur la page Boutique et sélectionnez WooCommerce > Catalogue de produits. Dans l'option Affichage de la boutique , sélectionnez Afficher les catégories et les produits . Dans l'option d'affichage des catégories , sélectionnez Afficher les sous-catégories et les produits comme indiqué ci-dessous :
N'oubliez pas d' enregistrer les modifications que vous apportez.
Ce sera le résultat :

b) Afficher la catégorie de produits WooCommerce

Cependant, vous pouvez afficher la catégorie de produits WooCommerce à l'aide d'un extrait de code ci-dessous, qui doit être placé dans le fichier functions.php.

Étapes pour afficher la catégorie de produits WooCommerce

Voici les étapes que vous devez suivre :

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Tableau de bord, cliquez sur Menu Apparence > Éditeur de thème Lorsque la page Éditeur de thème est ouverte, recherchez le fichier des fonctions du thème où nous ajouterons la fonction qui affichera la catégorie Produit WooCommerce.
Ajoutez le code suivant au fichier php :

 function woocommerce_product_category( $args = array() ) {

    $woocommerce_category_id = get_queried_object_id();

  $args = tableau(

             'parent' => $woocommerce_category_id
  );

  $terms = get_terms( 'product_cat', $args );

  si ( $termes ) {

             echo '<ul class="woocommerce-categories">' ;

             foreach ( $termes comme $terme ) {

             echo '<li class="woocommerce-product-category-page">' ;

            woocommerce_subcategory_thumbnail( $term );

             echo '<h2>' ;

             echo '<a href="' . esc_url( get_term_link( $term ) ). '" class="' . $term->slug . '">';

             echo $terme->nom ;

             echo '</a>';

             echo '</h2>' ;

             echo '</li>' ;

             }

             echo '</ul>';

  }

}

add_action('woocommerce_before_shop_loop', 'woocommerce_product_category', 100);

Ce sera le résultat :

Cependant, il a besoin de CSS personnalisés pour bien afficher les produits. Nous le ferons plus tard dans ce tutoriel.

Comment fonctionne le code

Ce code fonctionne simplement en utilisant la woocommerce_product_category() function qui génère les catégories ou sous-catégories avant d'exécuter la boucle qui génère les produits. Il peut remplacer le thème, car la fonction est enfichable.

c) Liste des sous-catégories d'une catégorie de produits WooCommerce

Il est très facile d'obtenir la sous-catégorie des catégories de produits WooCommerce en utilisant une fonction personnalisée qui tire parti du slug de la catégorie de produits parent.

Étapes pour répertorier les sous-catégories d'une catégorie de produits WooCommerce

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Tableau de bord, cliquez sur Menu Apparence > Éditeur de thème Lorsque la page Éditeur de thème est ouverte, recherchez le fichier de fonctions de thème où nous ajouterons la fonction qui répertoriera les sous-catégories d'une catégorie de produits WooCommerce.
Ajoutez le code suivant au fichier php :

 fonction woocommerce_get_product_category_of_subcategories( $category_slug ){

$terms_html = tableau();
$taxonomie = 'product_cat';
$parent = get_term_by( 'slug', $category_slug, $taxonomy );
$children_ids = get_term_children( $parent->term_id, $taxonomy );

foreach($children_ids as $children_id){

    $term = get_term( $children_id, $taxonomy );

    $term_link = get_term_link( $term, $taxonomy );

    if ( is_wp_error( $term_link ) ) $term_link = '';

    $terms_html[] = '<a href="' . esc_url( $term_link ) . '" rel="tag" class="' . $term->slug . '">' . $terme->nom . '</a>' ;
}

renvoie '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>' ;

}

Ce sera le résultat :

Comment fonctionne le code.

L'objet WP_Term obtient le parent de la catégorie de produit. Ensuite, il obtient l'ID enfant dans un tableau, et enfin, les catégories enfants sont affichées dans le HTML en exécutant une boucle dans le tableau d'ID enfant.

d) Identification du code utilisé par WooCommerce pour générer des catégories et des produits dans les archives

Avant de créer un plugin, la première étape consiste certainement à identifier comment WooCommerce génère les catégories et sous-catégories. Cela signifie que nous devons rechercher manuellement le code source de WooCommerce pour trouver la fonction appropriée.

Pour vous simplifier le processus, recherchez simplement le archive-product.php , qui se trouve dans le dossier des modèles. C'est le fichier que WooCommerce utilise pour afficher les pages d'archives. Vous devez maintenant trouver le code qui affiche les catégories et les produits :

 <?php
/**
* crochet woocommerce_before_shop_loop
*
* @hooked woocommerce_result_count - 20
* @hooked woocommerce_catalog_ordering - 30
*/

do_action( 'woocommerce_before_shop_loop' );
?>

<?php woocommerce_product_loop_start(); ?>

<?php woocommerce_product_subcategories(); ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php wc_get_template_part( 'contenu', 'produit' ); ?>

<?php pendant que ; // fin de la boucle. ?>

<?php woocommerce_product_loop_end(); ?>

Comment fonctionne le code :

La woocommerce_product_subcategories() function les catégories ou sous-catégories avant d'exécuter la boucle qui génère les produits. La raison pour laquelle j'ai attiré votre attention sur cette fonction est qu'elle est enfichable, ce qui signifie que nous pourrions la remplacer dans notre thème.

Cependant, cela ne fonctionnera pas car WooCommerce a un style intégré pour effacer les éléments, qui apparaîtraient au début d'une ligne avec l'affichage par défaut. Alors, que devrions-nous faire? La réponse est simple. Nous devons désactiver l'affichage des catégories et sous-catégories sur nos pages d'archives afin que seuls les produits soient affichés.

Après cela, l'étape suivante consiste à créer une nouvelle fonction qui génère les catégories ou sous-catégories de produits et à l'accrocher à l' woocommerce_before_shop_loop action , en veillant à utiliser une priorité élevée afin qu'elle se déclenche après les fonctions qui sont déjà accrochées à cette action.

Il est cependant important de noter que WooCommerce ajoute des clairs à chaque troisième liste de produits. Cela signifie que nous ne pouvons pas utiliser la woocommerce_product_subcategories() function ou une version modifiée de celle-ci pour afficher les catégories. L'explication à cela est que cette fonction effacera la troisième, sixième (et ainsi de suite) catégorie ou produit répertorié, même lorsque nous utilisons cette fonction pour afficher les catégories séparément. Cela signifie que nous devons créer une fonction qui la remplacerait. Cela peut être fait en créant un plugin.

e) Création du plugin

Vous devez d'abord créer un nouvel ancien et lui donner un nom unique dans le répertoire wp-content/plugins . Pour cet exemple, soyez prudent lorsque vous suivez les étapes afin que vous puissiez obtenir la fonctionnalité dont nous avons besoin. Je vais utiliser ce nom njengah-separate-products-categories-in-archives .

Dans ce dossier, vous devez créer un nouveau fichier, toujours avec un nom unique. J'utiliserai également le même nom pour ce dossier njengah-separate-products-categories-in-archives.php .

Étapes pour créer le plugin

Ouvrez votre fichier et ajoutez le code suivant :

 <?php
/**
* Nom du plugin : catégorie de produit WooCommerce
* Description : Afficher les catégories WooCommerce sur les pages de produits WooCommerce

**/

Avant d'écrire notre fonction, vous devez désactiver les listes de catégories dans les écrans d'administration en vous connectant à votre site WordPress et accéder au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Tableau de bord, cliquez sur Menu Apparence > Personnaliser. Cliquez sur la page Boutique et sélectionnez WooCommerce > Catalogue de produits. Dans l'option Affichage de la boutique , sélectionnez Afficher les produits . Dans l'option d'affichage de la catégorie , sélectionnez Afficher les produits .
N'oubliez pas d' enregistrer les modifications que vous apportez.
Ce sera le résultat :
Ajoutez ceci au fichier du plugin :

 function njengah_product_subcategories( $args = array()) {

}

add_action( 'woocommerce_before_shop_loop', 'njengah_product_subcategories', 50 );

Ensuite, vous devez ajouter ce code dans la fonction :

 $parentid = get_queried_object_id();

$args = tableau(

'parent' => $identifiant parent

);

$terms = get_terms( 'product_cat', $args );

si ( $termes ) {

echo '<ul class="product-cats">' ;

foreach ( $termes comme $terme ) {

echo '<li class="category">' ;

woocommerce_subcategory_thumbnail( $term );

echo '<h2>' ;

echo '<a href="' . esc_url( get_term_link( $term ) ). '" class="' . $term->slug . '">';

echo $terme->nom ;

echo '</a>';

echo '</h2>' ;

echo '</li>' ;

}

echo '</ul>';

}

Ce sera le résultat : Afficher les produits WooCommerce par catégorie

Comme vous pouvez le voir sur l'image ci-dessus, les catégories ne sont pas bien organisées. Cela signifie que nous devons ajouter notre style personnalisé. Cependant, avant cela, apprenons comment le code fonctionne.

Comment fonctionne le code

La fonction que nous avons créée identifie l'objet actuellement interrogé et définit son identifiant comme $parentid . Ensuite, il utilise get_terms() pour identifier les termes avec l'élément actuellement interrogé comme parent. S'il s'agit de la page principale de la boutique, elle renverra les catégories de niveau supérieur et s'il s'agit d'une archive de catégorie, elle renverra les sous-catégories.

De plus, la fonction vérifie s'il y a des termes, avant d'ouvrir une boucle pour chaque et un élément ul . Cela signifie que pour chaque terme, il crée un élément li , puis génère l' category image using woocommerce_subcatgeory_thumbnail() , suivi du nom de la catégorie dans un lien vers son archive.

Étapes pour styliser les listes de catégories

Ce sont les étapes que vous devez suivre, mais pour ce faire, nous avons besoin d'une feuille de style dans notre plugin, que nous devrons mettre en file d'attente.

Créez un dossier appelé CSS , et à l' intérieur de celui-ci, créez un fichier appelé CSS. Cela devrait être fait dans le dossier du plugin pour que cela fonctionne .
Ajoutez ce code en haut de la fonction que vous avez déjà créée :

 function njengah_product_cats_css() {




/* enregistrer la feuille de style */

wp_register_style( ' njengah _product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );




/* mettre la feuille de style en file d'attente */

wp_enqueue_style( ' njengah _product_cats_css' );




}




add_action( 'wp_enqueue_scripts', ' njengah _product_cats_css' );

L'étape suivante consiste à ouvrir votre feuille de style et à ajouter le code ci-dessous. Cependant, il est important de noter que WooCommerce utilise le style mobile d'abord, c'est donc ce que nous utiliserons également.

 ul.product-cats li {
style de liste : aucun ;
marge-gauche : 0 ;
marge inférieure : 4,236 em ;
aligner le texte : centrer ;
position : relative ;
}

ul.product-cats li img {
marge : 0 automatique ;
}


Écran @media et (min-width:768px) {

ul.product-cats {
marge-gauche : 0 ;
clarifier les deux;
}

ul.product-cats li {
largeur : 29,4117647059 % ;
flotteur : gauche ;
marge droite : 5,8823529412 % ;
}

ul.product-cats li:nth-of-type(3) {
marge-droite : 0 ;
}

}

Ce sera le résultat :

Conclusion

Dans cet article, j'ai mis en évidence différentes manières d'afficher les produits WooCommerce par catégorie. À partir de ce bref tutoriel, vous pouvez comprendre pourquoi les catégories de produits sont une fonctionnalité intéressante de WooCommerce, mais la façon dont elles sont affichées n'est pas toujours idéale.

De plus, vous avez appris à créer un plug-in qui génère des catégories ou sous-catégories de produits séparément des listes de produits et à styliser les listes de catégories. La partie la plus remarquable de ce didacticiel est la création du plugin personnalisé qui génère une liste de catégories ou de sous-catégories sur la page, en associant la fonction à un crochet d'action différent dans le fichier de modèle WooCommerce.

Comment afficher les produits WooCommerce par catégorie

Afficher les produits WooCommerce par catégorie

a) Afficher à la fois les produits et les catégories ou sous-catégories

Étapes pour afficher à la fois les produits et les catégories ou sous-catégories.

b) Afficher la catégorie de produits WooCommerce

Étapes pour afficher la catégorie de produits WooCommerce

Comment fonctionne le code

c) Liste des sous-catégories d'une catégorie de produits WooCommerce

Étapes pour répertorier les sous-catégories d'une catégorie de produits WooCommerce

Comment fonctionne le code.

d) Identification du code utilisé par WooCommerce pour générer des catégories et des produits dans les archives

Comment fonctionne le code :

e) Création du plugin

Étapes pour créer le plugin

Comment fonctionne le code

Étapes pour styliser les listes de catégories

Conclusion

Articles similaires