11 Fév 2021
Détacher les sous-catégories de votre Woocommerce avec la liste produit

Dissocier les sous-catégories dans Woocommerce de votre liste des produits

Vous pouvez maintenant afficher dans une catégorie Woocommerce différents éléments que vous sélectionnez en back-office. Si vous affichez les sous-catégories ainsi que les produits, ces données sont chargées dans une même liste sans différenciation. Nous allons voir comment les séparer et rendre votre site plus ergonomique.

Comment afficher les sous-catégories dans Woocommerce ?

Vous pouvez définir depuis l’administration WordPress sur chaque catégorie ce que vous souhaitez afficher.

Vous avez 3 choix :
– Valeur par défaut (de votre thème)
– Des produits uniquement
– Des sous-catégories uniquement
– Les deux

Pour faire ce choix, vous devez vous rendre dans une catégorie Woocommerce dans l’onglet produit.

Ensuite vous avez un menu déroulant pour faire votre choix :
Choix d'un affichage dans la catégorie de produit sur Woocommerce

L’affichage des sous-catégories est un bon moyen si de créer un filtre de recherche pour le client. l’intérêt c’est de simplifier la recherche d’un produit à l’utilisateur.

Dans ce tutoriel nous allons se connecter sur un type d’affichage produit et sous-catégories.

Le problème d’affichage dans Woocommerce des sous-catégories

Une fois le type d’affichage mis en place, vous pouvez aller voir le rendu sur votre site.

Par exemple, voici ci-dessous le rendu que j’ai en utilisant le thème Proteo de Yithemes.

Exemple d'un affichage des sous-catégories et des produits

Nos 2 t-shirts à vendre sont à la suite des 3 sous-catégories.

Tout est bien chargé, cependant, c’est dommage que ces 2 types d’éléments ne soient pas différenciés dans l’affichage de la page.

En réalité, tout est chargé dans une liste HTML en front-office. Dans ce <ul> nous avons chaque élément dans des <li>.

Créer une liste de sous-catégories en les détachants des produits

Le but du tutoriel est de permettre d’avoir une liste unique pour les sous-catégories.

Cela va vous permettre ensuite d’appliquer du CSS pour mettre en forme selon votre thème.

Dans un premier temps, connectez-vous à votre serveur FTP et ouvrez le function.php de votre template.

Suivez ce chemin pour le trouver : /wp-content/themes/nomdevotrethme/function.php.

Vous devez intégrer cela :

/**
* Déplacez les éléments de la liste de sous-catégories WooCommerce
* dans leur propre <ul> séparé du produit <ul>.
*/

add_action( 'init', 'move_subcat_lis' );

function move_subcat_lis() {
	// Suppression des sous-catégories de leur emplacement
	remove_filter( 'woocommerce_product_loop_start', 'woocommerce_maybe_show_product_subcategories' );
	add_action( 'woocommerce_before_shop_loop', 'msc_product_loop_start', 40 );
	add_action( 'woocommerce_before_shop_loop', 'msc_maybe_show_product_subcategories', 50 );
	add_action( 'woocommerce_before_shop_loop', 'msc_product_loop_end', 60 );
}

/**
 * Début d'une nouvelle liste pour les sous-cat avec une classe CSS
 */
function msc_product_loop_start() {
	$subcategories = woocommerce_maybe_show_product_subcategories();
	if ( $subcategories ) {
		echo '<ul class="sub-cat">';  //products wrapper
	}
}

/**
 * Intégration des sous-cat dans le nouvel emplacement
 */
function msc_maybe_show_product_subcategories() {
	echo woocommerce_maybe_show_product_subcategories();
}

/**
 * Fin de la boucle produit </ul> S'il y a des sous-cat.
 */
function msc_product_loop_end() {
	$subcategories = woocommerce_maybe_show_product_subcategories();
	if ( $subcategories ) {
		woocommerce_product_loop_end();
	}
}

Vous pouvez jouer avec les différents hooks pour positionner le contenu.

Nous allons voir l’affichage sur le site suite à l’intégration de ce code, avant l’application de CSS.

Affichage des sous-catégories dans un ul sur Woocommerce

On voit que maintenant, les produits sont détachés des sous-catégories. Ils sont dans leur propre liste <ul>.

Je vais donc appliquer du CSS pour adapter les éléments à la charte graphique de mon site.

Je vais vous fournir un style à adapter selon votre thème et vos éléments graphiques.

ul.sub-cat{
	margin:0;
	padding: 0;
	display: -webkit-box;   
 	display: -moz-box;        
 	display: -ms-flexbox;     
  	display: -webkit-flex;     
  	display: flex;
  	flex-wrap: wrap;
  	align-content: center;
  	list-style-type: none;
  	list-style: none;
  	width: 100%;  	
}

ul.sub-cat > * {
	flex: 1 1 25%;
}

ul.sub-cat li {
    list-style: none;
    margin-bottom: 2em;
    text-align: center;
}

ul.sub-cat li a {
	text-decoration: none;
}

ul.sub-cat li h2 {
	font-size: 1.1em;
	color: #000
}

ul.sub-cat li mark {
	background: transparent;
}

@media screen and (max-width:767px) {
	ul.sub-cat > * {
		flex: 1 1 50%;
		padding: 0.5em
	}
}

J’ai appliqué ce style CSS. J’ai dupliqué une catégorie existante pour montrer une meilleure ergonomie et voici le rendu :

Page catégorie produit woocommerce et sous-categorie

On pourrait faire d’autres ajustements avec un bordure de séparation par exemple.

Je vous laisse libre choix pour adapter graphiquement votre contenu.

Conclusion

Cette astuce va vous permettre d’utiliser pleinement les catégories de produits. Si vous avez beaucoup de données sur votre site, permettre aux utilisateurs une navigation fluide entre les pages est très important.

Cela va permettre de créer un entonnoir pour les visiteurs qui seront amenés à naviguer vers ce qu’ils recherchent précisément.

Il faut savoir que les catégories sont visibles dans le fil d’ariane de vos produits.

Les utilisateurs peuvent remonter facilement de page en page et chercher un élément en particulier grâce aux sous-catégories.

Si vous souhaitez personnaliser un peu plus votre Woocommerce, je vous invite à lire mon article : Personnaliser facilement Woocommerce avec n’importe quel thème.

Source : Twoelevenjay – Github

Vous souhaitez ne pas avoir de catégorie dans la même liste que les produits ?

– Connexion à votre WordPress
– Intégration du code dans votre thème
– Test en front-office

Commandez un ticket de support Woocommerce pour que j’intervienne sur votre site.

Laisser un commentaire

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