Woocommerce flat buttons

2 Views

How to make the buttons like ADD TO CART in Woocommerce plugin flat?

example: http://www.thamon.co.uk/product/sal-leaf-coin-pouch/

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. You need to apply some custom CSS here.
    Here is the CSS i used the last time i needed to do this:

    .woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt, 
.woocommerce #respond input#submit.alt, 
.woocommerce #content input.button.alt, 
.woocommerce-page a.button.alt, 
.woocommerce-page button.button.alt, 
.woocommerce-page input.button.alt, 
.woocommerce-page #respond input#submit.alt, 
.woocommerce-page #content input.button.alt { background: #00a0d2; text-shadow: none; color: #fff; border: 0; padding: 8px 7px 7px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.woocommerce a.button.alt:hover, 
.woocommerce button.button.alt:hover, 
.woocommerce input.button.alt:hover, 
.woocommerce #respond input#submit.alt:hover, 
.woocommerce #content input.button.alt:hover, 
.woocommerce-page a.button.alt:hover, 
.woocommerce-page button.button.alt:hover, 
.woocommerce-page input.button.alt:hover, 
.woocommerce-page #respond input#submit.alt:hover, 
.woocommerce-page #content input.button.alt:hover { background: #11b1e3; text-shadow: none; color: #fff; }

.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button, 
.woocommerce #respond input#submit, 
.woocommerce #content input.button, 
.woocommerce-page a.button, 
.woocommerce-page button.button, 
.woocommerce-page input.button, 
.woocommerce-page #respond input#submit, 
.woocommerce-page #content input.button { background: #dfdbdf; text-shadow: none; color: #333; border: 0;  padding: 8px 7px 7px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover, 
.woocommerce #respond input#submit:hover, 
.woocommerce #content input.button:hover, 
.woocommerce-page a.button:hover, 
.woocommerce-page button.button:hover, 
.woocommerce-page input.button:hover, 
.woocommerce-page #respond input#submit:hover, 
.woocommerce-page #content input.button:hover { background: #e5e5e5; }

    Please, note that you will have to change your background and color to the values that would fit your design. The background property is necessary in order to overwrite the gradient that WooCommerce applies to the buttons.