{
]
<
$
}
]
#
X

NOUS LES DEVS

Customiser l'ordre d'affichage des produits dans Woocommerce

Plusieurs hooks Woocommerce pour étendre les possibilités de tri

Niveau : débutant(e)
</> </> </>

Tri de base

Le catalogue de produits (grille de produits) de votre Woocommerce propose des tris utiles tels que les tris par prix croissants/décroissants, tris par popularité ou encore par note moyenne, des options au final logiques sur un e-shop. Mais dans la plupart des sites de vente en ligne que j’ai pu mettre en place, j’ai dû ajouter soit un tri activé par défaut qui pré-classe les produits avec une logique particulière soit au moins le proposer en tant que tri accessible dans les options de tri et c’est deux choses que j’ai décidé d’aborder dans cet article dédié à Woocommerce.

Contexte de base

Afin de partir sur une base commune, voici ma configuration de départ. Un WordPress sur lequel j’ai installé Woocommerce et ajouté le plugin ACF, installation relativement basique en somme.

J’ai également créé quelques produits, ici des Pokémons (juste pour le fun) pour avoir un retour visuel sur la page du catalogue.

eshop_product_prokemon

Champ priorité

Mon objectif va donc être de permettre de donner un ordre par défaut à mes produits. Grâce au plugin plugin ACF, je peux faire cela rapidement sans devoir ajouter une metabox et le système de sauvegarde qui va avec. J’ai intitulé ce champ « Priorité d’affichage », c’est un champ de type liste déroulante avec comme choix l’énumération ci-dessous et j’affiche ce champ pour tous les types de publication étant égales à Produit.

1 : peu important
2 : banal
3 : assez important
4 : important
5 : très important

J’ai maintenant une fiche produit qui ressemble à ça dans laquelle tu peux voir la box de sélection de priorité et juste en dessous, la fiche produit Woocommerce.

canarticho_product

Meta priorité

A la sauvegarde du produit, une méta va se créer avec l’identifiant ACF que tu as choisi en tant que clé et comme valeur le nombre que tu lui as associé dans la configuration du champ (1 pour peu important, 2 pour banal, etc..). C’est quelque chose qui va être crucial pour la suite, il faut impérativement enregistrer tous les produits et faire un choix ou lancer une loop de sauvegarde (voir tout en bas) pour que chaque produit ait une valeur sous peine de voir des produits absents du catalogue.

P.S. Ne prête pas attention aux méta avec un underscore préfixant le nom du champ que tu as choisi que tu pourrais voir en base de données, celles-ci sont pour le fonctionnement d’ACF.

meta_display_priority

Activer le tri

Lors de l’affichage du catalogue, je vais devoir ajouter un hook au sein de mon thème afin de définir un tri par défaut basé sur la valeur « Priorité d’affichage ». Ce hook se nomme woocommerce_get_catalog_ordering_args et permet d’agir sur les paramètres de tri utilisés par le moteur de récupération de produits de Woocommerce.

A l’intérieur de celui-ci, je vais juste définir que lorsqu’aucun tri n’est déterminé (le !isset), je veux un tri décroissant par Priorité d’affichage, car dans ma configuration « très important » possède la valeur 5 et « peu important » la valeur 1. Pour permettre cela, je dois renvoyer un tableau d’arguments où la meta_key est l’identifiant de mon champ, c’est-à-dire « display_priority » et appliquer à orderby la chaîne « meta_value_num » qui permet de comparer les valeurs de chaque priorité comme étant des nombres. Ensuite, je dois donner la valeur « desc » à order afin de spécifier un ordre de tri décroissant.

P.S. Tu peux placer les hook dans le fichier functions de ton thème WordPress.

add_filter( 'woocommerce_get_catalog_ordering_args', 'GOL_sorting_by_display_priority' );
function GOL_sorting_by_display_priority( $args ) {

	if ( !isset( $_GET['orderby'] ) ) {
		$args["meta_key"] = "display_priority";
		$args["orderby"] = "meta_value_num";
		$args["order"] = "desc";
	}

	return $args;

}

Lorsque j’accède à la page boutique de mon site, je vois que mes produits/pokémons sont affichés dans l’ordre d’importance que j’ai défini dans chaque fiche via le champ « Priorité d’affichage ».

boutique_pokemon

Choix de tri

