One of the main reasons why plugins like WooCommerce and Easy Digital Downloads have become so popular for WordPress sites is the ease with which they can be customized to sell almost any kind of product.

With WooCommerce, you have hundreds of extensions at your disposal to sell anything from coffee subscriptions to equipment rentals. Easy Digital Downloads focuses on virtual products, but gives you the tools needed to sell services, ebooks, software, create virtual marketplaces, and can even sell shippable goods with simple shipping rules.

Both plugins are very developer-friendly, so even if there’s no extension to do what you need, you can typically add functionality with custom code to achieve what you’re looking for.

However, in my experience, most functionality-based extensions (e.g., not integrations like payments plugins) focus on what you’re selling — adding new product types like bookings or memberships, giving you new ways to show pricing, or helping you discount / bundle those products. There are far fewer extensions that focus on how you’re selling and your store’s browsing experience.

Adding product filters is a powerful way to improve the browsing experience and help customers find the products they’re looking for, especially for sites with large product catalogs or collections. Adding relevant filters to help shoppers browse your store can increase your sales and conversions:

Overall there was 76.1% increase in Revenue, a 26% increase in conversions and 19.76% increase in shopping cart visits…Adding a product filer is an obvious feature that many eCommerce stores may or may not have, but this A/B test demonstrated that it worked wonderfully for BuyAKilt.com.
Visual Website Optimizer

Despite the potential revenue increases from implementing filters and their prevalence with giant eCommerce retailers like Macy’s and Amazon, many smaller sites don’t leverage them, even if they are selling hundreds of products. According to Smashing Mag, “only 16% of major e-commerce websites offer a reasonably good filtering experience.”

The great news is that, as a WordPress eCommerce merchant, you can add your own advanced eCommerce product filters to drastically improve your shopping experience with the help of the FacetWP plugin.

eCommerce Product Filters: FacetWP Overview

FacetWP ($79+) provides a way for WordPress sites to categorize posts and filter the way they’re displayed to visitors. This lets your visitors see only content that’s relevant to them and the filters they’ve chosen, making it easier to find the desired content.

Since products on your site are a type of post, FacetWP provides the tools you need to generate filters that customers can use to drill down to the products they want to see. A good example of what you could achieve with FacetWP are the filters Amazon provides while shopping:

FacetWP Review: Example: Amazon Product Filters

Example: Amazon Product Filters

When your store has hundreds of products, these kind of filters drastically improve browsing, as customers can not only use categories to see the products they want, but can use additional filters (or “facets”) to immediately find what they’re looking for.

FacetWP has a couple demo set ups you can check out to get an idea of what kind of filters for your products you can implement.

eCommerce Product Filters: Categorizing Site Content

The first (and most important) thing you’ll need to do is determine how your products should be categorized and filtered. This part is the toughest part of set up, as you’ll need to determine whether the data you want to use exists already or needs to be added, whether filters can have multiple values at a time, and how filters should adjust if multiple values are chosen (ie do products have to have one or the other, or both values).

Once you have this data set up, you’ll then need to determine the right filters to let customers drill down your product list appropriately.

Here are some good questions you can start with to add your product filtering data:

  1. Does this data exist already? For example, can I use product categories, tags, or attributes in my filters? Categories are great for general product “types”, while tags are great for information that could relate to any product.

    In a clothing store, a category might be “Hoodies”, while a tag might be “100% cotton”. The best kind of categorization for your products is one in which a product is only part of a small number of categories, and has a few tags that can describe it further that would also pertain to other products.

  2. Is the data part of other product information? For example, if you want to add filters for available stock, you can already get that data from WooCommerce.

  3. If the data isn’t already available, can I add it, such as by adding a new product attribute? Attributes are handy for things like color or material, as products can have one or more values for an attribute.

    For example, if you sell purses and want customers to be able to filter them by color, you could add a “Color” attribute, then add all possible values for color. This attribute could then be used in filtering.

    FacetWP Review: WooCommerce Attributes

    WooCommerce Attributes

You also have the option to use custom fields if your data won’t fit as a category, tag, or attribute, which we’ll look at in a bit.

Need some ideas on what kind of data is helpful? Practical ECommerce has a list of ways to improve filters, and Baymard has a case study on why Macy’s does a great job with filtering that could serve as inspiration.

