FacetWP includes built-in support for WooCommerce. It even supports variable products. See below for a step-by-step guide.

Create your facets

WooCommerce data sourceAfter adding some products, go to Settings > FacetWP and click the “Add facet” link.

For the facet’s Data source, select a choice under the “WooCommerce” header.

WooCommerce data sources

Facets can be created using most WooCommerce data, including:

  • Price
  • Sale Price
  • Regular Price
  • Average Rating
  • Stock Status (in stock / out of stock)
  • On Sale
  • Featured
  • Product Type
  • Product categories
  • Product tags
  • Product attributes

Add facets to your shop pages

For most themes, simply add your facet shortcodes into a sidebar text widget. FacetWP will automatically detect the products and display relevant facet choices.

Show / hide out-of-stock products

FacetWP WooCommerce Include all products settingYou can choose whether or not to show out-of-stock products.

In FacetWP’s admin UI under Settings > WooCommerce, enable “Include all products?” to show out-of-stock products.

Using WooCommerce product variations

FacetWP fully supports WooCommerce variable products, also called “product variations”.

Enable FacetWP support for product variations

FacetWP WooCommerce Support product variations settingIf you want to use product variations in facets, you first have to enable support for it.

You can do this in FacetWP’s admin UI, under Settings > WooCommerce > Support product variations.

After enabling this setting, make sure to re‑index.

How to set up product variations

To learn how variable products in WooCommerce work, you can follow this guide on the WooCommerce website.

To understand the power of WooCommerce product variations in combination with FacetWP, you can also first watch the short video walkthrough below.

Understanding and setting up product variations can be quite confusing if you have never done it before. A step-by-step explanation:

1. Set up product attributes

What is a “product variant” in WooCommerce exactly? Technically, a product variant is a combination of values of “product attributes“. An example:

A product attribute could be “size”. This attribute’s values could be “large”, “medium” and “small”.

A product variation could be simply one of these values: “large”. But variations are more powerful because you can combine several attributes’ values into one product variation. Consider a second attribute “color” with the values “blue”, “green” and “red”. A product variation could be any combination of values of these two attributes, for example, “large red” or “medium green”. These product variations can be added to each product. For example, a t-shirt could only be available in size medium in green, and in size large in red.

Because product variations consist of product attribute values, before you can add variations to a product, you need to add some product attributes.

Attributes can be set up as custom attributes for a single product only, or globally, so you can re-use them for multiple products.

Product level custom attributes you have to add for each product individually (see step 3).

Global attributes are stored as custom taxonomies, each with its own terms. They can be added under Products > Attributes in the WP admin column on the left. Below is an example setup of two global attributes: “color” and “size”. Both attributes have three possible values (terms), which you can configure by clicking the “Configure terms” link:

WooCommerce product attributes
Example of two global attributes: “color” and “size”, which are each stored as custom taxonomy.

Next, in each product’s edit page, you have to set up the attributes and variations for that specific product:

2. Set the product type to “Variable product”

To use product variations, first, it’s important to set the correct product type on each product page. Click the “Product data” dropdown and select “Variable product”. See the image in the next step.

3. Add product attributes

On the “Attributes” tab, you can add custom attributes specifically for this product, or you can select the global attributes that you have configured in step 1. For the first option, just click the “Add” button directly. For the second option, select a previously configured global attribute with the dropdown first and then click “Add”.

Then you can decide which values should be available for each attribute, for this product specifically. For example all defined color values, or only “green” and “red”. In the example shown in the image below, we have added 2 attributes, ‘color’ and ‘size’, and for the ‘color’ attribute we have set 3 possible values.

In the next step we are going to combine the selected attribute values into product variations. For this to work, it’s important to enable the “Used for variations” checkbox for each attribute separately:

Woocommerce product attributes for variations

4. Add product variations

Next, on the “Variations” tab you can configure available product variations, by adding combinations of attribute values.

You can add them manually by directly clicking the “Go” button. Or you can select “Create variations from all attributes” in the dropdown and click “Go”, to create every possible combination of values from the previously added product attributes. In this example we created 3 product variations from the values of the ‘color’ and ‘size’ attributes:

WooCommerce set up product variations

Next, it is important to click open each variation and add a price, because variations that do not have a price will not be shown in the shop:

WooCommerce product variations settings

5. Set up facets for each attribute

WooCommerce product variations facetsNow we are all set up to create facets for each attribute, in this example for “color” and “size”.

Before you do this, make sure you already have created a few products that actually use the attributes and variations, as described above. Otherwise, the attributes will not show up in the facet’s Data source options.

Global attributes show up in the facet’s Data source dropdown in two ways. For example an attribute “size” will show up as:

  • Product size (under the “WooCommerce” heading).
  • attribute_pa_size (under the “Custom Fields” heading). Note: _pa_ stands for “product attribute”).

You can choose either one:

Facet Data source setting for WooCommerce global attributes

