¡Oferta!
WooCommerce Product Filter

WooCommerce Product Filter

El precio original era: $74.990.El precio actual es: $7.990. IVA inc.

  • USD: $8.22

Ahorras: $67.000 (89.3%)

WooCommerce Product Filter Con esta herramienta, podrás crear filtros de productos AJAX que hacen que el proceso de búsqueda de productos en tu tienda sea simple y rápido.

Compre este producto ahora y gane 240 Puntos!
Añadir a la lista de deseadosYa esta en mis deseados
Añadir a la lista de deseados
Categorías: , Etiquetas: , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Descripción

WooCommerce Product Filter

Con esta herramienta, podrás crear filtros de productos AJAX que hacen que el proceso de búsqueda de productos en tu tienda sea simple y rápido.

Búsqueda rápida de productos con Product Filters

Actualmente, la capacidad de filtrar los productos en las tiendas es necesaria para que la búsqueda de artículos sea más eficiente. Los usuarios están acostumbrados a usar esta herramienta, así que si no la ofreces, tu tienda puede verse perjudicada. La solución es Product Filters.

Las estadísticas reflejan que el 75 % de los usuarios abandonan un sitio si no encuentran lo que buscan en 15 segundos. Haz que el proceso de búsqueda de productos sea sencillo y rápido con Product Filters. Mantén los clientes potenciales.

Características

  • Filtrado rápido de productos con tecnología de AJAX.
  • Filtra por categorías, atributos, etiquetas, taxonomías, precio o nivel de existencias.
  • Pagina y ordena sin tener que volver a cargar la página.
  • Elementos: control deslizante de precios, casillas de verificación, botones, lista desplegable, lista de colores, lista de texto, etc.
  • Widgets «Products Filter» y «Notes for Product Filters».
  • Shortcodes e integración con shortcodes de productos.
  • Opciones de filtro adaptables y recuentos de productos.
  • Miniaturas de producto adaptables.

Introducción al editor de filtros

Vaya a: WooCommerce > Filtros

Hay dos paneles en el editor.

  • El lado izquierdo muestra una lista de elementos.
  • El lado derecho contiene Configuraciones para el elemento actual o la configuración del proyecto. De forma predeterminada, el panel derecho contiene la configuración del proyecto. Para guardar el proyecto, haga clic en Guardar en el panel de elementos.
Editor

Creando elementos

Haga clic en el botón “Agregar elemento”. Se abre un panel con una lista de elementos. La primera lista es “Campo”: aquí están los elementos responsables de filtrar los productos. El “Diseño” enumera los elementos de diseño del contenido responsables de organizar los elementos del campo.

Después de seleccionar un elemento, este elemento aparece en el panel lateral izquierdo y, si es necesario, la configuración de este elemento aparece en el panel lateral derecho.

Agregar elemento

Configuración del proyecto

Campo “Título” : nombre del proyecto que solo es visible en el Panel de administración.

Campo “Inicio de filtrado” – modo de aplicar filtros a los productos.

Opción “Automáticamente” : los filtros se aplican inmediatamente cuando los activa.

Opción “Al hacer clic en el botón Enviar” : los filtros se aplican solo después de hacer clic en el botón “Aplicar”. En este caso, debe crear un elemento “Botón” y especificar la opción “Filtro” en el campo “Acción”.

Campo “Qué componentes usar” : el contenido de los componentes se actualizará al filtrar. Por ejemplo, si el componente “Paginación” está habilitado, puede activar la paginación ajax.

Campo “Paginación ajax” : cambie para habilitar/deshabilitar la paginación ajax.

Campo “Clasificación ajax” : cambie para habilitar/deshabilitar la clasificación ajax.

Campos “Selector de contenedor de productos”, “Selector de paginación”, “Selector de conteo de resultados”, “Selector de ordenación”, “Selector de título de página ” : selectores de elementos en la página.

Configurar elementos

