Filtro de Produtos WooCommerce em Página Personalizada ou na Página Inicial

Você coloca o filtro de produtos do WooCommerce em uma página personalizada, em uma landing page ou na página inicial, e acontece uma de três coisas: o formulário aparece mas nenhum produto é exibido, cada clique leva à loja, ou a página recarrega e nada muda. Nada disso é um bug. O shortcode [woof] imprime apenas o formulário de busca, e o plugin decide onde mostrar os resultados olhando o que mais existe na página. A seguir, como essa decisão funciona e as configurações exatas de shortcode para os casos comuns: filtro e produtos na mesma página, uma página limitada a uma categoria ou atributo e um formulário na página inicial que envia os visitantes aos resultados.

Para onde o filtro de produtos do WooCommerce em uma página personalizada envia os visitantes

Quando o visitante clica em Filtrar (Filter) (ou altera uma opção com o envio automático ativado), o script do plugin monta um link como ?swoof=1&pa_color=red e verifica se a página atual tem uma lista de produtos que ele possa atualizar: a saída de [woof_products], um shortcode [products] do WooCommerce ou qualquer lista .products dentro de um contêiner .woocommerce. Se encontrar, os resultados abrem na mesma página. Se não encontrar, o visitante vai para a página da loja, que é a página selecionada em WooCommerce → Configurações → Produtos → Página da loja (WooCommerce → Settings → Products → Shop page).

Duas consequências valem a pena ser conhecidas antes de montar qualquer coisa. Se nenhuma página da loja estiver definida no WooCommerce, não há para onde enviar o visitante, e o filtro recarrega a página em que está, inclusive uma página de produto individual. E se a sua página inicial mostra algum bloco de produtos (produtos em destaque, um carrossel de promoções criado com a marcação do WooCommerce), o filtro trata esse bloco como a grade de resultados e recarrega a página inicial em vez de abrir a loja.

Filtro e produtos na mesma página

Para uma página que funcione como uma pequena loja, coloque dois shortcodes. Eles podem ficar em blocos ou colunas diferentes, por exemplo o formulário em uma coluna estreita e os produtos na coluna larga:

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

• per_page: defina-o. Sem ele, [woof_products] usa Produtos por página (Products per page) da aba Avançado → Opções (Advanced → Options) do plugin e, se o valor for -1 (o padrão), a configuração As páginas do blog mostram no máximo (Blog pages show at most) do WordPress, que é 10 na maioria dos sites.
• columns: produtos por linha. Se o tema respeita esse valor depende do CSS do tema.
• is_ajax=1: os resultados são substituídos sem recarregar a página, e a barra de endereço é atualizada para que a página filtrada possa ser compartilhada. Com is_ajax=0 a página recarrega. Em uma página personalizada, esse atributo é o que ativa o AJAX; a opção Tentar usar AJAX na loja (Try to ajaxify the shop) afeta apenas a loja e os arquivos de categorias.

[woof_products] exibe os produtos com o cartão de produto do seu tema (o template content-product.php) e executa os hooks padrão do loop do WooCommerce, de modo que a contagem de resultados, a ordenação e a paginação aparecem como na página da loja.

O shortcode [products] do WooCommerce também pode ser filtrado: enquanto um filtro está ativo, o HUSKY adiciona suas condições à consulta desse shortcode. [products limit="12" columns="4" paginate="true"] ao lado de [woof] funciona com recarregamento da página; para AJAX, use o gêmeo que o HUSKY registra, [products_woof], com os mesmos atributos.

Limitar a página a uma categoria, tag ou atributo

Uma página para uma única marca, um único local ou "somente smartphones recondicionados" precisa de uma condição permanente que os visitantes não possam remover. Essa é a função do atributo taxonomies, que deve estar nos dois 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]

A sintaxe é taxonomia:ID. Vários IDs de uma mesma taxonomia são separados por vírgulas; taxonomias diferentes são unidas com + e todas precisam corresponder. Com a lógica OR padrão, product_cat:87,92+pa_brand:14 significa "na categoria 87 ou 92, e na marca 14", e os produtos das subcategorias de 87 e 92 estão incluídos. Se você mudou uma taxonomia para a lógica AND nas configurações do plugin, essa lógica também vale para os IDs dela aqui.

IDs de termos, não slugs nem nomes

O plugin converte cada valor em um termo com o ID informado. Um slug como cadeau ou um nome como Yes não é um ID, não corresponde a nada, e essa parte da condição é descartada sem qualquer erro, de modo que a página mostra todos os produtos. Para encontrar um ID, abra Produtos → Categorias (Products → Categories) (ou Tags, ou Produtos → Atributos → Configurar termos (Products → Attributes → Configure terms)), passe o mouse sobre o link Editar (Edit) do termo e leia o número depois de tag_ID= no link.

O nome da taxonomia deve ser exato: product_cat, product_tag, pa_ mais o slug do atributo para atributos globais (pa_color, não color), ou o slug de uma taxonomia personalizada, como uma taxonomia de marcas. Atributos personalizados digitados diretamente em um produto não são taxonomias e não podem ser usados aqui.

O que cada shortcode faz com o valor

• Em [woof_products] ele limita os produtos. É essa a parte que faz o trabalho.
• Em [woof] ele limita o que o formulário conta: com Mostrar contagem (Show count) e Recontagem dinâmica (Dynamic recount) ativados, os números ao lado das opções e a faixa de preço descrevem esse mesmo conjunto limitado, e com Ocultar termos vazios (Hide empty terms) as opções que não têm produtos nesta página desaparecem. No modo AJAX, o formulário é redesenhado após cada filtragem com o valor de [woof_products], portanto mantenha os dois idênticos, ou as contagens mudam depois do primeiro clique.

