How to Install and Setup FacetWP in WordPress
FacetWP adds advanced filtering – i.e. faceted search – to your result listings.If you’ve been to any eCommerce site, you’ve probably seen those UI elements (checkboxes, dropdowns, price ranges) that let you narrow down the results.How to Install and Setup FacetWP in WordPress
FacetWP works great with WooCommerce.
Also we would like to offer you some good addons to your WooCommerce + FacetWP pack
List of interesting WP plugins :
25 must have plugins for woocommerce
Woocommerce best payment gateways plugins
Woocommerce abandoned cart plugins
Install and activate FacetWP.
Go to Settings > FacetWP > Facets.
FacetWP comes with a Categories facet out of the box. Since we want to filter the posts by categories, we do not need to create a new Facet.
Click on Re-index.
Go to Appearance > Widgets and drag a text widget where you want to display the filters, enter a widget title like “Filter by Categories” and paste the following:
[facetwp facet="categories"]
<button value="Reset" onclick="FWP.reset()" class="facet-reset" />Reset Filters</button>
You might want to restrict this widget to appear on Posts page, archives and search results pages using the Widget Visibility module of Jetpack or an equivalent plugin.
Add the following in child theme’s style.css and modify to suit:
body .facetwp-facet {
margin-bottom: 20px;
}
.facet-reset {
text-align: center;
color: #555;
background-color: #f7f7f7;
border: 1px solid #ccc;
box-shadow: 0 1px 0 #ccc;
vertical-align: top;
font-size: 13px;
padding: 0 10px 1px;
border-radius: 3px;
font-weight: normal;
}
.facet-reset:hover,
.facet-reset:focus {
background-color: #fafafa;
border-color: #999;
color: #23282d;
}