Uno de los elementos que tus clientes más agradecerán que esté presente en tu tienda online (sobretodo si ésta cuenta con una gran cantidad de items) es un buscador de productos.

Hoy veremos una de mis opciones favoritas para cubrir tan importante función: El plugin Fibosearch.

Como siempre, nos vamos a centrar más en el tema Divi, pero éste plugin puede utilizarse perfectamente en cualquier tema de WordPress y Woocommerce.

¿Y qué hay del módulo buscador de Divi?

Nuestro querido tema Divi cuenta con un módulo de buscador. Sin embargo, éste no se centra exclusivamente en productos. Sino que busca y muestra todo tipo de publicaciones. Así que no ayuda mucho a nuestros fines.

Si es que trabajas con el plugin Divi plus, que aumenta el arsenal de módulos que trae Divi, notarás que entre sus módulos se encuentra uno de buscador de productos. También es una opción interesante. Aunque, personalmente prefiero utilizar como buscador, el plugin del que hablaremos en el post.

En caso que deseen adquirir el plugin Divi plus, (Recuerden que agrega a Divi muchos módulos nuevos sumamente interesantes, incluyendo carruseles de productos) en su sitio con actualizaciones de por vida, puedes adquirirlo a un buen precio desde la página de Rapihosting (nuestro proveedor de hosting WordPress de confianza). Dale un vistazo su servicio de activación de licencias Premium desde aquí, seguro alguna te llamará la atención.

Fibosearch: Plugin buscador de productos ajax Woocommerce

Como decía trabajeremos con el plugin Fibosearch. Es un plugin que cuenta con una versión gratuita y de pago. Aunque cabe mencionar que con la versión gratuita, ya podemos montar un buscador sumamente potente y completo.

Entre sus ventajas está que la búsqueda de productos es vía ajax. Lo cuál significa que muestra resultados, sin necesidad de recargar la página. Como veremos más abajo en la configuración, nos da un gran control sobre qué elementos de cada producto se mostrará en los resultados.

Por otro lado, es muy sencillo de insertar en nuestros diseños a través de un shortcode. Por lo que podremos agregar la barra de búsqueda dónde se nos ocurra. Veámos como instalar y configurar el plugin.

Instalando el plugin buscador de productos: Fibosearch

Desde la pestaña de plugins, vamos a “añadir nuevo” y buscamos “Fibosearch”. Buscamos la opción que aparece como en la imagen de abajo, y le damos a instalar y luego a activar. Seremos dirigidos a una página que menciona dónde sólo debemos hacer click al botón “Saltar”.

Configuraciones Principales de Fibosearch

Luego de instalarlo, seremos redirigidos a su página de configuraciones. También pueden llegar allí desde la pestaña Woocommerce y la subpestaña Fibosearch.

En ésa página principal ya nos muestra las formas de insertar el buscador. Lo vamos a hacer a través del shortcode: [fibosearch].

Antes de pasar a insertar la barra, daremos un repaso rápido a las principales configuraciones necesarias.

Antes de empezar a configurar, vamos a activar la opción que se ve en la imagen de abajo. La que dice: “Mostrar ajustes avanzados”. Para ver las opciones completas.

Pestaña: Barra de Búsqueda

Aquí vamos a empezar con algunas configuraciones importantes. La primera, la de caracteres mínimos, se refiere a cuántos caracteres serán necesarios escribir en la barra, para que el plugin empiece a buscar. Pueden dejarlo en 3.

La opción de Ancho máximo del formulario, tiene un valor por defecto de 600px. Es preferible dejarlo en blanco, para que la barra de búsqueda ocupe un 100% del lugar dónde se encuentre.

También pueden elegir si desean mostrar un botón de “enviar”. Y más abajo, elegir el texto que se mostrará en la barra de búsqueda de productos.

Luego, en apariencia, podemos elegir un estilo. Una plantilla (Si sólo quieres mostrar una barra de búsqueda o un ícono) y la opción de superposición en el móvil.

Ésta última opción es muy importante y recomiendo tenerla activada. Lo que hace es que al hacer click a la barra o ícono de búsqueda en móviles, se abre una ventana de tamaño de toda la pantalla. En esa ventana es mucho más sencillo realizar las búsquedas.

