Step 01
Connect the product query
Create a Grid Panda grid with WooCommerce products as the source. Limit to in-stock or include drafts depending on the catalog. Add ordering rules — popularity, recency, price, or rating.
Use case · WooCommerce
Build a filterable WooCommerce store catalog.
A practical walkthrough for setting up Grid Panda on a WooCommerce store — which facets to pick, how to design the product card, and how to keep filtered category pages SEO-friendly.
Six-step setup
From a vanilla shop page to a filtered catalog browser.
Step 02
Pick the right facets
Start with price (range slider), product categories (hierarchy), product attributes for color (swatch) and size (button group), brand (checkbox), rating (icons), and on-sale (toggle). Use OR logic within each facet so multi-select narrows naturally.
Step 03
Design the product card
Use the card builder with image + hover gallery, sale and stock badges, title, short price, rating stars, and an AJAX add-to-cart button. Add conditional visibility so out-of-stock items show 'Notify me' instead of add-to-cart.
Step 04
Pick the layout
For most stores: standard grid (4 cols desktop / 2 mobile) with numbered pagination. Featured collections work well as a carousel. Editorial product stories suit masonry. Use the responsive controls to set per-breakpoint widths.
Step 05
Configure SEO for filtered URLs
Decide which filter combinations should be indexable — typically category + one attribute (e.g., /shop/jackets/?color=navy). Sort and pagination variants get canonicals back to the base URL. Filtered pages render server-side HTML with JSON-LD ItemList.
Step 06
Run the indexer and ship
Trigger a full reindex of the catalog. The queue processes incrementally so the store stays responsive. Once the index is built, every facet click resolves against the index instead of postmeta.
Setup checklist
Everything to confirm before launch.
Price range slider with currency formatting
Product attributes as swatches/button groups
Categories as hierarchical facet
Rating, on-sale, and stock toggles
Active-filter pills near the top of the grid
Mobile filter drawer for small screens
Per-breakpoint card widths (mobile/tablet/desktop)
AJAX add-to-cart with quick-view if needed
Canonical and indexable filter combinations defined
Cache integration for WP Rocket / LiteSpeed
Recommendations from real store builds
Index only category + one attribute landing pages — combinatorial explosion otherwise.
Use OR logic inside each facet, AND across facets — the standard shopper expectation.
Enable AJAX request cancellation; rapid filter changes shouldn't queue up stale requests.
Set sort variants to canonicalize back to the unsorted URL.
Use the active-filter pills above the grid — visitors miss the sidebar on mobile.
Render the product card server-side so Googlebot indexes it without running JS.
Get started
Set up your store catalog with Grid Panda.
Free for the first 250 users. Pair the WooCommerce filter system with a designed product card and ship a faster catalog this week.