Do you want to add custom WooCommerce search widgets to your online store?
Adding a search widget to your website helps visitors to find your products faster. By doing this, you get to boost conversion and improve user experience.
In this article, we’ll show you how to add custom WooCommerce search widgets easily without writing any code!
Puntos Clave:
- Why is it necessary to add a product search to WooCommerce
- How to add custom WooCommerce search widgets
- How to improve WooCommerce product search
Why Add Custom WooCommerce Search Widgets?
Product search is an important part of the eCommerce shopping experience. If your store visitors can’t find the products they need, they may look elsewhere.
The default WooCommerce product search feature is slow and lacks the power your store needs. It doesn’t index product attributes, categories, tags, and reviews. This makes it hard to give relevant search results.
Want to improve your online store’s search experience? Then, you need to add custom WooCommerce search widgets where applicable.
You can add a search box at certain locations on your site, like the sidebar. With this widget, your users can navigate your store better and complete purchases faster.
A custom product search widget has lots of other benefits. For example, you can control where you want the search engine to look for results. You can choose to index product attributes like variations, tags, and short descriptions.
This will help your users find all the products with a specific attribute. For example, they can easily search for items tagged ‘refurbished’ in an electronics store.
You can add a search widget to WooCommerce either by writing code manually or using a WordPress plugin. Some benefits of using a plugin include:
- You get to save time.
- No need to hire a developer.
- You don’t require any technical expertise.
- There’s little to no risk of breaking your site.
Let’s learn how to add custom WooCommerce search widgets to your website below.
How to Add Custom WooCommerce Search Widgets (Easily)
The easiest way to add a custom search widget to WooCommerce is to use a plugin, and SearchWP is the best WordPress search plugin for this task.
SearchWP improves your native WordPress search by indexing everything on your website. By doing this, your site visitors won’t miss out on any product, document, or page they need.
With this plugin, your search engine will no longer ignore important product details like variations, categories, and tags. This means your users get to find relevant WooCommerce products faster.
Besides WooCommerce search, SearchWP also offers other powerful features like
- PDF and office document indexing. If you sell books or other text-based resources, your users will be able to find them more easily. SearchWP considers the content of document files in your media library when searching.
- Visitor statistics and insights. You get to see what your visitors are searching for. You can use this information to improve your services.
- Multiple search engine support. Set up different search fields in different site locations and pages. You can customize each field to meet unique user search needs in each location.
Once you install and activate SearchWP, it’ll automatically add these features to your store.
You can use the plugin to add custom WooCommerce search widgets in 4 steps.
Paso 1: Instalar y activar SearchWP
Visit SearchWP’s official website and pick the package that suits you best.
Then, download a copy of the plugin from your account. You can install and activate it like any other WordPress plugin.
After activation, you need to insert the license key. You can do that by navigating to SearchWP > Add License Key.
Paste the license key (which can be found in your SearchWP Account Dashboard) in its respective field, then press Verify Key.
Your verification is successful when you can see the licensing information.
SearchWP is all set and ready for use!
Step 2: Install and Activate the WooCommerce Extension
SearchWP comes with a WooCommerce extension that automatically indexes your WooCommerce products once activated.
Please visit SearchWP > Extensions and find WooCommerce Integration from the list. Then, click Install.
You’ll see it is successfully installed and activated within a few moments. With this, SearchWP will have access to your WooCommerce products.
Finally, we’ll show you how to create custom WooCommerce Search widgets, but before that, you need to configure the search engine.
Step 3: Set Up a SearchWP Custom Search Engine
A custom WooCommerce search widget allows your users to search for products in different ways. To support this, you need control over how your search engine looks for products.
SearchWP lets you select different sources. You can also adjust the relevance of each product or content attribute. For example, you can choose to index the product title, short description, or category.
You can even create multiple search engines and display them on different pages. This will offer your user a unique search experience on each page.
To customize your SearchWP engine, click SearchWP > Algorithm from the left sidebar of your WordPress dashboard.
To set up a WooCommerce product search, click Sources & Settings.
A modal will pop up with a list of sources to choose from. Select Products from the list box. Click Done after choosing sources that interest you.
Then click Save so that SearchWP can start rebuilding your search index based on the new settings.
Finally, it’s time to display your custom WooCommerce search widget on your website. Let’s talk about how you can do this in the next step below.
Step 4: Add WooCommerce Search To Your Website
Now, you need to create a search bar so that your customers can start searching for their desired products.
Si necesita usar un widget o un bloque para crear la barra de búsqueda, dependerá del tema que esté utilizando. Un widget de búsqueda de WooCommerce es su mejor opción si está utilizando un tema clásico. Por otro lado, si está utilizando un tema moderno de FSE (edición completa del sitio), entonces utilizar un bloque de búsqueda de WooCommerce es el método estándar.
Añade una barra de búsqueda en cualquier lugar de tu sitio web, independientemente del método que utilices. Aquí te mostramos cómo puedes añadir la búsqueda de WooCommerce a tu sitio web para ambos casos.
Paso 4.1 Añadir widget de búsqueda de WooCommerce para temas clásicos
Puedes añadir un widget de búsqueda de WooCommerce personalizado en cualquier lugar de tu sitio si tu tema lo admite. Veamos cómo puedes añadir el widget en la barra lateral. También puedes colocarlo en cualquier lugar de tu sitio, como en la cabecera y el pie de página. Depende de tus necesidades, pero el proceso es similar.
Para añadir el widget a la barra lateral de tu sitio web, visita Apariencia > Widgets.
En la página de configuración de widgets, selecciona el área donde deseas añadir el widget y haz clic en el icono + . En este tutorial, añadiremos el widget de búsqueda al área de la barra lateral.
Escribe "search" en el campo y luego selecciona el icono de búsqueda.
Esto añadirá un formulario de búsqueda que puedes personalizar según tus necesidades. Luego, haz clic en Actualizar en la esquina superior derecha. Tu barra lateral ahora tiene un widget de búsqueda de WooCommerce personalizado.
¡Ahora visita el front-end de tu sitio web y ve tu widget de búsqueda de WooCommerce en acción!
Paso 4.2 Añadir bloque de búsqueda de WooCommerce para temas modernos de FSE
Antes de mostrar la barra de búsqueda, necesitarás crear un formulario de búsqueda. El proceso es rápido y fácil con SearchWP y no implica escribir ningún código.
Para crear un formulario de búsqueda, ve a SearchWP > Formularios de búsqueda y haz clic en "Añadir nuevo".
Elige un nombre para tu formulario de búsqueda, selecciona un diseño de tema y configúralo según tus necesidades. Ten en cuenta que SearchWP te permite configurar múltiples motores, aprovechando los cuales puedes servir contenido diferente en diferentes ubicaciones de tu sitio web.
Elegir SearchWP como página de resultados te da control total y optimización de la página de resultados de búsqueda de WordPress. Aquí tienes un tutorial detallado sobre cómo optimizar la página de resultados de búsqueda de WordPress.
Una vez que hayas terminado de configurar el formulario de búsqueda. Haz clic en "Guardar". Si estás interesado en aprender más, aquí tienes un tutorial detallado sobre cómo crear un formulario de búsqueda avanzado en WordPress.
Ahora, abre la página donde deseas mostrar la barra de búsqueda en modo de edición. Haz clic en el icono "+ Añadir bloque", luego busca y selecciona "Formulario de búsqueda" de la lista de bloques.
Luego, elige el formulario de búsqueda que creaste hace unos momentos.
Ahora deberías ver la barra de búsqueda mostrada en la ubicación deseada. Haz clic en "Actualizar" para publicar la barra de búsqueda de WooCommerce.
¡Ahora visita el front-end de tu sitio web y ve tu búsqueda de WooCommerce en acción!
Conclusión
En este artículo, has aprendido tanto cómo añadir widgets de búsqueda de WooCommerce personalizados en temas clásicos de WordPress como cómo añadir formularios de búsqueda de WooCommerce personalizados en temas modernos de FSE (bloques).
Ahora, los visitantes de tu tienda online pueden encontrar productos relevantes de forma más rápida y sencilla. SearchWP está repleto de fantásticas funciones para que a tus clientes les resulte cómodo encontrar lo que buscan.
Consigue SearchWP ahora para mejorar tu tienda online y mantenerte por delante de tus competidores.
