Filtro de Produtos Horizontal Acima dos Produtos no WooCommerce

Um filtro na barra lateral ocupa um terço da largura da loja e, em celulares, empurra os produtos para o fim da página. Um filtro de produtos horizontal acima dos produtos no WooCommerce dá à grade a largura total e mostra todas as opções de uma só vez: uma barra de listas suspensas ou seções de filtro em duas a quatro colunas. O HUSKY não tem um "modo horizontal" separado. O layout vem de duas coisas: a largura do local onde o filtro é impresso e o CSS dos seus blocos. A seguir, as três maneiras de colocar o filtro acima dos produtos, os layouts de colunas integrados, o CSS para uma única linha e correções para os problemas de layout mais comuns.

O local onde o filtro é colocado define o seu layout

Cada seção do filtro (categorias, cor, tamanho, preço) é um bloco com a classe woof_container. Em um widget de barra lateral, os blocos se empilham porque o widget é estreito. Impressos em uma área larga, os mesmos blocos podem ficar lado a lado, e o plugin traz classes que os organizam em colunas. Há três maneiras de colocar o filtro acima dos produtos:

O filtro automático acima dos produtos

1. Vá a WooCommerce → Configurações → Products Filter → Opções (Options) e defina Definir filtro automaticamente (Set filter automatically) como Sim (Yes), ou como Sim, mas somente para desktop (Yes, but only for desktop) se os celulares devem receber um filtro diferente. Salve.
2. Recarregue a página e abra a aba Design. Duas opções aparecem ali somente depois que o primeiro passo foi salvo: Ocultar o filtro automático por padrão (Hide auto filter by default) e Skins do filtro automático (Skins for the auto filter).
3. Defina Ocultar o filtro automático por padrão (Hide auto filter by default) como Não (No). Com Sim (Yes), o padrão, os visitantes veem apenas um botão de abrir/fechar, e o filtro se abre como um painel sobre os produtos. Essa também é uma escolha válida; o botão é estilizado com Imagem de fechar/abrir do filtro automático (Auto filter close/open image) e Texto de fechar/abrir do filtro automático (Auto filter close/open text). Para um painel que desliza a partir da borda da tela, veja o filtro de produtos off-canvas.
4. Escolha um skin: Flat white, Flat grey ou Flat dark, com 1, 2, 3 ou 4 colunas. Padrão (Default) é um skin simples com três blocos por linha.
5. Remova o widget do HUSKY da barra lateral da loja para que a página não mostre dois filtros e mude a loja para um layout de largura total no tema. Os skins de 4 colunas levam a indicação "sem barra lateral" por esse motivo: quatro blocos de pelo menos 150px não cabem ao lado de uma barra lateral.

Nos bastidores, o plugin imprime [woof sid="flat_grey woof_auto_3_columns" ...] na action woocommerce_before_shop_loop do WooCommerce, com prioridade 2, antes dos avisos, da contagem de resultados e da lista suspensa de ordenação. Duas consequências de usar essa action:

• O template do tema ou do construtor de páginas precisa executá-la. Os temas clássicos e o próprio template de arquivo do WooCommerce a executam; muitos templates de arquivo de construtores e grades de produtos personalizadas não, e então nada aparece. Nesse caso, use o shortcode.
• Quando uma combinação de filtros não encontra nada, o template de arquivo do WooCommerce executa woocommerce_no_products_found em vez de woocommerce_before_shop_loop. Depois que a página recarrega, o filtro automático desaparece junto com os produtos, e o visitante vê apenas a mensagem de "nenhum produto", sem como alterar a seleção. No modo AJAX, o formulário permanece na página. O trecho de shortcode da próxima seção resolve esse caso.

Um filtro por shortcode em colunas

O atributo sid de [woof] se transforma em classes CSS no formulário do filtro. sid="flat_grey woof_auto_4_columns" imprime woof_sid_flat_grey, que dá as cores cinza, e woof_auto_4_columns, que distribui os blocos em quatro colunas. As classes de colunas na folha de estilos do plugin:

Cada bloco é um inline-block com largura mínima de 150px, de modo que, em telas estreitas, os blocos se reorganizam sozinhos em menos colunas. A primeira palavra não precisa ser um skin: [woof sid="topbar woof_auto_3_columns"] mantém o visual neutro do plugin e lhe dá a classe woof_sid_topbar para o seu próprio CSS.