Opciones para elementos de lista

  • Campo “Título” : título que se mostrará en la parte superior de la lista. Implementa a los clientes con la comprensión de lo que filtra el elemento.
  • Cuando cambia el filtro, aparece un atributo en la URL. Campo “Clave de URL”: nombre del atributo en la URL o versión compatible con URL del nombre del elemento. Por ejemplo, el valor “marcas” del campo “clave URL” aparecerá en la URL http://my-shop.com/shop/?brands=appel,samsung
  • Campo “Tipo de consulta” : tipo de consulta que le permite aplicar múltiples filtros.
  • Opción “Y”  : muestra solo productos que satisfacen ambas condiciones establecidas por el usuario a través de los filtros aplicados (para ese elemento en particular).
  • Opción “O”  : la búsqueda devuelve todos los productos que satisfacen al menos una de las condiciones establecidas por el usuario a través de los filtros aplicados (para ese elemento en particular).
  • Campo “Selección múltiple” : habilitar/deshabilitar selección múltiple.
  • Campo “Fuente de artículos” : seleccione la fuente de artículos para una lista que se utilizará para filtrar productos.
  • Opción “Atributo” – significa los atributos del producto que se mostrarán (ver “Productos > Atributos”).
  • Opción “Categoría” – significa las categorías de productos que se mostrarán (ver “Productos > Categorías”).
  • Opción “Etiqueta” : significa que se mostrarán las etiquetas de producto (consulte “Productos > Etiquetas”).
  • Opción “Taxonomía” : significa la taxonomía del producto que se mostrará. Esta opción se puede utilizar cuando hay extensiones que amplían las capacidades de WooCommerce. Por ejemplo, tienes instalada la extensión “Marcas de WooCommerce”. Con la opción “Taxonomía” puedes mostrar una lista de marcas.
  • Campo “Atributo” : del cual se tomarán los elementos. Puede ver los atributos en “Productos > Atributos”.
  • Campo “Categoría” – permite seleccionar: muestra todas las categorías con subcategorías o subcategorías para una categoría seleccionada. Puede ver las categorías en “Productos > Categorías”.
  • Campo “Taxonomía” : de qué taxonomía se tomarán los artículos. Por ejemplo, si tienes instalada la extensión “WooCommerce Brands”, puedes configurar la taxonomía “Brands”.
  • Campo “Display” – modo de visualización de elementos.
  • Opción “Todos” : muestra todos los elementos.
  • Opción “Solo padre” : muestra solo los elementos de nivel superior, sin subelementos secundarios.
  • Opción “Solo seleccionados” : muestra solo elementos específicos.
  • Opción “Excepto seleccionados” : muestra todos los elementos excepto los seleccionados.
  • Campo “Seleccionar elementos” : elementos que se mostrarán.
  • Campo “Excluir elementos” : elementos que no se mostrarán.
  • Campo “Mostrar jerárquico” : cambia para mostrar elementos como un árbol o una lista.
  • Campo “Formato del valor de la URL” : formato del valor en el atributo de la URL.
  • Opción “ID” : muestra un número de artículo único.
  • Opción “Slug” : genera una versión compatible con URL del nombre del elemento.
  • Campo “Mostrar elemento de restablecimiento” : muestra el elemento con valor de restablecimiento.
  • Campo “Título del elemento de restablecimiento” : título del elemento de restablecimiento.
  • Campo “Título de visualización” – título del elemento de visualización.
  • Campo “Mostrar contenido de alternancia” : muestra la opción para ocultar contenido.
  • Campo “Estado de alternancia predeterminado” : ​​estado predeterminado (mostrar/ocultar).
  • Campo “Clase CSS” : clase CSS para el elemento.
  • Campo “Acción para opciones vacías” : acciones con elementos de filtro cuando no hay productos disponibles.
  • Campo “Mostrar recuento de productos” : muestra u oculta el recuento de productos en los artículos.
  • Campo “Reglas de visualización” : bajo qué condiciones se mostrará el elemento.

Las “Reglas de visualización” le permiten crear un conjunto de reglas que deciden cuándo mostrar un elemento en los filtros.
Tenga en cuenta que las reglas de diseño se pueden agrupar para crear cualquier combinación de operadores y “y” “o”.

1. Tipo de regla
Al editar un elemento, el menú desplegable “tipos” es el primer menú desplegable en la fila de reglas de ubicación.
Aquí puede especificar uno de los siguientes elementos: “Categoría”, “Atributo”, “Taxonomía”, “Etiqueta”, “Página”.

2. Operador de regla
Este paso es opcional y no es necesario para que funcione la regla de ubicación personalizada. Al editar un elemento, el menú desplegable “operadores” es el segundo menú desplegable en la fila de la regla de ubicación.

3. Valor de la regla
Al editar un elemento, el menú desplegable “valores” es el tercer menú desplegable en la fila de la regla de ubicación. Esta lista se actualiza dinámicamente en función del “tipo”. Por ejemplo, cuando se elige “Categoría” en el campo “tipo”, las categorías aparecerán aquí.

