Dissocier les sous-catégories Woocommerce de votre liste produit

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)
– Uniquement des produits
– Uniquement des sous-catégories
– 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 :

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

Dans ce tutoriel nous allons nous 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.

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.

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 :

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

Je vous laisse libre choix pour adapter graphiquement votre contenu.

Menu WordPress en back-office, afficher les catégories produits

Petite astuce, j’ai mis en place pour réaliser ce tutoriel un nouveau site. J’ai dû créer un menu WordPress et je ne pouvais pas choisir les catégories de produits. Je pouvais uniquement déterminer les catégories d’article blog.

C’est assez problématique pour ma boutique Woocommerce, vu que mes pages les plus importantes sont mes catégories. Au lieu de devoir les créer une par une à la main, vous pouvez choisir vos catégories depuis le menu WordPress en un clic.

Sur votre page menu dans “apparence”, rendez-vous tout en haut à droite et cliquez sur “option de l’écran”.

Des options vont s’afficher et vous devez sélectionner “Catégories de produits”. Et vous verrez, un peu plus bas, à gauche de votre menu, la possibilité de choisir ces catégories de produits pour les ajouter dans le menu et le construire plus facilement.

Optimiser la navigation de votre boutique Woocommerce

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