Woo · Shop with filters

A complete shop archive: breadcrumbs, the page title (h1) and its lead, the shop's categories as chips, Bricks filters (search, category, price, size and color chips, on sale) and featured products beside the results: count, active filters, Grid or List view, sorting, a grid of FBK Product cards, pagination and a message when nothing matches. Everything updates without reloading the page. On tablets and phones the filters open in a side panel from a Filters button.

Full-page views: desktop, phone and dark mode

At 1440px wide.

At 390px wide.

With your site in dark mode.

See it live: Woo · Shop with filters on fancybricks.co — the live preview, and the button that copies it.

In the builder

Preview on the front end. Scripts don't run inside the builder, so here you only see the layout: the Grid and List buttons are missing (they need the script); the shop itself works in the builder. Save and open the page to see the full result.

Structure

This is what the Bricks Structure panel shows after you paste the template. Component instances say which component they are.

Woo · Shop with filters
  Container
    Shop · Head
      Shop · Breadcrumbs
      Intro   (FBK Intro)
      Shop · Searched
      Categories
        Categories · List
          Categories · Term loop
            Category chip
              Category chip · Text
    Shop
      Filters panel
        Filters panel · Inner
          Filters panel · Head
            Filters panel · Title
            Filters panel · Close button
          Filters
            Filters · Search
              Filters · Search label
              Filters · Search filter
            Filters · Category
              Filters · Category label
              Filters · Category filter
            Filters · Price
              Filters · Price label
              Filters · Price filter
            Filters · Size
              Filters · Size label
              Filters · Size filter
            Filters · Color
              Filters · Color label
              Filters · Color filter
            Filters · Offers
              Filters · Offers label
              Filters · Offers filter
            Filters · Featured
              Filters · Featured label
              Featured · Products
                Featured · Product loop
                  Product card   (FBK Product card)
          Filters panel · Foot
            Filters panel · Show results
        Filters panel · Backdrop
      Shop · Results
        Shop · Bar
          Filters button
            Filters button · Icon
            Filters button · Text
          Shop · Count
          Shop · Bar end
            Shop · View
              View · Grid
                View · Grid icon
              View · List
                View · List icon
            Shop · Sort
        Shop · Active filters
        Shop · Products
          Shop · Product loop
            Product card   (FBK Product card)
        Shop · Pagination
    Grid or list view (JS; optional, deletable)

The template also pastes a dashed note above the section, with the short version of this page. It only shows inside the builder, never on the published page — see Builder notes.

How to adjust

Every step is the same move: pick the element in the Structure panel, change its Properties.

Where are those panels?

How to adjust a template shows every one of them in a screenshot of the real builder: the Structure and Properties panels, the classes on an element, a component's style families and the field where a CSS variable goes.

The classes this element carries, in the Bricks panel.

This template's own component, with its Style group open.

1. Paste the template in Bricks first — see Copy and paste.
2. Select Intro (FBK Intro) › Properties: Eyebrow, Hide eyebrow, Title, Title level, Lead, Hide lead · Style group: Eyebrow style, Highlight, Title size, Accent line · Layout group: Alignment, Layout, Background, Spacing · Motion group: Reveal in slider.
3. Select Product card ×2 (FBK Product card) › Properties: Show group: Hide category, Hide rating, Hide badges, Hide button · Style group: Look, Tone, Shape, Size, Title size · Layout group: Layout, Photo shape, Photo position, Rating position, Price style, Title level, HTML tag · Add to cart group: Button style, Button tone, Button icon, Icon only, Icon position, Button width, Button position, Quantity · Motion group: Photo hover, Card hover.
4. Select Filters · Search filter › Content › Target query: the query loop it filters.
5. Select Filters · Category filter, Filters · Size filter, Filters · Color filter (+1 more) › Content › Target query and Filter source.
6. Select Filters · Price filter › Content › Target query and Filter source.
7. Select Shop · Sort › Content › Target query and Filter source.
8. Select Shop · Pagination › Query › the query loop it pages.
9. Select Categories · Term loop (query loop) › Query: taxonomy, number of terms and order.
10. Select Featured · Product loop, Shop · Product loop (query loop) › Query: post type, number of posts, order and filters.
11. Spacing, sizes, color and timing with no property of their own: the CSS variables below.

CSS variables

These are the only values in the template meant to be changed by hand. Copy the block, paste it, edit the numbers.

The Custom CSS field of this template's own element, with one of its variables as a real example.

/* «Shop» · class .fbk-shop */
.fbk-shop {
  /* Width of the filters column */
  --fbk-t-filters: 16em;
  /* Narrowest a card gets before the grid drops a column */
  --fbk-t-min: 12em;
  /* Width of the filters panel on tablets and phones */
  --fbk-t-panel: 22em;
  /* Narrowest a card gets in the List view */
  --fbk-t-min-list: 22em;
  --fbk-shop-cols: minmax(0, var(--fbk-t-filters)) minmax(0, 1fr);
  --fbk-shop-grid: repeat(auto-fill, minmax(min(100%, var(--fbk-t-min)), 1fr));
}

