We've all had to change the default WooCommerce button color once or twice. And most of us have probably copy pasta'd straight CSS into our SASS files because we are too lazy to transpose it. Well now you can copy pasta SASS into your SASS file instead.

Below is a SASS snippet to customize all of WooCommerce's buttons (and there are lot).

If you prefer a straight CSS solution (you know who you are), Theme Location has a good article that I have referenced in multiple projects.

Here's the code:

.woocommerce,
.woocommerce-page {
input.button,
input.button.alt,
a.button,
a.button.alt,
button.button,
button.button.alt {
background-color: $purple;
color: $white;
border: 1px solid $purple;
&:hover {
@include transition(all);
background-color: $white;
color: $purple;
}
}
#content {
input.button,
input.button.alt {
background-color: $purple;
color: $white;
border: 1px solid $purple;
&:hover {
@include transition(all);
background-color: $white;
color: $purple;
}
}
}
#respond {
input#submit,
input#submit.alt,
input.button {
background-color: $purple;
color: $white;
border: 1px solid $purple;
&:hover {
@include transition(all);
background-color: $white;
color: $purple;
}
}
}
}
view rawwoocommerce-buttons.scss hosted with ❤ by GitHub