Resultados de búsqueda de productos en tienda online con Divi

¡Hola Divi Lovers! en este tutorial te explicaremos como crear un layout de resultados de búsqueda personalizados 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 también ampliaremos la funcionalidad de búsqueda con resultados ajax.

Índice

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 en nuestro sitio.

Puedes ver a lo que me refiero aquí:

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 pasa 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 los resultados de búsqueda de nuestra tienda online con Divi.

Para crear un layout layout de resultados de búsqueda con Woocommerce y Divi debes ir a Divi > Generador de temas > crear nueva plantilla.

Debes asignar esta plantilla a la regla de resultados de búsqueda del sitio, como ves, esta es la única opción con estas características en las reglas de asignación de las plantillas.

Construcción de plantilla con el Theme Builder

En este punto ya todo es meramente construcción de la plantilla con el Divi Builder. Re recomendamos que crees un encabezado, donde vas a colocar el titulo de la página de manera dinámica. Esto hará que cuando se presente el resultado de búsqueda de tus productos en Divi coloque el mensaje “Resultados de búsqueda para…” y con ello ofreceremos 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 hacer una búsqueda de productos.

Finalmente, en la parte inferior, debes colocar el módulo de tienda de Divi y darle 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, debemos colocar la opción que nos presente los productos de manera dinámica. Pero en este caso, debes seleccionar la opción “Usar la página actual” que lo que hará es presentar los productos que son llamados a través del formulario de búsqueda únicamente.

Los productos no me carga en Divi cuando hago una búsqueda.

Seguramente te has preguntado eso, no has tenido ese problema al momento de construir un layout personalizado de resultados de búsqueda para productos en Divi.

Para solucionar este problema tenemos dos opciones, la primera es una solución que mostramos en el tutorial premium donde mostramos como solucionar el problema de los resultados de búsqueda con Divi a través de la inserción de código. Es una solución muy práctica y que no requiere de plugins adicionales para que el módulo de búsqueda de Divi que viene por defecto consiga cualquier contenido o CPT incluyendo por supuesto los productos de Divi.

La segunda opción es usar el plugin gratuito Advanced Woo Search, un plugin que va a potenciar todo el poder de búsqueda de productos dentro de nuestra tienda online, y además que es completamente compatible con Divi como puedes ver en su documentación oficial.

En el video tutorial explicamos a detalle como configurar correctamente este plugin dentro del sitio para que nos genere resultados de búsqueda de productos en nuestra tienda online hecha con Divi, así que no te lo pierdas para ver a detalle como configurar este poderoso plugin.

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 hecha con Divi, esto a su vez hará que haya una mayor probabilidad de compra en tu eCommerce, y con ello, mejores resultados de conversión.

Por ello es necesario que logres crear un layout de resultados de búsqueda personalizado, y más importante que se integre completamente con un sistema de búsquedas enriquecido que le ofrezca a tus usuarios resultados fiables y precisos, y con este tutorial lo podrás lograr sin problemas 😎

Recuerda que cada semana publicaremos un nuevo tutorial gratuito donde estaremos personalizando varios de los layouts de nuestra tienda con el theme builder de Divi.

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 ⭐