HIDE

Create a Facet

There are many available Facets types for any of your demands.
You can choose to import our pre-made demos or create Facets yourself in the following steps.

  • Go to your WP Dashboard > Piotnet Grid > Facets > Add New > Add Facet Title > Edit With Piotnet Grid
  • Piotnet Grid Editor will be launched. Drag and Drop Facet Widget and other Widgets from Editor Panel to design your Facet

Unlike other plugins, you can put multiple facets in one facet template with Piotnet Grid

Facet Settings

  • Facet Name: has to be unique, and must be different from any other facets of your website (usually a Facet name will be auto-generated)
  • Facet Action: Filter, Load, Sort
  • Filter Type for Facet Action Filter: Select, Radio, Checkboxes, Slider, Buttons, Color Picker, Image Select, Search, Date picker, A-Z, Map, and Geolocation.

  • Loading Type (only available if you choose Facet Action = Load): Pagination, Load More, Posts Per Page

Create a Category Facet

  • Facet Action = Filter
  • Filter Type = Select, Radio, Checkboxes, Buttons, Color Picker, or Image Select
  • Filter Data Source = Taxonomy
  • Taxonomy: example Categories (for Post Categories) or Product categories (for Woocommerce Product Categories)

Create Color Picker, Image Select Facet

  • Facet Action = Filter
  • Filter Type = Color Picker, or Image Select
  • For Filter Data Source = Taxonomy

By default, the Color Picker, Image Select Facet will get the Piotnetgrid Term Color value and Piotnet Term Image to display. You can see those settings when adding a new term or editing a term.

  • Set Filter Data Source = Custom Field

By default, the Color Picker, Image Select Facet will get the value of Custom Field to display so the value could be #000000 or image URL

  • You can define the Color or Image by Term Slug or Custom Field value

Create a Slider Facet

  • Facet Action = Filter
  • Filter Type = Slider
  • Filter Data Source = Custom Field
  • Custom Field Name (Key): examples _price (WooCommerce product price); wpcf-custom_field_name (Toolset Field)

Filterable Maps

Please click here for detailed tutorials.

Filter products on Sale

  • Facet Action = Filter
  • Filter Type = Buttons or Checkbox
  • Filter Data Source = Custom Field
  • Custom Field Name (Key) = “WC > On Sale”

Apply Facets Widget

Use this widget to apply Facets or Redirect after clicking
You can also use this widget with Facet Search to create a Search Bar

Collapse Facets on Mobile

Create a Section > Put your Facets inside this Section >Edit Section > Settings > Collapse Section > Set Collapse on Devices
(Only can be seen in Frontend)

Demo on Mobile

Embed Facet

We created a Facet Block (Widget, Element) for Gutenberg, Elementor, and Oxygen. This block (widget, element) help you embed the Facet by selecting the Facet you created by Piotnet Grid. You can also embed Facet by using the Facet Shortcode.

Gutenberg Block

Elementor Widget

Oxygen Builder Element