eCommerce Product Filters: Create Facets

The plugin documentation is useful for creating your first facets, which are the filters available for your posts or products. I found that, by thinking about how I wanted to categorize my products and what information customers may want to filter by, my facets essentially created themselves.

Once you’re ready to create a facet, you’ll go to Settings > FacetWP > Facets to begin adding your own facets. For example, if I wanted to let my customers filter products by the available stock, I could create a “Number Range” facet.

FacetWP Review: add number range facet

Add Number Range Facet

This would let your customers use this facet on your site’s frontend to filter the list of products shown (in this case, any product with stock set to at least 2).

FacetWP Review: use number range facet

Filter by range

Your facet can also use existing data like attributes or other taxonomies, which you can search for easily. If I have a “Material” attribute for my products, I can search for this, and create a “Material” facet customers can use to filter by the product material.

FacetWP Review: WooCommerce Attribute Facet

WooCommerce Attribute Facet

When we get to using this facet, it will let customers change which products are displayed. Click the image below to see a quick example of this filtering in action.

FacetWP + WooCommerce shortcode

Click to see filtering

If you find that you need some data that doesn’t fit nicely into an existing set up, such as a product tag or attribute, you can also use a custom field to add this data, and FacetWP will let you create a facet for that field.

Custom fields are available for almost any post, and if you don’t see the custom field editor immediately, change your “Screen Options” in the top right of your editor to show it.

FacetWP Review: add product custom field

Add product custom field

Here you can click “enter new” to add your own custom field, and the value for this product. Once a field has been added, you can then search for it when creating your own facets.

FacetWP Review: custom field facet

Custom Field Facet

Once your facet has been created for the custom field, it will operate just like other facets for tags or categories, and just checks if the product has the custom field value or not while filtering.

FacetWP Review: custom field filter

eCommerce Product Filters: Using Facets

Once you have the facets added that you’d like to use, there’s an important step you’ll take before we display facets. Click “Re-index” for your facets to ensure they’re usable. FacetWP needs to build an index to store the data as to which products fit the facet so that your site stays snappy and fast.

FacetWP Review: index facets

Re-index facets

Now you’re ready to output a facet selector. There are two steps to output and use this selector.

  1. Add a facet shortcode: The easiest place add the facet shortcode do so is in a text widget in your sidebar. Your shortcode will look like this: [facetwp facet="facet_name"]

    This will output the facet selector (ie dropdown, checkbox, etc) where it’s relevant to the posts or products being shown.

    For best results, you’ll want to keep your facet shortcodes outside of the post content, so unless you understand what “the loop” or “WP Query” means, it’s best to keep these in your sidebar in a text widget 🙂

  2. Wrap the content being filtered in a CSS Class: This part is a bit harder for non-developers. You’ll want to wrap the post archive in a CSS class so FacetWP can detect the class and know when it should be used. Don’t worry, if that doesn’t sound like English, we’ll show you how to do this easily for WooCommerce or EDD product lists so your selectors are shown and work properly.

eCommerce Product Filters: WooCommerce

Let’s get back to the second point about wrapping our content in a CSS class so we can use them with WooCommerce. What this means is that we need an element in the page source code that wraps or envelops the entire list of items being filtered. This lets FacetWP manipulate that list to show the results of a filter when needed.

To add this CSS class requires you to therefore edit your shop template so this class will be present. FacetWP has a video showing you how to do this with WooCommerce, but the basic gist of it is to add <div class="facetwp-template"> above this line in your product archive template, and </div> below this line in your product archive template.

If you don’t know how to properly override the archive template and make these changes, you could also use a bit of code to do this for you that should work with most themes (I prefer to add code like this using the Code Snippets plugin):

// wrap WooCommerce content with a FacetWP template so we can filter product results
function fwp_product_facets_begin() {
    echo '<div class="facetwp-template">'; 
}
add_action( 'woocommerce_before_main_content', 'fwp_product_facets_begin' );

// end the WooCommerce content FacetWP wrapper
function fwp_product_facets_end() {
    echo '</div>'; 
}
add_action( 'woocommerce_after_main_content', 'fwp_product_facets_end' );

