FacetWP + WooCommerce in Genesis

Looking to implement FacetWP on WooCommerce archives like the main Shop page in Genesis?

Here are some tips and pointers that you may find useful.

To set up Product Categories filter in a widget, first create your facet.

Do not forget to press the Re-index button.

To display the facet on the front end, place this in a Custom HTML widget:

[facetwp facet="product_categories"]

<button value="Reset" onclick="FWP.reset()" class="facet-reset" />Reset Filters</button>

Optional CSS for styling the Filters Reset button:

body .facetwp-facet {
    margin-bottom: 20px;
}

.facet-reset {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #555;
    background-color: #f7f7f7;
    box-shadow: 0 1px 0 #ccc;
    font-size: 13px;
    font-weight: normal;
    text-align: center;
    vertical-align: top;
}

.facet-reset:hover,
.facet-reset:focus {
    border-color: #999;
    color: #23282d;
    background-color: #fafafa;
}

You might now notice that the default pagination continues to appear even when not necessary after you have clicked on a filter (product category).

To fix, add this in child theme’s functions.php:

// Remove default WooCommerce pagination.
remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination' );

add_action( 'woocommerce_after_shop_loop', 'custom_woocommerce_pagination' );
/**
 * Add FacetWP's pagination on WooCommerce archives.
 */
function custom_woocommerce_pagination() {
    echo facetwp_display( 'pager' );
}

When a pagination anchor is clicked, since FacetWP fetches and displays the next set of products using Ajax, there will be no page refresh. This means there are high chances of a user waiting to see the next set of products even when they have loaded up at the top, above the viewport. To take care of this problem we can use the facetwp-loaded event.

Create a file named say, wc.js in child theme’s js directory having the following code (thanks Philip Thygesen for sharing this in Genesis Slack):

jQuery(function($){

    $(document).on('facetwp-loaded', function() {
        if (FWP.loaded ) {
            if (FWP.settings.pager.page > 1) {
                $('html, body').animate({
                    scrollTop: $('.page-description').offset().top
                }, 500);
            }
        }
    });

});

Replace .page-description with your desired selector where the click should scroll the user to.

Load the above js file on WooCommerce archives by adding the following in a function hooked to wp_enqueue_scripts:

if ( is_shop() || is_product_taxonomy() ) {
    wp_enqueue_script( 'wc', get_stylesheet_directory_uri() . '/js/wc.js', array( 'jquery' ), CHILD_THEME_VERSION, true );
}

The next step is optional and helps you style the pagination (which now only appears when necessary) so it looks like the Genesis pagination.

Before:

After:

(Workstation Pro is the active theme in this case)

Here’s how:

add_filter( 'facetwp_pager_html', 'custom_facetwp_pager', 10, 2 );
/**
 * Style pagination to look like Genesis.
 * @link https://halfelf.org/2017/facetwp-genesis-pagination/
 * @param  string $output The pager HTML.
 * @param  array $params Style pagination to look like Genesis.
 */
function custom_facetwp_pager( $output, $params ) {
    $output = '<div class="archive-pagination pagination"><ul>';
    $page = (int) $params['page'];
    $total_pages = (int) $params['total_pages'];

    // Only show pagination when > 1 page.
    if ( 1 < $total_pages ) {

        if ( 1 < $page ) {
            $output .= '<li><a class="facetwp-page" data-page="' . ( $page - 1 ) . '">« Previous Page</a></li>';
        }
        if ( 3 < $page ) {
            $output .= '<li><a class="facetwp-page first-page" data-page="1">1</a></li>';
            $output .= ' <span class="dots">…</span> ';
        }
        for ( $i = 2; $i > 0; $i-- ) {
            if ( 0 < ( $page - $i ) ) {
                $output .= '<li><a class="facetwp-page" data-page="' . ($page - $i) . '">' . ($page - $i) . '</a></li>';
            }
        }

        // Current page.
        $output .= '<li class="active" aria-label="Current page"><a class="facetwp-page active" data-page="' . $page . '">' . $page . '</a></li>';

        for ( $i = 1; $i <= 2; $i++ ) {
            if ( $total_pages >= ( $page + $i ) ) {
                $output .= '<li><a class="facetwp-page" data-page="' . ($page + $i) . '">' . ($page + $i) . '</a></li>';
            }
        }
        if ( $total_pages > ( $page + 2 ) ) {
            $output .= ' <span class="dots">…</span> ';
            $output .= '<li><a class="facetwp-page last-page" data-page="' . $total_pages . '">' . $total_pages . '</a></li>';
        }
        if ( $page < $total_pages ) {
            $output .= '<li><a class="facetwp-page" data-page="' . ( $page + 1 ) . '">Next Page »</a></li>';
        }
    }

    $output .= '</ul></div>';

    return $output;
}

References:

https://sridharkatakam.com/filter-posts-categories-using-facetwp-genesis/

https://facetwp.com/customizing-pagination/

FacetWP and Genesis Pagination