Comment ajouter une barre de recherche personnalisée à WooCommerce pour une découverte plus facile des produits

Publié: 2025-01-04

Ajouter une barre de recherche personnalisée, ici, signifie ajouter une barre de recherche où vous le souhaitez, quel que soit le thème.

Cependant, une barre de recherche ne sert pas seulement à rechercher des produits mais également des catégories de produits, des articles, des pages, etc.

Avec une barre de recherche personnalisée, vous pouvez contrôler la barre de recherche comme vous le souhaitez. Nous verrons tellement de paramètres de personnalisation avec la barre de recherche dans ce blog.

De plus, la barre de recherche est principalement visible sur l’en-tête, mais en fait, elle peut être configurée n’importe où. C'est possible avec une barre de recherche personnalisée.

Qu’entend-on par barre de recherche personnalisée et ses fonctionnalités ?

Table des matières

Basculer

Une barre de recherche personnalisée est dite personnalisée en raison de la flexibilité qu’elle offre.

Il existe différentes manières de définir une barre de recherche. Il peut être inséré à l’aide d’un code court, d’un outil d’insertion de blocs ou d’un widget. De plus, il peut être personnalisé selon les préférences du propriétaire du site Web.

Caractéristiques :

  • Découverte rapide des produits
  • Expérience utilisateur améliorée
  • Fournit des analyses
  • Commodité pour les utilisateurs mobiles

Pourquoi une barre de recherche personnalisée est nécessaire lorsqu'elle est livrée avec des modèles prédéfinis

Lorsque vous importez un modèle de thème, vous obtenez une barre de recherche par défaut mais il peut y avoir certaines limitations.

Il se peut qu'il n'y ait pas la fonctionnalité Live Search, la portée de recherche unique, la personnalisation limitée, etc.

Mais si vous envisagez un plugin doté de fonctionnalités et permettant aux utilisateurs de personnaliser à l'infini, vous pouvez améliorer au maximum l'expérience des utilisateurs.

Ce dont nous avons besoin dans ce blog

Pour ajouter une barre de recherche personnalisée au site Web Woocommerce, nous aurons besoin d'un thème et d'un plugin.

Le thème dont nous avons besoin doit être compatible avec woocommerce, nous prenons donc Shop Mania.
Nous utiliserons TH Advance Search.

Comment ajouter une barre de recherche personnalisée à WooCommerce

Pour la barre de recherche personnalisée, nous avons besoin de TH Advance Search.

Ceci est notre site maintenant, sans en-tête.

Drone without search

Étape 1) Ouvrez le tableau de bord WordPress

Dashboard

Connectez-vous à votre site Web WordPress et ouvrez votre tableau de bord.

Étape 2) Allez dans Plugins et cliquez sur Ajouter un nouveau plugin

Add New Plugin 1

Pour ajouter un nouveau plugin, passez votre curseur sur Plugins et cliquez sur Ajouter un nouveau plugin.

Étape 3) Accédez à la barre de recherche et recherchez le plugin de recherche avancée WordPress

Search advance search

Accédez à la barre de recherche et recherchez Advance WordPress Search Plugin. Trouvez ce plugin et cliquez sur le bouton Installer maintenant . Après l'installation, cliquez sur Activer .

Si vous disposez de la version pro, vous devez alors télécharger le plugin. Voyez comment cela se fait.

Étape 3) Cliquez sur Télécharger le plugin

Upload Plugin

Dans le coin supérieur gauche, vous pouvez trouver le bouton Télécharger le plugin. Cliquez dessus.

Étape 4) Téléchargez, installez et activez le plugin

activate plugin 1 1

Après l'activation, vous pouvez voir le plugin dans la liste des plugins installés.

Après activation, la barre de recherche est automatiquement placée sur l'en-tête.

Drone with seach

Il est automatiquement placé sur l'en-tête mais si vous souhaitez le placer ailleurs. Mais si vous souhaitez le placer ailleurs ou afficher une barre de recherche complète plutôt qu’une icône, alors ses dispositions d’en-tête peuvent vous aider.

