Personnalisez la recherche de produits WooCommerce sur votre site WordPress

Vous souhaitez personnaliser la recherche de produits WooCommerce sur votre boutique en ligne? WooCommerce fournit une page de boutique distincte pour une liste de produits. En modifiant les recherches de produits, votre client peut filtrer le produit souhaité sur la page de la boutique elle-même. Dans cet article, nous étudions comment personnaliser une recherche de produit WooCommerce sur le site WordPress.

WordPress est livré avec le formulaire de recherche intégré. Lorsqu’un utilisateur entre un mot-clé dans un champ de recherche, il sera redirigé vers la page de recherche où le contenu lié au mot-clé s’affichera. Dans WordPress, la page de recherche ressemble normalement à une page de liste de publications.

Ce flux de recherche est idéal pour les sites Web CMS. Mais, en ce qui concerne WooCommerce, nous devons modifier ce flux.

Pour WooCommerce, lorsqu’un utilisateur recherche le produit, il doit afficher le résultat filtré sur la page de la boutique. Cela n’a aucun sens de montrer le résultat dans le format d’une page de liste d’articles.

Laissez-moi vous l’expliquer à travers les captures d’écran.

Dans mon cas, j’utilise le thème ‘twentyfifteen’. J’ai installé le plugin WooCommerce et peu de produits sont répertoriés sur ma page de boutique.

Maintenant, lorsque j’entre le mot-clé "développement" dans le champ de recherche, il sera redirigé vers une page où je vois le produit, comme indiqué dans la capture d’écran ci-dessous.

C’est quelque chose que nous ne voulons pas sur un site Web. Après tout, c’est une boutique en ligne, nous préférons donc que la recherche de produits soit filtrée sur la page de la boutique comme ci-dessous.

Cela dit, voyons comment personnaliser la recherche de produits dans WooCommerce.

Personnaliser la recherche de produits de WooCommerce

WooCommerce stocke tous les produits avec le ‘produit’ post_type. Pour atteindre notre objectif, nous devons passer un paramètre post_type=productdans l’URL de recherche.

Fondamentalement, lorsque nous appuyons sur le bouton de recherche, nous devons modifier l’URL

YOUR_SITE_URL/?s=développement

Avec

YOUR_SITE_URL/?s=development&post_type=product

Pour cela, nous devons créer un searchform.phpfichier dans le répertoire de notre thème actif. C’est le fichier à partir duquel WordPress affiche un formulaire de recherche. Si ce fichier n’est pas trouvé dans un dossier de thème, le formulaire de recherche est rendu à partir du fichier principal de WordPress. Le développeur doit créer ce fichier dans le dossier du thème s’il n’existe pas.

Si vous êtes déjà searchform.phpdans votre thème, il vous suffit d’ajouter un champ masqué au formulaire comme indiqué dans le code ci-dessous.

formulaire de recherche.php

<form method="get" action="<?php echo home_url('/'); ?>">
    <input type="text" name="s" placeholder="What you are looking for?" value="<?php the_search_query(); ?>">
    <input type="hidden" name="post_type" value="product">
</form>

Ici, vous devez ajouter du CSS à ce formulaire et le faire correspondre à la conception de votre site Web.

Notez que nous avons passé un champ masqué avec le nom ‘post_type’ et la valeur ‘product’. C’est la logique réelle pour personnaliser la recherche de produits dans WooCommerce.

Maintenant, essayez d’entrer n’importe quel nom de produit dans le champ de recherche, il vous redirigera vers la page de la boutique. Et sur la page de la boutique, vous verrez le résultat filtré lié au mot-clé.

J’espère que vous comprenez comment personnaliser la recherche de produits WooCommerce sur votre site Web WordPress. J’aimerais entendre vos pensées et suggestions dans la section des commentaires ci-dessous.

Articles Liés

• Un guide rapide sur l’API REST de WooCommerce
• Comment ajouter des points de terminaison personnalisés à l’API WordPress
• Comment afficher les produits associés à l’aide de l’API REST WooCommerce