A condição não está na URL; ela faz parte da página. Redefinir, ou desmarcar tudo, volta à página e a condição continua lá. Oculte os blocos que você pré-filtrou com tax_exclude (nomes de taxonomias separados por vírgula), ou monte um formulário curto com tax_only e by_only, por exemplo [woof tax_only="pa_brand,pa_size" by_only="by_price"]; by_only="none" oculta o preço, a busca por texto e outros filtros que não são de taxonomia. Mais combinações estão em como mostrar filtros diferentes em páginas diferentes e a lista completa de atributos na página do shortcode [woof]. Para pré-filtrar por um campo meta em vez de uma taxonomia, veja como manipular os dados de busca.

Um filtro na página inicial que redireciona para a loja

A configuração mais robusta para a página inicial é um formulário de busca que envia os visitantes a uma 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: a página de resultados. Pode ser a loja, um arquivo de categoria como https://example.com/product-category/tires/ (os resultados então permanecem dentro dessa categoria, porque a categoria está no endereço) ou uma página personalizada com [woof] e [woof_products]. Use uma URL limpa, sem ?; o plugin acrescenta ?swoof=1&... a ela.
• autosubmit=1 sozinho envia o visitante para outra página na primeira alteração, o que serve para uma única lista suspensa. Para um formulário com vários campos, adicione ajax_redraw=1: cada escolha apenas atualiza o formulário (contagens, opções dependentes), e o botão Filtrar (Filter) abre a página de resultados. Com autosubmit=0 nada acontece até o visitante clicar em Filtrar (Filter).

Regras que causam a maioria dos relatos de "o redirecionamento não funciona":

• O redirecionamento é ignorado no modo AJAX. Se a mesma página também tem [woof_products is_ajax=1] ou [products_woof], o formulário filtra essa grade.
• Uma página, um filtro. Quando há vários formulários em uma página, o script usa redirect, autosubmit e ajax_redraw do primeiro formulário que encontra. Um segundo formulário em uma barra lateral ou um filtro automático acima dos produtos pode, sem aviso, sobrepor o formulário que você configurou. O widget do HUSKY tem o seu próprio campo Redirecionar para (Redirect to) com a mesma finalidade.
• Uma condição taxonomies no formulário da página inicial não acompanha o redirecionamento; apenas o que o visitante selecionou vai para a URL. Se o formulário é sobre uma categoria, redirecione para o arquivo dessa categoria.

Por que não filtrar na própria página inicial estática

Filtrar no local funciona em páginas comuns. A página inicial estática é a exceção: parâmetros como product_cat ou product_tag também são variáveis de consulta do WordPress, e quando aparecem no endereço raiz do site, o WordPress deixa de tratar a requisição como a sua página inicial. Dependendo do tema, os visitantes passam a ver um arquivo de categoria, uma página vazia ou um título Página não encontrada (Page not found) adicionado pelo plugin de SEO. Coloque o filtro e [woof_products] em uma página normal (por exemplo /products/) e faça o formulário da página inicial redirecionar para lá.

Mostrar produtos somente depois que o visitante filtrar

Para uma landing page que deve abrir apenas com o formulário, adicione display_on_search=1 a [woof_products]. Até que um filtro seja aplicado, a área de produtos permanece vazia; depois da primeira busca, a página mostra os resultados. A documentação descreve esse atributo para o modo com recarregamento, portanto use-o com is_ajax=0. Detalhes na página do shortcode [woof_products].

Páginas de produto, menus e grades de construtores de páginas

• Páginas de produto individual. Um filtro na barra lateral da página de produto sempre abre a loja (ou a URL de redirect); produtos relacionados e de venda adicional (upsell) não são tratados como resultados.
• Menus e mega menus. Aponte os itens de categoria para os arquivos de categoria reais (/product-category/.../), não para páginas que contêm um shortcode. Os arquivos podem ser filtrados sem nenhuma configuração e mantêm a categoria durante a filtragem.
• Grades de produtos de construtores. Uma grade do Elementor, do Divi ou de outro construtor que executa a sua própria consulta de produtos não reage ao filtro, mesmo que o formulário permaneça na página. Substitua-a por [woof_products], ou torne a consulta dela filtrável como descrito em a URL do filtro muda, mas os produtos não.
• [woof_products] em templates de categoria. O shortcode não sabe em qual arquivo de categoria foi colocado; ele foi feito para páginas. Em um template de categoria, mostra todos os produtos a menos que você passe taxonomies, portanto mantenha ali o loop de produtos padrão do arquivo.

Se ainda não funcionar

• As aspas são retas. Shortcodes copiados de um processador de texto ou de algumas páginas da web chegam com aspas curvas (’pa_age’), que o WordPress não aceita como aspas de atributo. Digite-as novamente em um bloco Shortcode.
• Todo valor em taxonomies é um ID numérico de termo, o nome da taxonomia é exato, não há espaços ao redor de + ou :, e os dois shortcodes têm o mesmo valor.
• [woof_products] tem per_page, para que a página não pare em 10 produtos.
• Uma página da loja está selecionada nas configurações do WooCommerce.
• Há apenas um formulário de filtro na página, ou o primeiro contém o redirect que você quer.
• A grade de produtos da página é [woof_products], [products] ou [products_woof], e não um widget de construtor com consulta própria.

Se tudo isso estiver correto e a página ainda se comportar mal, publique o link da página e os dois shortcodes exatamente como estão no editor no fórum de suporte do HUSKY.