Opciones adicionales para el elemento de lista de colores

  • El campo “Colores” se utiliza para configurar los colores. Para agregar un color, haga clic en el botón “Agregar elemento”.
  • El campo “Tipo” especifica el método para configurar el color con un selector de color o una imagen (por ejemplo, color de camuflaje o puntos blancos y negros).
  • Campos “Color” e “Imagen” : color o imagen que verá el cliente.
  • Campo “Valor” : valor por el cual se filtrarán los productos.
  • Campo “Mostrar borde” : habilitar/deshabilitar el borde alrededor del elemento.
  • Campo “Color del borde” : color del borde alrededor del elemento.
  • Campo “Estilo de marcador” : estilo del marcador. Por ejemplo, si el color es blanco, el marcador debe ser oscuro y viceversa, si el color es negro, el marcador debe ser claro.

Opciones adicionales para el elemento de lista de cuadros

  • Campo “Tamaño de la caja” : alto y ancho del elemento de la caja.

Opciones adicionales para el elemento de lista de texto

  • Campo “Estilo en línea” : cambia para mostrar elementos en línea o un elemento por línea.

Opciones para el elemento deslizante de precio

  • Campo “Título” : título que se mostrará encima del elemento. Implementa a los clientes con la comprensión de lo que filtra el elemento.
  • Campo “Formato de URL” : formato del atributo en la URL.
  • Opción “Parámetros a través de un guión” : los valores mínimo y máximo se enviarán mediante un guión. Por ejemplo http://my-shop.com/shop/?price=10-150
  • Opción “Dos parámetros” : para los valores mínimo y máximo, se creará un atributo de URL independiente. Por ejemplo, http://my-shop.com/shop/?min-price=10&max-price=150
  • Cuando cambia el filtro, aparece un atributo en la URL. Campo “Clave de URL”: nombre del atributo en la URL o versión compatible con URL del nombre del elemento. Campo “Clave URL para precio mínimo” y “Clave URL para precio máximo” – nombre del atributo de precios mínimo y máximo en la URL.
  • Campo “Título de visualización” – título del elemento de visualización.
  • Campo “Mostrar contenido de alternancia” : muestra la opción para ocultar contenido.
  • Campo “Estado de alternancia predeterminado” : estado predeterminado (mostrado/oculto).
  • Campo “Clase CSS” : clase CSS para el elemento.

Opciones para el elemento de botón

  • Campo “Título” – texto del botón.
  • Campo “Acción” – acción del botón.
  • Opción “Restablecer” : restablece todos los filtros aplicados.
  • Opción “Filtro” : aplica los filtros seleccionados a los productos. Esta acción es necesaria cuando se selecciona la opción “Al hacer clic en el botón de enviar” en el campo “Se inicia el filtrado”.
  • Campo “Clase CSS” : clase CSS para el elemento.

Opciones para el elemento Caja simple

  • Campo “Título” : título que se mostrará encima del elemento.
  • Campo “Mostrar contenido de alternancia” : muestra la opción para ocultar contenido.
  • Campo “Estado de alternancia predeterminado” : estado predeterminado (mostrado/oculto).
  • Campo “Clase CSS” : clase CSS para el elemento.

Opciones para la columna

  • Campo “Ancho” : el ancho de la columna se puede configurar en porcentaje o en píxeles.

Filtrar por archivo de productos

Para establecer qué proyecto filtrará los productos en una página de archivo, siga estos pasos.

  1. Vaya a WooCommerce > Configuración > Productos .
  2. Haga clic en la subpestaña “Filtros”.
  3. En el campo “Filtros para archivo de productos”, seleccione el proyecto de filtros que desee .
  4. Haga clic en el botón “Guardar cambios” .

Elementos

Caja

Lista de radios

La lista desplegable

Lista de colores

Lista de cajas

Lista de textos

Control deslizante de precios

Botón

Configuración de la extensión

Hay algunas configuraciones para toda la extensión disponibles en la subpestaña WooCommerce > Configuración > Productos > Filtros .

Campo “Filtros para archivo de productos” : especifique qué proyecto de filtros se mostrará en la página de la tienda.

Campo “Productos agotados” : especifique cómo tratar los productos agotados.

Opción “Sin acción” – No diferenciar entre productos en stock y fuera de stock.

Opción “Ocultar siempre” – No incluye productos agotados.

