Liste des produits WooCommerce par catégorie »NJENGAH

Vous gérez une boutique WooCommerce et 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 saurez que les catégories de produits jouent un rôle important dans l’organisation de vos produits afin que vos clients puissent les voir et y accéder correctement.

Voir les produits WooCommerce par catégorie

WooCommerce vous donne immédiatement quelques options sur les éléments à afficher sur vos pages d’archives, telles que: Produits, catégories ou sous-catégories, ou les deux produits et 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.

Avec cette option, votre visiteur peut soit sélectionner des produits directement depuis la page d’accueil, soit affiner sa recherche en cliquant sur une archive de catégories de produits.

Le principal inconvénient de ceci, cependant, est que les catégories / sous-catégories apparaissent ensemble sans séparation entre les deux. Cela rend la mise en page un peu chaotique en raison des différentes dimensions de l’image.

Même si vos images sont de la même taille et que l’une des lignes de la page d’archive contient à la fois des catégories et des produits, l’absence de bouton « Ajouter au panier » pour les catégories rendra cette ligne désorganisée. Tous les éléments n’ont pas les mêmes dimensions.

Ce tutoriel rapide vous montrera comment afficher les catégories dans une liste séparée avant d’afficher les produits.

Identifiez ou distinguez le code dans WooCommerce utilisé pour afficher les catégories et sous-catégories sur les pages d’archives.
Créez un plugin personnalisé pour le code.
Écrivez une fonction qui place les catégories ou sous-catégories devant 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 les produits et les catégories ou sous-catégories.

Connectez-vous à votre site WordPress et accédez-y les tableau de bord en tant qu’administrateur.
Dans le menu Tableau de bord, cliquez sur Menu Affichage> Personnaliser. Cliquez dessus Page de la boutique et sélectionnez WooCommerce> Catalogue de produits. Sur le Annonce de la boutique Sélectionnez une option Voir les catégories et produits. Sur le Affichage de la catégorie Sélectionnez une option Affichez les sous-catégories et les produits comme suit:
Rappelles toi sauver les changements que vous apportez.
Ce sera celui 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 à suivre:

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu’administrateur.
Dans le menu Tableau de bord, cliquez sur Menu Affichage> Editeur de sujets Si la Éditeur de thème La page s’ouvre, recherchez le sujet Fichier de fonction Ici, nous ajoutons la fonctionnalité qui affichera la catégorie de produits WooCommerce.
Ajoutez le code suivant au php Déposer:

