WooCommerce button colors got you down. Did you just discover that the color adjustments available in the admin have nothing to do with the color of the buttons appearing on the front of your website? In this age of extended WordPress capabilities one would think that WooCommerce would have provided that functionality. I suppose, with a little free time and some motivation, one could build a plugin for that. Until that day arrives, I present to you my WooCommerce Product Add to Cart, On Sale, and Product Price buttons cheat sheet.

Copy and paste this css into your child theme and watch the colors of your WooCommerce buttons magically appear in lime-ish green and purple.

Reveal CSS

/* === WOOCOMMERCE ==================================== */

/* Theme / Site Specific */ div.single_variation{position: relative; top: -7px;} .woocommerce table.cart input, .woocommerce #content table.cart input, .woocommerce-page table.cart input, .woocommerce-page #content table.cart input {vertical-align: top;} table.cart td.actions .button.alt, #content table.cart td.actions .button.alt {margin: 0;}

 /* Add to Cart Button Color */ .woocommerce a.alt.button, .woocommerce button.alt.button, .woocommerce input.alt.button, .woocommerce #respond input.alt#submit, .woocommerce #content input.alt.button, .woocommerce-page a.alt.button, .woocommerce-page button.alt.button, .woocommerce-page input.alt.button, .woocommerce-page #respond input.alt#submit, .woocommerce-page #content input.alt.button{ background:#A54873 !important; border-color:#934067 !important; }

/* On Sale Notice Color */ body.woocommerce span.onsale { border: 1px solid #93C429; background: #f8ffe8; background: -moz-linear-gradient(top, #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d)); background: -webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); background: -o-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); background: -ms-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); background: linear-gradient(to bottom, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); }

/* Price Buttons */ .et-price-sale { border: 1px solid #934188; background: #e570e7; background: -moz-linear-gradient(top, #e570e7 0%, #c85ec7 47%, #a849a3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e570e7), color-stop(47%,#c85ec7), color-stop(100%,#a849a3)); background: -webkit-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); background: -o-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); background: -ms-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%); background: linear-gradient(to bottom, #e570e7 0%,#c85ec7 47%,#a849a3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 ); }

Roll Your Own

Certainly limey green a purple aren’t going to satisfy everybody, and yes there is a trick to it – an easy way to change the colors. I cheated by heading over to ColorZilla’s Ultimate CSS Gradient Generator, picked a couple off the shelf gradients, then simply copied and pasted.

Pin It on Pinterest