Ultimate WooCommerce Filters

Description

Ultimate WooCommerce Filters is a plugin that allows you to filter WooCommerce products by color, size, attribute, category or tag. Easy to set up and implement with a simple WooCommerce filter widget and WooCommerce filter shortcode.

Key WooCommerce Filter Features

  • Filter WooCommerce products by color, with the actual colors displayed in the widget on your shop page
  • Filter WooCommerce products by size
  • Filter products by any attribute that you have set up in WooCommerce
  • Filter products by WooCommerce categories and tags
  • Include a smart product search in the WooCommerce filtering widget

It’s very simple and quick to set up your WooCommerce filters. Use an intuitive color picker to select the colors for your shop and then, for each product, just check the ones that apply. It works the same way for the sizes.

For the categories and tags, it’s even easier! Ultimate WooCommerce Filters automatically recognizes the categories and tags that you already have set up in WooCommerce. It’s as simple as enabling the filtering in our options. You will then automatically have all your WooCommerce categories and WooCommerce tags available as filters on your shop page.

Create a powerful, effective and practical product browsing experience for your customers with the ability to filter your products by WooCommerce attributes. This is the attributes functionality that is built into WooCommerce and that you already use to provide specific information about your products. In our WooCommerce filtering options, just enable which attributes you’d like to add to the filtering widget and they’ll automatically display as filters on your WooCommerce shop page. No extra setup required. This is an incredibly useful feature that brings the WooCommerce shopping experience to a whole new level for your customers!

[ultimate-woocommerce-filter]

It could not be easier to display your WooCommerce filters to your shop page. Just add our widget to your theme’s page sidebar. That’s it. The WooCommerce filter widget is already configured to only show on the WooCommerce shop page, and not your other pages. Alternatively, you can place the WooCommerce filters anywhere you want on a page using the intuitive shortcode shown just above.

In addition to the available filters, Ultimate WooCommerce Filters also includes a dynamic and fast product search that you can add to the WooCommerce filter widget. With features like auto-complete, your customers can quickly find the exact products they’re looking for.

Premium WooCommerce Filtering Features

Ultimate WooCommerce Filters comes with a host of advanced features in the premium version that you let you futher customize the filtering experience. With separate layout options and functions for each type of filter, an option to display WooCommerce filter attributes under the thumbnails on your shop page, and more, there are many ways to configure your WooCommerce filters just how you need.

Ultimate WooCommerce Filters premium features include:

  • Display WooCommerce filter attributes under shop page thumbnails (e.g. adjacent to the rating stars). Gives your customers a visual indication of what’s a available for each product without having to go to the product page.
  • Specific layout options for each type of WooCommerce filter (color, size, attributes, categories and tags).
  • Advanced options that allow you to customize the filtering functionality and experience.
  • Labelling options that allow you to quickly change the wording of specific labels.

Ultimate WooCommerce Filters is great for WooCommerce shops that want to show available product colors, such as clothing stores, sports equipment, electronics, music shops, collectibles and more. By having all your filters and your search in one place, it will save a lot of time for your WooCommerce store visitors and enhance their shopping experience.

Ultimate WooCommerce Filters is fully compatible with WPML and, as such, if you are running a WooCommerce shop in multiple languages, you can use it without any doubts.

Screenshots

  • Shop page showing WooCommerce filters widget in right sidebar
  • Close-up of WooCommerce color filter display under thumbnails
  • Close-up of WooCommerce filter widget
  • View of Colors tab in plugin admin
  • View of Sizes tab in plugin admin
  • Options page in plugin admin
  • Adding color filter to a WooCommerce product

Installation

  1. Make sure you have the latest version of WooCommerce plugin installed and active
  2. Upload the ‘color-filters’ folder to the ‘/wp-content/plugins/’ directory
  3. Activate the plugin through the ‘Plugins’ menu in WordPress

or

  1. Make sure you have the latest version of WooCommerce plugin installed and active
  2. Go to the ‘Plugins’ menu in WordPress and click ‘Add New’
  3. Search for ‘Color Filters for WooCommerce’ and select ‘Install Now’
  4. Activate the plugin when prompted

