Product Filter by Color

September 9, 2020

When filters on websites are configured properly, they give user the ability to select from thousands of products on the site only those that meet their specific needs and interests. Until today, although this is a central aspect of online shopping, most websites offer less than brilliant search tools. 

Website filtering is really important, that’s why the whole WooBeWoo team has done a great job researching how users search, filter, and rate products on WooCommerce websites. We looked at both search engines and product lists that are obtained after filtering by category or topic.

A good filter can be founded in only 16% of online stores. Good filters allow users to see only those products that match their personal preferences, such as a certain model or special properties of the product. For example, a user would like to see real colors in the attributes of the desired “jacket” and not read the inscriptions Black, Red, and etc.

Product Filter by Color

How to present a product to a customer?

WooCommerce is an analog of coming to a “live” store and asking the seller “Help me choose the color of a men’s jacket?” And what answer would bring you closer to buying?

Well, we have black, red, and yellow, or when you are shown products only with certain colors?

The answer is obvious, eye contact with the color, and you already have thoughts in your head will it suit you. And such elementary, seemingly at first glance, little things bring a lot of hidden benefits for a store promotion.

It’s the same in an online store, but how do you display the color of an attribute? Indeed, in Woocommerce itself such an opportunity is absent.

The WooBeWoo team again will do everything for you, because now in the Woocommerce Product Filter you can use the “Show Frontend as” option and display the attribute according to its meaning. So for example, use a Slider and you will get a perfect display of the product’s size, or Buttons will work for exclusive product’s attributes.

But today, of course, we will talk about filtering by product color. Now, to display the real colors of the attributes, you just need to click on the Show Frontend as an option and select Color.

How to present a product to a customer?

Birth and testing options

Generally, users are interested in filtering by product color, and not only by “Attribute Name” parameters. Also, the color can be perceived as a title in the search bar. An example would be a list of clothes founded by attributes such as color. These parameters would hardly be appropriate for another product, such as “foreign language lesson.”

According to our polls over 85% of users wanted to see this attribute displayed exactly like this.

During testing, the filtering logic and the attribute filter interface showed their best side, even on the websites of companies that contain 25+ colors for one product, all the nuances worked perfectly.

Now the buyer needs to click on the desired color to get the desired result at the output.

How to use Product Filter by Color?

This very simple function at the same moment is very effective for filtering by product color, since the customer may not even read the color labels, but intuitively select the desired product color.

To add an attribute filter:

-Suppose that at this point you have already created products, created a color attribute, and assigned it to the corresponding products.

  • Go to the filter editor;
  • Select Attributes from the filter drop-down list;
  • Next, in the “Select Attribute” field, select the desired attribute, in our example we select Color;
  • To make everything look as authentic as possible, our plugin provides an option to display an attribute. In the “Show on frontend as” field select how Color is displayed.
  • Set a corresponding color for each attribute;
  • Also, configure any additional functions to display this attribute. Read this documentation article to learn more about the attribute filter.


A successful conversion is made up of little things

It often took users a little time to realize that the website did not offer the correct display of their filters, and simply repeating to themselves “it must be here somewhere”, and at the same time, not believing that the online store can neglect such fundamentals, they are forced to browse hundreds of products and will never find what they were looking for.

It’s never superfluous to make sure that each product attribute has a specific display by type. At a minimum, the product specifications included in the attribute list should also be available in each filter type.

And finally, a good rule of the filtering system is that any sufficiently important parameter of the product should be reflected in the filter. Moreover, the strength of an online store is that it reminds the user of the importance of this parameter (or, in the case of newcomers to the topic, teaches them the importance of this parameter). The display of the BOM itself thus prompts the user to filter by it.

Thank you for your attention. Have a great day!

Leave a Reply

Your email address will not be published. Required fields are marked *

Buy Now Bundle and save over 60%

Buy now