Drone Header Layouts

Mais néanmoins, si vous souhaitez ajouter la barre de recherche ailleurs, par exemple sur une page particulière, il existe plusieurs moyens de le faire.

Toutes les méthodes sont abordées dans ce blog.

Mais ce n'est pas fini, par défaut, vous ne pouvez rechercher des publications que lorsque vous consultez les paramètres, vous verrez des options qui vous permettent également de rechercher des pages et des publications.

Search type

Si la publication est sélectionnée, seules les publications sont affichées dans la barre de recherche. Voir l'exemple ci-dessous.

Search posts search

De même, cela fonctionne de la même manière pour la page. En utilisant un seul mot, les recherches associées s'affichent.

De plus, vous pouvez rechercher des catégories avec le type de recherche, c'est-à-dire la catégorie de produit avec le type de produit et la catégorie de publication avec le type de publication. Lorsque vous écrivez rechercher quelque chose et que les deux sont recherchés dans la barre de recherche, les deux s'affichent.

Search category Product

Dans l'image ci-dessus, lorsque j'ai écrit « d », la catégorie est affichée, I,e, Drone, et le même mot est également mentionné quelque part dans les produits, donc 2 produits sont affichés.

Dans ce plugin, vous pouvez tout contrôler, du texte au chargeur. De plus, vous pouvez personnaliser chaque section de la barre de recherche.

Vous pouvez faire correspondre les combinaisons de couleurs de votre site Web avec la barre de recherche.

Search Style

Toutes ces options sont disponibles dans la version gratuite . Si vous souhaitez explorer davantage et utiliser toute la puissance de ce plugin, vous pouvez opter pour la version premium.

Dans la version pro, vous pouvez profiter des fonctionnalités de recherche vocale, de saisie semi-automatique, de personnalisation des couleurs, etc.

FAQ

Q. Quelle est l'importance de la barre de recherche pour un site Web de commerce électronique ?

Rép. Lorsque les utilisateurs accèdent à un site Web de commerce électronique pour trouver un produit, ils accèdent simplement au champ de recherche et saisissent le nom. C'est le moyen le plus pratique de rechercher un produit, car il permet d'économiser du temps et des efforts. Lorsque vous insérez plusieurs fonctionnalités dans la barre de recherche, cela augmente l'expérience, la commodité et la fiabilité des utilisateurs.

Q. Sur quels types de sites Web puis-je définir le type de recherche sur Publication ?

Rép. Il est principalement conçu pour les sites de blogs où il existe de nombreux blogs et où les utilisateurs souhaitent en rechercher un en particulier, puis il peut le rechercher et accéder à la tourbière.

Conclusion

Nous avons donc vu l’ajout d’une barre de recherche personnalisée à woocommerce. En fin de compte, cela contribue à augmenter les ventes car cela a un impact direct sur l'impression du site Web.

TH Advance Search n'est pas uniquement destiné au woocommerce, mais peut être utilisé sur n'importe quel site Web sur lequel les utilisateurs doivent rechercher sur le site, qu'il s'agisse d'un article, d'un blog, d'actualités, etc.

Nous avons également vu non seulement l'utilisation mais aussi la manière d'utiliser ses options de personnalisation, car Th Advance Search est un plugin flexible.

J'espère que ce blog vous aidera. Néanmoins, si vous avez des questions ou des suggestions, faites-le-moi savoir dans la section commentaires.

Vous pouvez vous abonner à notre chaîne YouTube , nous y téléchargeons également du contenu de qualité, et suivez-nous également sur Facebook et Twitter .

Découvrez plus d'articles

  • Comment configurer Google Analytics pour WordPress
  • Comment ajouter Google Maps dans les thèmes WordPress
  • Comment traduire des thèmes WordPress avec le plugin WPML
Mots clés : Barre de recherche personnalisée, WooCommerce