Varia: Add WC widget styles and partials directory.

varia/sass/vendors/woocommerce/_style.scss

@@ -16,3 +16,6 @@
 
 // Pages
 @import "pages/imports";
+
+// Widgets
+@import "widgets/imports";

varia/sass/vendors/woocommerce/widgets/_imports.scss

@@ -0,0 +1,5 @@
+/**
+ * Widget Imports
+ */
+
+@import "price-filter";

varia/sass/vendors/woocommerce/widgets/_price-filter.scss

@@ -0,0 +1,16 @@
+/**
+ * Filter by Price Widget
+ */
+body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
+
+	.widget_price_filter .ui-slider {
+		.ui-slider-range,
+		.ui-slider-handle {
+			background-color: #{map-deep-get($config-global, "color", "primary", "default")};
+		}
+	}
+
+	.widget_price_filter .price_slider_wrapper .ui-widget-content {
+		background-color: #{map-deep-get($config-global, "color", "primary", "hover")};
+	}
+}

varia/style-woocommerce.css

@@ -1821,3 +1821,18 @@ body[class*="woocommerce"] #page .woocommerce-ordering select {
 	display: inline-block;
 	vertical-align: middle;
 }
+
+/**
+ * Widget Imports
+ */
+/**
+ * Filter by Price Widget
+ */
+body[class*="woocommerce"] #page .widget_price_filter .ui-slider .ui-slider-range,
+body[class*="woocommerce"] #page .widget_price_filter .ui-slider .ui-slider-handle {
+	background-color: blue;
+}
+
+body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-widget-content {
+	background-color: indigo;
+}