Horizontal Product Filter Above Products in WooCommerce: Columns and Rows

A sidebar filter takes a third of the shop width and, on phones, pushes the products far down the page. A horizontal product filter above the products in WooCommerce gives the grid the full width and shows every choice at a glance: a bar of drop-downs, or filter sections in two to four columns. HUSKY has no separate "horizontal mode". The layout comes from two things: how wide the place is where the filter is printed, and the CSS of its blocks. Below are the three ways to put the filter above the products, the built-in column layouts, the CSS for a single row, and fixes for the usual layout problems.

Where the filter is placed decides its layout

Every filter section (categories, colour, size, price) is a block with the class woof_container. In a sidebar widget the blocks stack because the widget is narrow. Printed in a wide area, the same blocks can sit side by side, and the plugin ships classes that arrange them in columns. There are three ways to get the filter above the products:

The automatic filter above the products

1. Go to WooCommerce → Settings → Products Filter → Options and set Set filter automatically to Yes, or to Yes, but only for desktop if phones should get a different filter. Save.
2. Reload the page and open the Design tab. Two options appear there only after the first step has been saved: Hide auto filter by default and Skins for the auto filter.
3. Set Hide auto filter by default to No. With Yes, the default, visitors see only an open/close button, and the filter opens as a panel over the products. That is a valid choice too; the button is styled with Auto filter close/open image and Auto filter close/open text. For a panel that slides in from the edge of the screen instead, see the off-canvas product filter.
4. Choose a skin: Flat white, Flat grey or Flat dark, with 1, 2, 3 or 4 columns. Default is a plain skin with three blocks per row.
5. Remove the HUSKY widget from the shop sidebar so the page does not show two filters, and switch the shop to a full-width layout in the theme. The 4-column skins are labelled "without sidebar" for this reason: four blocks of at least 150px do not fit next to a sidebar.

Behind the scenes the plugin prints [woof sid="flat_grey woof_auto_3_columns" ...] on the WooCommerce action woocommerce_before_shop_loop with priority 2, before the notices, the result count and the sorting drop-down. Two consequences of using this action:

• The theme or page builder template must run it. Classic themes and WooCommerce's own archive template do; many builder archive templates and custom product grids do not, and then nothing appears. Use the shortcode in that case.
• When a combination of filters finds nothing, WooCommerce's archive template runs woocommerce_no_products_found instead of woocommerce_before_shop_loop. After the page reloads, the automatic filter is gone together with the products, and the visitor sees only the "no products" message with no way to change the selection. In AJAX mode the form stays on the page. The shortcode snippet in the next section handles this case.

A shortcode filter in columns

The sid attribute of [woof] becomes CSS classes on the filter form. sid="flat_grey woof_auto_4_columns" prints woof_sid_flat_grey, which gives the grey colours, and woof_auto_4_columns, which places the blocks in four columns. The column classes in the plugin's stylesheet:

Each block is an inline block with a minimum width of 150px, so on narrow screens the blocks wrap into fewer columns by themselves. The first word does not have to be a skin: [woof sid="topbar woof_auto_3_columns"] keeps the plugin's neutral look and gives you the class woof_sid_topbar for your own CSS.

Columns need room. A widget area is only as wide as the sidebar, so put the shortcode in a full-width place: a Shortcode widget in a full-width Elementor or Divi section, a page above [products] or [woof_products] (see the filter on a custom page), or the shop template. To print it above the products on the shop and product archive pages without Set filter automatically, hook it to the same action the plugin uses:

