En este tutorial te explicamos cómo crear un layout de resultados de búsqueda personalizado en una tienda online hecha con Divi. Además, corregiremos el problema de error de búsqueda de productos con los módulos de Divi y ampliaremos la funcionalidad de búsqueda con resultados AJAX para una experiencia de usuario más fluida.
En este tutorial construiremos este layout:
¿Por qué crear resultados de búsqueda con WooCommerce y Divi?
En Divi, la página de resultados de búsqueda es la página a la que se dirige al usuario cuando hace alguna búsqueda en el sitio web. Esta página por defecto es bastante pobre y además con un diseño que no es bueno para la experiencia de usuario.
Es por ello que personalizar el diseño de los resultados de búsqueda en nuestra tienda online con Divi es imprescindible, pues ello hará que el usuario tenga una mejor experiencia al momento de buscar un producto.
Recuerda que si quieres aprender a manejar WooCommerce de manera profesional, puedes ver nuestro curso básico de WooCommerce.
¿Cómo crear un layout de resultados de búsqueda con WooCommerce y Divi?
Al igual que ocurre con las categorías, productos y muchos otros diseños en Divi, podemos crear un layout de resultados de búsqueda personalizado con el Theme Builder de Divi.
Para ello usaremos todo el poder del Theme Builder, creando un diseño desde cero para los resultados de búsqueda de nuestra tienda online con Divi.
Para crear el layout debes ir a Divi > Generador de temas > crear nueva plantilla y asignar esta plantilla a la regla de resultados de búsqueda del sitio.
Construcción de plantilla con el Theme Builder
En este punto ya todo es construcción de la plantilla con el Divi Builder. Te recomendamos crear un encabezado donde coloques el título de la página de manera dinámica. Esto hará que cuando se presenten los resultados de búsqueda aparezca el mensaje "Resultados de búsqueda para..." y con ello ofrecerás una mejor experiencia al usuario.
También es recomendable colocar un módulo de búsqueda en el encabezado de este layout, pues si el usuario no logra encontrar lo que busca, siempre tendrá la posibilidad desde esa página de volver a buscar.
Finalmente, en la parte inferior, coloca el módulo de tienda de Divi y dale los estilos que quieras. Lo más importante en esta parte es escoger la opción correcta para desplegar los productos de manera dinámica en función de los resultados de búsqueda.
Para ello, al igual que hacemos en el layout de categorías de Divi, debes colocar la opción que presenta los productos de manera dinámica. En este caso, selecciona la opción "Usar la página actual", que presentará únicamente los productos llamados a través del formulario de búsqueda.
Los productos no cargan en Divi cuando hago una búsqueda
Seguramente te has preguntado esto al momento de construir un layout personalizado de resultados de búsqueda para productos en Divi. Para solucionar este problema tienes dos opciones:
La primera es una solución que mostramos en el tutorial premium, donde insertamos código para que el módulo de búsqueda de Divi consiga cualquier tipo de contenido (CPT), incluyendo los productos de WooCommerce, sin necesidad de plugins adicionales.
La segunda opción es usar el plugin gratuito Advanced Woo Search, un plugin que potenciará todo el sistema de búsqueda de productos dentro de tu tienda online y que es completamente compatible con Divi.
Configuración de Advanced Woo Search para Divi
Una vez que instales y actives el plugin, debes configurarlo para que funcione correctamente con tu layout de Divi. Los pasos clave son:
- Reemplaza el módulo de búsqueda nativo de Divi: en lugar de usar el módulo de búsqueda estándar de Divi, coloca el widget de Advanced Woo Search. Puedes hacerlo con el módulo de código de Divi usando el shortcode
[aws_search_form]. - Configura los campos indexados: en Advanced Woo Search > Settings > Search by, selecciona qué campos se indexarán en la búsqueda: título, descripción, SKU, categoría, etiquetas y atributos. Cuantos más campos actives, más relevante será el resultado, aunque puede afectar la velocidad en catálogos muy grandes.
- Activa la búsqueda AJAX: en la configuración del plugin, habilita los resultados en tiempo real (live search). Esto muestra sugerencias mientras el usuario escribe, lo que mejora significativamente la experiencia de compra.
- Conecta con el layout de resultados: en Settings > Results Page, apunta el plugin a la URL de tu página de resultados personalizada de Divi para que los resultados completos se muestren en tu layout diseñado.
Con esta configuración, el buscador de Divi que antes fallaba con productos de WooCommerce funcionará perfectamente, mostrando los resultados en tu layout personalizado con todas las ventajas del Theme Builder.
Ajustes de relevancia para mejorar los resultados
Advanced Woo Search permite ajustar la ponderación de los campos de búsqueda. Por ejemplo, puedes darle más peso al título del producto que a la descripción corta. Esto mejora la relevancia de los resultados cuando los clientes buscan términos específicos. También puedes excluir categorías enteras de la búsqueda (útil si tienes productos de tipo "servicio" que no quieres que aparezcan en resultados de búsqueda de la tienda).
Solución de problemas frecuentes
- Los productos no aparecen en los resultados: verifica que el tipo de contenido
productesté incluido en los resultados de búsqueda de WordPress. Algunos temas o plugins de SEO pueden excluir los CPTs de la búsqueda nativa. - El layout de Divi no carga los resultados dinámicos: asegúrate de que la plantilla del Theme Builder esté asignada a "Resultados de búsqueda" y que el módulo de tienda tenga la opción "Usar la página actual" activada, no una consulta fija.
- Advanced Woo Search no conecta con el layout personalizado: revisa la configuración de "Results Page" en el plugin y asegúrate de que apunta a la página donde Divi renderiza el layout de búsqueda.
Preguntas frecuentes
¿Puedo usar este mismo método para buscar entradas del blog junto con productos?
Sí. Si quieres que el buscador devuelva tanto posts como productos, necesitas configurar WordPress para que incluya ambos tipos de contenido en la búsqueda. Advanced Woo Search está enfocado en productos, pero hay versiones o alternativas que permiten buscar en múltiples tipos de contenido simultáneamente.
¿Advanced Woo Search es compatible con Divi 5?
Sí, ya que el plugin opera a nivel de PHP y WordPress, no directamente con el constructor visual. El shortcode [aws_search_form] puede insertarse en cualquier módulo de código de Divi 5 sin problemas.
¿Este layout de resultados afecta el SEO de la tienda?
Las páginas de resultados de búsqueda normalmente no se indexan (Google recomienda marcarlas como noindex). Sin embargo, tener una buena experiencia de búsqueda reduce la tasa de rebote y mejora el tiempo en el sitio, lo cual tiene un impacto positivo indirecto en el SEO general de la tienda.
Conclusiones
Crear un layout de resultados de búsqueda de productos con el Theme Builder de Divi puede hacer que ofrezcas una gran experiencia de usuario a los compradores de tu tienda online. Combinado con Advanced Woo Search para resultados AJAX y relevancia configurada, lograrás una tienda que convierte mejor y con menos fricción en el proceso de compra.
Este layout de búsqueda es parte de un sistema completo de tienda con Divi. Si ya lo tienes funcionando, el siguiente paso lógico es personalizar también el botón de añadir al carrito en el módulo de tienda y cómo se comportan los textos del botón de carrito según el tipo de producto.
¿Quieres acceder a los tutoriales premium donde resolvemos el problema de búsqueda con código sin plugins? Revisa nuestra sección de tutoriales premium de WooCommerce con Divi o conoce los planes de membresía de UXDivi para acceder a todo el contenido avanzado.
Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.
Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐
Comentarios
10 comentariosPara dejar un comentario, accede a tu cuenta de UXDivi.
Acceder a mi cuenta →Me gustaría personalizar una página de búsqueda con el módulo de DIVI para buscar Páginas.
Estoy trabajando una web con muchas referencias, (cada Ref. es una página. No es WooCommerce) y todo lo que encuentro es para búsquedas de blog. Sabéis donde encontrar un tutorial para resolver mi caso?
Gracias mil a quién responda
Que tal Luis. El buscador de Divi por defecto busca las «páginas» de WordPress, lo que no busca son términos especificos dentro de las páginas, que creo que es lo que estás buscando. Para solucionar eso debes usar otro buscador, en este caso te recomiendo el plugin ivory search que es el que nosotros usamos acá.
Gracias por tu rápida respuesta.
Realmente lo que me interesa es que el módulo Búsqueda, me permita «linkar» a una página específica entrando su título, es decir, las distintas páginas que tengo se describen como variables alfanuméricas, que son en realidad la referencia del propio producto que contiene, ejemplo: ROAF001, ROBN023, ROFR005, etc. Esto son nombres de página y cada una contiene un artículo/producto.
En el recuadro de búsqueda quiero poder entrar cualquier referencia que me pueda interesar y me traslade a esa página, exactamente como funciona con el localizador de páginas en modo escritorio.
¿Esto sería posible? ¿Es necesario personalizar o diseñar la página previamente, como haces en tu tutorial para los casos de blog?
Que tal Luis, así es, es posible con Ivory Search y si, hay que personalizar la página de resultados de búsqueda. Todo ello lo explicamos en esta clase de este curso: https://uxdivi.com/clases/bonus-mejorar-el-sistema-de-busqueda-de-contenidos-con-ivory-search (contenido premium)
Hace dias estaba valorando apuntarme a tus cursos premium y con esto me acabas de ayudar a decidirme.
Nos vemos pronto (es un decir)
Gracias por tu atención
¡Te esperamos en la comunidad!
consulta en la busqueda de categorias padres que tienen sub categoria , hay forma que cuando le hagas click a la categoria padre se vieran los iconos de la subcategoria padre y no los productos de la categoria padre
Que tal Víctor, un gusto saludarte.
Si es posible, en este caso, debes hacer un layout de categorías con el theme Builder, y en este layout, en vez de desplegar los productos, puedes desplegar un diseño personalizado mostrando las subcategorías usando el módulo de categorías de Woo Essential que vemos en esta clase: https://uxdivi.com/lecciones/leccion-06-caracteristica-de-category-grid-carrusel-y-acordeon
Acá lo único, es que debes hacer un layout para cada categoría que tengas, enlazando específicamente las subcategorías de cada categoría en cada layout.
Este curso veo es de 2021 posterior hay alguna actualización cosas que se hayan mejorado?
Que tal Jesús, un gusto saludarte. No Jesús, este tutorial sigue siendo funcional pues las herramientas que se usan para el mismo no han cambiado en estos años.
Saludos.