Skip to content

How to Create Horizontal WooCommerce Product Filter in Elementor?

Table Of Content

A sidebar filter panel works well on a wide desktop layout, but a horizontal bar above the grid often fits a page’s design better and reads better on tablet widths.

The WP Filters widget’s Layout control switches the whole filter bar between Horizontal and Vertical orientation.

For the full settings tour of the WP Search Filters widget, see WP Search Filters Widget Settings Overview.

Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.

Before You Start

  • Prerequisite: Elementor (free) installed and active.
  • Edition: WP Search Filters is a Pro widget – it requires The Plus Addons for Elementor Pro to be installed and active.
  • Widget to enable: go to The Plus Addons > Widgets, search for WP Filters and turn its toggle on.
  • Prerequisite: WooCommerce installed and active, with at least a few products published.
  • One or more filter items already configured.

Steps

With the WP Filters widget selected, set Layout to Horizontal.

Filter bar laid out horizontally above a woocommerce product grid

Settings Overview

SettingWhat it doesDefault
LayoutHorizontal or Vertical filter-bar orientation.Vertical

Related Docs

Related Frequently Asked Questions

Related Docs