/*
 * 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() covers category, tag and attribute archives. Priority 1 matters: with Try to ajaxify the shop on, the plugin opens the area that AJAX replaces at priority 2 of the same action, and a filter printed after that point would sit inside it and vanish after the first filtering. One limitation: mobile mode, which replaces the filter with an Open filter button on phones, cannot find a form whose sid has two words in version 3.4.6. If you need mobile mode, give the form a one-word sid and build the layout with the CSS in the next section; the mobile filter guide explains the details.

The [woof_front_builder] shortcode is the no-code alternative. It builds a filter form on the page itself, and its Layout options include Default filter section width: 25% gives four sections per row, 50% two. Each section can override it with its own Section width. The FAQ on inserting a filter above the product grid shows how to print such a form above the shop products.

All filters in one row

Columns suit checkbox lists. For a slim bar, switch the sections in the Structure tab to compact view types: Drop-down, Multi drop-down, Radio/Checkbox in drop-down (checkboxes inside a drop-down panel, see the extension page) or Hierarchy drop-down for categories. A drop-down shows the filter's name as its first option, so you can turn the block titles off with Show title label in each section's additional options (the gear icon) and save a line of height. Then let flexbox lay out the blocks. For a form placed with [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%;
    }
}

Five or six drop-downs fit in one row of a 1200px content area; more wrap to a second row instead of being squeezed. The Filter button exists only when Autosubmit is off, and Reset only after something is selected, so the button block is often empty and then takes no room in the row. Below 768px every block takes the full width. To apply the same rules to the automatic filter, replace .woof_sid_topbar with the class of its skin, for example .woof_sid_flat_grey, or .woof_sid_auto_shortcode for the Default skin.

Terms of one filter in rows or columns

A long column of sizes or brands is the other half of the problem. For checkboxes and radio buttons, open the section's additional options in Structure and set Display items in a row to Yes: the items flow side by side and wrap. It applies to terms without subcategories; a parent with children stays on its own line so its subcategories can open below it.

For a fixed number of columns, use a CSS grid on the list of one section:

/* 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;
}

Every section carries the class woof_container_ plus its taxonomy slug: woof_container_product_cat, woof_container_pa_color, woof_container_pa_size. Subcategory lists have their own class, so the grid applies to the first level only. To keep a long list short instead, set Max height of the block in the same additional options; the list then gets its own scrollbar. More selectors are in the guide to styling the filter with CSS.

Fixing a broken horizontal layout

• Find the class names first. Set Advanced → Options → Show blocks helper button to Yes. Administrators then see a show blocks helper link above every filter that has a sid; a click labels each section with its class, such as woof_container_pa_color, and prints the form's class. Switch it off afterwards, as the FAQ on the helper button describes.
• The blocks still stack. The container is too narrow (a widget area or a narrow builder column), or older custom CSS sets widths or floats on .woof_container. Remove earlier attempts before adding new rules: float-based and flex-based rules mixed together give unpredictable results.
• Titles covered by white boxes, lists cut off. The Default auto skin limits each block to 250px of height with its own scrollbar, and themes often add floats, backgrounds or fixed heights to blocks inside the content area. Reset them for your form, for example .woof_sid_auto_shortcode .woof_container { float: none; max-height: none; overflow: visible; }, or switch to a Flat skin.
• A drop-down panel opens behind the products. Give the form its own stacking level: .woof_sid_topbar { position: relative; z-index: 20; }.
• Builder layouts. In Elementor or Divi, place the shortcode in a Shortcode widget or module inside a full-width section above the products. The grid itself must be one the filter can control; see filtering Elementor loop grids.
• Nothing changes after editing CSS. Clear the page cache and any combined or optimized CSS, then test logged out.

The CSS used on the demo site has more ready examples of filter layouts.

Checklist

• One filter form per page: the sidebar widget removed, or Set filter automatically off when the shortcode is used.
• Hide auto filter by default set to No if the bar should always be visible.
• The filter sits in a full-width container; for four columns the shop has no sidebar.
• Columns from a woof_auto_N_columns class in sid, or a one-word sid plus CSS when mobile mode is needed.
• Drop-down view types for a one-row bar; Display items in a row or a grid for long checkbox lists.
• Caches cleared; the page checked logged out on a desktop and on a phone.

If the layout still breaks, open a topic on the HUSKY support forum with the page link and the CSS you added, and we will look at it.