You can also get in touch with FacetWP support if you need some guidance on this while getting set up.

Now when we output a filter with our [facetwp] shortcode it will (1) be shown when products are being viewed, and (2) actually do something to that product list when filters are adjusted.

Let’s add a product-specific facet and check it out! I’m going to use a “Color” attribute I’ve added under Products > Attributes, and I’ve added some colors to my products.

I’ll choose a checkbox so customers can filter by more than one color at a time, and I’ll use the “Widen the result set” behavior so if multiple colors are selected, the products shown only have to have one color, not all colors selected (it basically changes the logic between ‘AND’ or ‘OR’ for the list).

FacetWP Review: WooCommerce Create "Color" Facet

Create “Color” Facet

Facet created! Now I’ll use a text widget to output the facet selector in the sidebar.

FacetWP Review: Output Facet Selectors

Output Facet Selectors

And finally, since I have my code snippet in place along with my facet shortcodes, I’ll have a usable set of filters for my product list on the frontend:

FacetWP Review: WooCommerce Products with filtering

Products with Filtering

Browsing for large sets of products has immediately improved with these filters 😀

eCommerce Product Filters: Easy Digital Downloads

We can enable facets for the “Downloads” list with Easy Digital Downloads as well. There’s an EDD tutorial in the FacetWP docs you can follow if desired.

However, since a list of downloads is almost always output using the [downloads] shortcode, We could take a couple tactics here to ensure facets work (choose one method):

  1. Always wrap the downloads shortcode with a div using our CSS class:
     <div class="facetwp-template">
     [downloads columns="2" number="4"]
     </div>
     
  2. Or, add a tiny bit of code that adds this class to the downloads class automatically so you don’t have to do it:
     // add FacetWP template class to the [downloads] shortcode
     function fwp_downloads_facets_begin( $classes ) {
        $classes .= ' facetwp-template ';
        return $classes;
     }
     add_filter( 'edd_downloads_list_wrapper_class', 'fwp_downloads_facets_begin' );
     

Once you’ve decided on one of those methods, you’ll be able to add your own EDD facets. As EDD doesn’t have attributes, you’ll be limited to categories, tags, or custom fields you’ve added for your facets.

FacetWP Review: EDD Tags Facet

EDD Tags Facet

Once you’ve added the code snippet to your site, and added the [facetwp] shortcode to a text widget again, you’ll see your facet available for your downloads list.

FacetWP Review: EDD Facets Displayed

Facets Displayed

This will let your customers filter your downloads using your facets to get a list of exactly what they’re looking for.

FacetWP Review: EDD Facets used

Facets Used

This is great for things like file type, supported or compatible systems (such as which readers an eBook can work with), or other digital product data that customers can use to get relevant results.

If you use the EDD Product Reviews extension, I’d also check out this tutorial on adding a facet to filter by star rating.

eCommerce Product Filters: eCommerce Shortcodes

Most eCommerce plugins for WordPress have a way to output products via shortcode. While it’s the most common way to show EDD products, other platforms like WooCommerce offer this, but they tend to be used less often.

If you use WooCommerce product shortcodes to output your product list instead, you can use a similar set up to our EDD one and wrap the shortcode directly in the FacetWP class to ensure it can be used on your product shortcodes as well as your shop list.

<div class="facetwp-template">
[product_category category="clothing"]
</div>

eCommerce Product Filters: Advanced Usage — Conditional Display

Since you’re putting these shortcodes inside of a text widget, it may make sense for you to hide that widget sometimes. As your facet selectors will only be shown if they’re relevant to the content being seen, it makes sense to ensure the entire widget acts like this.

I like using the Widget Visibility module in Jetpack to handle these cases. You can conditionally determine when the widget with your facets is shown or hidden so it only appears when products are being viewed, or when a viewer is on a page with one of your shortcodes.

FacetWP Review: jetpack widget visibility

eCommerce Product Filters: Advanced Usage — Add-ons & Compatible Plugins

FacetWP also offers several free add-ons that you can use for more advanced facet types. This can help you create color swatches, or if you use WooCommerce Bookings, you can create an “Availability by date range” facet to filter bookable products.