function woocommerce_product_category( $args = array() ) {

    $woocommerce_category_id = get_queried_object_id();

  $args = array(

             'parent' => $woocommerce_category_id
  );

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

  if ( $terms ) {

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

             foreach ( $terms as $term ) {

             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 $term->name;

             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 nécessite un CSS personnalisé pour que les produits s’affichent correctement. Nous le ferons plus tard dans ce didacticiel.

Comment fonctionne le code

Ce code fonctionne uniquement avec le woocommerce_product_category() function Cela affichera les catégories ou sous-catégories avant d’exécuter la boucle dans laquelle les produits sont vidés. Il peut écraser le sujet 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 à l’aide d’une fonction personnalisée qui tire parti de la catégorie de produit 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’administrateur.
Dans le menu Tableau de bord, cliquez sur Menu Affichage> Editeur de sujets Si la Éditeur de thème La page s’ouvre, recherchez le sujet Fichier de fonction Ici, nous ajoutons la fonctionnalité utilisée pour répertorier les sous-catégories d’une catégorie de produits WooCommerce.
Ajoutez le code suivant au php Déposer:

function woocommerce_get_product_category_of_subcategories( $category_slug ){

$terms_html = array();
$taxonomy = '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 . '">' . $term->name . '</a>';
}

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

}

Ce sera le résultat:

Comment fonctionne le code.

le WP_Term L’objet reçoit la catégorie de produit supérieure. Il obtient ensuite l’ID enfant dans un tableau, et enfin les catégories enfants sont affichées dans le HTML en bouclant le tableau d’ID enfant.

d) Identifier le code que WooCommerce utilise pour sortir les catégories et les produits dans les archives

Avant de créer un plugin, nous devons d’abord déterminer comment WooCommerce génère des catégories et des sous-catégories. Cela signifie que nous devons rechercher manuellement le code source de WooCommerce pour trouver la fonction correspondante.

Pour vous faciliter la tâche, effectuez simplement une recherche archive-product.phpsitué 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 génère les catégories et les produits:

<?php
/**
* woocommerce_before_shop_loop hook
*
* @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( 'content', 'product' ); ?>

<?php endwhile; // end of the loop. ?>

<?php woocommerce_product_loop_end(); ?>

Voici comment fonctionne le code:

le woocommerce_product_subcategories() function imprime les catégories ou sous-catégories avant d’exécuter la boucle qui renvoie les produits. La raison pour laquelle j’ai porté cette fonctionnalité à votre attention est qu’elle est connectable, ce qui signifie que nous pouvons la remplacer dans notre thème.

Cependant, cela ne fonctionne pas car WooCommerce a une conception intégrée pour supprimer les éléments qui apparaissent 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.

Ensuite, l’étape suivante consiste à créer une nouvelle fonction qui génère les catégories ou sous-catégories de produits et les lie au woocommerce_before_shop_loop actionAssurez-vous que nous utilisons une priorité élevée afin qu’elle se déclenche après les fonctionnalités déjà liées à cette action.

Cependant, il est important de noter que WooCommerce ajoute des effacements à chaque troisième liste de produits. Cela signifie que nous ne pouvons pas utiliser cela woocommerce_product_subcategories() function ou une version modifiée de celui-ci pour afficher les catégories. L’explication en est que cette fonctionnalité supprimera la troisième, sixième (ou ainsi de suite) catégorie ou le produit répertorié, même si nous utilisons cette fonctionnalité 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 en créer un nouveau plus ancien et lui donner un nom unique contenu wp / plugins Annuaire. Dans cet exemple, soyez prudent lorsque vous effectuez les étapes afin d’obtenir les fonctionnalités dont nous avons besoin. J’utiliserai ce nom njengah-separate-products-categories-in-archives.

Dans ce dossier, vous devez créer un nouveau fichier 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 dossier et ajoutez le code suivant:

<?php
/**
* Plugin Name: WooCommerce Product Category
* Description: Display WooCommerce categories on WooCommerce product pages

**/

Devant Si vous écrivez notre fonctionnalité, vous devrez désactiver les listes de catégories dans les écrans d’administration en vous connectant et en accédant à votre site WordPress tableau de bord en tant qu’administrateur.
Dans le menu Tableau de bord, cliquez sur Menu Apparence> Personnaliser. Cliquez dessus Page de la boutique et sélectionnez WooCommerce> Catalogue de produits. Sur le Annonce de la boutique Sélectionnez une option Afficher les produits. Sur le Affichage de la catégorie Sélectionnez une option Afficher les produits.
Rappelles toi sauver les changements que vous apportez.
Ce sera celui Résultat::
Ajouter ceci à propos du fichier plugin:

function njengah_product_subcategories( $args = array()) {

}

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

Ensuite, vous devez coller ce code dans la fonction:
```
$parentid = get_queried_object_id();

$args = array(

'parent' => $parentid

);

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

if ( $terms ) {

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

foreach ( $terms as $term ) {

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

woocommerce_subcategory_thumbnail( $term );

echo '<h2>';

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

echo $term->name;

echo '</a>';

echo '</h2>';

echo '</li>';

}

echo '</ul>';

}
```
Ce sera le résultat:

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é. Mais avant cela, apprenons comment fonctionne le code.

Comment fonctionne le code

La fonction que nous avons créée identifie l’objet actuellement interrogé et définit son ID comme $parentid. Alors utilisez-le get_terms() pour identifier les termes avec l’élément actuellement interrogé en tant qu’élément parent. S’il s’agit de la page principale du magasin, il renverra les catégories de niveau supérieur, et s’il s’agit d’une archive de catégories, il renverra des sous-catégories.

De plus, la fonction vérifie les termes avant d’ouvrir un pour chaque boucle et un ul Élément. Cela signifie qu’un est créé pour chaque terme li Élément, puis sort que category image using woocommerce_subcatgeory_thumbnail(), suivi du nom de la catégorie dans un lien vers ses archives.

Étapes de conception des listes de catégories

Ce sont les étapes que vous devez suivre, mais pour ce faire, nous aurons besoin d’un Feuille de style dans notre plugin que nous devons mettre en file d’attente.

Créer un dossier appelé CSS, et Dans Créez ensuite un fichier appelé CSS. Cela devrait être fait dans le dossier plugins pour que cela fonctionne.
Ajouter Ce code en haut de la fonction que vous avez déjà créée:

function njengah_product_cats_css() {




/* register the stylesheet */

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




/* enqueue the stylsheet */

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 suivant. Il est important de noter, cependant, que WooCommerce utilise un style mobile d’abord, nous allons donc l’utiliser également.

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 {
margin-left: 0;
clear: both;
}

ul.product-cats li {
width: 29.4117647059%;
float: left;
margin-right: 5.8823529412%;
}

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

}

Ce sera le résultat:

Conclusion

Dans cet article, j’ai mis en évidence différentes façons dont vous pouvez afficher les produits WooCommerce par catégorie. Ce tutoriel rapide vous aidera à comprendre pourquoi les catégories de produits sont une excellente fonctionnalité dans WooCommerce, mais la façon dont elles sont affichées n’est pas toujours idéale.

Vous avez également appris à créer un plug-in qui génère des catégories de produits ou des sous-catégories séparément des listes de produits et à mettre en forme les listes de catégories. La partie la plus remarquable de ce didacticiel est la création du plugin personnalisé qui affichera une liste de catégories ou de sous-catégories sur la page en ajoutant la fonction à un autre crochet d’action dans le fichier de modèle WooCommerce.