Getting Started

  1. To add a new color filter:

    • Click on ‘WC Filters’ in the WordPress admin sidebar menu
    • Go to the ‘Colors’ tab. The ‘Add a New Color’ area will be on the left.
    • Fill in the fields, use the color picker to select your exact color, and then click the ‘Add New Color’ button
  2. To add a new size filter:

    • Click on ‘WC Filters’ in the WordPress admin sidebar menu
    • Go to the ‘Sizes’ tab. The ‘Add a New Size’ area will be on the left.
    • Give your size a name (e.g. “Medium”), fill in the other fields, and then click the ‘Add New Size’ button
  3. Choose color(s) and size(s) for your products:

    • Go to the WooCommerce ‘Products’ area of your WordPress admin and click on a specific product to edit it
    • On the right side of the screen, you’ll see a box called “Colors” and one called “Sizes”
    • There you will be able to choose the colors and sizes that apply for a specific product
  4. Enable filtering:

    • Go to the ‘Options’ tab
    • There you will see options called “Enable Color Filtering”, “Enable Size Filtering”, “Enable Category Filtering” and “Enable Tag Filtering”. You will also see options to enable filtering for every custom attribute that you have in your WooCommerce. Set any of these to “Yes” to enable the filtering.
  5. Displaying the filters on your shop page:

    • To add the WooCommerce filters widget to your shop page, go to the ‘Appearances > Widgets’ area of your WordPress admin
    • Drag our widget over to your the page sidebar area of your theme. (The widget is already configured to only show on the WooCommerce shop page, and not your other pages.)
    • You can also place the filters anywhere you want on a page using our intuitive [ultimate-woocommerce-filter] shortcode.
  6. Customize your WooCommerce filter experience by making use of the many available settings and options, including a smart product search, product count display, displaying filter attributes under shop page thumbnails (premium), layout and functionality options and more.

For a list of specific features, see the Ultimate WooCommerce Filters description page here: https://wordpress.org/plugins/color-filters/.

For help and support, please see:

  • Our FAQ page, here: https://wordpress.org/plugins/color-filters/#faq
  • The Ultimate WooCommerce Filters support forum, here: https://wordpress.org/support/plugin/color-filters

FAQ

Installation Instructions
  1. Make sure you have the latest version of WooCommerce plugin installed and active
  2. Upload the ‘color-filters’ folder to the ‘/wp-content/plugins/’ directory
  3. Activate the plugin through the ‘Plugins’ menu in WordPress

or

  1. Make sure you have the latest version of WooCommerce plugin installed and active
  2. Go to the ‘Plugins’ menu in WordPress and click ‘Add New’
  3. Search for ‘Color Filters for WooCommerce’ and select ‘Install Now’
  4. Activate the plugin when prompted

Getting Started

  1. To add a new color filter:

    • Click on ‘WC Filters’ in the WordPress admin sidebar menu
    • Go to the ‘Colors’ tab. The ‘Add a New Color’ area will be on the left.
    • Fill in the fields, use the color picker to select your exact color, and then click the ‘Add New Color’ button
  2. To add a new size filter:

    • Click on ‘WC Filters’ in the WordPress admin sidebar menu
    • Go to the ‘Sizes’ tab. The ‘Add a New Size’ area will be on the left.
    • Give your size a name (e.g. “Medium”), fill in the other fields, and then click the ‘Add New Size’ button
  3. Choose color(s) and size(s) for your products:

    • Go to the WooCommerce ‘Products’ area of your WordPress admin and click on a specific product to edit it
    • On the right side of the screen, you’ll see a box called “Colors” and one called “Sizes”
    • There you will be able to choose the colors and sizes that apply for a specific product
  4. Enable filtering:

    • Go to the ‘Options’ tab
    • There you will see options called “Enable Color Filtering”, “Enable Size Filtering”, “Enable Category Filtering” and “Enable Tag Filtering”. You will also see options to enable filtering for every custom attribute that you have in your WooCommerce. Set any of these to “Yes” to enable the filtering.
  5. Displaying the filters on your shop page:

    • To add the WooCommerce filters widget to your shop page, go to the ‘Appearances > Widgets’ area of your WordPress admin
    • Drag our widget over to your the page sidebar area of your theme. (The widget is already configured to only show on the WooCommerce shop page, and not your other pages.)
    • You can also place the filters anywhere you want on a page using our intuitive [ultimate-woocommerce-filter] shortcode.
  6. Customize your WooCommerce filter experience by making use of the many available settings and options, including a smart product search, product count display, displaying filter attributes under shop page thumbnails (premium), layout and functionality options and more.

For a list of specific features, see the Ultimate WooCommerce Filters description page here: https://wordpress.org/plugins/color-filters/.

For help and support, please see:

  • Our FAQ page, here: https://wordpress.org/plugins/color-filters/#faq
  • The Ultimate WooCommerce Filters support forum, here: https://wordpress.org/support/plugin/color-filters
