{"id":25085,"date":"2021-05-30T16:23:00","date_gmt":"2021-05-30T13:23:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25085"},"modified":"2021-10-18T02:10:25","modified_gmt":"2021-10-17T23:10:25","slug":"personnalisez-la-recherche-de-produits-woocommerce-sur-votre-site-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/personnalisez-la-recherche-de-produits-woocommerce-sur-votre-site-wordpress\/","title":{"rendered":"Personnalisez la recherche de produits WooCommerce sur votre site WordPress"},"content":{"rendered":"

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\u00e9 sur la page de la boutique elle-m\u00eame. Dans cet article, nous \u00e9tudions comment personnaliser une recherche de produit WooCommerce sur le site WordPress.<\/p>\n

WordPress est livr\u00e9 avec le formulaire de recherche int\u00e9gr\u00e9. Lorsqu’un utilisateur entre un mot-cl\u00e9 dans un champ de recherche, il sera redirig\u00e9 vers la page de recherche o\u00f9 le contenu li\u00e9 au mot-cl\u00e9 s’affichera. Dans WordPress, la page de recherche ressemble normalement \u00e0 une page de liste de publications.<\/p>\n

Ce flux de recherche est id\u00e9al pour les sites Web CMS. Mais, en ce qui concerne WooCommerce, nous devons modifier ce flux.<\/p>\n

Pour WooCommerce, lorsqu’un utilisateur recherche le produit, il doit afficher le r\u00e9sultat filtr\u00e9 sur la page de la boutique. Cela n’a aucun sens de montrer le r\u00e9sultat dans le format d’une page de liste d’articles.<\/p>\n

Laissez-moi vous l’expliquer \u00e0 travers les captures d’\u00e9cran.<\/p>\n

Dans mon cas, j’utilise le th\u00e8me ‘twentyfifteen’. J’ai install\u00e9 le plugin WooCommerce et peu de produits sont r\u00e9pertori\u00e9s sur ma page de boutique.<\/p>\n

\"Personnalisez<\/a><\/p>\n

Maintenant, lorsque j’entre le mot-cl\u00e9 "d\u00e9veloppement" dans le champ de recherche, il sera redirig\u00e9 vers une page o\u00f9 je vois le produit, comme indiqu\u00e9 dans la capture d’\u00e9cran ci-dessous.<\/p>\n

\"Personnalisez<\/a><\/p>\n

C’est quelque chose que nous ne voulons pas sur un site Web. Apr\u00e8s tout, c’est une boutique en ligne, nous pr\u00e9f\u00e9rons donc que la recherche de produits soit filtr\u00e9e sur la page de la boutique comme ci-dessous.<\/p>\n

\"Personnalisez<\/a><\/p>\n

Cela dit, voyons comment personnaliser la recherche de produits dans WooCommerce.<\/p>\n

Personnaliser la recherche de produits de WooCommerce<\/h3>\n

WooCommerce stocke tous les produits avec le ‘produit’ post_type. Pour atteindre notre objectif, nous devons passer un param\u00e8tre post_type=product<\/code>dans l’URL de recherche.<\/p>\n

Fondamentalement, lorsque nous appuyons sur le bouton de recherche, nous devons modifier l’URL<\/p>\n

YOUR_SITE_URL\/?s=d\u00e9veloppement<\/p>\n

Avec<\/p>\n

YOUR_SITE_URL\/?s=development&post_type=product<\/p>\n

Pour cela, nous devons cr\u00e9er un searchform.php<\/code>fichier dans le r\u00e9pertoire de notre th\u00e8me actif. C’est le fichier \u00e0 partir duquel WordPress affiche un formulaire de recherche. Si ce fichier n’est pas trouv\u00e9 dans un dossier de th\u00e8me, le formulaire de recherche est rendu \u00e0 partir du fichier principal de WordPress. Le d\u00e9veloppeur doit cr\u00e9er ce fichier dans le dossier du th\u00e8me s’il n’existe pas.<\/p>\n

Si vous \u00eates d\u00e9j\u00e0 searchform.php<\/code>dans votre th\u00e8me, il vous suffit d’ajouter un champ masqu\u00e9 au formulaire comme indiqu\u00e9 dans le code ci-dessous.<\/p>\n

formulaire de recherche.php<\/strong><\/p>\n

<form method=\"get\" action=\"<?php echo home_url('\/'); ?>\">\n\u00a0\u00a0\u00a0\u00a0<input type=\"text\" name=\"s\" placeholder=\"What you are looking for?\" value=\"<?php the_search_query(); ?>\">\n\u00a0\u00a0\u00a0\u00a0<input type=\"hidden\" name=\"post_type\" value=\"product\">\n<\/form><\/code><\/pre>\n
Ici, vous devez ajouter du CSS \u00e0 ce formulaire et le faire correspondre \u00e0 la conception de votre site Web.<\/p>\n
Notez que nous avons pass\u00e9 un champ masqu\u00e9 avec le nom ‘post_type’ et la valeur ‘product’. C’est la logique r\u00e9elle pour personnaliser la recherche de produits dans WooCommerce.<\/p>\n
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\u00e9sultat filtr\u00e9 li\u00e9 au mot-cl\u00e9.<\/p>\n
J’esp\u00e8re que vous comprenez comment personnaliser la recherche de produits WooCommerce sur votre site Web WordPress. J’aimerais entendre vos pens\u00e9es et suggestions dans la section des commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n