---
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-04-10
lang: en
author: "Aditya Sharma"
description: "One important feature that can enhance your online store's usability is a product size filter. With a size filter, customers can easily find products that fit their specific needs, resulting..."
image: https://theplusaddons.com/wp-content/uploads/2023/09/How-to-Create-WooCommerce-Product-Size-Filter-in-Elementor_-Button-Filter-1024x536.jpg
word_count: 532
---

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

## 

- Enhance online store usability with a product size filter using the WP Search Filters widget from The Plus Addons for Elementor.
- Enable WooCommerce Swatches by navigating to The Plus Addons > Extra Options > Settings and activating the WooCommerce Swatches section.
- Create and assign button attributes to products by accessing Products > Attributes, then editing product data to include the new attributes.

One important feature that can enhance your online store's usability is a product size filter. With a size filter, customers can easily find products that fit their specific needs, resulting in a smoother shopping experience.

With the WP Search Filters widget from The Plus Addons for Elementor, you can easily add button filters for WooCommerce products.

*To check the complete feature overview documentation of The Plus Addons for Elementor WP Search Filters widget, [click here](/docs/wp-search-filters-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-listing//#search-filter-wgts?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, make sure you’ve added some products to your WooCommerce store, then you have to create a button attribute and assign them to some products.

### Enable WooCommerce Swatches

But first, you have to enable The Plus Addons for Elementor swatches option. To do this -

1. From the Dashboard, go to **The Plus Addons **> **Extra Options** ** **> **Settings**.

2. Scroll down to the **WooCommerce Swatches** section and enable it. 

![](https://theplusaddons.com/wp-content/uploads/2023/09/woo-commerce-swatches-4.png)

### Create a Button Attribute

1. To create a button attribute, from the Dashboard, go to **Products** > **Attributes**.

2. On the next page, add a name in the **Name** field and select **Button** from the **Type** dropdown then click on the **Add attribute** button. 

![woocommerce add button attribute](https://theplusaddons.com/wp-content/uploads/2023/09/woocommerce-add-button-attribute.png)

3. Once the attribute is created, click on the **Configure terms** link.

4. On the next page, add a name in the **Name** field and in the **Button **field, then click on the **Add new Size** button.

![woocommerce add button attribute item](https://theplusaddons.com/wp-content/uploads/2023/09/woocommerce-add-button-attribute-item.gif)

Following this process, you can add multiple items.

### Assign Button Attribute

1. Edit a product.

2. Scroll down to the **Product Data** section and click on **Attributes**. 

3. Click on the dropdown and select your button attribute option.

4. In the **Value(s)** field add the values, once done click the **Save attributes** button.

5. Then update the page.

![woocommerce product add button attribute](https://theplusaddons.com/wp-content/uploads/2023/09/woocommerce-product-add-button-attribute.gif)

### Use the WP Search Filters Widget

You have to use the WP Search Filters widget with the Product Listing widget.

> *Note: Make sure you’ve enabled both WP Search Filters and Product Listing widgets from The Plus Settings.*

Place the widgets in your desired location on the page or template, then follow the steps -

1. In the Product Listing widget, select **Search List **from the **Product Listing Types** dropdown.

![product listing search list](https://theplusaddons.com/wp-content/uploads/2023/08/product-listing-search-list.png)

2. Then select the appropriate style and layout.

3. In the WP Search Filters widget, open the **Category** item under the **Filter Area**.

4. From the **Filter Type** dropdown, select **Woo Filter**. 

5. Then select **Button** from the **Select Source** dropdown. 

6. Select **Taxonomy** from the **Select Type** dropdown.

7. After that select **Product Attribute** from the **Select Taxonomy** dropdown. 

8. Finally from the **Select Attributes** dropdown, select your button attribute.

> *Note: The list will only show global attributes, not any custom attributes.*

![wp search filters product attributes button](https://theplusaddons.com/wp-content/uploads/2023/09/wp-search-filters-product-attributes-button.gif)

Now you'll be able to see a size filter that you can use to filter products by size.

From the **Show Count** toggle, you can show the product count.

Then from the **Tooltip toggle**, you can show a tooltip on hover with the product count.

You can also manage item columns for desktop, tablet and mobile.

![wp search filters product attributes button demo](https://theplusaddons.com/wp-content/uploads/2023/09/wp-search-filters-product-attributes-button-demo.gif)

Also, read [How to Create WooCommerce Color Swatches Filter in Elementor](https://theplusaddons.com/docs/create-woocommerce-color-swatches-filter-in-elementor/).