Creating Product Filters with FacetWP

Creating Product Filters with FacetWP

In modern e-commerce, shoppers expect to find products quickly and intuitively. FacetWP is a powerful WordPress plugin that adds fast, AJAX-powered faceted search and filtering to your WooCommerce or custom product store. This article will guide you through every step—from installation to advanced customizations—to deliver a robust filtering experience.

1. Why Product Filters Matter

• Improved UX: Visitors can narrow down thousands of products in seconds.
• Higher Conversions: Precise filters lead to better match rates.
• Reduced Bounce: Engaged shoppers stay longer when they find what they need.

2. FacetWP Overview

FacetWP provides:

• Ajax‐driven filtering without page reloads.
• Multiple facet types: checkboxes, dropdowns, sliders, date ranges.
• Integration with WooCommerce, Advanced Custom Fields, custom post types and taxonomies.
• Developer hooks and templates for deep customization.

Learn more at facetwp.com.

3. Installation Setup

3.1 System Requirements

• WordPress 5.0 and PHP 7.0 .
• MySQL 5.6 or MariaDB 10.0 .
• Faceted content: WooCommerce products or custom post types.

3.2 Installing FacetWP

1. Purchase a license at https://facetwp.com/pricing/.
2. Download the plugin ZIP file.
3. In WP Admin, go to Plugins gt Add New gt Upload Plugin.
4. Activate and enter your license key in Settings gt FacetWP.

3.3 Indexing Data

After activation, navigate to Settings gt FacetWP gt Indexing and click Re-index. This generates the internal tables that power fast queries.

Tip: Schedule automatic re-indexing when new products arrive, especially on high-traffic sites.

4. Building Basic Facets

4.1 Facet Types

4.2 Creating a Facet

1. Go to FacetWP gt Facets gt Add New.
2. Enter a Label (e.g. “Color”).
3. Select the Facet Type and data Source (e.g. taxonomy or custom field).
4. Configure display settings: sort, counts, placeholder text.
5. Save and repeat for each filter.

4.3 Embedding Facets

Facets and listings are inserted via shortcodes or PHP functions:

• Shortcode: [facetwp facet=color]
• PHP: ltphp echo facetwp_display(facet,color) gt
• Listings: [facetwp template=products]

5. Styling Layout

FacetWP outputs semantic markup with CSS classes. You can:

• Target .facetwp-facet to style container.
• Modify labels via .facetwp-facet-label.
• Override templates in your theme’s /facetwp/ directory. See FacetWP Template Docs.

ltstyle>
.facetwp-facet { margin-bottom:20px }
.facetwp-facet .facetwp-facet-label { font-weight:bold color:#444 }
.facetwp-slider input { width:100% }
lt/style>

6. Advanced Filtering

6.1 Custom Fields Taxonomies

Beyond WooCommerce defaults, filter by any meta key or custom taxonomy. For example, an ACF text field ‘fabric_type’:

1. Create a facet of type Dropdown, set Data source to post_meta and enter fabric_type.
2. Configure sort and fallback values.

6.2 Hooks Filters

FacetWP exposes many hooks. Common examples:

• facetwp_query_args: Modify WP_Query args before execution.
• facetwp_facet_html: Alter facet HTML output.
• facetwp_is_main_query: Target specific loops.

Reference: FacetWP Actions Filters.

7. Performance Best Practices

• Caching: Use server-side caching (e.g. WP Rocket, Redis) and exclude AJAX endpoints.
• Index Maintenance: Rebuild indexes after bulk imports or schema changes.
• Paged Queries: Enable “Lazy load” for large data sets.
• Usability: Group related facets, limit default item counts, provide a “Clear All” link.

8. Example: WooCommerce Store

Imagine a clothing site with 1,000 SKUs. You need filters for:

• Categories (Men, Women, Kids)
• Color (taxonomy)
• Size (taxonomy)
• Price (slider)
• Brand (ACF field)

1. Create a Checkboxes facet for each taxonomy.
2. Create a Slider facet with _price meta key.
3. Create a Dropdown facet for the ‘brand’ meta field.
4. Embed facets in sidebar:
   [facetwp facet=categories] [facetwp facet=color] [facetwp facet=size] [facetwp facet=price] [facetwp facet=brand]
[facetwp template=shop-products]
5. Style with custom CSS and test on mobile.

9. Troubleshooting

• No results: Ensure correct data source, re-index, check WP_Query args.
• Slow filters: Optimize indexes, reduce facets per page, enable lazy load.
• JS conflicts: Inspect console, resolve conflicting plugins or themes.
• Missing license: Verify key under Settings gt FacetWP.

10. Further Resources

• FacetWP Documentation: https://facetwp.com/documentation/
• WordPress Plugin Handbook: https://developer.wordpress.org/plugins/
• WooCommerce Developer Docs: https://docs.woocommerce.com/

By following these guidelines, you can implement professional, high-performance product filters that elevate user experience and drive sales. FacetWP’s flexibility and speed make it an ideal solution for small shops and large enterprises alike.