Cómo usar el filtro de productos por precio WooCommerce Block

Los clientes a menudo llegarán a su tienda WooCommerce con un presupuesto establecido en mente. Pensarán: "Solo puedo gastar $ X, así que necesito encontrar el ajuste perfecto". Obligar a los usuarios a navegar página tras página de productos hasta que encuentren uno que se ajuste a su presupuesto puede ser agotador. Ahí es donde el bloque Filtrar productos por precio de WooCommerce resulta útil.

Este bloque permite a los clientes elegir un rango de precios específico. WooCommerce luego actualizará la lista de productos para mostrar solo los artículos que se ajusten a ese presupuesto. Este artículo le mostrará cómo colocar el bloque Filtrar productos por precio y cómo configurarlo. También discutiremos las mejores prácticas para usar este elemento.

¡Hagámoslo!

Cómo agregar el bloque Filtrar productos por precio de WooCommerce a su publicación o página

Antes de explicar cómo usar el bloque Filtrar productos por precio , es importante tener en cuenta que solo funciona junto con el bloque Todos los productos de WooCommerce. Si coloca el bloque Filtrar productos por precio en cualquier página que no incluya el bloque Todos los productos , la función de filtrado no funcionará.

Juntos, estos dos bloques hacen una combinación perfecta para la página principal de la tienda de su tienda. Con eso en mente, abra el Editor de bloques y coloque el bloque Todos los productos primero:

Este bloque generará una cuadrícula de productos que incluye todos los artículos de su catálogo. Puede configurar cuántas filas y columnas incluye la cuadrícula de productos y cambiar el orden en que aparecen los elementos:

Por ahora, no vamos a jugar con esas configuraciones. En su lugar, seleccione la opción para agregar un nuevo bloque sobre el elemento Todos los productos . Busque el bloque Filtrar productos por precio :

Una vez que coloque este elemento, el Editor de bloques mostrará un control deslizante de precios que comienza en $0 y se limita al precio del artículo más caro de su tienda. En nuestro caso, es un producto de $90 dólares, por lo que el control deslizante va de $0 a $90:

Notará que el control deslizante no funciona dentro de la pantalla de su editor. Para ver el bloque en acción, deberá obtener una vista previa de la página (o publicarla y acceder a ella desde el front-end). Si aún no se ve del todo bien, no se preocupe, hablemos sobre cómo configurarlo.

Filtrar productos por precio Ajustes y opciones de bloque de WooCommerce

El bloque Filtrar productos por precio no ofrece una amplia gama de configuraciones. Sin embargo, puede configurar algunos aspectos de cómo se ve y funciona el bloque.

Para acceder a esta configuración, seleccione el elemento dentro del Editor de bloques y haga clic en el ícono de ajustes en la esquina superior derecha de la pantalla. Eso abrirá el menú de configuración del bloque a la derecha. Dentro de este menú, puede habilitar o deshabilitar la opción de campos de texto de precios editables:

Si selecciona la opción Texto , los usuarios solo podrán filtrar precios usando el control deslizante. La opción Editable predeterminada también les permite cambiar los campos de precio manualmente.

Continuando, el menú de configuración del bloque incluye una opción para agregar un botón de confirmación o "filtro". Si habilita esta configuración, los usuarios deberán hacer clic en un botón para confirmar el rango de precios que establecieron. Finalmente, puede cambiar el nivel de encabezado para el texto de la etiqueta Filtrar productos por precio :

La configuración del bloque Filtrar productos por precio no debería llevar mucho tiempo, ya que el elemento solo incluye un puñado de configuraciones. Si no está seguro de qué opciones seleccionar, hablaremos sobre nuestra configuración recomendada en la siguiente sección.

Consejos y mejores prácticas para usar el filtro de productos por precio WooCommerce Block de manera efectiva

Lo primero que debe tener en cuenta al usar el bloque Filtrar productos por precio es que solo funciona junto con el bloque Todos los productos de WooCommerce. El bloque Todos los productos no le permite filtrar productos por categorías o cualquier otro atributo. Eso significa que tiene sentido emparejar los dos bloques si está creando una página de tienda de WooCommerce.

Como mencionamos anteriormente, tiene sentido colocar el bloque Filtrar productos por precio sobre el elemento Todos los productos . De esa manera, los usuarios no se perderán la función de filtrado mientras navegan por la página de la tienda.

El bloque Filtrar Productos por Precio ya incluye un encabezado identificativo, que dice “Filtrar por precio”. Ese encabezado es perfecto para la mayoría de las tiendas, al igual que su nivel H3 predeterminado. Solo recomendamos usar niveles de encabezado más bajos si hay otros elementos H3 en la página que tienen prioridad.

En aras de la facilidad de uso, le recomendamos que también mantenga los campos de texto editables predeterminados que vienen con el bloque Filtrar productos por precio . Ofrecer a los usuarios la opción de editar los precios manualmente o usar el control deslizante hace que el bloque sea más adaptable.

En cuanto a agregar un botón de confirmación, dejamos esa elección en tus manos. Habilitar el botón significa que su cuadrícula de productos no se actualizará automáticamente cuando use el control deslizante Filtrar productos por precio . Sin embargo, eso puede ser un compromiso válido si su sitio web ya está sufriendo problemas de rendimiento.

Preguntas frecuentes sobre el filtro de productos por precio WooCommerce Block

Si tiene alguna pregunta sobre el bloque Filtrar productos por precio , esta sección tiene como objetivo responderla. Comencemos hablando de los requisitos para que este bloque funcione.

¿Por qué no funciona el filtro de productos por bloque de precio?

El bloque Filtrar productos por precio solo funciona si lo combina con el bloque Todos los productos de WooCommerce. Si coloca el bloque Filtrar productos por precio junto a cualquier otro tipo de cuadrícula de productos, simplemente no funcionará. Podrá mover el control deslizante, pero los productos no se actualizarán en consecuencia.

¿Puedo Editar los Precios Mínimos y Máximos en el Filtrar Productos por Bloque de Precios?

El bloque Filtrar productos por precio establece automáticamente su control deslizante de precios para comenzar en $0 y para limitar al precio del producto más caro de su tienda. Solo puede editar el valor del control deslizante cambiando los precios de los productos en su tienda.

Conclusión

El elemento Filtrar productos por precio es un bloque de WooCommerce que solo funciona cuando lo emparejas con otro elemento. Otros bloques que solo funcionan en pares incluyen Filtrar productos por atributo y Filtros de productos activos .

El uso del bloque Filtrar productos por precio de WooCommerce permite a los clientes navegar por todo el inventario de su tienda y ver solo los artículos que se ajustan a sus presupuestos. El bloque solo funciona junto con el elemento Todos los productos , así que téngalo en cuenta cuando lo coloque en su sitio web.

¿Tiene alguna pregunta sobre cómo usar el bloque Filtrar productos por precio ? ¡Hablemos de ellos en la sección de comentarios a continuación!

Imagen destacada de Bakhtiar Zein / shutterstock.com