How to edit the colour of the WooCommerce price filter

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.

/** WOO PRICE FILTER **/
.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