How do I add the filters to my WooCommerce shop?
  • To add the WooCommerce filters widget to your shop page, go to the ‘Appearances > Widgets’ area of your WordPress admin
  • Drag our widget over to your the page sidebar area of your theme. (The widget is already configured to only show on the WooCommerce shop page, and not your other pages.)
  • You can also place the filters anywhere you want on a page using our intuitive [ultimate-woocommerce-filter] shortcode.
How do I add a color?
  • Click on ‘WC Filters’ in the WordPress admin sidebar menu
  • Go to the ‘Colors’ tab. The ‘Add a New Color’ area will be on the left.
  • Fill in the fields, use the color picker to select your exact color, and then click the ‘Add New Color’ button
How do I add a size?
  • Click on ‘WC Filters’ in the WordPress admin sidebar menu
  • Go to the ‘Sizes’ tab. The ‘Add a New Size’ area will be on the left.
  • Give your size a name (e.g. “Medium”), fill in the other fields, and then click the ‘Add New Size’ button
How do I assign colors and sizes to products in WooCommerce?
  • Go to the WooCommerce ‘Products’ area of your WordPress admin and click on a specific product to edit it
  • On the right side of the screen, you’ll see a box called “Colors” and one called “Sizes”
  • There you will be able to choose the colors and sizes that apply for a specific product
I’ve added colors and sizes, but still don’t see any filters in my shop

To enable the filtering, go to the ‘Options’ tab in our plugin admin. There you will see options called “Enable Color Filtering”, “Enable Size Filtering”, “Enable Category Filtering” and “Enable Tag Filtering”. You will also see options to enable filtering for every custom attribute that you have in your WooCommerce. Set any of these to “Yes” to enable the filtering.

How do I set up my WooCommerce product attributes to be filterable?

In our WooCommerce filtering options, just enable which attributes you’d like to add to the filtering widget and they’ll automatically display as filters on your WooCommerce shop page. All the data is automatically pulled from WooCommerce. No extra setup required.

How do I make my WooCommerce categories and tags appear as filters?

Ultimate WooCommerce Filters automatically recognizes the categories and tags that you already have in your WooCommerce. All you have to do is enable the filtering in our options. All of your WooCommerce categories and WooCommerce tags will then automatically be available as filters on your shop page.

Is there a shortcode to display the filters, or is it only a widget?

You can place the filters anywhere you want on a page using our intuitive [ultimate-woocommerce-filter] shortcode.

How do I turn on the product search field?

In the “Basic” area of the “Options” tab in our WooCommerce filters plugin, there is a setting called “Enable Text Search”. If you set this to “Yes”, it will display a search field alongside your filters on your shop page, giving your customers everything they need in one spot.

Reviews

Doesn’t use attributes or work with variations

Let’s say you have a t-shirt for sale in black and red. You’d create a Woocommerce product as a variable product with black and red variations. This plugin won’t work with that. It doesn’t do anything with variable products or variations. You’d have to create one product for red and a completely separate product for black, then put them into red or black categories (just like you can do with Woocommerce out of the box)…

All it does is add a new category metabox for products… Why? This functionality is mostly available from Woocommerce out of the box

Read all 3 reviews

Contributors & Developers

“Ultimate WooCommerce Filters” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

2.0.5

  • Fixed a missing option for size variations

2.0.4

  • Fixed issue with an option not appearing in the trial

2.0.3

  • Fixed an error where the search term was set to undefined when text search as turned off
  • Fixed an error where variations weren’t available for colors that already existed. Simply re-save the colors and this feature should work correctly now.
  • Removed a number of notices

2.0.2

  • Minor CSS updates to the admin Dashboard

2.0.1

  • Fixed an issue where the new WooCommerce attributes for colors and sizes were visible

2.0.0

This is a big update, so please use caution (and test) when updating on live sites

  • Added new color filter layouts and options
  • Added size filter
  • Added filtering for any WooCommerce attribute
  • Added category filter
  • Added tag filter
  • Added text search
  • Added many new options in the plugin

1.2.2

  • Bug fix: Color Filters widget echoing extra space in anchor tag – Reported by dkcreatto
  • Bug fix: Color picker is not showing in color edit page
  • Bug fix: Permalinks are not flushed on plugin activation
  • Bug fix: Widget bottom is broken

1.2.1

  • Fixed typo
  • Tweak: better sanitizing color value field

1.2

  • Feature: Added an option to Color Filters Widget for hiding empty colors
  • Feature: Added an option to Color Filters Widget for including the number of assigned products
  • Tweak: Reduce space between colors when layout is color
  • Tweak: Added language (.po) file

1.1.1

  • Feature: Added the color next to its text in admin side
  • Fixed an issue with widget wrapper closing
  • Fixed an issue with quick edit color saving

1.1

  • WPML support

1.0

  • Initial release.