Writing CSS to customize the Add to Cart button
You can do quite a bit with customizing templates and using hooks, but neither of those actually focuses on how things look. If you want to change the way something looks, such as the size, color, text family, border color, and so on, then you'll have to use Cascading Style Sheets (CSS) to do that.
WooCommerce already has basic styles for everything included in the plugin, so you don't have to write anything. But if you want to change something, then you'll have to write some styles to override the default styles.
Getting ready
You should have a simple product in your store.
How to do it…
If you take a look at a simple product on the frontend of your store, the Add to Cart button that comes with it looks pretty simple, as shown in the following screenshot:
There are actually dozens of styles applied to the button, some of which are applied to all buttons and some just to the button on the product page. In the following steps...
