Flatsome is a very popular (and well-built) WooCommerce theme, and with a few steps you can easily integrate it with FacetWP.

Create the facets

First, create the facets to use on the Flatsome shop page. Go into Settings > FacetWP > Facets, and click the “Add New” button.

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

Install the integration add-on

When you install our free Flatsome integration add-on (link in the sidebar) it automatically prepares FacetWP for your Shop page.

The add-on fixes a few compatibility issues with the Flatsome theme, including (a) result counts not updating and (b) image lightbox and other interactivity not working after ajax refreshes.

All that’s left is to add your facet shortcodes into some sidebar text widgets (see below).

Add facets to the Shop Sidebar widget

Browse to Appearance > Widgets, then add a new Text widget to the “Shop Sidebar” region. Give it a label, then enter a facet shortcode into the Content box:

That’s it, your Flatsome site is now FacetWP-enabled 🙂

Changelog

0.4.5

  • Improved Added `wishlist` to the list of supported Flatsome JS features

0.4.4

  • Fixed Added translation .PO file (use `facetwp-flatsome` textdomain when translating)

0.4.3

  • Fixed Flatsome renamed feature from `lazy-load-image` to `lazy-load-images`

0.4.2

  • Improved Added support for Flatsome "Commons" (masonry) feature

0.4.1

  • Fixed don't render "facetwp-template" on single templates

0.4

  • New added support for lightbox-video