Opción “Ocultar si hay opciones activas” : no incluya productos agotados cuando se aplique algún filtro.

Campo “Desplazarse hacia arriba” : desplácese hasta la parte superior de la página al actualizar los filtros.

Campo “Miniaturas adaptables” : selecciona automáticamente el mejor tamaño de miniatura del producto para el tamaño de la pantalla.

Campo “Recuentos de productos grandes” : permite recuentos de productos más grandes (entre paréntesis de filtros), que se pueden limitar en ciertos casos.

Campo “Recuentos de productos más rápidos” : habilita recuentos de productos más rápidos (entre paréntesis de filtros) en algunas tiendas con mayor cantidad de productos o variaciones.

Campo “Selectores de búsqueda” : actualiza los componentes del tema (como el orden, la paginación y el recuento de resultados) cuando se actualizan los filtros.

Campo “Script después de la actualización” : agrega un fragmento de código JavaScript que se ejecutará después de que se actualice la lista de productos para que coincida con los filtros modificados. Un fragmento común es location.reload();el que actualizará la página (manteniendo los filtros seleccionados).

widgets

Widget “Filtros de productos”

Este es el widget de extensión principal que muestra elementos del Proyecto de filtros , que usted creó y especificó como Filtro para el Archivo de proyectos . Al interactuar con los elementos del formulario, se filtrarán los productos visibles.

Widget “Notas para filtros de productos”

Este widget muestra una lista de opciones que se han seleccionado y permite eliminar rápidamente el filtro haciendo clic en el xjunto a él.

Aspecto predeterminado de los filtros de productos
Notas que aparecen debajo de los filtros de productos cuando se seleccionan filtros

Códigos cortos

Filtros de productos

[wcpf_filters id="123"]

Arriba está el código abreviado principal de la extensión, que funciona de manera similar al widget, pero también se puede colocar fuera de las áreas de widgets. Se desplegará un formulario con los elementos que configuró en el Proyecto de Filtros correspondientes al especificado id.

Notas para filtros de productos

[wcpf_filter_notes filter-id="123"]

El código abreviado Notas para filtros de productos también funciona como el widget junto con los filtros de productos. Indica qué opciones se han seleccionado y se pueden eliminar rápidamente haciendo clic en el icono que se xencuentra junto al filtro.

Usando códigos cortos WooCommerce

Si utiliza alguno de los códigos cortos integrados de WooCommerce para generar sus productos, puede agregarles un parámetro para que esta extensión también pueda filtrar esos productos. Por ejemplo:

Para habilitar la clasificación en esos códigos cortos, agregue el use-sortingparámetro. Por ejemplo:

Anular plantillas en un tema

Para cambiar las plantillas de elementos en el tema, debe crear una woocommerce-product-filtercarpeta dentro de la carpeta del tema. Todas las plantillas se pueden encontrar en la carpeta plugins/woocommerce-product-filter/templates/. Copie el archivo de plantilla a la woocommerce-product-filtercarpeta dentro del tema y realice cambios según sus necesidades.

Preguntas frecuentes

¿Qué es una taxonomía?

Una taxonomía es una forma de agrupar productos relacionados u otro contenido.

Por ejemplo, en tu tienda puede haber una taxonomía de “Ropa” y luego asignarías Camisas, Pantalones, Calcetines, Vestidos, Faldas.

Las taxonomías pueden ser útiles porque permiten a los compradores encontrar productos relacionados.

Solución de problemas

¿Por qué mis filtros no están visibles en algunas categorías?

Asegúrese de verificar las reglas de visualización para cada uno de los elementos de su proyecto de filtro. También tenga en cuenta que algunos filtros no aparecen si no son relevantes, como el elemento Control deslizante de precios.

Si todavía tiene filtros configurados en su proyecto que deberían aparecer en ciertas páginas de categoría pero no lo están, puede probar la herramienta ‘Caché de filtro de producto’ en WP Admin → WooCommerce → Estado → Herramientas para ver si restaura los filtros a través de sus categorías/páginas de archivo de productos. Haga clic en ‘Borrar caché’ para ejecutar la herramienta:

Marcado 2021-09-16 a las 12.49.09.png
La herramienta de caché de filtros de productos está en WP Admin → WooCommerce → Estado → Herramientas

Valoraciones

No hay valoraciones aún.

Sé el primero en valorar “WooCommerce Product Filter”

Productos relacionados