Colunas precisam de espaço. Uma área de widgets tem apenas a largura da barra lateral, portanto coloque o shortcode em um local de largura total: um widget Shortcode em uma seção de largura total do Elementor ou do Divi, uma página acima de [products] ou [woof_products] (veja o filtro em uma página personalizada) ou o template da loja. Para imprimi-lo acima dos produtos nas páginas da loja e de arquivos de produtos sem Definir filtro automaticamente (Set filter automatically), conecte-o à mesma action que o plugin usa:

/*
 * HUSKY: filter in columns above the products on the shop and product archives.
 * Child theme functions.php or a code snippets plugin.
 * Keep "Set filter automatically" = No, otherwise the page shows two filters.
 */
function my_husky_top_filter() {
    if (is_shop() || is_product_taxonomy()) {
        echo do_shortcode('[woof sid="flat_grey woof_auto_4_columns"]');
    }
}
add_action('woocommerce_before_shop_loop', 'my_husky_top_filter', 1);

// WooCommerce skips woocommerce_before_shop_loop when nothing is found:
// keep the filter on the "no products" page too.
add_action('woocommerce_no_products_found', 'my_husky_top_filter', 5);

is_product_taxonomy() abrange os arquivos de categoria, de tag e de atributo. A prioridade 1 é importante: com Tentar usar AJAX na loja (Try to ajaxify the shop) ativado, o plugin abre a área que o AJAX substitui na prioridade 2 da mesma action, e um filtro impresso depois desse ponto ficaria dentro dela e desapareceria após a primeira filtragem. Uma limitação: o modo móvel, que substitui o filtro por um botão Abrir filtro (Open filter) em celulares, não encontra um formulário cujo sid tenha duas palavras na versão 3.4.6. Se você precisa do modo móvel, dê ao formulário um sid de uma única palavra e monte o layout com o CSS da próxima seção; o guia do filtro móvel explica os detalhes.

O shortcode [woof_front_builder] é a alternativa sem código. Ele monta um formulário de filtro na própria página, e suas opções de Layout (Layout) incluem Largura padrão da seção do filtro (Default filter section width): 25% dá quatro seções por linha, 50% dá duas. Cada seção pode substituir esse valor com a sua própria Largura da seção (Section width). O FAQ sobre inserir um filtro acima da grade de produtos mostra como imprimir esse formulário acima dos produtos da loja.

Todos os filtros em uma única linha

Colunas são adequadas para listas de caixas de seleção. Para uma barra compacta, mude as seções na aba Estrutura (Structure) para tipos de exibição compactos: Lista suspensa (Drop-down), Lista suspensa múltipla (Multi drop-down), Botão de opção/caixa de seleção em lista suspensa (Radio/Checkbox in drop-down) (caixas de seleção dentro de um painel suspenso, veja a página da extensão) ou Lista suspensa hierárquica (Hierarchy drop-down) para categorias. Uma lista suspensa mostra o nome do filtro como primeira opção, então você pode desligar os títulos dos blocos com Mostrar rótulo do título (Show title label) nas opções adicionais de cada seção (o ícone de engrenagem) e economizar uma linha de altura. Depois deixe o flexbox distribuir os blocos. Para um formulário colocado com [woof sid="topbar"]:

/*
 * HUSKY: filter sections in one row above the products.
 * Advanced → Code → Custom CSS code, or the theme's Additional CSS.
 */
.woof_sid_topbar .woof_redraw_zone {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.woof_sid_topbar .woof_container {
    flex: 1 1 180px;      /* share the row, never narrower than 180px */
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;    /* drop-down panels must not be cut off */
}
.woof_sid_topbar .woof_submit_search_form_container {
    flex: 0 0 auto;       /* Filter and Reset buttons at the end of the row */
    margin: 0;
}
.woof_sid_topbar .chosen-container,
.woof_sid_topbar .select2-container {
    width: 100% !important;
}
@media (max-width: 767px) {
    .woof_sid_topbar .woof_container,
    .woof_sid_topbar .woof_submit_search_form_container {
        flex-basis: 100%;
    }
}

Cinco ou seis listas suspensas cabem em uma linha de uma área de conteúdo de 1200px; mais que isso passam para uma segunda linha em vez de serem espremidas. O botão Filtrar (Filter) existe somente quando o Envio automático (Autosubmit) está desativado, e Redefinir (Reset) somente depois que algo é selecionado, portanto o bloco de botões costuma estar vazio e, então, não ocupa espaço na linha. Abaixo de 768px, cada bloco ocupa a largura total. Para aplicar as mesmas regras ao filtro automático, substitua .woof_sid_topbar pela classe do skin dele, por exemplo .woof_sid_flat_grey, ou .woof_sid_auto_shortcode para o skin Padrão (Default).

Termos de um filtro em linhas ou colunas

Uma coluna longa de tamanhos ou marcas é a outra metade do problema. Para caixas de seleção e botões de opção, abra as opções adicionais da seção em Estrutura (Structure) e defina Exibir itens em uma linha (Display items in a row) como Sim (Yes): os itens fluem lado a lado e quebram de linha. Isso vale para termos sem subcategorias; um item pai com filhos permanece em sua própria linha, para que suas subcategorias possam se abrir abaixo dele.

Para um número fixo de colunas, use uma grade CSS na lista de uma seção:

/* Sizes in three equal columns. Replace pa_size with your taxonomy slug. */
.woof .woof_container_pa_size ul.woof_list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 12px;
}

