Cómo agregar la búsqueda de productos Ajax en WooCommerce de forma gratuita en 2024

¿Quieres agregar una barra de búsqueda a tu tema? ¡Has venido al lugar correcto! Te mostraré cómo integrarlo fácil y rápidamente.

Agregar una barra de búsqueda a su tema es una excelente manera de mejorar la experiencia del usuario y facilitar que los visitantes encuentren el contenido que buscan en su sitio web.

Con una barra de búsqueda disponible, los visitantes pueden buscar fácilmente temas, productos o información específicos, ahorrándoles tiempo y esfuerzo en la localización de contenido relevante.

Esta mejora no sólo mejora la satisfacción del usuario sino que también aumenta la usabilidad y funcionalidad general de su sitio web.

Por lo tanto, si desea brindar una experiencia más eficiente y fácil de usar a sus visitantes, ¡agregar una barra de búsqueda es el camino a seguir!

En este artículo, le presentaré el complemento gratuito "El complemento de búsqueda avanzada de productos" para agregar la búsqueda de productos Ajax con Ajax en WooCommerce.

¿Qué es la búsqueda de productos AJAX?

La búsqueda de productos AJAX es una función de un sitio web que permite a los usuarios buscar productos sin tener que recargar toda la página.

Utiliza tecnología asincrónica de JavaScript y XML (AJAX) para enviar una solicitud al servidor en segundo plano y recuperar resultados de búsqueda sin interrumpir la experiencia de navegación del usuario.

Esto permite búsquedas de productos más rápidas y fluidas en un sitio web de comercio electrónico.

¿Por qué debería utilizar AJAX?

Ajax se usa comúnmente en el desarrollo web para crear experiencias de usuario más dinámicas e interactivas.

Permite que los sitios web carguen nueva información o contenido sin actualizar toda la página, lo que hace que la experiencia de navegación sea más rápida y fluida para los usuarios.

Esto puede ayudar a mejorar la participación del usuario, aumentar las tasas de retención y mejorar la satisfacción general del usuario con el sitio web.

Además, Ajax también puede ayudar a reducir la carga del servidor y el uso del ancho de banda, ya que solo se actualizan partes específicas de la página en lugar de toda la página.

En general, Ajax es una herramienta poderosa para mejorar la funcionalidad y usabilidad de los sitios web.

Ahora, les presentaré el complemento gratuito "El complemento de búsqueda avanzada de productos" para agregar la búsqueda de productos Ajax con Ajax en WooCommerce.

¡Empecemos!

Instalación de complementos (versión gratuita)

El complemento de búsqueda avanzada de productos es una búsqueda en vivo Ajax súper rápida para buscar su producto, página y publicación.

Paso 1: Instale el complemento “Th Advance Product Search” .

Para instalar el complemento "La búsqueda avanzada de productos" en su sitio de WordPress, vaya a " Complementos de administración de WP " y haga clic en " Agregar nuevo ". Busque el complemento, haga clic en " Instalar ahora " y actívelo para comenzar a utilizar sus funciones.

Paso 2: escriba "Th Advance Product Search" en el nombre del complemento en el cuadro de búsqueda y haga clic en " Instalar ahora "

Busque "La búsqueda avanzada de productos" en el cuadro de búsqueda de complementos, luego haga clic en " Instalar ahora " para agregarlo a su sitio de WordPress.

Paso 3: activa el complemento.

Después de la instalación, haga clic en "Activar" para habilitar la funcionalidad del complemento en su sitio web de WordPress.

Paso 4: navegue hasta "Búsqueda avanzada" y haga clic en él.

Tras la activación, el complemento "Búsqueda avanzada de productos" mostrará la pestaña "Themehunk" en el lado izquierdo de su panel.

Paso 5: Acceder a la configuración de “Búsqueda avanzada de productos”.

Para acceder a la configuración de búsqueda avanzada de productos, seleccione la opción “Búsqueda avanzada”. Esto le permitirá personalizar y refinar sus criterios de búsqueda de productos. Utilice esta función para encontrar productos específicos de manera más eficiente.

¡Aquí, su “Complemento de búsqueda avanzada de productos Th” se agregó con éxito !

Formas de añadir la Búsqueda Avanzada de Productos.

Ahora, te mostraré cómo puedes integrar y agregar una barra de búsqueda a tu tema de manera sencilla.

1. Agregue una barra de búsqueda usando "Códigos cortos".
2. Agregue una barra de búsqueda usando "Bloquear".
3. Agregue una barra de búsqueda usando "Widgets".
4. Agregue una barra de búsqueda usando "PHP".
5. Muestra la barra de búsqueda como un "menú". .

(Desplácese hacia abajo para ver cómo puede usar códigos cortos, widgets y Php para agregar una barra de búsqueda).

También puede agregar configuraciones para la barra de búsqueda, que incluyen:

• Búsqueda por voz,
• Cargador,
• Configuración de autocompletar,
• Alcance de búsqueda en el producto,
• Destacar en el Producto,

Para estas increíbles configuraciones que desea ver en su sitio web, puede " Actualizar a profesional " y obtener "TH Advance Search Pro".

Cómo agregar la búsqueda de productos Ajax en WooCommerce de forma gratuita

1. Mediante el uso de "códigos cortos".

Paso 1. Acceda a la configuración de Búsqueda avanzada de productos.

Vaya a su panel de control y verá la pestaña "Themehunk" en el lado derecho. Seleccione “Búsqueda avanzada” para acceder a la configuración de Búsqueda avanzada de productos.

Paso 2. Elija y copie los "códigos abreviados".

En Integración, puede ver los "Códigos abreviados". tienes que elegir el estilo de la barra de búsqueda y simplemente copiar los códigos cortos de tu barra de búsqueda preferida y pegarlos en el editor de tu sitio.

La barra de Búsqueda avanzada de productos se agregó correctamente y ahora está visible.

2. Usando " Bloquear ".

Paso 1. Comience accediendo al Panel de control.

Vaya a la sección "Páginas" en su Panel de control y haga clic en "Página de compra".

Paso 2. Ahora, haga clic en el icono [+].

Paso 3. Busque el bloque “Búsqueda avanzada de productos” y haga clic en él.

Después de hacer clic en el botón "Bloquear", el código corto se pegará automáticamente.

Paso 4. Ahora, haga clic en "Actualizar" y vaya al sitio de vista previa.

Puede ver que la barra de búsqueda ahora se agregó a la página con éxito.

3. Mediante el uso de " Widgets ".

Paso 1. Agregar el “Widget de búsqueda avanzada TH”.

1. Para ubicar el “Widget de búsqueda avanzada de TH”, navegue hasta Apariencia > Widgets.
2. Navegue hasta la barra lateral principal, busque "El widget de búsqueda avanzada" y selecciónelo.

Paso 2. Después de agregar el "Widget de búsqueda avanzada", haga clic en Actualizar.

Paso 3. Busque Visitar sitio y Vista previa.

Puede ver que utilizando la barra de búsqueda "Widgets" se agregó correctamente .

4. Muestre la barra de búsqueda como un " Menú ".

Paso 1. Ve a Apariencia > Menú

Paso 2. Marque la “Barra de búsqueda avanzada de TH” y haga clic en el botón “Agregar al menú”.

Paso 3. Busque la configuración del Menú. y marque ( ✓ ) principal de la ubicación de visualización .

1. Busque la configuración del Menú. y marque ( ✓ ) principal en la ubicación de visualización.
2. Haga clic en “Guardar menú”

A continuación, puede ver que la barra de búsqueda se agregó correctamente al menú.