021 158 1400 [email protected]

I don’t mind purple but not in this case. So here is some information on how to edit the WooCommerce price filter colour. There are a few different components to this as the filer bar is made up of three different components. This makes the bar fully interactive depending on the variables of the filter pricing. The bar is able to be longer and shorter etc for low to high price ranges.

The default colour for most WooCommerce items is that weird purple. I’m not a fan as I have said above. So let’s dive right in. To change the colour of the WooCommerce price filter just add the following CSS.
Head over to the Theme Customiser in WordPress or your CSS file and add the following code.


.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
background-color: #7b9c4b;
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
background-color: #7b9c4b;



Much better.
The numbers after the # need to be the numbers of the colour you want to use. This is called a hexadecimal colour. Which is how we select colour much of the time for the web. 


We recoloured the Woo Commerce price filter on the following sites:

Total Health

If you found this useful, the links below may be of interest

Get in touch

If you need help customising elements in your e-commerce store get in touch with the team at Woodswork Web.

We can help you with all of your design requirements. We are specialists in our field and have years of experience helping our clients get the best from their online stores. 

Pin It on Pinterest

Share This