Toda seção tem a classe woof_container_ mais o slug da sua taxonomia: woof_container_product_cat, woof_container_pa_color, woof_container_pa_size. As listas de subcategorias têm a sua própria classe, de modo que a grade se aplica apenas ao primeiro nível. Para manter curta uma lista longa, defina Altura máxima do bloco (Max height of the block) nas mesmas opções adicionais; a lista passa então a ter a sua própria barra de rolagem. Mais seletores estão no guia de como estilizar o filtro com CSS.

Corrigir um layout horizontal quebrado

• Descubra primeiro os nomes das classes. Defina Avançado (Advanced) → Opções (Options) → Mostrar botão auxiliar de blocos (Show blocks helper button) como Sim (Yes). Os administradores passam a ver um link mostrar auxiliar de blocos (show blocks helper) acima de cada filtro que tem um sid; um clique rotula cada seção com a sua classe, como woof_container_pa_color, e imprime a classe do formulário. Desative-o depois, como descreve o FAQ sobre o botão auxiliar.
• Os blocos continuam empilhados. O contêiner é estreito demais (uma área de widgets ou uma coluna estreita do construtor), ou um CSS personalizado antigo define larguras ou floats em .woof_container. Remova as tentativas anteriores antes de adicionar novas regras: regras baseadas em float misturadas com regras baseadas em flex dão resultados imprevisíveis.
• Títulos cobertos por caixas brancas, listas cortadas. O skin automático Padrão (Default) limita cada bloco a 250px de altura com a sua própria barra de rolagem, e os temas costumam adicionar floats, fundos ou alturas fixas aos blocos dentro da área de conteúdo. Redefina-os para o seu formulário, por exemplo .woof_sid_auto_shortcode .woof_container { float: none; max-height: none; overflow: visible; }, ou mude para um skin Flat.
• Um painel de lista suspensa abre atrás dos produtos. Dê ao formulário o seu próprio nível de empilhamento: .woof_sid_topbar { position: relative; z-index: 20; }.
• Layouts de construtores. No Elementor ou no Divi, coloque o shortcode em um widget ou módulo Shortcode dentro de uma seção de largura total acima dos produtos. A própria grade precisa ser uma que o filtro consiga controlar; veja como filtrar grades de loop do Elementor.
• Nada muda depois de editar o CSS. Limpe o cache de página e qualquer CSS combinado ou otimizado, e então teste sem estar logado.

O CSS usado no site de demonstração tem mais exemplos prontos de layouts de filtro.

Lista de verificação

• Um formulário de filtro por página: o widget da barra lateral removido, ou Definir filtro automaticamente (Set filter automatically) desativado quando o shortcode é usado.
• Ocultar o filtro automático por padrão (Hide auto filter by default) definido como Não (No) se a barra deve estar sempre visível.
• O filtro está em um contêiner de largura total; para quatro colunas, a loja não tem barra lateral.
• Colunas a partir de uma classe woof_auto_N_columns em sid, ou um sid de uma palavra mais CSS quando o modo móvel é necessário.
• Tipos de exibição em lista suspensa para uma barra de uma linha; Exibir itens em uma linha (Display items in a row) ou uma grade para listas longas de caixas de seleção.
• Caches limpos; página verificada sem estar logado, em um desktop e em um celular.

Se o layout ainda quebrar, abra um tópico no fórum de suporte do HUSKY com o link da página e o CSS que você adicionou, e nós vamos analisar.