---
title: "How to Create Horizontal WooCommerce Product Filter in Elementor?"
url: https://theplusaddons.com/docs/create-horizontal-woocommerce-product-filter-in-elementor/
date: 2023-09-14
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "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...."
image: https://theplusaddons.com/wp-content/uploads/2023/09/How-to-Create-Horizontal-WooCommerce-Product-Filter-in-Elementor_-1024x536.jpg
word_count: 197
---

# How to Create Horizontal WooCommerce Product Filter in Elementor?

## 

- WP Filters switches the whole filter bar between Horizontal and Vertical orientation with its Layout control, and the default is Vertical.
- The Plus Addons for Elementor Pro is required for WP Search Filters, and the widget is enabled from The Plus Addons > Widgets by searching for WP Filters and turning its toggle on.
- Horizontal filter bars fit a page’s design better than a sidebar filter panel on wide desktop layouts, and they read better on tablet widths.

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](https://theplusaddons.com/docs/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.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/woocommerce-builder/ajax-filters/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Prerequisite:** [Elementor](https://wordpress.org/plugins/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](https://wordpress.org/plugins/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](https://theplusaddons.com/wp-content/uploads/2026/09/wp-search-filters-layout-horizontal.webp)

## Settings Overview

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Layout | Horizontal or Vertical filter-bar orientation. | Vertical |

## Related Docs

- [How to Create Off Canvas WooCommerce Product Filter Menu in Elementor?](https://theplusaddons.com/docs/create-off-canvas-woocommerce-product-filter-menu-in-elementor/)- [How to Create WooCommerce Product Grid Column Filter?](https://theplusaddons.com/docs/create-woocommerce-product-grid-column-filter/)

## Frequently Asked Questions

**Q: What do I need before creating a horizontal WooCommerce product filter in Elementor?**
A: Elementor free has to be installed and active, WooCommerce has to be installed and active, and you need at least a few published products. The WP Search Filters widget is also a Pro widget, so The Plus Addons for Elementor Pro must be installed and active. One more practical detail: the filter items should already be configured before you switch the bar to horizontal, otherwise the layout change won’t give you a usable filter bar.

**Q: Why would I use a horizontal product filter instead of a sidebar filter?**
A: A horizontal bar fits better above the product grid when the page design is wide and when you want something that reads better on tablet widths. The page calls out sidebar filters as a good fit for wide desktop layouts, but the horizontal layout is the cleaner choice when the filter should sit above the grid instead of taking up side space. That makes it easier to keep the product area visually balanced.

**Q: How do I switch the WooCommerce product filter bar to horizontal in Elementor?**
A: The key control is Layout in the WP Filters widget. Set Layout to Horizontal, and the whole filter bar changes orientation from vertical to horizontal. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this widget inside Elementor, so the change happens directly in the editor without needing code or a separate layout system.

**Q: What if the WP Filters widget is not available in Elementor?**
A: That usually means the widget has not been enabled yet or The Plus Addons for Elementor Pro is not active. The page says to go to The Plus Addons > Widgets, search for WP Filters, and turn its toggle on. Since WP Search Filters is a Pro widget, activation matters first; without that, you won’t have the control needed to build the horizontal filter bar.

**Q: Is there another way to place WooCommerce filters besides a horizontal bar?**
A: The related docs point to two other layouts: an off-canvas WooCommerce product filter menu and a WooCommerce product grid column filter. That gives you options when a top bar is not the best fit for your page structure. A horizontal bar works well above the grid, while off-canvas or column-based filtering can suit different layouts and spacing needs.

**Q: Where can I find all settings for the WP Search Filters widget?**
A: The full settings tour is covered in [WP Search Filters Widget Settings Overview](https://theplusaddons.com/docs/wp-search-filters-widget-settings-overview/). That matters because this tutorial only shows the Layout control needed to make the bar horizontal. If you are tuning how filters behave beyond orientation, that overview is the right place to understand the rest of the widget’s settings.