If you run an eCommerce store, especially fashion stores, you’ll likely need a way for users to pick the colour(s) of the products they wish to see. With Faster Woo Widgets, there are a few different styles of colour selectors you can provide for your customers.
FWW needs to be installed and activated and you need to have a product attribute that stores colour information against your products. This colour info will normally be the colour names, e.g. Blue, White, Gold etc, but can also be other text like ‘Woolen White’ if you sell wooly jumpers.
Adding the colour selector widget
Since colour info is stored as attributes, it follows that you need to add our product attribute widget. All of our widgets are prefixed with FWW, so our product attribute is called FWW Product Attributes. On the dashboard menu select Appearance > Widgets to navigate to your widget area.
Locate the FWW Product Attributes widget and drag it to whichever widget area your theme provides – normally, you’d drag this to your sidebar but it depends how you wish your store to look. Some people put widgets above their products rather than to the side.
With your widget added to your preferred widget area, give it a title and then choose your colour attribute from the Attribute dropdown menu.
Choose your preferred display style
The ‘Display type’ option gives you some alternative ways of displaying the colour choice on your webpage. You can display colours as: Lists, checkbox lists, dropdowns, labels, colour swatches or a search box. For a colour filter, you probably want either the Label or the Colour display type.
You can check how each display type looks in your theme by clicking Save then visiting your shop pages where your widget area is visible.
Here’s an example showing the colour filters as a dropdown list in the Niva Store theme:
Lists of text might be great for you if you have cool colour names like Wooly Pink or Fluffy Yellow, but probably you came to read this page to find out about our colour swatches.
To enable the colour swatches, select the Colour Display type then hit Save and then you’ll see your colours with a little colour selector next to them.
You now have the option to select which colours you would like to display on your colour swatch. Click on the colour you want to change and the colour spectrum will appear.
You can then hover over the spectrum to adjust or change the colour, or the slider bar to adjust tone. You can click an area in this way, or if you have predefined colours you can paste your hex colour into the hex box (#2832c1 in the example below)
Pick all your colours, hit Save to save your widget then return to your front-end shop click the refresh button to view your swanky new colour swatch selector. In the Niva Store theme, our colour swatches look like this by default:
Showing Product Counts
If you want to show your customers how many fantastic products you have in each colour you can show product counts inside the colour selector label. Click on ‘Show product counts’ and select Show.
Allowing Multiple Colour Choices
Depending on your store, you may wish to allow your customers to select more than one colour. When they do select more than one colour, there are two behaviour options you can choose from with Faster Woo Widgets – the additional colours can either narrow or expand the results. Expanding the results means that if your users have picked Black and White, then all products available in either black or white will be shown. Narrowing the results means that only products with both the black and white attributes would be shown, or only products available in both black and white if you have product variations. Normally, for colours, you would select to expand the results.
If this option is set to No, the customer will only be able to make one colour choice. Alternatively if you choose ‘Yes, narrow results’ from the drop down menu then users will see fewer and fewer products the more colours they select. For example, if they selected both Black and White, they would see products with a mix of black and white, or they would see products which are available in black or white.
Most likely, for colours, you will wish to expand the results when users click more colours. This is normally what your users would expect – they are thinking they would be happy with either a black or a white top, and they expect to see black, white, and black-and-white products.
Showing product colours inline on your product archive
With Faster Woo Widgets, we let you show attributes or categories inline above or below your products in your product archive. This is useful so users can see the available colours for each product, and if they wish to they can even select that colour from the inline area to only show products in that colour.
You can position these inline colour attributes wherever you like and style them how you wish (and inline colour swatches are coming very soon too!).
To add inline colours, visit wp-admin > Settings > Faster Woo Widgets (i.e. we’re outside the Appearance > Widgets area now). Find the Inline Product Filters section and drag your product colour from the Available area to the Active area.
To choose the display position, choose Inline Product Attributes Position. This uses the WooCommerce hooks for your products to let you place the inline attributes in a few different places.
SEO Options for Colour Filters
Most of the SEO options for Faster Woo Widgets are contained in wp-admin > Settings > Faster Woo Widgets, but there is one option in the widget relating to the URL Parameter Slug.
Changing the colour attribute name in your URLs
If you are migrating from WooCommerce filters, you are probably familiar with having URLs like /shop/?pa_color=31. You think that URL sucks? Yes, we do too, that’s why we coded up options to make them better. We cover more of this later in this KB, but if you wish to rename the URL parameter then you can do so from the widget.
For example, if you’d prefer to have /shop/?colour=31 then you can do that by entering a URL Parameter Slug:
Ok – so you’re thinking that’s kinda crap – pa_color=22 is meaningless and color=22 is not much better. But there are more options – for those, we need to go back to wp-admin > Settings > Faster Woo Widgets.
Changing the URL parameter value type
?color=22 is quite cool (as opposed to pa_color=22) but we can do better. If you’d like to have ?color=blue then you can change the URL parameter value type from ID to slug. Note that this slug comes directly from the database, so if you wish to adjust it you’ll have to edit your product attributes from wp-admin > Products > Attributes.
For both of these options to have any impact, you need to actually be using URL parameters for this colour attribute so find the Attribute URL Config area in wp-admin > Settings > Faster Woo Widgets and set it to URL Param.
Probably you’ll prefer to have your colour directly in your URL (pretty permalinks) rather than as a parameter. If that is the case, ignore the first two options about URL parameters in this section and just ensure you have your Attribute URL Config set to Slug for your colour attribute. That will change your URLs from /shop/?color=blue to /shop/blue/
There are some additional options in the Attribute URL Config which you should look at for colour filters. If you wish your colour filter pages to appear in Google search results, then set your colour attribute to be Canonical and Index.
This will mean that Googlebot will crawl pages like /shop/black/ and even /shop/black/blue/white/green/. This may be too much for Googlebot to crawl, and you probably only want Googlebot to crawl when one colour is selected, so locate the Maximum Values Per Attribute In Canonical option and set it to 1. This would mean Googlebot would crawl /shop/black/ and /shop/white/ but it would not crawl /shop/black/white/. This can save you valuable Googlebot resource to ensure it crawls your most important pages.
Adding colours to your shop and browser titles
If you allow Googlebot to crawl your /nike/air-jordan/black/ pages then probably you would like to have the word Black in the page and browser title. If your customers are searching for “Black Air Jordans” then this is kind of important! You can do this easily with Faster Woo Widgets. Remember – the browser page title is normally the title Google will show in their search results, so if you include the colour the user is searching for they are more likely to click your link to your shop meaning more sales, more money, more holidays!
If you tick the ‘Override Woo h1 tags’ option then these browser page titles will also appear instead of the text ‘Products’ or ‘Shop’ or whatever WooCommerce decides to show on a particular shop archive.
Your browser page title will change like this, if you follow the example above.
The browser page title will normally be the title in Googles search results and the text underneath will often (not always) be the ‘Meta Description’.
Including product colours in your meta description
Meta description enables you to control the meta tags Google uses for their snippets. You can add product colours to your meta description in a very similar way to how it works with page titles. Find your product colour from the Available area, drag it to the Active area, give it a prefix, give it a suffix, add some description prefix too and suffix since the meta description is normally two sentences.
Need Further Help?
If you are in need of more information regarding the our filters, you can check out our Faster Woo Widgets support page here: https://www.wpintense.com/kb/features-faster-woo-widgets/
If you can’t find what you’re looking for you can browse previously asked questions or ask a new question on our Q&A page.