Compatibility is also included for Advanced Custom Fields if you use this to add additional data to your posts. The ACF Integration supports basic field types, such as text, select, or checkbox, inputs, along with some of the more advanced fields like relationship fields and repeater fields. As ACF is popular among developers and power users for adding additional data to content, this is a really useful integration for filtering based on that data.

If you find that you do want new relationships aside from custom fields, you could also consider using the Custom Post Type UI plugin to add new taxonomies (or post types) as needed. This is great for data that’s relating your posts, products, or content to one another, such as perhaps brands or retail stores the products can be purchased at. These taxonomies are detected automatically by FacetWP and are available for facets.

eCommerce Product Filters: Advanced Usage — Templates

While FacetWP can be used by a knowledgeable WordPress user, it’s also an amazing tool for developers. You can customize the way your content is output by creating a template for your facets, then output it using the [facetwp template="template_name"] shortcode.

This lets you generate a custom template to output your posts, but it’s useful to output a “pre-built” query and thus a selection of posts. Facet filtering will also work automatically on this template.

I liked using this for a “product category” template, as this let me output a template and a customized selection of facets. This is useful if you want a set of facets that’s only relevant for a certain category — for example, “Shoe” facets may not be relevant to “Clothing” facets, and if you want to be really advanced, you could output different templates and sets of facets to reflect this.

You can learn more about templates here.

Using FacetWP to Create eCommerce Product Filters

FacetWP gives eCommerce stores the tools needed to provide advanced eCommerce product filters, improving the browsing experience when sites have a large catalog of products.

It’s most effective for stores that have hundreds of products, as you can create facets to help customers filter out only products they’re interested in seeing rather than browsing the entire catalog, which can improve sales and conversions.

FacetWP is also best for users who are at least topically familiar with the way WordPress organizes data into taxonomies or post meta, as this kind of knowledge is needed to create effective facets for products catalogs.

At first glance, I found the plugin a little overwhelming due to the template section (which most non-developers will not use) and the need to adjust WooCommerce / EDD template files for filtering to work properly. However, after digging into this a bit, I found that adding the CSS class needed for proper filtering was straight-forward (and I’ve added what I did in the sections above), and that adding facets was a really powerful way to organize my product catalog and make it more browse-able for a customer. If you start with Facets and follow my guide, I think it will be easy for most eCommerce site owners to use.

Overall, while there was a slight learning curve in getting set up with FacetWP, I found it to be a great addition for eCommerce sites with hundreds of products, as it makes your store far easier to browse and filter, and experienced users can set up these filters without the need for custom code or development hours.

Even better, while FacetWP doesn’t require coding knowledge, it can save developers a ton of time in creating really complex filtering systems, and could be taken further by developers to add facets specific to each product category, making it a useful tool for site owners and developers alike.


Note: This post was sponsored by FacetWP, as the product was provided for us to review. The opinions in this article are solely those of the author without bias, and are based on experiences using the product. For more information, please see our editorial policy.
Note: This post may contain affiliate links, which means we get a commission from the plugin, theme, or service provider if you choose to purchase. Regardless of this, we are committed to providing high quality, unbiased resources. Have more questions? See our affiliate policy. You can use the plain links below if you prefer that we not receive a referral commission:

Articles you may also like:

Posted by Beka Rice

Beka Rice manages the direction of Sell with WP content and writes or edits most of our articles to share her interests in eCommerce. Or she just writes as an excuse to spend more time jamming out to anything from The Clash to Lady Gaga. Who knows.

5 Comments

  1. Thank you so much for this article …. just what I was looking for as I wanted to use FacetWP but didn’t want to tinker with php files (store owner/not developer)!

    Reply

  2. The Woocommerce instructional video indicates that the wordpress theme requires a archive-product.php file and he copies this file from the woocommerce theme. Is there anyway this could be done with code snippet .. if so, what do I put in to get this done? I just don’t want to mess with my php files directly.

    Thank you!

    Reply

    1. Hey Hedy, the section on WooCommerce set up has a snippet / instructions for this!

      Reply

      1. Thanks for the follow-up. For some reason, can’t access link.

        Reply

        1. It should jump you up to the section on “eCommerce Product Filters: WooCommerce” above.

Leave a reply

Your email address will not be published. Required fields are marked *