Al activar la opción, también te preguntará por un breakpoint. El plugin quiere saber, a qué tamaño de pantalla tu diseño considera que deja de ser escritorio y pasa a ser de móvil. Por defecto aparece el valor de 992px.

Si utilizas el tema Divi, el valor con el que trabaja es de 980px.

Más abajo, además, encontrarás algunas opciones para definir algunos colores.

Pestaña Autocompletar

En la sección de “básico”, definimos el límite de resultados de búsqueda que se mostrarán, y podemos cambiar el texto que aparecerá cuando no hay resultados. La parte de resultados grupales, recomiendo dejarla activada.

En la sección de “Productos”, Podemos definir qué datos de los productos queremos que se muestren en los resultados. Éstos pueden ser: La imagen, El precio, La descripción corta o el SKU. Asimismo, podemos elegir el texto de “Más resultados”

Más abajo, recomiendo activar las opciones de “Mostrar las categorías” y “Mostrar las etiquetas”, para que también sean buscadas como si fueran productos. Interesante opción.

Otra configuración que seguro les llamará la atención es la del: “Panel de detalles”. Si la activan, como verán en la imagen de abajo, se mostrará los detalles del producto al cual se le pase el mouse. Incluso dando la opción de añadirlo al carrito. ¡Todo desde el mismo buscador!

Igual que en la sección anterior, también hay un apartado para definir los colores deseados.

Pestaña: Ajustes de Búsqueda

Ésta parte es también sumamente importante. Aunque la mayoría de opciones están disponibles sólo en la versión pro, con las gratuitas tenemos más que suficiente. Recomiendo activar para que busque el término en cuestión, tanto en la descripción, como en la descripción corta y el SKU.

Más abajo también pueden decidir si desean excluir los productos que se encuentran agotados.

Como ven, así de rápido ya configuramos lo necesario para que nuestra barra de búsqueda de productos ajax Woocommerce, trabaje a toda potencia.

Insertando la barra de búsqueda en nuestro diseño

Como se mencionó anteriormente, bastará con agregar el shortcode mostrado abajo, para insertar la barra de búsqueda en la parte que querramos dentro de nuestra web.

Si utilizas Gutenberg, puedes agregar el shortcode en el bloque homónimo: «Shortcode».

Si utilizas Elementor, puedes agregar el widget «shortcode» y pegarlo en él:

Si utilizas Divi, puedes agregarlo en el módulo texto, o en el módulo código.

Y listo, tu fantástico y sumamente potente buscador de productos ya estrá funcionando.

Puedes añadirlo en las cabeceras personalizadas de Divi

Ya que puedes añadir la barra de búsqueda en cualquier módulo texto o código en tu diseño de Divi, puedes aprovechar en crear una cabecera personalizada con el generador de temas para mostrar en ella la barra. Tal y como lo hacen la mayoría de ecommerce.

Cabecera de la Plantilla Vicommerce

La cabecera de la imagen de arriba, a la que hemos agregado perfectamente la barra de búsqueda de productos de Fibosearch, pertenece a la plantilla Vicommerce.

La plantilla Vicommerce es un conjunto de layouts para Divi y Woocommerce, que incluye los estilos para las páginas de: Mi cuenta, Carrito, Checkout, Página de Gracias, Página de Producto, Página de Categoría, Tienda, además de un Footer y Header especiales para Ecommerce.

Si deseas darle estilos rápidamente a todas esas páginas de tu ecommerce. Importando la plantilla Vicommerce, podrás hacerlo en un par de clicks. Agiliza el proceso de creación de tu tienda online. Puedes darle un vistazo a todo lo que ofrece desde aquí.

Palabras Finales

Como vimos, hay opciones gratuitas para agregar a nuestra tienda online un poderoso buscador de productos ajax. Además de ser un plugin ligero. Personalmente uno de mis favorito.

Puedes ver abajo más artículos relacionados a tienda online y más trucos para Divi y Woocommerce que seguro te encantarán. Nos leemos en el próximo artículo.