Búsquedas en tiempo real en Wordpress con Elementor y Jetsearch

Formulario de búsquedas en tiempo real en WordPress con Elementor y Jet search

Si te interesa mostrar resultados instantáneos al escribir en el formulario de búsqueda, sigue leyendo. En este post te vamos a explicar cómo permitir a tus usuarios / clientes como crear búsquedas en tiempo real en WordPress con Elementor y Jet search.

Índice de contenidos

Qué es una consulta a tiempo real

Una consulta a tiempo real es aquella en la que el plugin consulta la base de tu WordPress mientras que los visitantes están escribiendo en el formulario de búsqueda. Se muestra una lista ordenada de los post, entradas o productos que coinciden con los resultados de las palabras a medida que se escribe y que los muestra según el criterio que definamos desde los ajustes del widget.

Esto quiere decir que los resultados de la búsqueda se ajusta continuamente a medida que el usuario escribe la búsqueda.

Qué plugins necesitaremos

Para poder implementar nuestro formulario de búsqueda en tiempo real necesitaremos estos dos plugins:

Creando nuestro formulario de búsqueda en tiempo real para Wordpres

Instalamos y activamos ambos plugins. Al trabajar Jet search como widget de Elementor no deberemos realizar ningún tipo de ajuste previo desde nuestro administrador de WordPress, por lo que accederemos a la página/post donde queramos insertar nuestro formulario de búsqueda en tiempo real y desde Elementor buscamos el widget Ajax search y lo insertamos en el contenido y personalizamos los ajustes generales.

  1. Input icon: Nos permite insertar un icono dentro de campo de formulario de búsqueda.
  2. Placeholder text: Personaliza el texto que irá dentro del campo del formulario.
  3. Show Submit Button: Activando esta opción habilitaremos en botón para realizar la consulta. Aunqué no tiene mucho sentido mostrarlo ya que las búsquedas se realizan en tiempo real si que es cierto a que ayuda a que se entienda que es un campo de búsqueda.
  4. Submit button label: Personaliza el texto del botón de búsqueda.
  5. Submit button icon: Nos permite insertar y personalizar un icono en el botón de búsqueda.
  6. Show categories: Habilita el menú desplegable para filtrar por categorías.
  7. Taxonomy:Crea un menú desplegable en el que permite filtrar  mejor las búsquedas en relación a categorías de entradas o de productos si tenemos Woocommerce.
  8. Select placeholder: Permite personalizar el texto del menú categorías.
  9. Responsive form on mobile: Activando esta opción habilitamos que el formulario se adapte a resolución de dispositivos moviles.

Seguimos y desde Search Query configuramos como queremos que se muestren los resultados de búsqueda:

  1. Seach by current query: Habilitando esta opción nos permite mostrar los resultados de búsqueda en relación unicamente a campos personalizados. Insertaremos los campos personalizados separados por comas (_sku, _precio, etc.)
  2. Source: Nos permite filtrar los resultados de búsqueda en relación a secciones de nuestra web. Es decir, podemos definir que por ejemplo solo muestre entradas del blog o productos de nuestra tienda.
  3. Terms: Nos permite incluir o excluir contenido de los resultados en relación a los ajustes del campo Source.
  4. Result order by y result order: Nos ofrece varias opciones de cómo se deben mostrar los resultados en relación a algunos parámetros como por ejemplo, por autor, ID, fecha  y en que orden.
  5. Post per page: Definiremos en número de resultados que se motrarán por página.
  6. Post number: Definiremos el número máximo de resultados que mostrará.

Seguimos y desde Results Area configuramos el aspecto visual de los resultados de búsqueda:

  1. Results area width: Desde este ajuste definiremos el ancho del contenedor de los resultados de búsqueda.
  2. Shop post thumbnail: Habilitaremos si queremos que se muestre la imagen destacada.
  3. Thumbnail size: Definimos el tamaño de la imagen destacada.
  4. Thumbnail placeholder: Aquí definiremos una imagen que se mostrará por defecto si un resultado no tiene imagen destacada.
  5. Post content source: Definimos el texto resumen que acompañará a cada uno de los resultados.
  6. Post content lenght: Definiremos el número de palabras que mostrará el texto resumen.
  7. Show product price y Show product rating: Si habilitamos estas 2 opciones nos mostrará el precio y las valoraciones de los productos en el caso de tener Woocommerce.
  8. Show result content y result content text: Si activamos esta opción nos mostrará el total de resultados y nos permitirá personalizar el texto que acompaña a los resultados.
  9. Show result button y All results button text: Si activamos esta opción nos mostrará un enlace para ver todos los resultados y nos permite personalizar el texto del enlace.
  10. Results navigation: Desde este ajuste nos permite personalizar todos los ajustes de la paginación de los resultados de búsqueda.
Formulario de busqueda jet seach

Ya por último desde notifications nos permite personalizar algunos mensaje como por ejemplo si no se obtiene ningún resultado o si hubo algún problema al realizar la consulta.

Ahora simplemente desde los ajuste de estilo del widget nos faltaria personalizar cada una de las partes del proceso de búsqueda, fuente, tamaños, colores, etc etc

Puedes dar un repaso a los formularios de búsquedas en tiempo real en WordPress y a todo lo comentado en el siguente vídeo.

¿Tienes interés en que creemos un tutorial sobre algún tema específico de Elementor?

Compártenos en tu red social favorita
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
Cómo crear un menu vertical con Elementor

Cómo crear un menú vertical en WordPress con Elementor

Una de las características que caracteriza a WordPress es su gran versatilidad para llevar a cabo una tarea. Si en nuestro anterior post explicábamos la creación de un menú vertical con Astra pro y Ultimate addons for Elementor, hoy os enseñaremos cómo crear un menú

Cómo crear pop ups en Wordpress con Elementor

Cómo hacer popups en WordPress con Elementor

¿Quieres crear una llamada a la acción en forma de popups y no sabes como hacerlo. Hoy te explicamos Cómo hacer popups en WordPress con Elementor. Índice de contenidos ¿Qué es un pop up? El término pop-up proviene del inglés, y hace referencia a aquellas

Tablas de contenidos para Wordpress con elementor

Cómo crear tablas de contenidos con Elementor

Entre las novedades más destacables que ofrece la versión 2.8 de Elementor resalta la de un nuevo widget para poder crear tablas de contenidos. Simplifica considerablemente que el contenido más sea accesible, permitiendo a los usuarios  escanearlo y tener una idea de la estructura del

Suscríbete a nuestro blog

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Ir arriba