Sur certaines page, on aura peut-être un tri différent. Ca peut être le cas sur une page promotion par exemple mais pas que. Peu importe la raison, notre tri par défaut ne tient peut-être plus et ne sera pas identique au catalogue mais on voudra le proposer dans la liste des tris disponible. Pour se faire, un deuxième hook est mis à notre disposition, woocommerce_catalog_orderby et permet de choisir finement ce qu’on veut voir apparaitre comme option du select de tri. Dans la portion de code ci-dessous, j’ajoute mon option à la suite des autres.

add_filter( 'woocommerce_catalog_orderby', 'GOL_option_for_select_filter' );
function GOL_option_for_select_filter( $options ){
	$options[ 'display_priority' ] = "Tri par priorité (custom)";
	return $options;
}

Le tri apparaît maintenant avec une option supplémentaire (Tri par priorité, le dernier choix).

boutique_pokemon_option_filter

Attention, pour le faire fonctionner je dois bien évidement adapter la condition (if) que j’avais placée dans la fonction GOL_sorting_by_display_priority.

add_filter( 'woocommerce_get_catalog_ordering_args', 'GOL_sorting_by_display_priority' );
function GOL_sorting_by_display_priority( $args ) {
	if ( !isset( $_GET['orderby'] ) || $_GET['orderby'] == "display_priority" ) {
		$args["meta_key"] = "display_priority";
		$args["orderby"] = "meta_value_num";
		$args["order"] = "desc";
	}
	return $args;
}

Page avec shortcode

Dans certains cas, tu seras peut-être amené à afficher des types de produits spécifiques par page. Dès lors, tu utiliseras sans doute des shortcodes Woocommerce pour te simplifier la vie. Dans l’administration de WordPress ça ressemblera à ceci.

woocommerce_shortcode_products

Si c’est le cas, tu devras placer un nouveau hook dans ton code pour que ton tri par défaut fonctionne également sur cette page. Ce hook se nomme woocommerce_shortcode_products_query et la fonction de rappel devra renvoyer un tableau avec les mêmes paramètres que précédemment.

add_filter( 'woocommerce_shortcode_products_query', 'GOL_ordering_by_custom_order_priority' );
function GOL_ordering_by_custom_order_priority( $args ) {
	$args["meta_key"] = "display_priority";
	$args["orderby"] = "meta_value_num";
	$args["order"] = "desc";
	return $args;
}

Bon tri

A présent, tu peux afficher les produits de ton e-commerce/Woocommerce dans un ordre spécifique via un champ facilement configurable dans l’administration de ton WordPress. Il ne te reste plus qu’à mettre cela en pratique et à améliorer les ventes de ton site web ou à proposer cette fonctionnalité à ton client qui sera sûrement ravi de cette possibilité.

BONUS

Si tu as des milliers de produits, tu ne vas pas perdre ton temps à sauvegarder tes produits un à un. Tu vas peut-être vouloir donner une priorité de base à la majorité de ceux-ci et allouer spécifiquement plus de visibilité à certains . Si c’est le cas, tu peux placer ce code et exécuter l’URL avec les paramètres adéquats. Ça te permettra d’assigner automatiquement une valeur par défaut à tes produits (ajuste les variable selon ton besoin).

add_action( 'init', 'GOL_assign_display_priority_to_all_products' );
function GOL_assign_display_priority_to_all_products(){

	// paramètre dans l'URL pour lancer l'opération
	if( isset($_GET["bulk_action"]) && $_GET["bulk_action"] == "set_defaut_priority" ){
		
		// récupération de tous les produits
		$products = get_posts(array(
			'post_type'=>'product', 
			'posts_per_page' => -1
		));

		// update de la meta
		foreach($products as $product){
			// décommenter pour sélectionner uniquement les produits n'eyant pas la méta
			//if( !get_post_meta($product->ID, "display_priority") ){
				update_post_meta($product->ID, "display_priority", 1);
			//}
		}

	}
}

Correctif

Sur les versions récentes de Woocommerce, j’ai constaté un problème dans le tri de base de la boutique. Cela provient du fait qu’une option est maintenant présente dans la section theme > apparence > woocommerce. Elle permet de définir le tri par défaut.

theme_apparence_woocommerce

Pour résoudre ce conflit, il existe un hook qui permet de définir le orderby par défaut du catalogue.

add_filter( 'woocommerce_default_catalog_orderby', 'default_orderby_for_theme' );
function default_orderby_for_theme( $orderby ){
	return "meta_value_num";
}

10/04/2022

Yann Vangampelaere - nouslesdevs -

NOUS LES DEVS

Vous aimez ce que je fais ? Vous voulez que j'en fasse plus ? dans le développement du blog.