WoodMart Theme Setup AJAX Product Filtering Tutorial

Si utiliza Temas WoodMarty planea hacer un sitio web de comercio electrónico, entonces no se puede perder el hecho de que viene con un AJAX Filtros de productos Función. Este filtro permite a los clientes filtrar rápidamente los productos por marca, precio, color, categoría y otras dimensiones sin actualizar la página, lo que mejora la eficacia de la navegación y reduce las tasas de rebote.

Image[1]-Configuración del tema WoodMart Tutorial de filtrado de productos AJAX

Paso 1: ¡Asegúrate de tener WooCommerce y el plugin WoodMart Core habilitados!

Para utilizar el filtro AJAX, su sitio debe tener primero dos cosas en su lugar:

  1. Instalado y activado WooCommerce plug-in (componente de software)
  2. Instalado y activado Núcleo WoodMart Plug-ins (que constituyen el núcleo de la funcionalidad de WoodMart)
Image[2]-Configuración del tema WoodMart Tutorial de filtrado de productos AJAX

Si estos dos no están instalados, ve primero al backend [Plugins → Instalar Plugins] para buscarlos y habilitarlos.

Paso 2: Configurar atributos y categorías de productos

Los filtros se basan en los "Atributos" y "Categorías" de un producto. Hay que definirlos para que el sistema sepa qué filtrar.

El procedimiento es el siguiente:

  • Vaya a [Productos → Propiedades] en segundo plano.
  • Nuevos atributos: color, tamaño, marca, etc.
Image[3]-Configuración del tema WoodMart Tutorial de filtrado de productos AJAX
  • Haga clic en "Configurar entrada" para cada atributo, por ejemplo, añada rojo, azul, blanco para los colores.
Imagen[4]-Configuración del tema WoodMart Tutorial de filtrado de productos AJAX
  • Al editar un producto, en "Datos del producto → Propiedades", seleccione "Datos del producto → Propiedades".aumentarademásgarrapataLos valores de los atributos "para variantes de productos" (en el caso de productos variables) y "visible".
Image[5]-Configuración del tema WoodMart Tutorial de filtrado de productos AJAX

Nota: Las opciones correspondientes sólo se mostrarán en el filtro si el artículo utiliza realmente estos atributos.

Paso 3: Crear una barra lateral de widgets con filtros

WoodMart recomienda utilizar Elementor o el panel de widgets predeterminado para añadir el widget(máquina) filtro. Aquí está el WordPress nativouna barra lateral (en software)A modo de ejemplo:

  • Ve a [Apariencia → Widgets] en segundo plano.
  • localice Barra lateral de la tienda(barra lateral de la tienda) o crea tu propio widget.
  • Arrastre los siguientes gadgets (siempre que WoodMart Core esté activado):
    • WOODMART Filtrar por atributo(para filtrar por atributos como color, marca, etc.)
    • WOODMART Filtrar por precio(para filtrar por rango de precios)
    • Widget de categorías de WOODMART(para filtrar por productos)
Image[6]-Configuración del tema WoodMart Tutorial de filtrado de productos AJAX
  • Cada filtro puede tener un título, un método de visualización (lista, desplegable, selección múltiple) y otras opciones de estilo.
  • Guardar ajustes

Paso 4: Aplicar esta barra lateral a la página de la tienda

Ahora tienes que conseguir que este filtro aparezca en la posición correcta de la página.

Modo de funcionamiento:

  • Ve al backend [WoodMart → Configuración del tema → Diseño→ Barra lateral].
  • Seleccione Izquierda o Derecha en "Posición de la barra lateral de la tienda".
Image[7]-Configuración del tema WoodMart Tutorial de filtrado de productos AJAX
  • Guardar ajustes

Actualice la página de listado de productos de su sitio y verá la barra lateral con filtros.

Paso 5: Activar el filtrado AJAX

por defecto (ajuste) WoodMart El filtro es AJAX, lo que significa que el producto se actualizará automáticamente cuando haga clic en la opción de filtro, y no necesitará actualizar la página. Sin embargo, también puede comprobar manualmente si la función está activada.

  1. Vaya a [WoodMart → Configuración del tema → Archivo de productos] en el backend.
  2. Compruebe que las siguientes opciones están activadas:
    • Tienda AJAX
    • AJAX añadir al carrito
    • Conmutación de la red de productos (opcional)
Image[8]-Configuración del Tema WoodMart AJAX Filtro de Producto Tutorial

Estas características hacen que toda la página del producto sea más fluida y sin saltos, mejorando la experiencia del usuario.

Paso 6: Configurar el filtrado de móviles colapsados

para equilibrarmóvilPara acceder a la experiencia, WoodMart ofrece un botón "Filtro" para dispositivos móviles que despliega una barra lateral al pulsarlo.

Ve a [Configuración del tema → Diseño] desplázate hasta el final y ábrelo:

  • Botón de filtros en el móvil
  • Filtros fuera del lienzo para tabletas (activa la barra lateral emergente)
Imagen[9]-Configuración del tema WoodMart Tutorial de filtrado de productos AJAX

Esto permite a los usuarios de teléfonos móviles pulsar un botón para llamar al panel de filtrado, lo que hace que la página sea más limpia y fácil de manejar.

Solución de problemas

  • ¿Los clics del filtro no responden?
    Comprueba si la página tiene activado el modo AJAX o si un plugin de caché intercepta las peticiones JS.
  • ¿No se muestran las opciones de filtrado?
    Asegúrese de que el atributo o categoría correspondiente se ha aplicado al producto, de lo contrario el sistema no generará el elemento de filtro.
  • ¿Te equivocas de estilo?
    Prueba a borrar la memoria caché o a desactivar CSS Actualice la página después de comprimir la función de fusión.

resúmenes

WoodMart viene con filtros de producto AJAX que son realmente muy potentes, y cuando se utilizan bien, es una herramienta de conversión eficiente. Es necesario configurar los atributos y las categorías de los productos de antemano, y luego configurar el filtro de producto en la secciónuna barra lateral (en software)Puede añadir los widgets adecuados a su sistema y crear un sistema de detección totalmente funcional en unos minutos.


Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas
Servicio de atención al cliente WeChat
Servicio de atención al cliente WeChat
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) Correo electrónico: info@361sale.com
Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres
© Declaración de reproducción
Este artículo ha sido escrito por Little Lin
EL FIN
Si le gusta, apóyela.
felicitaciones854 compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios