Filtro de productos WooCommerce en una página personalizada o en la portada

Pones el filtro de productos de WooCommerce en una página personalizada, en una landing page o en la portada, y ocurre una de estas tres cosas: el formulario aparece pero no se ve ningún producto, cada clic te lleva a la tienda, o la página se recarga y nada cambia. Nada de esto es un error. El shortcode [woof] imprime solo el formulario de búsqueda, y el plugin decide dónde mostrar los resultados según lo que haya además en la página. A continuación se explica cómo funciona esa decisión y se dan las configuraciones exactas de shortcode para los casos habituales: filtro y productos en una misma página, una página limitada a una categoría o atributo, y un formulario en la portada que envía a los visitantes a los resultados.

Adónde envía a los visitantes un filtro de productos de WooCommerce en una página personalizada

Cuando el visitante pulsa Filtro (Filter) (o cambia una opción con el envío automático activado), el script del plugin construye un enlace como ?swoof=1&pa_color=red y comprueba si la página actual tiene una lista de productos que pueda actualizar: la salida de [woof_products], un shortcode [products] de WooCommerce o cualquier lista .products dentro de un contenedor .woocommerce. Si la encuentra, los resultados se abren en la misma página. Si no, el visitante va a la página de la tienda, que es la seleccionada en WooCommerce → Ajustes → Productos → Página de la tienda (WooCommerce → Settings → Products → Shop page).

Conviene conocer dos consecuencias antes de construir nada. Si en WooCommerce no hay ninguna página de la tienda definida, no hay adónde enviar al visitante, y el filtro recarga la página en la que está, incluida la página de un solo producto. Y si tu portada muestra cualquier bloque de productos (productos destacados, un carrusel de ofertas creado con el marcado de WooCommerce), el filtro trata ese bloque como la cuadrícula de resultados y recarga la portada en lugar de abrir la tienda.

Filtro y productos en la misma página

Para una página que funcione como una pequeña tienda, coloca dos shortcodes. Pueden estar en bloques o columnas distintos, por ejemplo el formulario en una columna estrecha y los productos en la ancha:

[woof]
[woof_products per_page=12 columns=3 is_ajax=1]

• per_page: indícalo siempre. Sin él, [woof_products] usa Productos por página (Products per page) de la pestaña Advanced → Options del plugin, y si ese valor es -1 (el predeterminado), el ajuste de WordPress Blog pages show at most, que en la mayoría de los sitios es 10.
• columns: productos por fila. Que el tema lo respete depende del CSS del tema.
• is_ajax=1: los resultados se sustituyen sin recargar la página, y la barra de direcciones se actualiza para que se pueda compartir la página filtrada. Con is_ajax=0 la página se recarga. En una página personalizada, este atributo es el que activa AJAX; la opción Intenta ajaxificar la tienda (Try to ajaxify the shop) solo afecta a la tienda y a los archivos de categorías.

[woof_products] muestra los productos con la tarjeta de producto de tu tema (la plantilla content-product.php) y ejecuta los hooks estándar del bucle de WooCommerce, de modo que el recuento de resultados, la ordenación y la paginación aparecen igual que en la página de la tienda.

El shortcode [products] de WooCommerce también se puede filtrar: mientras hay un filtro activo, HUSKY añade sus condiciones a la consulta de ese shortcode. [products limit="12" columns="4" paginate="true"] junto a [woof] funciona con recargas de página; para AJAX, usa el gemelo que registra HUSKY, [products_woof], con los mismos atributos.

Limitar la página a una categoría, etiqueta o atributo

Una página para una sola marca, una sola ubicación o "solo smartphones reacondicionados" necesita una condición permanente que los visitantes no puedan quitar. Para eso sirve el atributo taxonomies, que debe ir en ambos shortcodes:

[woof taxonomies="product_cat:87+product_tag:105" tax_exclude="product_cat,product_tag"]
[woof_products taxonomies="product_cat:87+product_tag:105" per_page=12 columns=3 is_ajax=1]

La sintaxis es taxonomía:ID. Varios ID de una misma taxonomía se separan con comas; las distintas taxonomías se unen con + y todas deben cumplirse. Con la lógica OR predeterminada, product_cat:87,92+pa_brand:14 significa "en la categoría 87 o 92, y de la marca 14", e incluye los productos de las categorías hijas de 87 y 92. Si en los ajustes del plugin cambiaste una taxonomía a lógica AND, esa lógica se aplica también a sus ID aquí.

ID de término, no slugs ni nombres

El plugin convierte cada valor en el término con ese ID. Un slug como cadeau o un nombre como Yes no es un ID, no coincide con nada, y esa parte de la condición se descarta sin ningún error, así que la página muestra todos los productos. Para averiguar un ID, abre Productos → Categorías (Products → Categories) (o Etiquetas (Tags), o Productos → Atributos → Configurar términos (Products → Attributes → Configure terms)), pasa el ratón por el enlace Editar (Edit) del término y lee el número que aparece después de tag_ID= en el enlace.

El nombre de la taxonomía debe ser exacto: product_cat, product_tag, pa_ más el slug del atributo para los atributos globales (pa_color, no color), o el slug de una taxonomía personalizada, como una taxonomía de marcas. Los atributos personalizados escritos directamente en un producto no son taxonomías y no se pueden usar aquí.

Qué hace cada shortcode con el valor

• En [woof_products] limita los productos. Esta es la parte que hace el trabajo.
• En [woof] limita lo que cuenta el formulario: con Mostrar recuento (Show count) y Recuento dinámico (Dynamic recount) activados, los números junto a las opciones y el rango de precios describen ese mismo conjunto limitado, y con Ocultar términos vacíos (Hide empty terms) desaparecen las opciones que no tienen productos en esta página. En modo AJAX el formulario se vuelve a dibujar después de cada filtrado con el valor de [woof_products], así que mantén ambos idénticos o los recuentos cambiarán tras el primer clic.

La condición no está en la URL; forma parte de la página. Restablecer, o desmarcar todo, devuelve a la página y la condición sigue ahí. Oculta los bloques que ya has prefiltrado con tax_exclude (nombres de taxonomías separados por comas), o crea un formulario reducido con tax_only y by_only, por ejemplo [woof tax_only="pa_brand,pa_size" by_only="by_price"]; by_only="none" oculta el precio, la búsqueda de texto y otros filtros que no son taxonomías. Encontrarás más combinaciones en cómo mostrar filtros diferentes en páginas diferentes y la lista completa de atributos en la página del shortcode [woof]. Para prefiltrar por un campo meta en lugar de una taxonomía, consulta cómo manipular los datos de búsqueda.

Un filtro en la portada que redirige a la tienda

La configuración más robusta para la portada es un formulario de búsqueda que envía a los visitantes a una página de resultados:

[woof redirect="https://example.com/shop/" autosubmit=1 ajax_redraw=1 tax_only="product_cat,pa_size" by_only="none"]

• redirect: la página de resultados. Puede ser la tienda, un archivo de categoría como https://example.com/product-category/tires/ (los resultados se quedan entonces dentro de esa categoría, porque la categoría está en la dirección), o una página personalizada con [woof] y [woof_products]. Usa una URL limpia, sin ?; el plugin le añade ?swoof=1&....
• autosubmit=1 por sí solo envía al visitante fuera en el primer cambio, lo que va bien para un único desplegable. Para un formulario con varios campos, añade ajax_redraw=1: cada elección solo actualiza el formulario (recuentos, opciones dependientes), y el botón Filtro (Filter) abre la página de resultados. Con autosubmit=0 no ocurre nada hasta que el visitante pulsa Filtro (Filter).

Reglas que provocan la mayoría de los reportes de "la redirección no funciona":

• La redirección se ignora en modo AJAX. Si la misma página tiene además [woof_products is_ajax=1] o [products_woof], el formulario filtra esa cuadrícula.
• Una página, un filtro. Cuando hay varios formularios en una página, el script toma redirect, autosubmit y ajax_redraw del primer formulario que encuentra. Un segundo formulario en una barra lateral o un filtro automático encima de los productos puede anular en silencio el formulario que configuraste. El widget de HUSKY tiene su propio campo Redirigir a (Redirect to) con el mismo fin.
• Una condición taxonomies en el formulario de la portada no viaja con la redirección; solo lo que el visitante ha seleccionado pasa a la URL. Si el formulario trata de una categoría, redirige al archivo de esa categoría.

Por qué no filtrar en la propia portada estática

Filtrar en el mismo sitio funciona en las páginas normales. La portada estática es la excepción: parámetros como product_cat o product_tag son también variables de consulta de WordPress, y cuando aparecen en la dirección raíz del sitio, WordPress deja de tratar la petición como tu portada. Según el tema, los visitantes ven entonces un archivo de categoría, una página vacía o un título Página no encontrada (Page not found) añadido por el plugin de SEO. Coloca el filtro y [woof_products] en una página normal (por ejemplo /products/) y haz que el formulario de la portada redirija allí.

Mostrar los productos solo después de que el visitante filtre

Para una landing page que deba abrirse solo con el formulario, añade display_on_search=1 a [woof_products]. Mientras no se aplique un filtro, el área de productos permanece vacía; tras la primera búsqueda, la página muestra los resultados. La documentación describe este atributo para el modo con recarga, así que úsalo con is_ajax=0. Los detalles están en la página del shortcode [woof_products].

Páginas de un solo producto, menús y cuadrículas de constructores de páginas

• Páginas de un solo producto. Un filtro en la barra lateral de la página de producto siempre abre la tienda (o su URL de redirect); los productos relacionados y de venta cruzada no se tratan como resultados.
• Menús y megamenús. Enlaza los elementos de categoría con los archivos de categoría reales (/product-category/.../), no con páginas que contienen un shortcode. Los archivos se pueden filtrar sin ninguna configuración y conservan la categoría al filtrar.
• Cuadrículas de productos de constructores de páginas. Una cuadrícula de Elementor, Divi u otro constructor que ejecute su propia consulta de productos no reacciona al filtro, aunque el formulario siga en la página. Sustitúyela por [woof_products], o haz que su consulta sea filtrable como se describe en la URL del filtro cambia pero los productos no.
• [woof_products] en plantillas de categoría. El shortcode no sabe en qué archivo de categoría está colocado; está pensado para páginas. En una plantilla de categoría muestra todos los productos a menos que le pases taxonomies, así que mantén allí el bucle de productos estándar del archivo.

Si sigue sin funcionar

• Las comillas son rectas. Los shortcodes copiados de un procesador de textos o de algunas páginas web llegan con comillas tipográficas (’pa_age’), que WordPress no acepta como comillas de atributo. Vuelve a escribirlas en un bloque Shortcode.
• Cada valor de taxonomies es un ID numérico de término, el nombre de la taxonomía es exacto, no hay espacios alrededor de + ni de :, y ambos shortcodes llevan el mismo valor.
• [woof_products] tiene per_page, para que la página no se detenga en 10 productos.
• Hay una página de la tienda seleccionada en los ajustes de WooCommerce.
• Solo hay un formulario de filtro en la página, o el primero lleva el redirect que quieres.
• La cuadrícula de productos de la página es [woof_products], [products] o [products_woof], no un widget de un constructor con su propia consulta.

Si todo esto es correcto y la página sigue sin comportarse bien, publica el enlace de la página y ambos shortcodes tal como están en el editor en el foro de soporte de HUSKY.