Product level custom attributes, for example “size”, will show up as:

  • attribute_size (under the “Custom Fields” heading).

After setting up your facet(s), add them to your page with a shortcode.

The logic of facets that use product attributes is smart enough to take into account that product variations can consist of multiple attribute values. This means that facets will only show choices (attribute values) that exist in available product variations. If this sounds confusing, check the video below at around 2:09 for a clear example.

Product variations video walkthrough

A full walkthrough of how to implement product variations in facets is shown in the screencast below.

Keep in mind that the video was made with previous versions of WooCommerce and FacetWP, so many settings are looking different than the screenshots on this page.

Using WooCommerce pagination

FacetWP has built-in support for WooCommerce pagination, so generally there is no need to use a Pager facet on shop pages.

A good reason to keep WooCommerce pagination is that you can keep your theme’s styling, while if you replace it with a Pager facet, you have to style the pagination to match your theme. But still you might want to to replace it, for example if you want to use a “Load more” Pager type.

Fix WooCommerce pagination and result counts

If you decide to keep WooCommerce pagination, keep in mind that for it to work properly with FacetWP, the block with class woocommerce-pagination must be placed inside the element with class facetwp-template, otherwise the pagination and result counts will not refresh after interacting with facets.

On default shop pages this will mostly not be the case. FacetWP will automatically add the facetwp-template class to the <ul> with products that WooCommerce creates, and the pagination code will be below it.

There are two ways to fix this:

  • Edit the shop archive template in your theme (generally archive-product.php) and manually place the facetwp-template class on an element that surrounds the product loop and the WooCommerce pagination block.
  • If you can’t edit your shop archive template directly, add the following code to your (child) theme’s functions.php. It will add the facetwp-template wrapper to the right spot, surrounding the WooCommerce pagination code:
<?php

function fwp_wrapper_open() {
    if ( ! is_singular() ) : echo '<div class="facetwp-template">'; endif;
}
function fwp_wrapper_close() {
    if ( ! is_singular() ) : echo '</div><!-- end facetwp-template -->'; endif;
}
add_action( 'woocommerce_before_shop_loop', 'fwp_wrapper_open', 5 );
add_action( 'woocommerce_after_shop_loop', 'fwp_wrapper_close', 15 );
add_action( 'woocommerce_no_products_found', 'fwp_wrapper_open', 5 );
add_action( 'woocommerce_no_products_found', 'fwp_wrapper_close', 15 );

Replace WooCommerce pagination with a Pager facet

You may want to replace the default WooCommerce pagination with a Pager facet, for example because you want to use a “Load more” Pager type.

Of course you could manually remove the WooCommerce pagination in your theme’s shop archive templates, and replace it with a Pager facet’s display code.

If you don’t want to remove the WooCommerce pagination code, you can also simply hide it with CSS:

.woocommerce-pagination {
    display: none !important;
}

Be aware that to work properly, the Pager facet display code / shortcode needs to be outside of the facetwp-template container element (as opposed to WooCommerce pagination, which needs to be inside it). Usually this container element is the <ul> with products that WooCommerce creates, unless you have placed the facetwp-template class manually on another element.

An alternative approach would be to override the default WooCommerce pagination template, by copying the following custom pagination template to yourtheme/woocommerce/loop/pagination.php. Make sure to replace my_custom_pager with the name of your Pager facet:

<?php
/**
 * Pagination - Show numbered pagination for catalog pages
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/loop/pagination.php.
 *
 * Create a pager facet in facetwp's settings and use that facet name in the code below.  Be sure to change
 * the shortcode to use your facet's name instead of "my_custom_pager"
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.3.1
 */
if ( ! defined( 'ABSPATH' ) ) {
  exit;
}

if ( function_exists('FWP') ) : ?>
  <?php echo facetwp_display( 'facet', 'my_custom_pager' ); // change 'my_custom_pager' to the name of your pager facet ?>

<?php else :

  $total   = isset( $total ) ? $total : wc_get_loop_prop( 'total_pages' );
  $current = isset( $current ) ? $current : wc_get_loop_prop( 'current_page' );
  $base    = isset( $base ) ? $base : esc_url_raw( str_replace( 999999999, '%#%', remove_query_arg( 'add-to-cart', get_pagenum_link( 999999999, false ) ) ) );
  $format  = isset( $format ) ? $format : '';
  if ( $total <= 1 ) {
    return;
  }
  ?>

    <nav class="woocommerce-pagination">
      <?php
      echo paginate_links( apply_filters( 'woocommerce_pagination_args', array( // WPCS: XSS ok.
        'base'         => $base,
        'format'       => $format,
        'add_args'     => false,
        'current'      => max( 1, $current ),
        'total'        => $total,
        'prev_text'    => '←',
        'next_text'    => '→',
        'type'         => 'list',
        'end_size'     => 3,
        'mid_size'     => 3,
      ) ) );
      ?>

    </nav>

<?php endif; ?>

See also