Paste the block in the element's Style → CSS field (the selector is already in it), or set the same variables on the class itself to change every copy at once. The values are your framework's variables, so they follow your site: Choosing a framework.

Requirements

• WooCommerce. Needs WooCommerce active, with the products/fields this template queries already set up.
• Code execution. Needs "Execute code" enabled for the role in Bricks → Settings → Custom code, or the JS block shows as plain text instead of running.

What each requirement is, and how to set it up once for the whole site: Requirements.

Finish by hand

• Turn on Bricks > Settings > Performance > Query filters, then save this page once in the builder so Bricks builds the filter index.
• On the shop archive (a WooCommerce Product archive template), open Shop · Product loop and turn on Is main query, so the loop shows the category or tag being visited.
• URL names (Filter > URL parameter): _cat, _size and _color, so a link like /shop/?_cat=hoodies opens the shop filtered (Woo · Hero with shop filters sends its choice that way).
• Filters and sorting point at Shop · Product loop (Query: the loop). If you duplicate the loop, point them at the new one.
• Tablets and phones: Filters panel is a Bricks Offcanvas. On desktop it stays in its column (the classes fbk-shop__panel and fbk-shop__drawer undo the offcanvas there); from the tablet breakpoint down it slides in from the start edge, opened by Filters button (Interactions: Click → Toggle offcanvas, selector .fbk-shop__drawer) and closed by its close button, Show results (same interaction), Escape or a click outside. Keep the filters inside Filters panel · Inner.
• Deliver it by inserting it from the template library or importing the file: pasting gives the elements new ids and the filters, count and pagination lose their loop (point each one at Shop · Product loop again).
• Title: the Intro title is {archive_title} (the shop page's title on the shop, the category or tag name on their archives); write a fixed text instead if the template is used on a normal page.
• Grid or List: the two buttons of Shop · View add or remove the class fbk-woo-list on Shop · Products (the script Grid or list view); without the script they stay hidden and the grid shows. The List view turns every FBK Product card horizontal.
• No products: the text of the loop's No results setting (Query > No results), shown across the grid in a dashed box.
• Categories row: a term query loop (top-level product categories, not empty) on Categories · Term loop; each chip links to its category and shows its number of products.
• Widths: --fbk-t-filters (filters column), --fbk-t-min (narrowest card), --fbk-t-min-list (List view) and --fbk-t-panel (side panel on tablets and phones) on .fbk-shop. On phones (Mobile landscape and down) the grid has two columns, in that breakpoint's CSS.
• Category list: capped at 14em (about six rows) with its own thin brand scrollbar once there are more categories than that (class fbk-shop__cat-scroll on Category filter); change the cap in its CSS if a shop needs to show more at once.

On phones

The template is designed desktop first, the Bricks default, and only changes at the two widths the library uses:

• 991px and below — .fbk-shop, .fbk-shop__open, .fbk-shop__panel (+2 more), .fbk-intro.
• 767px and below — .fbk-shop, .fbk-pcard, .fbk-section.

Those changes live in Bricks' own breakpoint fields, so you edit them where you always do: pick the breakpoint in the toolbar and the same fields follow.

Careful with the classes shared by the whole library (fbk-section, fbk-intro, the component classes): a change there shows up in every template that uses them.

If your site's breakpoints are set up mobile first, copy the mobile-first variant of the template instead — see Copy and paste.

Accessibility

In this template, keyboard focus is visible on every interactive piece; movement is cut back when the visitor's system asks for less motion; the state screen readers need is already set (aria-hidden, aria-label, aria-pressed).

What is checked on every template, and what depends on your own palette: Accessibility.

Dark mode

With your site in dark mode this section turns dark too — the class fbk-section--auto-dark on the section does it. Remove the class to keep it light.

Its background is a modifier on the section, so you can swap it for any of the ones the template is checked with: fbk-section--light, fbk-section--soft, fbk-section--dark.

How the library follows your site's color scheme: Dark mode and preview.

Replaces

• 01 - Archive Woocommerce from Fancy Bricks 1.0
• 01 – Archive Woocommerce (Class-based) from Fancy Bricks 1.0
• 02 - Woo archive (Many features) from Fancy Bricks 1.0
• 01 - Woo Archive from Fancy Bricks 2.0
• 02 - Archive Woo from Fancy Bricks 2.0
• 01 - Price filter from Fancy Bricks 2.0
• 02 - Price filter from Fancy Bricks 2.0
• 01 - Order filter from Fancy Bricks 2.0
• 01 - Mobile filter expand from Fancy Bricks 2.0

What happened to the old libraries, and what to do with pages already built with them: Migrating from 1.0/2.0.