¡Oferta!

WooCommerce Product Filter

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

  • USD: $8.91

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 80 Puntos!

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

Vaya a: WooCommerce > Filtros

Hay dos paneles en el editor.

  • El lado izquierdo muestra una lista de elementos.
  • El lado derecho contiene la Configuración 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

Crear elementos

Haga clic en el botón “Agregar elemento”. Un panel abierto con una lista de elementos. La primera lista es “Campo”: aquí hay elementos responsables de filtrar productos. El “Diseño” enumera los elementos de diseño de contenido responsables de organizar los elementos de 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 recuento de resultados”, “Selector de clasificación”, “Selector de título de página  – selectores de elementos en la página.

Configuración de elementos

Opciones para el elemento de lista

  • Campo “Título” : título que se mostrará en la parte superior de la lista. Implementa 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 del campo “clave de URL” “marcas” 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 los productos que cumplen 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 cumplen 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 la selección múltiple.
  • Campo “Origen de los artículos” : seleccione el origen de los 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 categorías de productos que se mostrarán (ver “Productos > Categorías”).
  • Opción “Etiqueta” : significa etiquetas de productos que se mostrarán (consulte “Productos> Etiquetas”).
  • Opción “Taxonomía” – significa la taxonomía del producto que se mostrará. Esta opción se puede usar cuando hay complementos que amplían las capacidades de WooCommerce. Por ejemplo, tiene instalado el complemento “WooCommerce Brands”. Con la opción “Taxonomía” puede mostrar la lista de marcas.
  • Campo “Atributo” : de qué atributo se tomarán los artículos. 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 elementos. Por ejemplo, si tiene instalado el complemento “Marcas de WooCommerce”, puede configurar la taxonomía de “Marcas”.
  • Campo “Display” – modo de visualización de elementos.
  • Opción “Todos” : muestra todos los elementos.
  • Opción “Solo principal” : muestra solo los elementos de nivel superior, sin subelementos secundarios.
  • Opción “Solo seleccionados” : muestra solo los elementos especificados.
  • Opción “Excepto seleccionado” : 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” : cambie para mostrar elementos como un árbol o una lista.
  • Campo “Formato de valor de URL” : formato de valor en el atributo de URL.
  • Opción “ID” : muestra un número de artículo único.
  • Opción “Slug” : salida de una versión compatible con URL del nombre del elemento.
  • Campo “Mostrar elemento de reinicio” : muestra el elemento de valor de reinicio.
  • Campo “Artículo de reinicio de título” : título del artículo de reinicio.
  • Campo “Título de visualización” – título del elemento de visualización.
  • Campo “Mostrar contenido de alternancia” : muestra la alternancia 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 recuentos de productos” : muestra/oculta los recuentos de productos en los artículos.
  • Campo “Reglas de visualización” : bajo qué condiciones mostrar el elemento.

“Reglas de visualización” le permite 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 la regla 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 su 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 regla
Al editar un elemento, el menú desplegable ‘valores’ es el tercer menú desplegable en la fila de regla de ubicación. Esta lista se actualiza dinámicamente según el ‘tipo’. Por ejemplo, cuando elige “Categoría” en el campo “tipo”, las categorías aparecerán aquí.

Opciones adicionales para el elemento de la 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 de configuración del color con un selector de color o una imagen (por ejemplo, color de camuflaje o puntos en blanco y negro).
  • 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 de 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 casillas

  • 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” : cambie 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á en la parte superior del elemento. Implementa clientes con la comprensión de lo que filtra el elemento.
  • Campo “Formato de URL” – formato de atributo en url.
  • Opción “Parámetros a través de un guión” : el valor mínimo y máximo se enviará mediante un guión. Por ejemplo http://my-shop.com/shop/?price=10-150
  • Opción “Dos parámetros” : para valores mínimos y máximos, se creará un atributo de URL separado. 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 de URL para precio mínimo” y “Clave de URL para precio máximo” – nombre del atributo de precios mínimos y máximos en url.
  • Campo “Título de visualización” – título del elemento de visualización.
  • Campo “Mostrar contenido de alternancia” : muestra la alternancia 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 enviar” en el campo “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á en la parte superior del elemento.
  • Campo “Mostrar contenido de alternancia” : muestra la alternancia 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 establecer en porcentaje o en píxeles.

Filtrar por archivo de productos

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

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

Elementos

Caja

Lista de radios

La lista desplegable

Lista de colores

Lista de cajas

Lista de texto

Deslizador de precios

Botón

Widgets

Widget “Filtros de productos”

Este es el widget de complemento principal que muestra elementos del Proyecto de filtros , que creó y especificó como el Filtro para el archivo del proyecto . 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 xen junto a él.

Códigos cortos

Filtros de productos

[wcpf_filters id="123"]

Arriba está el shortcode principal de la extensión, que funciona de manera similar al widget, pero también se puede colocar fuera de las áreas del widget. Se desplegará un formulario con los elementos que configuraste en el Proyecto de Filtros correspondiente al especificado id.

Notas para filtros de productos

[wcpf_filter_notes filter-id="123"]

El shortcode de Notes for Product Filters también funciona como el widget junto con los Product Filters. Indica qué opciones se han seleccionado y se pueden eliminar rápidamente haciendo clic en xjunto al filtro.

Uso de códigos cortos Woocommerce

Si usa alguno de los códigos abreviados 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: