---
title: "How to Create WooCommerce Product Size Filter in Elementor? (Button Filter)"
url: https://theplusaddons.com/docs/create-woocommerce-product-size-filter-in-elementor/
date: 2023-09-14
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "Size is one of the most-filtered WooCommerce attributes, and shoppers expect it as a row of clickable buttons (S, M, L, XL), not a checkbox list. The Woo Filter's Button..."
image: https://theplusaddons.com/wp-content/uploads/2023/09/How-to-Create-WooCommerce-Product-Size-Filter-in-Elementor_-Button-Filter-1024x536.jpg
word_count: 226
---

# How to Create WooCommerce Product Size Filter in Elementor? (Button Filter)

## 

- WP Filters sets Filter Type to Woo Filter and display style to Button, creating a clickable row of Size values like S, M, L, and XL instead of a checkbox list.
- The Plus Addons for Elementor Pro requires Elementor free installed and active, plus WooCommerce installed and active with at least a few published products.
- Select Attributes points WP Filters to the store’s Size attribute taxonomy, such as `pa_size`, after the attribute values are assigned to products.

Size is one of the most-filtered WooCommerce attributes, and shoppers expect it as a row of clickable buttons (S, M, L, XL), not a checkbox list.

The Woo Filter's **Button** display style, pointed at your store's Size attribute, produces exactly that.

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.- A WooCommerce Size attribute (e.g. `pa_size`) with values assigned to products.

## Steps

Add the WP Filters widget, set **Filter Type** to **Woo Filter**, then set the display style to **Button**.

![Woo Filter display style set to Button, showing size values](https://theplusaddons.com/wp-content/uploads/2026/09/wp-search-filters-woo-filter-button-size.webp)

Set **Select Attributes** to your store's Size attribute taxonomy.

## Settings Overview

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Select Source (Woo Filter) | Set to Button for a clickable row of values. | - |
| Select Attributes | Set to the Size attribute taxonomy specifically. | - |

## Related Docs

- [How to Filter WooCommerce Products by Attribute in Elementor?](https://theplusaddons.com/docs/filter-woocommerce-products-by-attribute-in-elementor/)- [How to Create WooCommerce Color Swatches Filter in Elementor?](https://theplusaddons.com/docs/create-woocommerce-color-swatches-filter-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before creating a WooCommerce product size filter in Elementor?**
A: Elementor free, WooCommerce, and The Plus Addons for Elementor Pro all need to be installed and active first. The page also calls out a published WooCommerce Size attribute, such as `pa_size`, with values already assigned to products. That matters because the filter has nothing to target without an actual attribute taxonomy and product data behind it. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides the WP Search Filters widget for this setup.

**Q: Why is my size filter not showing as buttons in Elementor?**
A: The display style has to be set to Button in the WP Filters widget. The page says the Woo Filter’s Button display style is what turns the Size attribute into a clickable row like S, M, L, XL instead of a checkbox list. If it still looks wrong, the other key check is whether Select Attributes points to the store’s Size attribute taxonomy. That pairing is what makes the button layout work.

**Q: How do I create a clickable size filter for WooCommerce products in Elementor?**
A: The setup uses the WP Filters widget with Filter Type set to Woo Filter and the display style set to Button. Then Select Attributes needs to point at your store’s Size attribute taxonomy. That combination is what produces a row of clickable values for shoppers instead of a generic filter list. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH offers this inside Elementor without code.

**Q: Does this size filter work with a WooCommerce Size attribute like pa_size?**
A: The page explicitly uses a WooCommerce Size attribute such as `pa_size`, so that is the intended target. The important part is that the attribute already exists and has values assigned to products, because the filter depends on real product attributes rather than manual labels. In practice, that means your store’s size taxonomy needs to be set up before the button filter can return useful results.

**Q: What is the difference between a button size filter and a checkbox list?**
A: A button size filter presents sizes as a row of clickable values like S, M, L, and XL. A checkbox list is more like a traditional multi-select control, which is not what shoppers usually expect for size filtering. The page frames button style as the better fit for this attribute because it matches common shopping behavior and keeps the UI cleaner on product archives.

**Q: Where can I find more settings for the WP Search Filters widget?**
A: The page points to [WP Search Filters Widget Settings Overview](https://theplusaddons.com/docs/wp-search-filters-widget-settings-overview/) for the full settings tour. That’s useful if you want context beyond just the size filter setup, since this tutorial only covers the pieces needed to build a WooCommerce Button Filter. The page also links related guides for filtering by attribute and creating color swatches if you want adjacent filter types.