La plupart des templates WordPress compatibles Woocommerce intègrent aujourd’hui des pages de résultats de recherche bien finalisées. En revanche si votre projet est la création pure et dure d’un thème compatible Woocommerce vous serez confrontés à un moment donné au problème d’affichage de la page de recherche produits.

Par défaut le moteur de recherche affichera les résultats de la requête comme si nous avions effectué une recherche d’articles, il utilisera alors la loop Wordpress classique dans le fichier « search.php » et sur certaines installations cela peut donner ceci :

Pas super n’est-ce pas ? Pour donner un peu plus d’énergie à cette page on va tout simplement lui donner un affichage e-commerce, le même que sur vos autre pages commerçantes.

Il convient alors d’analyser ce qui se passe au niveau de l’URL. L’astuce consiste à indiquer qu’on effectue la requête sur le post type produit.

Recherche classique
domaine.com/?s=motcle

Recherche après le tweak
domaine.com/?s=motcle&post_type=product

On obtient alors ceci :

La boucle (loop) Woocommerce est récupérée automatiquement et les résultats sont affichées de la même manière que les produits dans votre page boutique, shop…

 

Automatiser l’insertion du paramètre « post_type=product » dans les requêtes

On ne va certainement pas demander à nos clients d’ajouter ce paramètre pour effectuer leurs recherches sur votre boutique.

Pour ajouter constamment ce paramètre aux requêtes de votre site c’est très simple, on va ajouter un input de type caché dans le formulaire de recherche.

Exemple avec le fichier searchform.php

<form class="search" method="get" action="<?php echo home_url(); ?>" role="search">
<input class="search-input" type="search" name="s" placeholder="<?php _e( 'To search, type and hit enter.', 'html5blank' ); ?>">
<input type="hidden" name="post_type" value="product">
<button class="search-submit" type="submit" role="button"><?php _e( 'Search', 'html5blank' ); ?></button>
</form>

En ajoutant <input type= »hidden » name= »post_type » value= »product »> au formulaire, les requêtes prendront alors tout le temps le paramètre produit nécessaire à l’affichage boutique.

 

Cet exemple a été réalisé avec une configuration WordPress standard, il se peut que vous utilisiez une extension pour vos recherches. Il conviendra alors de localiser le formulaire et y ajouter notre ligne de code cachée.