It makes no sense if I'm the first person who ever had this problem. The WooCommerce style colors are awful.
Maybe I missed something?
WooCommerce got the colors Primary, Secondary, Highlight, Content and Subtext in Settings, which I can't edit (or rather I can't save them after editing).
These colors then splits down and controls a large list of css values, including some coding that controls the gradients of buttons.
Here is the CSS for what the WooCommerce 'Primary' color controls:
a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, #content input.button.alt {
background: #ff2222;
background: -webkit-gradient(linear, left top, left bottom, from(#ff2222), to(#96588a));
background: -webkit-linear-gradient(#ad74a2, #96588a);
background: -moz-linear-gradient(center top, #ff2222 0, #96588a 100%);
background: -moz-gradient(center top, #ff2222 0, #96588a 100%);
border-color: #76456c;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.6)
}
a.button.alt:hover, button.button.alt:hover, input.button.alt:hover, #respond input#submit.alt:hover, #content input.button.alt:hover {
background: #ff2222;
background: -webkit-gradient(linear, left top, left bottom, from(#ff2222), to(#864f7b));
background: -webkit-linear-gradient(#FF0000, #864f7b);
background: -moz-linear-gradient(center top, #ff2222 0, #864f7b 100%);
background: -moz-gradient(center top, #ff2222 0, #864f7b 100%);
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.6)
}
.widget_layered_nav ul li.chosen a {
padding: 0 6px 0 18px;
border: 1px solid #ff2222;
background: #ad74a2 url(../images/cross_white.png) no-repeat 6px center;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.5) #888;
-webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.5) #888;
-moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.5) #888;
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px
}
.widget_price_filter .ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: .9em;
height: .9em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
border: 1px solid #150d14;
cursor: pointer;
background: #ff2222;
background: -webkit-gradient(linear, left top, left bottom, from(#ff2222), to(#96588a));
background: -webkit-linear-gradient(#ff2222, #96588a);
background: -moz-linear-gradient(center top, #ff2222 0, #96588a 100%);
background: -moz-gradient(center top, #ff2222 0, #96588a 100%);
outline: 0;
top: -0.3em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.65);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.65);
box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.65)
}
.widget_price_filter .ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background: #ff2222 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAFUlEQVQIHWP4//9/PRMDA8NzEPEMADLLBU76a5idAAAAAElFTkSuQmCC) top repeat-x;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em
}
(+ I have to make a gradient as well, which means LOTS of copy/pasting each time I want to try a new color to match my theme).